Merge branch 'main' of ssh://18.167.251.121:10002/aidlab/FiDA_Front

2026-02-09 14:48:22 +08:00
parent 4ced7375b6 40cf156e2e
commit c1e3b7835e
53 changed files with 1422 additions and 316 deletions
--- a/public/fonts/general/css/general-sans.css
+++ b/public/fonts/general/css/general-sans.css
@@ -67,4 +67,20 @@
 	font-weight: 700;
 	font-display: swap;
 	font-style: normal;
+}
+
+@font-face {
+	font-family: 'LBold';
+	src:url('../fonts/MazzardL-Bold.otf') format('opentype');
+	font-weight: 700;
+	font-display: swap;
+	font-style: normal;
+}
+
+@font-face {
+	font-family: 'MBold';
+	src:url('../fonts/MazzardM-Bold.otf') format('opentype');
+	font-weight: 700;
+	font-display: swap;
+	font-style: normal;
 }
--- a/public/fonts/general/fonts/MazzardL-Bold.otf
+++ b/public/fonts/general/fonts/MazzardL-Bold.otf
--- a/public/fonts/general/fonts/MazzardM-Bold.otf
+++ b/public/fonts/general/fonts/MazzardM-Bold.otf
--- a/src/assets/css/style.css
+++ b/src/assets/css/style.css
@@ -12,7 +12,6 @@ p {
 }
 * {
  box-sizing: border-box;
-  font-family: 'Medium';
 }
 html,
 body,
@@ -20,6 +19,7 @@ body,
  width: 100%;
  height: 100%;
  overflow: hidden;
+  font-family: 'Medium';
 }
@keyframes loading {
  0% {
--- a/src/assets/css/style.less
+++ b/src/assets/css/style.less
@@ -13,7 +13,6 @@ p {

 * {
 	box-sizing: border-box;
-	font-family: 'Medium';
 }

 html,
@@ -22,6 +21,7 @@ body,
 	width: 100%;
 	height: 100%;
 	overflow: hidden;
+	font-family: 'Medium';
 }

@keyframes loading {
@@ -38,4 +38,37 @@ body,
 	background-color: rgba(248, 247, 245, 1);
 	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;
 }
--- a/src/assets/icons/add-print.svg
+++ b/src/assets/icons/add-print.svg
@@ -0,0 +1,4 @@
+<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.2494 4.16797C11.2494 3.73639 10.9211 3.3812 10.5007 3.3387L10.416 3.33464H9.58271C9.12248 3.33464 8.74938 3.70773 8.74938 4.16797V6.3929C8.74938 6.69061 8.59052 6.96588 8.33271 7.11475C8.07493 7.26358 7.75719 7.26351 7.49938 7.11475L5.5723 6.00228C5.17401 5.77239 4.66488 5.90876 4.4346 6.30745H4.43379L4.01793 7.02848C3.78765 7.42735 3.92416 7.93703 4.3223 8.16699L6.24857 9.27865C6.50629 9.42746 6.66514 9.70287 6.66523 10.0005C6.66523 10.2981 6.50622 10.5734 6.24857 10.7223L4.3223 11.8356C3.92416 12.0656 3.78764 12.5752 4.01793 12.9741L4.43379 13.6951H4.4346L4.48099 13.7668C4.72814 14.1094 5.19891 14.2158 5.5723 14.0003L7.49938 12.887C7.75714 12.7383 8.07495 12.7383 8.33271 12.887C8.59052 13.0359 8.74938 13.3112 8.74938 13.6089V15.8346L8.75345 15.9201C8.79623 16.3402 9.15132 16.668 9.58271 16.668H10.416C10.8762 16.6679 11.2494 16.2948 11.2494 15.8346V13.6089C11.2494 13.3111 11.4082 13.0359 11.666 12.887C11.9239 12.7383 12.2416 12.7382 12.4994 12.887L14.4265 14.0003L14.5021 14.0394C14.8872 14.2123 15.3484 14.0689 15.5642 13.6951L15.9808 12.9741C16.211 12.5754 16.0744 12.0657 15.6765 11.8356L13.7494 10.7223C13.4916 10.5734 13.3327 10.2981 13.3327 10.0005C13.3328 9.70279 13.4915 9.42743 13.7494 9.27865L15.6765 8.16699L15.7481 8.12061C16.0901 7.87355 16.1966 7.40226 15.9808 7.02848L15.5642 6.30745C15.334 5.90878 14.8248 5.77249 14.4265 6.00228L12.4994 7.11475C12.2416 7.26355 11.9238 7.2635 11.666 7.11475C11.4082 6.96588 11.2494 6.69062 11.2494 6.3929V4.16797ZM12.916 4.94922L13.5931 4.55859C14.789 3.86845 16.3177 4.27872 17.0078 5.47412H17.007L17.4237 6.19515H17.4245C18.1145 7.39045 17.7055 8.92007 16.5098 9.61068H16.509L15.8327 10.0005L16.5098 10.3919L16.6197 10.4595C17.7299 11.1782 18.0929 12.6496 17.4245 13.8075H17.4237L17.0078 14.5285C16.3177 15.7239 14.789 16.1342 13.5931 15.444L12.916 15.0526V15.8346C12.916 17.1722 11.8655 18.2644 10.5446 18.3314L10.416 18.3346H9.58271C8.202 18.3346 7.08271 17.2153 7.08271 15.8346V15.0526L6.40563 15.444C5.24702 16.1128 3.77587 15.7487 3.05765 14.6383L2.99092 14.5285L2.57425 13.8075C1.88421 12.6123 2.29255 11.0826 3.48815 10.3919L4.16442 10.0005L3.48896 9.61068C2.2931 8.92005 1.88414 7.39045 2.57425 6.19515L2.99092 5.47412L3.05765 5.36426C3.77587 4.25395 5.24703 3.88984 6.40563 4.55859L7.08271 4.94922V4.16797C7.08271 2.78726 8.202 1.66797 9.58271 1.66797H10.416L10.5446 1.67122C11.8655 1.73824 12.916 2.83041 12.916 4.16797V4.94922Z" fill="white"/>
+<path d="M18.2722 1.16258C18.4343 0.721849 19.0574 0.721849 19.2246 1.16258L19.488 1.87686C19.5386 2.01364 19.6501 2.12509 19.7869 2.17575L20.5012 2.43917C20.9419 2.60128 20.9419 3.22438 20.5012 3.39156L19.7869 3.65498C19.6501 3.70564 19.5386 3.81709 19.488 3.95387L19.2246 4.66815C19.0625 5.10888 18.4394 5.10888 18.2722 4.66815L18.0088 3.95387C17.9581 3.81709 17.8466 3.70564 17.7099 3.65498L16.9956 3.39156C16.5549 3.22945 16.5549 2.60635 16.9956 2.43917L17.7099 2.17575C17.8466 2.12509 17.9581 2.01364 18.0088 1.87686L18.2722 1.16258Z" fill="white"/>
+</svg>
--- a/src/assets/icons/closeTransparent.svg
+++ b/src/assets/icons/closeTransparent.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.29289 7.29289C7.68342 6.90237 8.31658 6.90237 8.70711 7.29289L12 10.5858L15.2929 7.29289C15.6834 6.90237 16.3166 6.90237 16.7071 7.29289C17.0976 7.68342 17.0976 8.31658 16.7071 8.70711L13.4142 12L16.7071 15.2929C17.0976 15.6834 17.0976 16.3166 16.7071 16.7071C16.3166 17.0976 15.6834 17.0976 15.2929 16.7071L12 13.4142L8.70711 16.7071C8.31658 17.0976 7.68342 17.0976 7.29289 16.7071C6.90237 16.3166 6.90237 15.6834 7.29289 15.2929L10.5858 12L7.29289 8.70711C6.90237 8.31658 6.90237 7.68342 7.29289 7.29289Z" fill="currentColor"/>
+</svg>
--- a/src/assets/icons/color-palette.svg
+++ b/src/assets/icons/color-palette.svg
@@ -0,0 +1,9 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.11214 9.81679C6.72587 9.81679 7.22339 10.3143 7.22339 10.928C7.22339 11.5418 6.72587 12.0393 6.11214 12.0393C5.49841 12.0393 5.00089 11.5418 5.00089 10.928C5.00089 10.3143 5.49841 9.81679 6.11214 9.81679Z" fill="white"/>
+<path d="M5.55652 6.29784C6.17024 6.29784 6.66776 6.79536 6.66776 7.40909C6.66776 8.02281 6.17024 8.52034 5.55652 8.52034C4.94279 8.52034 4.44527 8.02281 4.44527 7.40909C4.44527 6.79536 4.94279 6.29784 5.55652 6.29784Z" fill="white"/>
+<path d="M11.6684 5.37179C12.2821 5.37179 12.7796 5.86932 12.7796 6.48304C12.7796 7.09677 12.2821 7.59429 11.6684 7.59429C11.0547 7.59429 10.5571 7.09677 10.5571 6.48304C10.5571 5.86932 11.0547 5.37179 11.6684 5.37179Z" fill="white"/>
+<path d="M8.33464 4.07534C8.94836 4.07534 9.44589 4.57286 9.44589 5.18659C9.44589 5.80031 8.94836 6.29784 8.33464 6.29784C7.72091 6.29784 7.22339 5.80031 7.22339 5.18659C7.22339 4.57286 7.72091 4.07534 8.33464 4.07534Z" fill="white"/>
+<path d="M8.89026 1.48242C12.9818 1.48242 16.2986 4.79924 16.2986 8.89075C16.2986 10.3947 15.0794 11.6139 13.5755 11.6139H10.644C10.3831 11.6139 10.1715 11.8255 10.1715 12.0863C10.1716 12.1895 10.2053 12.29 10.2677 12.3721L10.9362 13.2511C11.1509 13.5336 11.2675 13.8788 11.2676 14.2336C11.2676 15.3742 10.3427 16.2991 9.20208 16.2991H8.89026C4.79876 16.2991 1.48193 12.9823 1.48193 8.89075C1.48193 4.79924 4.79876 1.48242 8.89026 1.48242ZM8.89026 2.96409C5.61706 2.96409 2.9636 5.61755 2.9636 8.89075C2.9636 12.164 5.61706 14.8174 8.89026 14.8174H9.20208C9.52437 14.8174 9.78592 14.5559 9.78592 14.2336C9.78586 14.2028 9.77555 14.1728 9.75698 14.1482L9.08849 13.2685C8.83014 12.9285 8.6899 12.5133 8.68986 12.0863C8.68986 11.0072 9.56483 10.1323 10.644 10.1322H13.5755C14.2611 10.1322 14.8169 9.57636 14.8169 8.89075C14.8169 5.61755 12.1635 2.96409 8.89026 2.96409Z" fill="white"/>
+<path d="M16.4972 11.8258C16.6308 11.4474 17.1454 11.4474 17.2789 11.8258L17.8743 13.4929C17.916 13.6113 18.0078 13.7038 18.1218 13.75L19.727 14.3683C20.0914 14.5069 20.0914 15.0414 19.727 15.1801L18.1218 15.7984C18.0078 15.8417 17.9188 15.9371 17.8743 16.0555L17.2789 17.7225C17.1454 18.101 16.6308 18.101 16.4972 17.7225L15.9019 16.0555C15.8602 15.9371 15.7684 15.8446 15.6543 15.7984L14.0492 15.1801C13.6848 15.0414 13.6848 14.5069 14.0492 14.3683L15.6543 13.75C15.7684 13.7067 15.8574 13.6113 15.9019 13.4929L16.4972 11.8258Z" fill="white"/>
+<path d="M13.291 16.6582C13.38 16.4069 13.7222 16.4069 13.814 16.6582L14.1088 17.4874C14.1367 17.5654 14.1979 17.629 14.273 17.6579L15.0714 17.9641C15.3134 18.0566 15.3134 18.4119 15.0714 18.5073L14.273 18.8135C14.1979 18.8424 14.1367 18.906 14.1088 18.984L13.814 19.8132C13.7249 20.0645 13.3828 20.0645 13.291 19.8132L12.9961 18.984C12.9683 18.906 12.9071 18.8424 12.832 18.8135L12.0336 18.5073C11.7915 18.4148 11.7915 18.0595 12.0336 17.9641L12.832 17.6579C12.9071 17.629 12.9683 17.5654 12.9961 17.4874L13.291 16.6582Z" fill="white"/>
+</svg>
--- a/src/assets/icons/delete.svg
+++ b/src/assets/icons/delete.svg
@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.03431 5.03431C5.34673 4.7219 5.85327 4.7219 6.16569 5.03431L8 6.86863L9.83432 5.03431C10.1467 4.7219 10.6533 4.7219 10.9657 5.03431C11.2781 5.34673 11.2781 5.85327 10.9657 6.16569L9.13137 8L10.9657 9.83432C11.2781 10.1467 11.2781 10.6533 10.9657 10.9657C10.6533 11.2781 10.1467 11.2781 9.83432 10.9657L8 9.13137L6.16569 10.9657C5.85327 11.2781 5.34673 11.2781 5.03431 10.9657C4.7219 10.6533 4.7219 10.1467 5.03431 9.83432L6.86863 8L5.03431 6.16569C4.7219 5.85327 4.7219 5.34673 5.03431 5.03431Z" fill="#CDCDCD"/>
+<path d="M8 1.6C4.46538 1.6 1.6 4.46538 1.6 8C1.6 11.5346 4.46538 14.4 8 14.4C11.5346 14.4 14.4 11.5346 14.4 8C14.4 4.46538 11.5346 1.6 8 1.6ZM0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8Z" fill="#CDCDCD"/>
+</svg>
--- a/src/assets/icons/edit-material.svg
+++ b/src/assets/icons/edit-material.svg
--- a/src/assets/icons/light.svg
+++ b/src/assets/icons/light.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="20" viewBox="0 0 16 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.7248 18.6371C11.7248 18.8138 11.6476 18.9906 11.5262 19.1231C11.3937 19.2445 11.2168 19.3217 11.0402 19.3217H4.14022C3.95255 19.3217 3.77596 19.2445 3.64348 19.1231C3.52204 18.9906 3.44484 18.8138 3.44484 18.6371C3.44484 18.4495 3.52204 18.2729 3.64348 18.1404C3.77596 18.019 3.95255 17.9418 4.14022 17.9418H11.0402C11.2168 17.9418 11.3937 18.019 11.5262 18.1404C11.6476 18.2729 11.7248 18.4495 11.7248 18.6371ZM15.1802 7.59719C15.1802 8.74535 14.9153 9.88246 14.4185 10.9092C13.9106 11.9469 13.1821 12.8524 12.2768 13.5589C12.1002 13.6914 11.9675 13.8569 11.8682 14.0446C11.7799 14.2433 11.7248 14.4532 11.7248 14.6629V15.1818C11.7248 15.5461 11.5811 15.8992 11.3162 16.1532C11.0623 16.4181 10.7091 16.5618 10.3448 16.5618H4.82483C4.46051 16.5618 4.10736 16.4181 3.85345 16.1532C3.58849 15.8992 3.44484 15.5461 3.44484 15.1818V14.6629C3.44484 14.4532 3.40081 14.2433 3.30145 14.0557C3.21313 13.868 3.06949 13.7025 2.90389 13.57C1.99862 12.8634 1.27004 11.969 0.762207 10.9423C0.265409 9.91562 0.000245425 8.7785 0.000245425 7.63035C-0.0328744 3.52349 3.29036 0.1012 7.39722 0.00184018C8.4129 -0.0202397 9.41747 0.156378 10.3669 0.531736C11.3053 0.896054 12.1664 1.44802 12.884 2.15458C13.6127 2.86113 14.1868 3.71122 14.5842 4.64961C14.9706 5.57697 15.1802 6.58152 15.1802 7.59719ZM13.8002 7.59719C13.8002 6.75816 13.6346 5.94127 13.3034 5.17951C12.9833 4.41775 12.5196 3.72241 11.9234 3.14833C11.3273 2.56322 10.6319 2.11035 9.85911 1.81227C9.08632 1.50315 8.25837 1.35975 7.43038 1.38183C4.07423 1.45911 1.35816 4.26316 1.38024 7.63035C1.38024 8.5577 1.59007 9.48526 2.00959 10.3243C2.41807 11.1744 3.01431 11.903 3.75399 12.477C4.09623 12.742 4.36115 13.0731 4.54883 13.4484C4.72547 13.8238 4.82483 14.2434 4.82483 14.6629V15.1818H6.90021V11.3288L4.33914 8.76749C4.20666 8.63501 4.12944 8.46948 4.12944 8.2818C4.12944 8.09412 4.20666 7.92859 4.33914 7.79611C4.47162 7.66363 4.63715 7.58641 4.82483 7.58641C5.01251 7.58641 5.18908 7.66363 5.31052 7.79611L7.58482 10.0704L9.85911 7.79611C9.92535 7.72987 9.99154 7.67452 10.0799 7.6414C10.1682 7.60828 10.2565 7.58641 10.3448 7.58641C10.4331 7.58641 10.5214 7.60828 10.6098 7.6414C10.6981 7.67452 10.7643 7.72987 10.8305 7.79611C10.8967 7.86235 10.9521 7.92853 10.9852 8.01685C11.0183 8.10517 11.0402 8.19348 11.0402 8.2818C11.0402 8.37012 11.0183 8.45843 10.9852 8.54675C10.9521 8.63507 10.8967 8.70125 10.8305 8.76749L8.2802 11.3288V15.1818H10.3448V14.6629C10.3448 14.2434 10.4442 13.8238 10.6319 13.4484C10.8195 13.062 11.0844 12.731 11.4156 12.477C12.1664 11.903 12.7626 11.1523 13.1711 10.3132C13.5796 9.46317 13.8002 8.53559 13.8002 7.59719Z" fill="#FFDB56"/>
+</svg>
--- a/src/assets/icons/mobang.svg
+++ b/src/assets/icons/mobang.svg
--- a/src/assets/icons/scene-composition.svg
+++ b/src/assets/icons/scene-composition.svg
@@ -0,0 +1,5 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.46542 2.5H13.5343C14.2051 2.49999 14.7587 2.49998 15.2097 2.53683C15.6781 2.5751 16.1087 2.65724 16.5131 2.86331C17.1403 3.18289 17.6503 3.69283 17.9699 4.32003C18.1759 4.72448 18.2581 5.15506 18.2963 5.62348C18.3332 6.07447 18.3332 6.6281 18.3332 7.2989V12.7011C18.3332 13.3719 18.3332 13.9255 18.2963 14.3765C18.2581 14.8449 18.1759 15.2755 17.9699 15.68C17.6503 16.3072 17.1403 16.8171 16.5131 17.1367C16.1087 17.3428 15.6781 17.4249 15.2097 17.4632C14.7587 17.5 14.2051 17.5 13.5343 17.5H6.4654C5.7946 17.5 5.24097 17.5 4.78998 17.4632C4.32157 17.4249 3.89098 17.3428 3.48654 17.1367C2.85933 16.8171 2.34939 16.3072 2.02982 15.68C1.82374 15.2755 1.7416 14.8449 1.70333 14.3765C1.66648 13.9255 1.66649 13.3719 1.6665 12.7011V7.29892C1.66649 6.62811 1.66648 6.07448 1.70333 5.62348C1.7416 5.15507 1.82374 4.72448 2.02982 4.32003C2.34939 3.69283 2.85933 3.18289 3.48654 2.86331C3.89098 2.65724 4.32157 2.5751 4.78998 2.53683C5.24098 2.49998 5.79461 2.49999 6.46542 2.5ZM4.9257 4.19796C4.56036 4.22781 4.37352 4.28192 4.24319 4.34832C3.92958 4.50811 3.67462 4.76308 3.51483 5.07668C3.44842 5.20702 3.39431 5.39385 3.36446 5.7592C3.33382 6.13427 3.33317 6.61952 3.33317 7.33333V10.4881L4.06541 9.75587C5.04172 8.77956 6.62463 8.77956 7.60094 9.75587L13.6784 15.8333C14.296 15.833 14.731 15.8301 15.074 15.802C15.4393 15.7722 15.6262 15.7181 15.7565 15.6517C16.0701 15.4919 16.3251 15.2369 16.4848 14.9233C16.5513 14.793 16.6054 14.6061 16.6352 14.2408C16.6659 13.8657 16.6665 13.3805 16.6665 12.6667V7.33333C16.6665 6.61952 16.6659 6.13427 16.6352 5.7592C16.6054 5.39385 16.5513 5.20702 16.4848 5.07668C16.3251 4.76308 16.0701 4.50811 15.7565 4.34832C15.6262 4.28192 15.4393 4.22781 15.074 4.19796C14.6989 4.16732 14.2137 4.16667 13.4998 4.16667H6.49984C5.78602 4.16667 5.30078 4.16732 4.9257 4.19796ZM11.3214 15.8333L6.42243 10.9344C6.09699 10.6089 5.56935 10.6089 5.24392 10.9344L3.3332 12.8451C3.3335 13.4628 3.33644 13.8978 3.36446 14.2408C3.39431 14.6061 3.44842 14.793 3.51483 14.9233C3.67462 15.2369 3.92958 15.4919 4.24319 15.6517C4.37352 15.7181 4.56036 15.7722 4.9257 15.802C5.30078 15.8327 5.78602 15.8333 6.49984 15.8333H11.3214ZM12.4998 7.08333C12.0396 7.08333 11.6665 7.45643 11.6665 7.91667C11.6665 8.3769 12.0396 8.75 12.4998 8.75C12.9601 8.75 13.3332 8.3769 13.3332 7.91667C13.3332 7.45643 12.9601 7.08333 12.4998 7.08333ZM9.99984 7.91667C9.99984 6.53596 11.1191 5.41667 12.4998 5.41667C13.8806 5.41667 14.9998 6.53596 14.9998 7.91667C14.9998 9.29738 13.8806 10.4167 12.4998 10.4167C11.1191 10.4167 9.99984 9.29738 9.99984 7.91667Z" fill="white"/>
+<path d="M17.9895 14.8653C17.9166 14.6673 17.6366 14.6673 17.5615 14.8653L17.3202 15.5187C17.2974 15.5801 17.2474 15.6302 17.1859 15.653L16.5325 15.8943C16.3345 15.9671 16.3345 16.2472 16.5325 16.3223L17.1859 16.5636C17.2474 16.5863 17.2974 16.6364 17.3202 16.6979L17.5615 17.3512C17.6344 17.5493 17.9144 17.5493 17.9895 17.3512L18.2308 16.6979C18.2536 16.6364 18.3036 16.5863 18.3651 16.5636L19.0185 16.3223C19.2165 16.2494 19.2165 15.9694 19.0185 15.8943L18.3651 15.653C18.3036 15.6302 18.2536 15.5801 18.2308 15.5187L17.9895 14.8653Z" fill="white"/>
+<path d="M15.3653 11.0567C15.2561 10.7585 14.8349 10.7585 14.7256 11.0567L14.2385 12.3702C14.2043 12.4635 14.1292 12.5364 14.0359 12.5728L12.7223 13.06C12.4241 13.1692 12.4241 13.5904 12.7223 13.6997L14.0359 14.1868C14.1292 14.221 14.202 14.2961 14.2385 14.3894L14.7256 15.703C14.8349 16.0012 15.2561 16.0012 15.3653 15.703L15.8525 14.3894C15.8866 14.2961 15.9618 14.2232 16.0551 14.1868L17.3686 13.6997C17.6668 13.5904 17.6668 13.1692 17.3686 13.06L16.0551 12.5728C15.9618 12.5387 15.8889 12.4635 15.8525 12.3702L15.3653 11.0567Z" fill="white"/>
+</svg>
--- a/src/assets/icons/to-3d-model.svg
+++ b/src/assets/icons/to-3d-model.svg
@@ -0,0 +1,4 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.9749 10.5752C15.8999 11.3602 15.6699 12.1002 15.3199 12.7702C13.9249 13.3902 12.0449 13.7502 9.9999 13.7502C7.9549 13.7502 6.0749 13.3852 4.6799 12.7652C4.3299 12.0952 4.0999 11.3552 4.0249 10.5752C4.7799 11.4152 7.0199 12.2502 9.9999 12.2502C12.9799 12.2502 15.2449 11.3902 15.9749 10.5752Z" fill="white"/>
+<path d="M10 2.50098C5.865 2.50098 2.5 5.86598 2.5 10.001C2.5 14.136 5.865 17.501 10 17.501C14.135 17.501 17.5 14.136 17.5 10.001C17.5 5.86598 14.135 2.50098 10 2.50098ZM10 16.001C6.69 16.001 4 13.311 4 10.001C4 9.80098 4.01 9.60598 4.03 9.41098C4.035 9.40598 4.04 9.40098 4.05 9.39598C4.61 8.80098 5.77 8.29098 7.245 8.00598C7.65 7.92598 7.915 7.53098 7.835 7.12598C7.755 6.72098 7.36 6.45098 6.955 6.53598C6.105 6.70098 5.34 6.93598 4.69 7.22598C5.695 5.31098 7.695 4.00098 10.005 4.00098C12.315 4.00098 14.315 5.31098 15.32 7.22598C15.305 7.21598 15.29 7.20598 15.275 7.20098C14.135 6.71098 12.705 6.39098 11.14 6.29098C10.72 6.26098 10.37 6.57598 10.34 6.99098C10.31 7.40598 10.625 7.76098 11.04 7.79098C12.42 7.88098 13.71 8.16598 14.68 8.58098C14.775 8.62098 14.88 8.64098 14.975 8.64098C15.265 8.64098 15.54 8.47098 15.665 8.18598C15.675 8.15598 15.685 8.12598 15.69 8.10098C15.89 8.70098 16.005 9.33598 16.005 10.001C16.005 13.311 13.315 16.001 10.005 16.001H10Z" fill="white"/>
+</svg>
--- a/src/assets/icons/to-real-style.svg
+++ b/src/assets/icons/to-real-style.svg
@@ -0,0 +1,6 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16.4956 3.27113C15.5206 2.29113 13.9356 2.29113 12.9606 3.27113L3.77064 12.4611C2.79064 13.4361 2.79064 15.0211 3.77064 15.9961C4.74564 16.9761 6.33064 16.9761 7.30564 15.9961L16.4956 6.80613C17.4756 5.83113 17.4756 4.24613 16.4956 3.27113ZM15.6656 5.65113L13.8956 7.41613C13.8006 7.51613 13.6406 7.51613 13.5456 7.41613L12.8356 6.71113C12.7406 6.61113 12.7406 6.45113 12.8356 6.35613L14.6056 4.58613C14.7006 4.49113 14.8606 4.49113 14.9606 4.58613L15.6656 5.29613C15.7606 5.39113 15.7606 5.55113 15.6656 5.65113Z" fill="white"/>
+<path d="M9.50059 4.5C10.0529 4.5 10.5006 4.05228 10.5006 3.5C10.5006 2.94772 10.0529 2.5 9.50059 2.5C8.9483 2.5 8.50059 2.94772 8.50059 3.5C8.50059 4.05228 8.9483 4.5 9.50059 4.5Z" fill="white"/>
+<path d="M14.5306 11.765C14.6906 11.33 15.3056 11.33 15.4706 11.765L16.0006 13.2C16.0506 13.335 16.1606 13.445 16.2956 13.495L17.7306 14.025C18.1656 14.185 18.1656 14.8 17.7306 14.965L16.2956 15.495C16.1606 15.545 16.0506 15.655 16.0006 15.79L15.4706 17.225C15.3106 17.66 14.6956 17.66 14.5306 17.225L14.0006 15.79C13.9506 15.655 13.8406 15.545 13.7056 15.495L12.2706 14.965C11.8356 14.805 11.8356 14.19 12.2706 14.025L13.7056 13.495C13.8406 13.445 13.9506 13.335 14.0006 13.2L14.5306 11.765Z" fill="white"/>
+<path d="M4.53059 3.765C4.69059 3.33 5.30559 3.33 5.47059 3.765L5.73059 4.47C5.78059 4.605 5.89059 4.715 6.02559 4.765L6.73059 5.025C7.16559 5.185 7.16559 5.8 6.73059 5.965L6.02559 6.225C5.89059 6.275 5.78059 6.385 5.73059 6.52L5.47059 7.225C5.31059 7.66 4.69559 7.66 4.53059 7.225L4.27059 6.52C4.22059 6.385 4.11059 6.275 3.97559 6.225L3.27059 5.965C2.83559 5.805 2.83559 5.19 3.27059 5.025L3.97559 4.765C4.11059 4.715 4.22059 4.605 4.27059 4.47L4.53059 3.765Z" fill="white"/>
+</svg>
--- a/src/assets/icons/to-video.svg
+++ b/src/assets/icons/to-video.svg
@@ -0,0 +1,4 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.9301 14.359C17.3701 14.474 17.4401 15.074 17.0401 15.284L14.9201 16.399C14.8301 16.449 14.7551 16.519 14.7101 16.609L13.7551 18.444C13.5401 18.854 12.9351 18.779 12.8251 18.329L11.7301 13.764C11.6401 13.399 11.9751 13.069 12.3401 13.164L16.9251 14.349L16.9301 14.359Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14 2.24902H6C3.93 2.24902 2.25 3.92902 2.25 5.99902V13.999C2.25 16.064 3.93 17.749 6 17.749H10C10.41 17.749 10.75 17.409 10.75 16.999C10.75 16.589 10.41 16.249 10 16.249H6C4.755 16.249 3.75 15.239 3.75 13.999V7.99902H16.25V11.444C16.25 11.859 16.585 12.194 17 12.194C17.415 12.194 17.75 11.859 17.75 11.444V5.99902C17.75 3.92902 16.065 2.24902 14 2.24902ZM6 6.49902C5.445 6.49902 5 6.04902 5 5.49902C5 4.94902 5.445 4.49902 6 4.49902C6.555 4.49902 7 4.94402 7 5.49902C7 6.05402 6.55 6.49902 6 6.49902ZM9 6.49902C8.445 6.49902 8 6.04902 8 5.49902C8 4.94902 8.445 4.49902 9 4.49902C9.555 4.49902 10 4.94402 10 5.49902C10 6.05402 9.55 6.49902 9 6.49902Z" fill="white"/>
+</svg>
--- a/src/assets/icons/upload.svg
+++ b/src/assets/icons/upload.svg
@@ -0,0 +1,4 @@
+<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16 9.41162C15.4802 9.41162 15.0588 9.833 15.0588 10.3528V10.541C15.0588 11.3472 15.0581 11.8953 15.0235 12.3189C14.9898 12.7315 14.9286 12.9425 14.8536 13.0897C14.6732 13.4439 14.3852 13.7318 14.031 13.9123C13.8838 13.9873 13.6728 14.0484 13.2602 14.0821C12.8366 14.1167 12.2885 14.1175 11.4823 14.1175H5.45881C4.65261 14.1175 4.10457 14.1167 3.68096 14.0821C3.26833 14.0484 3.05732 13.9873 2.91012 13.9123C2.55593 13.7318 2.26797 13.4439 2.0875 13.0897C2.0125 12.9425 1.95139 12.7315 1.91768 12.3189C1.88307 11.8953 1.88234 11.3472 1.88234 10.541V10.3528C1.88234 9.833 1.46096 9.41162 0.94116 9.41162C0.421364 9.41162 -1.52588e-05 9.833 -1.52588e-05 10.3528V10.5799C-2.86102e-05 11.3375 -3.62396e-05 11.9628 0.0415783 12.4721C0.0848026 13.0012 0.177568 13.4875 0.410313 13.9443C0.771248 14.6526 1.34717 15.2286 2.05555 15.5895C2.51233 15.8222 2.99864 15.915 3.52768 15.9582C4.03703 15.9998 4.66231 15.9998 5.41991 15.9998H11.5212C12.2788 15.9998 12.9041 15.9998 13.4135 15.9582C13.9425 15.915 14.4288 15.8222 14.8856 15.5895C15.594 15.2286 16.1699 14.6526 16.5308 13.9443C16.7636 13.4875 16.8563 13.0012 16.8996 12.4721C16.9412 11.9628 16.9412 11.3375 16.9412 10.5799L16.9412 10.3528C16.9412 9.833 16.5198 9.41162 16 9.41162Z" fill="#7C7C7C"/>
+<path d="M8.46966 12.2354C7.94986 12.2354 7.52848 11.814 7.52848 11.2942V3.21349L5.37046 5.37149C5.00291 5.73904 4.40699 5.73904 4.03944 5.37149C3.67188 5.00394 3.67188 4.40802 4.03944 4.04047L7.80414 0.275791C8.17169 -0.0917597 8.76762 -0.0917597 9.13517 0.275791L12.8999 4.04047C13.2674 4.40802 13.2674 5.00394 12.8999 5.37149C12.5323 5.73904 11.9364 5.73904 11.5688 5.37149L9.41083 3.21349V11.2942C9.41083 11.814 8.98945 12.2354 8.46966 12.2354Z" fill="#7C7C7C"/>
+</svg>
--- a/src/assets/icons/xingxing.svg
+++ b/src/assets/icons/xingxing.svg
@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.02408 9.41237C4.15208 9.06437 4.64408 9.06437 4.77608 9.41237L5.20008 10.5604C5.24008 10.6684 5.32808 10.7564 5.43608 10.7964L6.58408 11.2204C6.93208 11.3484 6.93208 11.8404 6.58408 11.9724L5.43608 12.3964C5.32808 12.4364 5.24008 12.5244 5.20008 12.6324L4.77608 13.7804C4.64808 14.1284 4.15608 14.1284 4.02408 13.7804L3.60008 12.6324C3.56008 12.5244 3.47208 12.4364 3.36408 12.3964L2.21608 11.9724C1.86808 11.8444 1.86808 11.3524 2.21608 11.2204L3.36408 10.7964C3.47208 10.7564 3.56008 10.6684 3.60008 10.5604L4.02408 9.41237Z" fill="#FF7A51"/>
+<path d="M8.63615 2.72015C8.82815 2.19615 9.56815 2.19615 9.76015 2.72015L10.6161 5.02815C10.6761 5.19215 10.8081 5.32015 10.9721 5.38415L13.2801 6.24015C13.8041 6.43215 13.8041 7.17215 13.2801 7.36415L10.9721 8.22015C10.8081 8.28015 10.6801 8.41215 10.6161 8.57615L9.76015 10.8841C9.56815 11.4081 8.82815 11.4081 8.63615 10.8841L7.78015 8.57615C7.72015 8.41215 7.58814 8.28415 7.42414 8.22015L5.11614 7.36415C4.59214 7.17215 4.59214 6.43215 5.11614 6.24015L7.42414 5.38415C7.58814 5.32415 7.71615 5.19215 7.78015 5.02815L8.63615 2.72015Z" fill="#FF7A51"/>
+</svg>
--- a/src/assets/images/login/elephant.png
+++ b/src/assets/images/login/elephant.png
--- a/src/assets/images/login/index-bg.png
+++ b/src/assets/images/login/index-bg.png
--- a/src/assets/images/login/index-title.png
+++ b/src/assets/images/login/index-title.png
--- a/src/assets/images/login/index-zhuangshi.png
+++ b/src/assets/images/login/index-zhuangshi.png
--- a/src/assets/images/login/left-bg.png
+++ b/src/assets/images/login/left-bg.png
--- a/src/assets/images/login/right-bg.png
+++ b/src/assets/images/login/right-bg.png
--- a/src/assets/images/logo-1.png
+++ b/src/assets/images/logo-1.png
--- a/src/assets/images/logo-2.png
+++ b/src/assets/images/logo-2.png
--- a/src/assets/images/nuic/loading.png
+++ b/src/assets/images/nuic/loading.png
--- a/src/assets/images/shining.png
+++ b/src/assets/images/shining.png
--- a/src/lang/zh-cn.ts
+++ b/src/lang/zh-cn.ts
@@ -1,95 +1,102 @@
 export default {
-	Login: {
-		Login: '登录',
-		SignUp: '注册',
-		LoginTo: '登录到',
-		LoginTitle: '一个多智能体画布，用于快速、趋势驱动的设计迭代。',
-		name: '姓名',
-		email: '邮箱',
-		password: '密码',
-		enterName: '请输入姓名',
-		enterEmail: '请输入邮箱',
-		enterPassword: '请输入密码',
-		forgetPassword: '忘记密码？',
-		pleaseInputName: '请输入姓名',
-		nameLengthError: '姓名长度必须在 {min} 到 {max} 个字符之间',
-		pleaseInputEmail: '请输入邮箱',
-		emailFormatError: '请输入正确的邮箱',
-		pleaseInputPassword: '请输入密码',
-		passwordLengthError: '密码长度必须在 {min} 到 {max} 个字符之间',
-		pleaseTermsPolicy: '请同意条款、政策和费用',
-		agreeTermsPolicy: '我同意 <span onclick="onClickPrivacy()">条款、政策</span> 和费用。',
-		noAccountToSignUp: `还没有账号？ <span onclick="onClickRegister()">注册</span>`,
-		registerFor: '注册账号',
-		registerTip: '一个多智能体画布，用于快速、趋势驱动的设计迭代。',
-		havenAccountToLogin: `已经有账号？ <span onclick="onClickLogin()">登录</span>`,
-		verifyEmail: '验证您的邮箱地址',
-		verifyCodeHasSent: '已发送验证码到 <span>{email}</span>',
-		verifyCode: '请输入验证码',
-		verify: '验证',
-		resendCode: '重新发送验证码',
-		resendCodeIn: '重新发送验证码倒计时 {time}',
-		orContinueWith: '或者使用',
-		googleLogin: '使用 Google 登录',
-		wechatLogin: '使用微信登录',
-	},
-	Nuic: {
-		hiName: '你好，{name}。',
-		nuic1Title: `帮助 Fiphant 发现您空间中的 <b>'YOU'</b>。`,
-		nuic1Tip: `让我们设置您的个人资料。几个快速的细节将帮助 Fiphant 理解您的需求并找到您正在寻找的内容。`,
-		letsGo: '让我们开始，Fiphant！',
-		skip: '跳过',
-		next: '下一步',
-		nuic2Title: `您理想中 <b>家的氛围</b> 是什么？`,
-		loadMore: '加载更多',
-		nuic3Title: `您在哪里 <b>工作</b> ？您从事什么 <b>工作</b> ？`,
-		basedIn: '公司',
-		role: '角色',
-		allSet: '准备好了！',
-	},
-	Home: {
-		creditsNum: '积分: {num}',
-		newProject: '新建项目',
-		home: '首页',
-		history: '历史记录',
-		today: '今天',
-		yesterday: '昨天',
-		earlierChat: '更早的',
-	},
-	Input: {
-		placeholder: '请输入',
-		selectPlaceholder: '请选择',
-		type: '类型',
-		area: '地区',
-		style: '风格',
-		types: {
-			sofa: '沙发',
-			desk: '书桌',
-			chair: '椅子'
-		},
-		styles: {
-			modern: '现代',
-			classic: '古典'
-		},
-		chooseStyle: '选择风格',
-		setting: 'Setting',
-		settingOptions: {
-			creativity: '创意度',
-			diversity: '多样性',
-			relevance: '相关度'
-		},
-		confirm: '确认'
-	},
-	area: {
-		unitedStates: '美国',
-		singapore: '新加坡',
-		australia: '澳大利亚',
-		southKorea: '韩国',
-		china: '中国',
-		italy: '意大利',
-		france: '法国',
-		japan: '日本',
-		canada: '加拿大',
-		germany: '德国'
-	}
+  AlphaVersion: '2026版本',
+  Login: {
+    login: '登录',
+    register: '注册',
+    signUp: '注册',
+    loginTo: '登录到 <span>FiDA</span',
+    loginTitle: '一个多智能体画布，用于快速、趋势驱动的设计迭代。',
+    name: '姓名',
+    email: '邮箱',
+    password: '密码',
+    enterName: '请输入姓名',
+    enterEmail: '请输入邮箱',
+    enterPassword: '请输入密码',
+    forgetPassword: '忘记密码？',
+    pleaseInputName: '请输入姓名',
+    nameLengthError: '姓名长度必须在 {min} 到 {max} 个字符之间',
+    pleaseInputEmail: '请输入邮箱',
+    emailFormatError: '请输入正确的邮箱',
+    pleaseInputPassword: '请输入密码',
+    passwordLengthError: '密码长度必须在 {min} 到 {max} 个字符之间',
+    pleaseTermsPolicy: '请同意条款、政策和费用',
+    agreeTermsPolicy: '我同意 <span onclick="onClickPrivacy()">条款、政策</span> 和费用。',
+    noAccountToSignUp: `还没有账号？ <span onclick="onClickRegister()">注册</span>`,
+    signUpFor: '注册账号',
+    registerTip: '一个多智能体画布，用于快速、趋势驱动的设计迭代。',
+    havenAccountToLogin: `已经有账号？ <span onclick="onClickLogin()">登录</span>`,
+    verifyEmail: '验证您的邮箱地址',
+    verifyCodeHasSent: '已发送验证码到 <span>{email}</span>',
+    verifyCode: '请输入验证码',
+    verify: '验证',
+    resendCode: '重新发送验证码',
+    resendCodeIn: '重新发送验证码倒计时 {time}',
+    orContinueWith: '或者使用',
+    googleLogin: '使用 Google 登录',
+    wechatLogin: '使用微信登录',
+	indexTip: '一个多智能体画布，用于快速、趋势驱动的设计迭代。',
+  },
+  Nuic: {
+    hiName: '你好，{name}。这是 Fiphant。',
+    nuic1Title: `帮助他发现您空间中的 <b>“YOU”</b>。`,
+    nuic1Tip: `让我们设置您的个人资料。几个快速的细节将帮助 Fiphant 理解您的需求并找到您正在寻找的内容。`,
+    letsGo: '让我们开始，Fiphant！',
+    skip: '跳过',
+    next: '下一步',
+    nuic2Title: `你通常喜欢什么样的风格呢？`,
+    loadMore: '加载更多',
+    nuic3Title: `您在 <b>哪里</b> 工作？您从事什么 <b>工作</b>？`,
+    basedIn: '公司',
+    role: '角色',
+    allSet: '准备好了！',
+	loadingTip: '我们正在自定义您的仪表板。',
+  },
+  Home: {
+    creditsNum: '积分: {num}',
+    newProject: '新建项目',
+    home: '首页',
+    history: '历史记录',
+    today: '今天',
+    yesterday: '昨天',
+    earlierChat: '更早的'
+  },
+  Input: {
+    placeholder: '请输入',
+    selectPlaceholder: '请选择',
+    type: '类型',
+    area: '地区',
+    style: '风格',
+    types: {
+      sofa: '沙发',
+      desk: '书桌',
+      chair: '椅子'
+    },
+    styles: {
+      modern: '现代',
+      classic: '古典'
+    },
+    chooseStyle: '选择风格',
+    setting: 'Setting',
+    settingOptions: {
+      creativity: '创意度',
+      diversity: '多样性',
+      relevance: '相关度'
+    },
+    confirm: '确认',
+    styleTitle: '设置',
+    createProject: '创建项目',
+    trendingReport: '趋势报告'
+  },
+  area: {
+    unitedStates: '美国',
+    singapore: '新加坡',
+    australia: '澳大利亚',
+    southKorea: '韩国',
+    china: '中国',
+    italy: '意大利',
+    france: '法国',
+    japan: '日本',
+    canada: '加拿大',
+    germany: '德国'
+  }
 }
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -55,7 +55,13 @@ const router = createRouter({
 					path: 'mainInput',
 					name: 'mainInput',
 					component: () => import('../views/home/mainInput.vue')
-				}
+				},
+				{
+					path: 'canvas',
+					name: 'canvas',
+					component: () => import('../views/canvas/index.vue'),
+					meta: { topNavStyle: '2' }
+				},
 			]
 		},
 		{
--- a/src/views/canvas/components/card.vue
+++ b/src/views/canvas/components/card.vue
@@ -0,0 +1,153 @@
+<template>
+	<div class="card">
+		<div class="header">
+			<svg-icon :name="currentComponent.type" color="#fff" />
+			<span>{{ currentComponent.title }}</span>
+			<div class="add" @click="emit('add')"><svg-icon name="add" size="14" /></div>
+		</div>
+		<div class="body">
+			<component :is="currentComponent.component" ref="componentRef" />
+		</div>
+		<div class="footer">
+			<button @click="onGenerateClick">
+				<svg-icon name="xingxing" size="16" />
+				<span>Generate</span>
+			</button>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+	import { computed, ref, markRaw, onMounted } from 'vue'
+	import ToRealStyle from './cards/to-real-style.vue'
+	import SceneComposition from './cards/scene-composition.vue'
+	const components = [
+		{
+			type: 'to-real-style',
+			title: 'To Real Style',
+			component: ToRealStyle
+		},
+		{
+			type: 'scene-composition',
+			title: 'Scene Composition',
+			component: SceneComposition
+		},
+		{
+			type: 'color-palette',
+			title: 'Color Palette',
+			component: SceneComposition
+		},
+		{
+			type: 'to-video',
+			title: 'To Video',
+			component: SceneComposition
+		},
+		{
+			type: 'to-3d-model',
+			title: 'To 3D Model',
+			component: SceneComposition
+		},
+		{
+			type: 'add-print',
+			title: 'Add Print',
+			component: SceneComposition
+		},
+		{
+			type: 'edit-material',
+			title: 'Edit Material',
+			component: SceneComposition
+		}
+	]
+	const emit = defineEmits(['add', 'generate'])
+	const props = defineProps({
+		type: {
+			type: String,
+			default: 'to-real-style'
+		}
+	})
+	const currentComponent = computed(() => {
+		return components.find((item) => item.type === props.type)
+	})
+	const componentRef = ref(null)
+	const onGenerateClick = () => {
+		const data = { ...componentRef.value.data }
+		console.log(data)
+		emit('generate')
+	}
+</script>
+
+<style lang="less" scoped>
+	.card {
+		width: 25rem;
+		height: auto;
+		--border-radius: 1.6rem;
+		border-radius: var(--border-radius);
+		background-color: #fff;
+		> .header {
+			border-radius: var(--border-radius) var(--border-radius) 0 0;
+			height: 5rem;
+			background: #ff7a51;
+			display: flex;
+			align-items: center;
+			padding-left: 1.6rem;
+			position: relative;
+			> .c-svg {
+				width: auto;
+				height: auto;
+				margin-right: 0.6rem;
+			}
+			> span {
+				font-family: Semibold;
+				font-size: 1.6rem;
+				color: #fff;
+			}
+			> .add {
+				position: absolute;
+				width: 3.2rem;
+				height: 3.2rem;
+				border: 0.2rem solid #fff;
+				bottom: -1.6rem;
+				right: -1.6rem;
+				background-color: #ed8936;
+				border-radius: 50%;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				color: #fff;
+				font-size: 2.5rem;
+				box-shadow: 0 0.8rem 2rem 0 #71809633;
+				cursor: pointer;
+			}
+		}
+		> .body {
+			padding: 1.6rem 1.3rem;
+		}
+		> .footer {
+			margin-bottom: 1.6rem;
+			display: flex;
+			flex-direction: row-reverse;
+			padding: 0 1.3rem;
+			> button {
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				width: 11rem;
+				height: 2.8rem;
+				border-radius: 0.5rem;
+				background-color: #fffcf4;
+				border: 1px solid #ffcf90;
+				font-size: 1.2rem;
+				font-family: SemiBold;
+				cursor: pointer;
+				&:active {
+					opacity: 0.5;
+				}
+				> .c-svg {
+					width: auto;
+					height: auto;
+					margin-right: 0.4rem;
+				}
+			}
+		}
+	}
+</style>
--- a/src/views/canvas/components/cards/scene-composition.vue
+++ b/src/views/canvas/components/cards/scene-composition.vue
@@ -0,0 +1,22 @@
+<template>
+	<!-- 场景构图 -->
+	<div class="scene-composition"></div>
+</template>
+
+<script setup lang="ts">
+	import { computed, ref, markRaw, onMounted } from 'vue'
+	import { useGlobalStore } from '@/stores'
+	import { useRouter, useRoute } from 'vue-router'
+	const router = useRouter()
+	const route = useRoute()
+	const globalStore = useGlobalStore()
+	onMounted(() => {
+		globalStore.setHomeLeftNavCollapse(true)
+	})
+</script>
+
+<style lang="less" scoped>
+	.scene-composition {
+		width: 100%;
+	}
+</style>
--- a/src/views/canvas/components/cards/to-real-style.vue
+++ b/src/views/canvas/components/cards/to-real-style.vue
@@ -0,0 +1,39 @@
+<template>
+	<!-- 转换为真实图 -->
+	<div class="to-real-style">
+		<my-textarea v-model="data.prompt" />
+		<pixel-ratio-selection v-model="data.pixelRatio" />
+		<upload-file v-model="data.file" />
+	</div>
+</template>
+
+<script setup lang="ts">
+	import { computed, ref, reactive, onMounted, defineExpose } from 'vue'
+	import myTextarea from '../my-textarea.vue'
+	import pixelRatioSelection from '../pixel-ratio-selection.vue'
+	import uploadFile from '../upload-file.vue'
+	import { useGlobalStore } from '@/stores'
+	import { useRouter, useRoute } from 'vue-router'
+	const router = useRouter()
+	const route = useRoute()
+	const globalStore = useGlobalStore()
+	onMounted(() => {
+		globalStore.setHomeLeftNavCollapse(true)
+	})
+	const data = reactive({
+		prompt: '123123',
+		pixelRatio: '1:1',
+		file: null
+	})
+
+	defineExpose({ data })
+</script>
+
+<style lang="less" scoped>
+	.to-real-style {
+		width: 100%;
+		> * {
+			margin-bottom: 1rem;
+		}
+	}
+</style>
--- a/src/views/canvas/components/my-textarea.vue
+++ b/src/views/canvas/components/my-textarea.vue
@@ -0,0 +1,84 @@
+<template>
+	<div class="my-textarea">
+		<textarea
+			:placeholder="placeholder"
+			:value="modelValue"
+			@input="onInput"
+			@change="onChange"
+		></textarea>
+		<div class="bths">
+			<button><svg-icon name="mobang" size="10" /></button>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+	import { computed, ref, markRaw, onMounted } from 'vue'
+	const emit = defineEmits(['update:modelValue', 'input', 'change'])
+	const props = defineProps({
+		modelValue: { type: String },
+		placeholder: {
+			type: String,
+			default: 'Enter the scene you want to describe...'
+		}
+	})
+	const onInput = (e) => {
+		const value = e.target.value
+		emit('update:modelValue', value)
+		emit('input', value)
+	}
+	const onChange = (e) => {
+		emit('change', e.target.value)
+	}
+</script>
+
+<style lang="less" scoped>
+	.my-textarea {
+		width: 100%;
+		height: 11.5rem;
+		border: 0.1rem solid #e4e4e7;
+		border-radius: 1rem;
+		padding: 1rem 0.5rem;
+		display: flex;
+		flex-direction: column;
+		> textarea {
+			padding: 0 0.5rem;
+			width: 100%;
+			flex: 1;
+			border: none;
+			outline: none;
+			resize: none;
+			font-family: Medium;
+			font-size: 1rem;
+			color: #333;
+			&::placeholder {
+				color: #c9c9c9;
+			}
+			&::-webkit-scrollbar {
+				width: 0.4rem;
+			}
+			&::-webkit-scrollbar-thumb {
+				border-radius: 0.4rem;
+				background: rgba(0, 0, 0, 0.2);
+			}
+			&::-webkit-scrollbar-track {
+				border-radius: 0.4rem;
+				background: rgba(0, 0, 0, 0.1);
+			}
+		}
+		> .bths {
+			padding: 0.5rem 0.5rem 0;
+			> button {
+				width: 2rem;
+				height: 2rem;
+				padding: 0;
+				border-radius: 0.4rem;
+				background-color: #f0f0f0;
+				border: 1px solid #e4e4e7;
+				&:active {
+					opacity: 0.5;
+				}
+			}
+		}
+	}
+</style>
--- a/src/views/canvas/components/pixel-ratio-selection.vue
+++ b/src/views/canvas/components/pixel-ratio-selection.vue
@@ -0,0 +1,67 @@
+<template>
+	<div class="pixel-ratio-selection">
+		<div
+			v-for="v in list"
+			:key="v"
+			:class="{ active: v === modelValue }"
+			@click="onChange(v)"
+			:style="{ '--w': v.split(':')[0], '--h': v.split(':')[1] }"
+		>
+			{{ v }}
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+	import { reactive, defineExpose } from 'vue'
+	const emit = defineEmits(['update:modelValue', 'change'])
+	const props = defineProps({
+		modelValue: { type: String },
+		list: {
+			type: Array,
+			default: () => ['1:1', '4:3', '3:4', '16:9']
+		}
+	})
+	const data = reactive({})
+	const onChange = (v) => {
+		emit('update:modelValue', v)
+		emit('change', v)
+	}
+	defineExpose({ data })
+</script>
+
+<style lang="less" scoped>
+	.pixel-ratio-selection {
+		width: 100%;
+		height: 3.4rem;
+		border-radius: 0.6rem;
+		background-color: #f0f0f0;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: 0 1.7rem;
+		> div {
+			text-align: center;
+			font-size: 1.2rem;
+			color: #7c7c7c;
+			height: 2.1rem;
+			flex: 1;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			&.active {
+				border-radius: 0.4rem;
+				background-color: #fff;
+			}
+			&::before {
+				content: '';
+				border-radius: 0.1rem;
+				border: 0.1rem solid #7c7c7c;
+				width: calc(var(--w) / max(var(--w), var(--h)) * 1rem);
+				height: calc(var(--h) / max(var(--w), var(--h)) * 1rem);
+				margin-right: 0.4rem;
+				box-sizing: border-box;
+			}
+		}
+	}
+</style>
--- a/src/views/canvas/components/upload-file.vue
+++ b/src/views/canvas/components/upload-file.vue
@@ -0,0 +1,59 @@
+<template>
+	<div class="upload-file">
+		<div class="icon"><svg-icon name="upload" size="17" /></div>
+		<span class="txt">Upload your files</span>
+		<button class="btn">Select File</button>
+	</div>
+</template>
+
+<script setup lang="ts">
+	import { reactive, defineExpose } from 'vue'
+	const emit = defineEmits(['update:modelValue', 'change'])
+	const props = defineProps({
+		modelValue: { type: String },
+		list: {
+			type: Array,
+			default: () => ['1:1', '4:3', '3:4', '16:9']
+		}
+	})
+	const data = reactive({})
+	const onChange = (v) => {
+		emit('update:modelValue', v)
+		emit('change', v)
+	}
+	defineExpose({ data })
+</script>
+
+<style lang="less" scoped>
+	.upload-file {
+		width: 100%;
+		height: 9.9rem;
+		border-radius: 1rem;
+		background-color: #f0f0f0;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		// padding: 0 1.7rem;
+		> .txt {
+			margin-top: 0.6rem;
+			margin-bottom: 0.8rem;
+			font-size: 0.8rem;
+			color: #7c7c7c;
+		}
+		> button {
+			box-shadow: 0px 0.75px 0px 0px #00000005;
+			min-width: 3.9rem;
+			height: 1.3rem;
+			border-radius: 0.23rem;
+			background-color: #fff;
+			font-size: 0.6rem;
+			color: #000;
+			border: 0.05rem solid #d9d9d9;
+			cursor: pointer;
+			&:active {
+				opacity: 0.6;
+			}
+		}
+	}
+</style>
--- a/src/views/canvas/index.vue
+++ b/src/views/canvas/index.vue
@@ -0,0 +1,35 @@
+<template>
+	<div class="canvas">
+		<card type="to-real-style" />
+		<card type="scene-composition" />
+		<card type="color-palette" />
+		<card type="to-video" />
+		<card type="to-3d-model" />
+		<card type="add-print" />
+		<card type="edit-material" />
+	</div>
+</template>
+
+<script setup lang="ts">
+	import card from './components/card.vue'
+	import { computed, ref, markRaw, onMounted } from 'vue'
+	import { useGlobalStore } from '@/stores'
+	import { useRouter, useRoute } from 'vue-router'
+	const router = useRouter()
+	const route = useRoute()
+	const globalStore = useGlobalStore()
+	onMounted(() => {
+		globalStore.setHomeLeftNavCollapse(true)
+	})
+</script>
+
+<style lang="less" scoped>
+	.canvas {
+		background-color: #fcf8f1;
+		display: flex;
+		flex-wrap: wrap;
+		align-content: flex-start;
+		padding: 2rem;
+		gap: 2rem;
+	}
+</style>
--- a/src/views/home/components/Input.vue
+++ b/src/views/home/components/Input.vue
@@ -1,103 +1,200 @@
 <template>
  <div class="assist-input-wrapper flex flex-col">
-    <textarea
-      class="input"
-      type="text"
-      v-model="inputValue"
-      :placeholder="$t('Input.placeholder')"
-    />
-    <div class="operate flex align-center">
-      <div class="attach flex flex-center">
-        <img src="@/assets/icons/attach.svg" alt="" />
+    <div class="scroll-content flex-col">
+      <!-- 图片预览区域 -->
+      <div v-if="uploadedImages.length > 0" class="image-preview-list flex wrap">
+        <div v-for="(image, index) in uploadedImages" :key="index" class="image-preview-item">
+          <img :src="image.url" :alt="image.name" class="preview-image" />
+          <div class="image-remove-btn" @click="removeImage(index)">
+            <SvgIcon name="delete" size="16" />
+          </div>
+        </div>
      </div>
-      <el-select v-model="typeValue" :placeholder="$t('Input.typePlaceholder')">
-        <el-option
-          v-for="item in typeOptions"
-          class="input-option"
-          :key="item.value"
-          :label="$t(item.label)"
-          :value="item.value"
-        />
-      </el-select>
-      <el-select v-model="areaValue" :placeholder="$t('Input.areaPlaceholder')">
-        <el-option
-          v-for="item in areaOptions"
-          class="input-option"
-          :key="item.value"
-          :label="$t(item.label)"
-          :value="item.value"
-        />
-      </el-select>
-      <div class="fida-style-select-wrapper">
-        <el-select
-          v-model="styleValue"
-          :placeholder="$t('Input.stylePlaceholder')"
-          @focus="openStylePopup"
+      <!-- 编辑区域 -->
+      <div
+        ref="editorRef"
+        class="editor"
+        contenteditable="true"
+        :placeholder="$t('Input.placeholder')"
+        @input="handleEditorInput"
+        @keydown="handleEditorKeydown"
+        @paste="handleEditorPaste"
+      >
+        <!-- <Tag v-if="showReportTag" /> -->
+        <div class="editor-tag report-btn flex-center" v-if="showReportTag" contenteditable="false">
+          <SvgIcon class="light-icon" name="light" size="16" />
+          <span>{{ $t('Input.trendingReport') }}</span>
+          <SvgIcon
+            class="close-icon"
+            name="closeTransparent"
+            size="24"
+            color="#e6e6e6"
+            @click="showReportTag = false"
+          />
+        </div>
+      </div>
+    </div>
+    <div class="operate flex space-between">
+      <div class="left flex align-center">
+        <div class="attach flex flex-center" @click="triggerFileUpload">
+          <img src="@/assets/icons/attach.svg" alt="" />
+        </div>
+        <input
+          ref="fileInputRef"
+          type="file"
+          accept="image/*"
+          style="display: none"
+          @change="handleFileChange"
        />
+        <el-select v-model="typeValue" :placeholder="$t('Input.typePlaceholder')">
+          <el-option
+            v-for="item in typeOptions"
+            class="input-option"
+            :key="item.value"
+            :label="$t(item.label)"
+            :value="item.value"
+          />
+        </el-select>
+        <el-select v-model="areaValue" :placeholder="$t('Input.areaPlaceholder')">
+          <el-option
+            v-for="item in areaOptions"
+            class="input-option"
+            :key="item.value"
+            :label="$t(item.label)"
+            :value="item.value"
+          />
+        </el-select>
+        <div class="fida-style-select-wrapper">
+          <el-select
+            v-model="styleValue"
+            :placeholder="$t('Input.stylePlaceholder')"
+            @focus="openStylePopup"
+          />

+          <el-popover
+            v-model:visible="stylePopupVisible"
+            placement="top"
+            :width="342"
+            :show-arrow="false"
+            trigger="click"
+            popper-class="fida-style-select-popover"
+          >
+            <template #reference>
+              <div class="fida-style-select-trigger"></div>
+            </template>
+            <div class="fida-style-popover-content flex flex-col">
+              <div class="fida-style-popover-header">{{ $t('Input.chooseStyle') }}</div>
+              <div class="fida-style-popover-grid">
+                <div
+                  v-for="item in styleOptions"
+                  :key="item.value"
+                  class="fida-style-popover-item"
+                  :class="{ 'is-selected': tempSelectedValue === item.value }"
+                  @click="selectStyle(item.value)"
+                >
+                  <span class="fida-option-label">{{ $t(item.label) }}</span>
+                </div>
+              </div>
+              <div class="fida-style-popover-footer flex flex-center">
+                <button class="fida-confirm-btn" @click="confirmStyle">
+                  {{ $t('Input.confirm') }}
+                </button>
+              </div>
+            </div>
+          </el-popover>
+        </div>
        <el-popover
-          v-model:visible="stylePopupVisible"
+          v-model:visible="settingPopupVisible"
          placement="top"
          :width="342"
          :show-arrow="false"
          trigger="click"
-          popper-class="fida-style-select-popover"
+          popper-class="fida-setting-popover"
        >
          <template #reference>
-            <div class="fida-style-select-trigger"></div>
+            <img src="@/assets/images/setting.png" class="setting-icon" />
          </template>
-          <div class="fida-style-popover-content flex flex-col">
-            <div class="fida-style-popover-header">{{ $t('Input.chooseStyle') }}</div>
-            <div class="fida-style-popover-grid">
+          <div class="fida-setting-popover-content flex flex-col">
+            <div class="fida-setting-popover-header">{{ $t('Input.styleTitle') }}</div>
+            <div class="fida-setting-slider-list">
              <div
-                v-for="item in styleOptions"
-                :key="item.value"
-                class="fida-style-popover-item"
-                :class="{ 'is-selected': tempSelectedValue === item.value }"
-                @click="selectStyle(item.value)"
+                v-for="item in settingOptions"
+                :key="item.label"
+                class="fida-setting-slider-item"
              >
-                <span class="fida-option-label">{{ $t(item.label) }}</span>
+                <div class="fida-slider-label">{{ $t(item.label) }}</div>
+                <div class="fida-slider-row flex align-center">
+                  <el-slider
+                    class="setting-popover-slider"
+                    v-model="item.value"
+                    :show-tooltip="false"
+                  />
+                  <span class="fida-slider-value">{{ item.value }}%</span>
+                </div>
              </div>
            </div>
-            <div class="fida-style-popover-footer flex flex-center">
-              <button class="fida-confirm-btn" @click="confirmStyle">
-                {{ $t('Input.confirm') }}
-              </button>
-            </div>
          </div>
        </el-popover>
      </div>
-      <el-popover
-        v-model:visible="settingPopupVisible"
-        placement="top"
-        :width="342"
-        :show-arrow="false"
-        trigger="click"
-        popper-class="fida-setting-popover"
-      >
-        <template #reference>
-          <img src="@/assets/images/setting.png" class="setting-icon" />
-        </template>
-        <div class="fida-setting-popover-content flex flex-col">
-          <div class="fida-setting-popover-header">{{ $t('Input.setting') }}</div>
-          <div class="fida-setting-slider-list">
-            <div v-for="item in settingOptions" :key="item.label" class="fida-setting-slider-item">
-              <div class="fida-slider-label">{{ $t(item.label) }}</div>
-              <div class="fida-slider-row flex align-center">
-                <el-slider v-model="item.value" :show-tooltip="false" />
-                <span class="fida-slider-value">{{ item.value }}%</span>
-              </div>
-            </div>
-          </div>
+      <div class="right">
+        <div class="create-btn flex flex-center">
+          <img src="@/assets/images/shining.png" class="shining-icon" alt="" />
+          <span class="create-btn-text">{{ $t('Input.createProject') }}</span>
        </div>
-      </el-popover>
+      </div>
+    </div>
+    <div class="report-btn flex flex-center" @click="toogltReportTag">
+      <SvgIcon class="light-icon" name="light" size="16" />
+      <span>{{ $t('Input.trendingReport') }}</span>
    </div>
  </div>
 </template>

 <script setup lang="ts">
-import { computed, ref } from 'vue'
+import { computed, ref, watch, nextTick, onMounted } from 'vue'
 import { areaList } from '@/utils/area'
+import { useI18n } from 'vue-i18n'
+// import Tag from './Tag.vue'
+
+const { t } = useI18n()
+
+// 图片上传相关
+const fileInputRef = ref<HTMLInputElement | null>(null)
+const uploadedImages = ref<Array<{ url: string; name: string }>>([])
+
+// 触发文件上传
+const triggerFileUpload = () => {
+  fileInputRef.value?.click()
+}
+
+// TODO  标签被删除后无法重新出现
+
+// 处理文件选择
+const handleFileChange = (event: Event) => {
+  const input = event.target as HTMLInputElement
+  if (input.files) {
+    Array.from(input.files).forEach((file) => {
+      // 只处理图片文件
+      if (file.type.startsWith('image/')) {
+        const reader = new FileReader()
+        reader.onload = (e) => {
+          uploadedImages.value.push({
+            url: e.target?.result as string,
+            name: file.name
+          })
+        }
+        reader.readAsDataURL(file)
+      }
+    })
+  }
+  // 清空input的value，允许重复选择同一文件
+  input.value = ''
+}
+
+// 移除图片
+const removeImage = (index: number) => {
+  uploadedImages.value.splice(index, 1)
+}

 const styleKeys: string[] = [
  'Coastal',
@@ -111,8 +208,97 @@ const styleKeys: string[] = [
  'NordicNoir'
 ]

+// 标签相关（固定标签，v-show 控制显示）
+const showReportTag = ref(false)
+const editorRef = ref<HTMLDivElement | null>(null)
 const inputValue = ref<string>('')

+const toogltReportTag = () => {
+  console.log(showReportTag.value)
+
+  showReportTag.value = !showReportTag.value
+}
+
+const handleEditorInput = () => {
+  if (!editorRef.value) return
+
+  // 提取纯文本（排除标签）
+  let text = ''
+  const walker = document.createTreeWalker(editorRef.value, NodeFilter.SHOW_TEXT, null)
+
+  let node: Node | null
+  while ((node = walker.nextNode())) {
+    text += node.textContent
+  }
+
+  // 移除末尾的空格（如果有的话）
+  text = text.replace(/\s+$/, '')
+  inputValue.value = text
+
+  // 自动调整高度
+  autoResizeEditor()
+}
+
+const handleEditorKeydown = (e: KeyboardEvent) => {
+  // if (e.key === 'Backspace') {
+  //   const selection = window.getSelection()
+  //   if (selection && selection.rangeCount > 0) {
+  //     const range = selection.getRangeAt(0)
+  //     if (range.collapsed) {
+  //       const node = range.startContainer
+  //       const offset = range.startOffset
+  //       // 如果光标在文本节点开头，且前一个兄弟是标签
+  //       if (
+  //         offset === 0 &&
+  //         node.nodeType === Node.TEXT_NODE &&
+  //         node.previousSibling &&
+  //         (node.previousSibling as HTMLElement).classList.contains('editor-tag')
+  //       ) {
+  //         e.preventDefault()
+  //         nextTick(() => (showReportTag.value = false))
+  //       }
+  //       // 如果光标在编辑器开头，且第一个子节点是标签
+  //       else if (
+  //         offset === 0 &&
+  //         node === editorRef.value &&
+  //         editorRef.value.firstChild &&
+  //         (editorRef.value.firstChild as HTMLElement).classList.contains('editor-tag')
+  //       ) {
+  //         e.preventDefault()
+  //         nextTick(() => (showReportTag.value = false))
+  //       }
+  //     }
+  //   }
+  // }
+}
+
+const handleEditorPaste = (e: ClipboardEvent) => {
+  e.preventDefault()
+  const text = e.clipboardData?.getData('text/plain') || ''
+  document.execCommand('insertText', false, text)
+}
+
+const autoResizeEditor = () => {
+  const editor = editorRef.value
+  if (editor) {
+    editor.style.height = 'auto'
+    const maxHeight = 20 * parseFloat(getComputedStyle(document.documentElement).fontSize || '16')
+    editor.style.height = Math.min(editor.scrollHeight, maxHeight) + 'px'
+  }
+}
+
+// 监听 inputValue 外部变化
+watch(inputValue, () => {
+  nextTick(() => {
+    autoResizeEditor()
+  })
+})
+
+// 初始化编辑器高度
+onMounted(() => {
+  autoResizeEditor()
+})
+
 const typeValue = ref<string>('')
 const areaValue = ref<string>('')
 const styleValue = ref<string>('')
@@ -170,32 +356,158 @@ const styleOptions = ref<any[]>(

 <style lang="less" scoped>
 .assist-input-wrapper {
-  height: 23.5rem;
+  min-height: 23.5rem;
+  max-height: 43.5rem;
  width: 106.3rem;
  border-radius: 2.8rem;
  background-color: #fff;
  border: 0.1rem solid #00000005;
  box-shadow: 0px 5px 14px 0px #0000001a;
  margin: 0 auto;
-  padding: 3.4rem 1.7rem 1.7rem 2rem;
-  .input {
-    flex: 1;
+  padding: 0;
+  position: relative;
+
+  .report-btn {
+    position: absolute;
+    bottom: -7.4rem;
+    height: 4.4rem;
+    border-radius: 2.2rem;
+    width: 20rem;
+    background-color: #fff;
+    border: 0.11rem solid #f6f4ef1a;
+    column-gap: 1.2rem;
+    cursor: pointer;
+    .c-svg {
+      width: 1.5rem;
+      height: 1.9rem;
+    }
+  }
+
+  .scroll-content {
+    overflow-y: visible;
+    padding: 3.4rem 1.7rem 1.7rem;
+  }
+
+  .editor {
+    width: 100%;
+    min-height: 5rem;
+    max-height: 20rem;
    border: none;
    outline: none;
-    padding: 0 1.4rem;
+    padding: 0 1.4rem 1.4rem;
    font-size: 2rem;
    font-family: 'InterRegular';
    font-weight: 400;
    color: #000000;
-    resize: none;
+    overflow-y: auto;
+    overflow-x: hidden;
+    line-height: 1.5;
+    white-space: pre-wrap;
+    word-wrap: break-word;
+
+    // 占位符
+    &:empty::before {
+      content: attr(placeholder);
+      color: #999;
+      pointer-events: none;
+    }
+
+    // 标签样式
+    .editor-tag {
+      width: 21.8rem;
+      height: 4.4rem;
+      display: inline-flex;
+      position: initial;
+      bottom: initial;
+      border: 0.11rem solid #0000001a;
+      font-family: 'GeneralMedium';
+      font-weight: 500;
+      font-size: 1.8rem;
+      column-gap: 0;
+      span {
+        margin: 0 0.7rem 0 1.2rem;
+      }
+      .c-svg.close-icon {
+        width: 2.4rem;
+        height: 2.4rem;
+        cursor: pointer;
+      }
+    }
+  }
+
+  // 标签容器（已废弃，保留兼容性）
+  .tags-container {
+    display: inline-flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    padding: 0 1.4rem 0.5rem;
+
+    .tag-item {
+      display: inline-flex;
+      align-items: center;
+    }
+  }
+
+  // 图片预览区域样式
+  .image-preview-list {
+    padding: 0 1.4rem 1rem;
+    column-gap: 1rem;
+    max-height: 15rem;
+    overflow-y: auto;
+    flex-shrink: 0;
+
+    .image-preview-item {
+      position: relative;
+      width: 8.6rem;
+      height: 8.6rem;
+      border-radius: 1.5rem;
+      overflow: hidden;
+      flex-shrink: 0;
+      border: 0.1rem solid #cdcdcd;
+
+      .preview-image {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        border-radius: 0.8rem;
+      }
+
+      .image-remove-btn {
+        position: absolute;
+        top: 0.2rem;
+        right: 0.2rem;
+        width: 1.6rem;
+        height: 1.6rem;
+        color: #fff;
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 1.2rem;
+        cursor: pointer;
+        opacity: 0;
+        transition: opacity 0.2s ease;
+      }
+
+      &:hover .image-remove-btn {
+        opacity: 1;
+      }
+    }
  }
  .operate {
-    column-gap: 2rem;
+    flex-shrink: 0;
+    margin-top: auto;
+    padding: 0 1.7rem 1.7rem;
+
+    .left {
+      column-gap: 2rem;
+    }
    .attach {
      width: 4rem;
      height: 4rem;
      border: 1px solid rgba(0, 0, 0, 0.1);
      border-radius: 50%;
+      cursor: pointer;
    }
    .el-select {
      width: 13.9rem;
@@ -235,6 +547,21 @@ const styleOptions = ref<any[]>(
      height: 2.4rem;
      cursor: pointer;
    }
+    .create-btn {
+      background-color: #ff7a51;
+      height: 4rem;
+      width: 13rem;
+      color: #fff;
+      border-radius: 4.2rem;
+      font-family: 'Mazzard';
+      font-weight: 600;
+      font-size: 1.28rem;
+      cursor: pointer;
+      .shining-icon {
+        width: 1.4rem;
+        height: 1.4rem;
+      }
+    }
  }
 }
 .input-option {
@@ -336,12 +663,15 @@ const styleOptions = ref<any[]>(
 }

 .fida-setting-popover {
-  width: 34.2rem !important;
  padding: 0 !important;
  border-radius: 0.6rem !important;
-  box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.15) !important;
  background-color: #fff !important;
  border: none !important;
+  width: 25.6rem;
+  height: 23.9rem;
+
+  box-shadow: 0px 11px 20px 0px #0000001a;
+  border-radius: 0.6rem;
 }

 // .fida-setting-popover-content {
@@ -349,43 +679,70 @@ const styleOptions = ref<any[]>(
 // }

 .fida-setting-popover-header {
-  font-family: 'GeneralMedium';
-  font-weight: 500;
-  font-size: 1.6rem;
+  font-weight: 400;
+  font-size: 1.4rem;
  color: #000;
-  margin-bottom: 2rem;
+  margin-bottom: 2rem !important;
+}
+.fida-setting-popover-content {
+  padding: 1.6rem 1.4rem 2.2rem !important;
 }

 .fida-setting-slider-list {
  display: flex;
  flex-direction: column;
-  gap: 2rem;
+  row-gap: 1rem;
 }

 .fida-setting-slider-item {
  .fida-slider-label {
-    font-family: 'GeneralMedium';
-    font-weight: 500;
-    font-size: 1.4rem;
+    font-weight: 400;
+    font-size: 1.2rem;
    color: #000;
-    margin-bottom: 0.8rem;
+    margin-bottom: 1rem;
  }
  .fida-slider-row {
-    gap: 1rem;
+    column-gap: 2.6rem;
    .el-slider {
      flex: 1;
    }
    .fida-slider-value {
-      font-family: 'GeneralMedium';
-      font-weight: 500;
+      font-weight: 400;
      font-size: 1.4rem;
      color: #000;
-      min-width: 3.5rem;
-      text-align: right;
    }
  }
-  // :deep(.el-slider) {
-
-  // }
+}
+.setting-popover-slider {
+  --el-slider-height: 0.4rem;
+  height: fit-content;
+  .el-slider__runway {
+    height: var(--el-slider-height);
+    background-color: #e8e8e8;
+    border-radius: 0.2rem;
+  }
+  .el-slider__bar {
+    height: var(--el-slider-height);
+    background-color: #000;
+    border-radius: 0.2rem;
+  }
+  .el-slider__button-wrapper {
+    width: fit-content;
+    height: fit-content;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    display: flex;
+    align-items: center;
+  }
+  .el-slider__button {
+    width: 1rem;
+    height: 1rem;
+    background-color: #000;
+    border-radius: 50%;
+    border: none;
+  }
+  .el-slider__stop {
+    display: none;
+  }
 }
 </style>
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -30,9 +30,11 @@
 			flex-direction: column;
 			> .bottom-view {
 				flex: 1;
-				// background-color: #fff;
 				overflow: hidden;
 				display: flex;
+				> * {
+					flex: 1;
+				}
 			}
 		}
 	}
--- a/src/views/home/left-nav.vue
+++ b/src/views/home/left-nav.vue
@@ -15,6 +15,10 @@
 			<span class="icon"><svg-icon name="home" size="24" /></span>
 			<span class="title" v-show="!isCollapse">{{ $t('Home.home') }}</span>
 		</div> -->
+		<div class="menu-item" @click="onCanvas">
+			<!-- <span class="icon"><svg-icon name="home" size="24" /></span> -->
+			<span class="title">画布</span>
+		</div>
 		<div class="menu-item" @click="onHistory" :class="{ active: showHistory }">
 			<span class="icon"><svg-icon name="history" size="24" /></span>
 			<span class="title" v-show="!isCollapse">{{ $t('Home.history') }}</span>
@@ -25,15 +29,24 @@
 		<div class="history-list" v-show="!isCollapse && showHistory">
 			<div v-for="item in historyList" :key="item.name" class="history-item">
 				<div v-if="item.title" class="title">{{ item.name }}</div>
-				<div v-else class="box" @click="onClickHistoryItem(item)">
+				<div
+					v-else
+					class="box"
+					@click="onClickHistoryItem(item)"
+					:class="{ active: item.id == id }"
+				>
 					<span>{{ item.name }}</span>
-					<el-popover placement="right" trigger="click">
+					<el-popover
+						placement="right"
+						trigger="click"
+						popper-style="padding: 1rem 0.5rem;"
+					>
 						<template #reference>
-							<span class="icon"><svg-icon name="more" size="16" /></span>
+							<span @click.stop class="icon"><svg-icon name="more" size="16" /></span>
 						</template>
-						<div class="button-box">
-							<div class="rename-btn">Rename</div>
-							<div class="delete-btn">Delete</div>
+						<div class="history-item-menu">
+							<div class="rename" @click="onRenameHistoryItem(item)">Rename</div>
+							<div class="delete" @click="onDeleteHistoryItem(item)">Delete</div>
 						</div>
 					</el-popover>
 				</div>
@@ -50,6 +63,7 @@
 	const route = useRoute()
 	const router = useRouter()
 	import { useGlobalStore } from '@/stores'
+	const id = computed(() => route.params.id)
 	const globalStore = useGlobalStore()
 	const isCollapse = computed(() => globalStore.state.homeLeftNavCollapse)
 	const onCollapse = () => {
@@ -93,13 +107,27 @@
 	const onHome = () => {
 		console.log('onHome')
 	}
+	const onCanvas = () => {
+		router.push({ name: 'canvas' })
+	}
 	const onHistory = () => {
 		showHistory.value = !showHistory.value
 	}
 	const onClickHistoryItem = (item: any) => {
-		console.log(item)
 		router.push({ name: 'test', params: { id: item.id } })
 	}
+	const onRenameHistoryItem = (item: any) => {
+		// const index = historyList.value.findIndex((i: any) => i.id == item.id)
+		// if (index != -1) {
+		// }
+	}
+	const onDeleteHistoryItem = (item: any) => {
+		console.log(item)
+		const index = historyList.value.findIndex((i: any) => i.id == item.id)
+		if (index != -1) {
+			historyList.value.splice(index, 1)
+		}
+	}
 </script>

 <style lang="less" scoped>
@@ -131,7 +159,7 @@
 				margin-right: 1rem;
 			}
 			> .logo-text {
-				font-family: Mazzard;
+				font-family: SemiBold;
 				font-weight: 600;
 				font-size: 3rem;
 				margin-right: auto;
@@ -204,14 +232,19 @@
 				> .title {
 					font-weight: 600;
 					font-size: 1.6rem;
+					font-family: SemiBold;
 				}
 				> .box {
+					font-family: Regular;
 					border-radius: 0.8rem;
 					cursor: pointer;
 					&.active,
 					&:hover {
 						background-color: rgba(0, 0, 0, 0.06);
 					}
+					&.active {
+						font-family: SemiBold;
+					}
 					> .label {
 						flex: 1;
 						font-weight: 400;
@@ -220,8 +253,28 @@
 						white-space: nowrap;
 						overflow: hidden;
 					}
+					> .icon {
+						width: 2.5rem;
+						height: 2.5rem;
+					}
 				}
 			}
 		}
 	}
+	.history-item-menu {
+		user-select: none;
+		> div {
+			cursor: pointer;
+			padding: 0.5rem 1rem;
+			&:hover {
+				background-color: rgba(0, 0, 0, 0.06);
+			}
+		}
+		> .rename {
+			color: #409eff;
+		}
+		> .delete {
+			color: #ff4d4f;
+		}
+	}
 </style>
--- a/src/views/home/test.vue
+++ b/src/views/home/test.vue
@@ -1,6 +1,6 @@
 <template>
 	<div class="test">
-		<p>老八秘制小汉堡 - {{ id }}</p>
+		<p>Conversation Item - {{ id }}</p>
 	</div>
 </template>

@@ -13,10 +13,9 @@

 <style lang="less" scoped>
 	.test {
-		flex: 1;
-		margin: 10px;
-		border-radius: 10px;
-		// background-color: rgb(242, 130, 90);
+		margin: 2rem;
+		border-radius: 2rem;
+		background-color: rgb(242, 130, 90);
 		display: flex;
 		align-items: center;
 		justify-content: center;
--- a/src/views/home/top-nav.vue
+++ b/src/views/home/top-nav.vue
@@ -68,7 +68,7 @@
 			height: 4.3rem;
 			margin-right: 1rem;
 			background-color: rgba(255, 252, 244, 1);
-			border: 1px solid rgba(233, 121, 60, 1);
+			border: 1px solid #FFCF90;
 			border-radius: 0.8rem;
 			> .credits {
 				flex: 1;
@@ -78,7 +78,7 @@
 			> .link {
 				height: 100%;
 				width: 0;
-				border-right: 1px solid rgba(233, 121, 60, 1);
+				border-right: 1px solid #FFCF90;
 			}
 			> .icon {
 				cursor: pointer;
--- a/src/views/login/css/style.css
+++ b/src/views/login/css/style.css
@@ -3,7 +3,6 @@
  width: 100%;
  height: 100%;
  overflow: hidden;
-  padding: 2.5rem;
  display: flex;
  user-select: none;
 }
@@ -19,18 +18,14 @@
  width: 100%;
  height: 100%;
  object-fit: cover;
-  border-radius: 2rem;
 }
 .register > .left > .logo,
 .login > .left > .logo {
  position: absolute;
-  top: 2.4rem;
-  left: 4.2rem;
-}
-.register > .left > .logo > img,
-.login > .left > .logo > img {
-  width: 6rem;
-  height: auto;
+  top: 3.2rem;
+  left: 3.8rem;
+  width: auto;
+  height: 2.5rem;
 }
 .register > .left > .logo > span,
 .login > .left > .logo > span {
@@ -40,22 +35,26 @@
 }
 .register > .right,
 .login > .right {
-  width: 90rem;
+  width: 99rem;
  min-width: 600px;
  display: flex;
  flex-direction: column;
+  background-image: url('@/assets/images/login/right-bg.png');
+  background-size: auto 100%;
+  background-position: left center;
+  background-repeat: no-repeat;
 }
 .register > .right > .top,
 .login > .right > .top {
  display: flex;
-  padding: 0 3rem;
+  padding: 3rem 0 0 3rem;
 }
 .register > .right > .top > .back,
 .login > .right > .top > .back {
  width: 5rem;
  height: 5rem;
  border-radius: 1.2rem;
-  border: 0.25rem solid #dfdfdf;
+  border: 0.25rem solid #252727;
  background-color: transparent;
  cursor: pointer;
 }
@@ -71,8 +70,8 @@
 }
 .register > .right > .box > img,
 .login > .right > .box > img {
-  width: 11rem;
-  height: auto;
+  width: auto;
+  height: 12rem;
  margin-top: 2rem;
 }
 .register > .right > .box > .visible-code,
@@ -83,32 +82,35 @@
 .register > .right > .box > .title,
 .login > .right > .box > .title {
  font-weight: 600;
-  font-size: 7rem;
+  font-size: 6.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #252727;
-  margin-top: 1.7rem;
 }
-.register > .right > .box > .title > img,
-.login > .right > .box > .title > img {
-  width: auto;
-  height: 9.8rem;
+.register > .right > .box > .title::v-deep > *,
+.login > .right > .box > .title::v-deep > * {
+  margin-left: 1rem;
+  font-family: LBold;
+  margin-bottom: -1rem;
 }
 .register > .right > .box > .tip,
 .login > .right > .box > .tip {
  font-weight: 400;
-  font-family: General Sans Variable;
-  font-style: Regular;
+  font-family: Regular;
  font-size: 1.8rem;
  color: #666;
-  margin-top: 0.4rem;
+  margin-top: 0.5rem;
 }
 .register > .right > .box > .el-form,
 .login > .right > .box > .el-form {
  margin-top: 5rem;
  width: 100%;
 }
+.register > .right > .box > .el-form::v-deep,
+.login > .right > .box > .el-form::v-deep {
+  font-family: Regular;
+}
 .register > .right > .box > .el-form::v-deep .el-form-item,
 .login > .right > .box > .el-form::v-deep .el-form-item {
  margin-bottom: 2rem;
@@ -118,6 +120,7 @@
  color: #252727;
  font-size: 1.8rem;
  margin-bottom: 0.8rem;
+  font-family: Medium;
 }
 .register > .right > .box > .el-form::v-deep .el-input,
 .login > .right > .box > .el-form::v-deep .el-input {
@@ -167,12 +170,14 @@
  border-radius: 0.8rem;
  color: #fff;
  font-weight: 600;
+  font-family: SemiBold;
 }
 .register > .right > .box > .tip-2,
 .login > .right > .box > .tip-2 {
  font-weight: 400;
  font-size: 1.6rem;
  color: #666;
+  font-family: Regular;
 }
 .register > .right > .box > .tip-2::v-deep > span,
 .login > .right > .box > .tip-2::v-deep > span {
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -1,10 +1,15 @@
 <template>
-	<div class="index background-pink">
+	<div class="index">
 		<div class="header">
+			<span class="tip">{{ $t('AlphaVersion') }}</span>
+			<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="login" @click="onLogin">{{ $t('Login.login') }}</button>
+			<button class="register" @click="onRegister">{{ $t('Login.signUp') }}</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" />
+		<div class="tip">{{ $t('Login.indexTip') }}</div>
 	</div>
 </template>

@@ -26,6 +31,9 @@
 		height: 100%;
 		overflow: hidden;
 		position: relative;
+		background-image: url('@/assets/images/login/index-bg.png');
+		background-size: cover;
+		background-position: center;
 		> .header {
 			position: absolute;
 			top: 3rem;
@@ -33,7 +41,22 @@
 			width: 100%;
 			display: flex;
 			justify-content: center;
-			align-items: center;
+			// align-items: center;
+			> .tip {
+				position: absolute;
+				width: 100%;
+				top: 0;
+				left: 0;
+				font-size: 3rem;
+				text-align: center;
+				font-family: Regular;
+				color: #fff;
+			}
+			> .logo {
+				width: auto;
+				height: 2.5rem;
+				margin-left: 3.8rem;
+			}
 			> .split {
 				margin: 0 auto;
 			}
@@ -47,18 +70,43 @@
 				font-size: 2.2rem;
 				font-weight: 600;
 				font-family: SemiBold;
+				border: 0.2rem solid #fff;
 				&:active {
 					opacity: 0.8;
 				}
 			}
 			> .login {
-				background-color: #ff7a51;
-				color: #fff;
+				background-color: #fff;
+				color: #713e1f;
 			}
 			> .register {
-				background-color: #fff;
-				color: #232323;
+				background-color: transparent;
+				color: #ffffff;
+				backdrop-filter: blur(10px);
 			}
 		}
+		> .zhuangshi,
+		> .title,
+		> .tip {
+			position: absolute;
+			left: 50%;
+			transform: translateX(-50%);
+		}
+		> .title {
+			width: 55%;
+			height: auto;
+			top: 20.5rem;
+		}
+		> .zhuangshi {
+			width: 21.5rem;
+			height: auto;
+			bottom: 13.4rem;
+		}
+		> .tip {
+			font-size: 2.8rem;
+			font-family: Regular;
+			color: #fff;
+			bottom: 8rem;
+		}
 	}
 </style>
--- a/src/views/login/less/style.less
+++ b/src/views/login/less/style.less
@@ -3,7 +3,6 @@
 	width: 100%;
 	height: 100%;
 	overflow: hidden;
-	padding: 2.5rem;
 	display: flex;
 	user-select: none;

@@ -17,18 +16,14 @@
 			width: 100%;
 			height: 100%;
 			object-fit: cover;
-			border-radius: 2rem;
 		}

 		>.logo {
 			position: absolute;
-			top: 2.4rem;
-			left: 4.2rem;
-
-			>img {
-				width: 6rem;
-				height: auto;
-			}
+			top: 3.2rem;
+			left: 3.8rem;
+			width: auto;
+			height: 2.5rem;

 			>span {
 				font-weight: 600;
@@ -39,20 +34,24 @@
 	}

 	>.right {
-		width: 90rem;
+		width: 99rem;
 		min-width: 600px;
 		display: flex;
 		flex-direction: column;
+		background-image: url('@/assets/images/login/right-bg.png');
+		background-size: auto 100%;
+		background-position: left center;
+		background-repeat: no-repeat;

 		>.top {
 			display: flex;
-			padding: 0 3rem;
+			padding: 3rem 0 0 3rem;

 			>.back {
 				width: 5rem;
 				height: 5rem;
 				border-radius: 1.2rem;
-				border: 0.25rem solid rgba(223, 223, 223, 1);
+				border: 0.25rem solid #252727;
 				background-color: transparent;
 				cursor: pointer;
 			}
@@ -68,8 +67,8 @@
 			align-items: center;

 			>img {
-				width: 11rem;
-				height: auto;
+				width: auto;
+				height: 12rem;
 				margin-top: 2rem;
 			}

@@ -80,26 +79,25 @@

 			>.title {
 				font-weight: 600;
-				font-size: 7rem;
+				font-size: 6.1rem;
 				display: flex;
 				align-items: center;
 				justify-content: center;
 				color: #252727;
-				margin-top: 1.7rem;

-				>img {
-					width: auto;
-					height: 9.8rem;
+				&::v-deep>* {
+					margin-left: 1rem;
+					font-family: LBold;
+					margin-bottom: -1rem;
 				}
 			}

 			>.tip {
 				font-weight: 400;
-				font-family: General Sans Variable;
-				font-style: Regular;
+				font-family: Regular;
 				font-size: 1.8rem;
 				color: #666;
-				margin-top: 0.4rem;
+				margin-top: 0.5rem;
 			}

 			>.el-form {
@@ -107,6 +105,8 @@
 				width: 100%;

 				&::v-deep {
+					font-family: Regular;
+
 					.el-form-item {
 						margin-bottom: 2rem;
 					}
@@ -115,6 +115,7 @@
 						color: #252727;
 						font-size: 1.8rem;
 						margin-bottom: 0.8rem;
+						font-family: Medium;
 					}

 					.el-input {
@@ -167,6 +168,7 @@
 						border-radius: 0.8rem;
 						color: #fff;
 						font-weight: 600;
+						font-family: SemiBold;
 					}
 				}
 			}
@@ -175,6 +177,7 @@
 				font-weight: 400;
 				font-size: 1.6rem;
 				color: #666;
+				font-family: Regular;

 				&::v-deep>span {
 					text-decoration: underline;
--- a/src/views/login/login.vue
+++ b/src/views/login/login.vue
@@ -2,10 +2,7 @@
 	<div class="login">
 		<div class="left">
 			<img class="bg" src="@/assets/images/login/left-bg.png" />
-			<div class="logo">
-				<img src="@/assets/images/logo.png" />
-				<span>FiDA</span>
-			</div>
+			<img class="logo" src="@/assets/images/logo-1.png" />
 		</div>
 		<div class="right">
 			<div class="top">
@@ -16,11 +13,8 @@
 			<div class="box">
 				<img src="@/assets/images/login/elephant.png" />
 				<template v-if="!isVisible">
-					<div class="title">
-						<span>{{ $t('Login.LoginTo') }}</span>
-						<img src="@/assets/images/logo-2.png" />
-					</div>
-					<div class="tip">{{ $t('Login.LoginTitle') }}</div>
+					<div class="title" v-html="$t('Login.loginTo')"></div>
+					<div class="tip">{{ $t('Login.loginTitle') }}</div>
 					<el-form :model="formData" :rules="ruleForm" label-position="top" ref="formRef">
 						<el-form-item :label="$t('Login.email')" prop="email">
 							<el-input
@@ -48,7 +42,7 @@
 						</el-form-item>
 						<el-form-item>
 							<el-button class="submit" type="primary" @click="onSubmit">{{
-								$t('Login.Login')
+								$t('Login.login')
 							}}</el-button>
 						</el-form-item>
 					</el-form>
@@ -99,7 +93,7 @@
 	}
 	const onVerifyCode = (code: string) => {
 		console.log(code)
-		router.push({ name: 'home' })
+		router.push({ name: 'mainInput' })
 	}
 </script>

--- a/src/views/login/other-login.vue
+++ b/src/views/login/other-login.vue
@@ -30,7 +30,7 @@
 			align-items: center;
 			justify-content: center;
 			font-size: 1.6rem;
-
+			font-family: Regular;
 			&::before,
 			&::after {
 				content: '';
--- a/src/views/login/register.vue
+++ b/src/views/login/register.vue
@@ -2,10 +2,7 @@
 	<div class="register">
 		<div class="left">
 			<img class="bg" src="@/assets/images/login/left-bg.png" />
-			<div class="logo">
-				<img src="@/assets/images/logo.png" />
-				<span>FiDA</span>
-			</div>
+			<img class="logo" src="@/assets/images/logo-1.png" />
 		</div>
 		<div class="right">
 			<div class="top">
@@ -16,14 +13,15 @@
 			<div class="box">
 				<img src="@/assets/images/login/elephant.png" />
 				<template v-if="!isVisible">
-					<div class="title">
-						<span>{{ $t('Login.registerFor') }}</span>
-						<img src="@/assets/images/logo-2.png" />
-					</div>
+					<div class="title" v-html="$t('Login.signUpFor')"></div>
 					<div class="tip">{{ $t('Login.registerTip') }}</div>
 					<el-form :model="formData" :rules="ruleForm" label-position="top" ref="formRef">
 						<el-form-item :label="$t('Login.name')" prop="name">
-							<el-input name="name" v-model="formData.name" :placeholder="$t('Login.enterName')" />
+							<el-input
+								name="name"
+								v-model="formData.name"
+								:placeholder="$t('Login.enterName')"
+							/>
 						</el-form-item>
 						<el-form-item :label="$t('Login.password')" prop="password">
 							<el-input
@@ -47,7 +45,9 @@
 							</el-checkbox>
 						</el-form-item>
 						<el-form-item>
-							<el-button class="submit" type="primary" @click="onSubmit">{{ $t('Login.register') }}</el-button>
+							<el-button class="submit" type="primary" @click="onSubmit">{{
+								$t('Login.register')
+							}}</el-button>
 						</el-form-item>
 					</el-form>
 					<div class="tip-2" v-html="$t('Login.havenAccountToLogin')"></div>
--- a/src/views/login/visible-code.vue
+++ b/src/views/login/visible-code.vue
@@ -44,7 +44,7 @@
 		clearTime()
 	})
 	onMounted(() => {
-		setTime(5)
+		setTime()
 	})
 	const onResend = () => {
 		if (time.value > 0) return
@@ -66,14 +66,16 @@
 			font-weight: 600;
 			font-size: 4rem;
 			color: #252727;
+			font-family: SemiBold;
 		}
 		> .tip {
 			margin-top: 2rem;
 			font-size: 1.8rem;
 			color: #666;
-			> span {
+			font-family: Regular;
+			&::v-deep > span {
 				color: #252727;
-				font-weight: 600;
+				font-family: Medium;
 			}
 		}
 		> .input-code {
@@ -87,17 +89,20 @@
 			border-radius: 0.8rem;
 			color: #fff;
 			font-weight: 600;
+			font-family: SemiBold;
 		}
 		> .time {
 			user-select: none;
 			margin-top: 2rem;
 			font-size: 1.6rem;
 			color: #666;
+			font-family: Regular;
 			> span {
 				color: #ff7a50;
 				text-decoration: underline;
 				cursor: pointer;
 				font-weight: 500;
+				font-family: Medium;
 			}
 		}
 	}
--- a/src/views/nuic/index.vue
+++ b/src/views/nuic/index.vue
@@ -1,10 +1,7 @@
 <template>
 	<div class="nuic background-pink">
-		<div class="logo">
-			<img src="@/assets/images/logo.png" />
-			<span>FiDA</span>
-		</div>
-		<div class="header">
+		<img class="logo" src="@/assets/images/logo-2.png" />
+		<div class="header" v-show="!loading">
 			<div class="close" @click="onClose">
 				<svg-icon name="close-border" size="33" />
 			</div>
@@ -15,10 +12,18 @@
 				:key="i"
 				:state="active === i ? 1 : active > i ? 0 : 2"
 			>
-				<img v-show="i === active" src="@/assets/images/nuic/nav-active.png" draggable="false" />
+				<img
+					v-show="i === active"
+					src="@/assets/images/nuic/nav-active.png"
+					draggable="false"
+				/>
 			</div>
 		</div>
-		<component class="view" :is="list[active]" @next="onNext" />
+		<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>
+		</div>
 	</div>
 </template>

@@ -32,15 +37,19 @@
 	const route = useRoute()
 	const active = computed(() => Number(route.query.index || 0))
 	const list = markRaw([nuic1, nuic2, nuic3])
+	const loading = ref(false)
 	const onClose = () => {
-		router.push({ name: 'home' })
+		router.push({ name: 'mainInput' })
 	}
 	const onNext = () => {
 		const index = active.value + 1
 		if (index < list.length) {
 			router.push({ query: { index } })
 		} else {
-			router.push({ name: 'home' })
+			loading.value = true
+			setTimeout(() => {
+				router.push({ name: 'mainInput' })
+			}, 1000)
 		}
 	}
 </script>
@@ -57,18 +66,10 @@
 		// justify-content: center;
 		> .logo {
 			position: absolute;
-			top: 3.8rem;
-			left: 3.8rem;
-
-			> img {
-				width: 6rem;
-				height: auto;
-			}
-
-			> span {
-				font-weight: 600;
-				font-size: 3.3rem;
-			}
+			top: 2.7rem;
+			left: 3.6rem;
+			width: auto;
+			height: 2.4rem;
 		}
 		> .header {
 			margin-top: 5rem;
@@ -133,6 +134,7 @@
 					cursor: pointer;
 					margin-right: 3.4rem;
 					background-color: #fff;
+					font-family: SemiBold;
 					&:last-child {
 						margin-right: 0;
 					}
@@ -145,5 +147,19 @@
 				}
 			}
 		}
+		> .loading {
+			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;
+			}
+		}
 	}
 </style>
--- a/src/views/nuic/nuic-1.vue
+++ b/src/views/nuic/nuic-1.vue
@@ -17,7 +17,7 @@
 	const router = useRouter()
 	const emit = defineEmits(['next'])
 	const onSkip = () => {
-		router.push({ name: 'home' })
+		router.push({ name: 'mainInput' })
 	}
 </script>

@@ -39,6 +39,7 @@
 			margin-bottom: 2rem;
 			&::v-deep > b {
 				font-size: 4.8rem;
+				font-family: MBold;
 			}
 		}
 		> .tip {
@@ -46,6 +47,7 @@
 			font-size: 2rem;
 			color: #585858;
 			margin-bottom: 8.7rem;
+			font-family: Regular;
 		}
 	}
 </style>
--- a/src/views/nuic/nuic-2.vue
+++ b/src/views/nuic/nuic-2.vue
@@ -10,11 +10,11 @@
 			</div>
 		</div>
 		<div class="btns">
+			<button class="next" @click="emit('next')">{{ $t('Nuic.next') }}</button>
 			<button class="more" @click="onLoadMore">
 				<span>{{ $t('Nuic.loadMore') }}</span>
 				<div><svg-icon name="refresh-single" size="24" /></div>
 			</button>
-			<button class="next" @click="emit('next')">{{ $t('Nuic.next') }}</button>
 		</div>
 	</div>
 </template>
@@ -45,6 +45,7 @@
 			margin-bottom: 6rem;
 			&::v-deep > b {
 				font-size: 4.8rem;
+				font-family: MBold;
 			}
 		}
 		> .list {
@@ -85,6 +86,7 @@
 						color: #fff;
 						margin-bottom: 1rem;
 						text-shadow: 1px 1px 4.7px #d9692b;
+						font-family: SemiBold;
 					}
 				}
 			}
--- a/src/views/nuic/nuic-3.vue
+++ b/src/views/nuic/nuic-3.vue
@@ -5,13 +5,25 @@
 		<div class="select-item">
 			<div class="title">{{ $t('Nuic.basedIn') }}</div>
 			<el-select v-model="data.based">
-				<el-option v-for="v in data.basedList" :key="v.value" :label="v.label" :value="v.value" />
+				<el-option
+					class="el-select__option"
+					v-for="v in data.basedList"
+					:key="v.value"
+					:label="v.label"
+					:value="v.value"
+				/>
 			</el-select>
 		</div>
 		<div class="select-item">
 			<div class="title">{{ $t('Nuic.role') }}</div>
 			<el-select v-model="data.role">
-				<el-option v-for="v in data.roleList" :key="v.value" :label="v.label" :value="v.value" />
+				<el-option
+					class="el-select__option"
+					v-for="v in data.roleList"
+					:key="v.value"
+					:label="v.label"
+					:value="v.value"
+				/>
 			</el-select>
 		</div>
 		<div class="btns">
@@ -49,8 +61,9 @@
 			font-weight: 500;
 			font-size: 4rem;
 			margin-bottom: 9.8rem;
-			> b {
+			&::v-deep > b {
 				font-size: 4.8rem;
+				font-family: MBold;
 			}
 		}
 		> .select-item {
@@ -58,15 +71,17 @@
 			width: 50rem;
 			text-align: left;
 			> .title {
-				margin-bottom: 3rem;
+				margin-bottom: 1.5rem;
 				font-size: 3.6rem;
 				font-weight: 800;
 				color: #252727;
+				font-family: LBold;
 			}
 			> .el-select {
 				width: 100%;
 				--el-border-radius-base: 0.8rem;
 				&::v-deep {
+					font-family: Regular;
 					.el-select__wrapper {
 						min-height: auto;
 						height: 6rem;
@@ -80,4 +95,8 @@
 			margin-top: 15.8rem;
 		}
 	}
+
+	.el-select__option {
+		padding: 0 1.8rem;
+	}
 </style>