更新 .gitea/workflows/prod_build_schedule.yaml

.gitea/workflows/develop_build_commit.yaml

@@ -0,0 +1,90 @@
+name: git commit 控制 AiDA WEB-Node.js 开发分支构建部署
+on:
+  workflow_dispatch:
+
+  push:
+    branches:
+      - dev_vite
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    if: "contains(github.event.head_commit.message, '[run build]')"
+
+    strategy:
+      matrix:
+        node-version: [ 18.18.0 ]
+    env:
+      REMOTE_DEPLOY_PATH: /workspace/workspace_aida/DevelopVersion/develop-aida-web-front
+
+    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: dev_vite
+
+      - name: 2.设置 Node.js 环境
+        uses: actions/setup-node@v6
+        with:
+          node-version: ${{ matrix.node-version }}
+      - run: npm install
+      - run: npm run build:dev
+      - 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 重载命令已发送。"
+
+      - name: 5.发送构建结果邮件
+        if: always() # 无论上一步是否失败，都执行此步骤
+        uses: dawidd6/action-send-mail@v3
+        with:
+
+          from: ${{ secrets.MAIL_USERNAME }}
+          # --- 邮件配置 ---
+          server_address: smtp.gmail.com # 替换为你的SMTP服务器地址
+          server_port: 465 # 替换为你的SMTP端口 (通常是465或587)
+          username: ${{ secrets.MAIL_USERNAME }} # 存储在Secrets中的邮箱用户名
+          password: ${{ secrets.MAIL_PASSWORD }} # 存储在Secrets中的邮箱密码
+          subject: 'Gitea Actions 构建通知: ${{ job.status }} - AiDA back-java Develop'
+          # 收件人列表，可以根据需要更改
+          to: 'xupei3360@163.com,txli@aidlab.hk,cgzhou@aidlab.hk,zchengrong@yeah.net' # 替换为实际收件人邮箱
+
+          # --- 邮件正文内容 ---
+          body: |
+            项目: AiDA back-java Develop
+            分支: dev/3.1_release_merge
+            
+            🎉 构建结果: ${{ job.status }}
+            
+            📅 构建时间: ${{ steps.build_start_time.outputs.current_time }}
+            
+            🔗 构建链接: ${{ gitea.server_url }}/${{ gitea.repository.owner.name }}/${{ gitea.repository.name }}/actions/runs/${{ gitea.run_id }}
+
+          # 确保邮件内容为纯文本，或者你可以设置为 html: true 并调整 body
+          content_type: text/plain

.gitea/workflows/develop_build_manual.yaml

@@ -0,0 +1,85 @@
+name: 手动触发 AiDA 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_aida/DevelopVersion/develop-aida-web-front
+
+    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: dev_vite
+
+      - name: 2.设置 Node.js 环境
+        uses: actions/setup-node@v6
+        with:
+          node-version: ${{ matrix.node-version }}
+      - run: npm install
+      - run: npm run build:dev
+      - 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 重载命令已发送。"
+
+      - name: 5.发送构建结果邮件
+        if: always() # 无论上一步是否失败，都执行此步骤
+        uses: dawidd6/action-send-mail@v3
+        with:
+
+          from: ${{ secrets.MAIL_USERNAME }}
+          # --- 邮件配置 ---
+          server_address: smtp.gmail.com # 替换为你的SMTP服务器地址
+          server_port: 465 # 替换为你的SMTP端口 (通常是465或587)
+          username: ${{ secrets.MAIL_USERNAME }} # 存储在Secrets中的邮箱用户名
+          password: ${{ secrets.MAIL_PASSWORD }} # 存储在Secrets中的邮箱密码
+          subject: 'Gitea Actions 构建通知: ${{ job.status }} - AiDA back-java Develop'
+          # 收件人列表，可以根据需要更改
+          to: 'xupei3360@163.com,txli@aidlab.hk,cgzhou@aidlab.hk,zchengrong@yeah.net' # 替换为实际收件人邮箱
+
+          # --- 邮件正文内容 ---
+          body: |
+            项目: AiDA back-java Develop
+            分支: dev/3.1_release_merge
+            
+            🎉 构建结果: ${{ job.status }}
+            
+            📅 构建时间: ${{ steps.build_start_time.outputs.current_time }}
+            
+            🔗 构建链接: ${{ gitea.server_url }}/${{ gitea.repository.owner.name }}/${{ gitea.repository.name }}/actions/runs/${{ gitea.run_id }}
+
+          # 确保邮件内容为纯文本，或者你可以设置为 html: true 并调整 body
+          content_type: text/plain

.gitea/workflows/prod_build_manual.yaml

@@ -0,0 +1,78 @@
+name: AiDA WEB-Node.js 生产分支构建部署
+on:
+  workflow_dispatch:
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [ 18.18.0 ]
+
+    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: StableVersion
+
+      - 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.5. 手动安装 AWS CLI v2 # 新增步骤：确保 aws 命令可用
+        run: |
+          echo "安装 AWS CLI V2..."
+          curl "https://awscli.amazonaws.com/awscli-exe-linux-x86_64.zip" -o "awscliv2.zip"
+          unzip awscliv2.zip
+          sudo ./aws/install --update
+          aws --version
+          echo "AWS CLI V2 安装完成。"
+
+      - name: 4.配置 AWS 凭证
+        uses: aws-actions/configure-aws-credentials@main
+        with:
+          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
+          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+          aws-region: 'ap-east-1'
+
+      - name: 5.同步 dist 目录到 S3
+        run: |
+          aws s3 sync dist/ s3://${{ secrets.S3_BUCKET_NAME }}/ --acl public-read
+
+      - name: 6.发送构建结果邮件
+        if: always() # 无论上一步是否失败，都执行此步骤
+        uses: dawidd6/action-send-mail@v3
+        with:
+
+          from: ${{ secrets.MAIL_USERNAME }}
+          # --- 邮件配置 ---
+          server_address: smtp.gmail.com # 替换为你的SMTP服务器地址
+          server_port: 465 # 替换为你的SMTP端口 (通常是465或587)
+          username: ${{ secrets.MAIL_USERNAME }} # 存储在Secrets中的邮箱用户名
+          password: ${{ secrets.MAIL_PASSWORD }} # 存储在Secrets中的邮箱密码
+          subject: 'Gitea Actions 构建通知: ${{ job.status }} - AiDA back-java Develop'
+          # 收件人列表，可以根据需要更改
+          to: 'xupei3360@163.com,txli@aidlab.hk,cgzhou@aidlab.hk,zchengrong@yeah.net' # 替换为实际收件人邮箱
+
+          # --- 邮件正文内容 ---
+          body: |
+            项目: AiDA back-java Develop
+            分支: dev/3.1_release_merge
+            
+            🎉 构建结果: ${{ job.status }}
+            
+            📅 构建时间: ${{ steps.build_start_time.outputs.current_time }}
+            
+            🔗 构建链接: ${{ gitea.server_url }}/${{ gitea.repository.owner.name }}/${{ gitea.repository.name }}/actions/runs/${{ gitea.run_id }}
+
+          # 确保邮件内容为纯文本，或者你可以设置为 html: true 并调整 body
+          content_type: text/plain

.gitea/workflows/prod_build_schedule.yaml

@@ -0,0 +1,81 @@
+name: AiDA WEB-Node.js 生产分支构建部署
+on:
+  schedule:
+    #       cron为UTC时区，构建时间=部署时间-8小时 {*分 (-8)时 *日 *月  *周}  ---
+    #      示例： 1月1日22点22分触发构建 cron写作 - '22 14 1 1 *'
+    - cron: '00 14 23 3 *'
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [ 18.18.0 ]
+
+    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: StableVersion
+
+      - 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.5. 手动安装 AWS CLI v2 # 新增步骤：确保 aws 命令可用
+        run: |
+          echo "安装 AWS CLI V2..."
+          curl "https://awscli.amazonaws.com/awscli-exe-linux-x86_64.zip" -o "awscliv2.zip"
+          unzip awscliv2.zip
+          sudo ./aws/install --update
+          aws --version
+          echo "AWS CLI V2 安装完成。"
+
+      - name: 4.配置 AWS 凭证
+        uses: aws-actions/configure-aws-credentials@main
+        with:
+          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
+          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+          aws-region: 'ap-east-1'
+
+      - name: 5.同步 dist 目录到 S3
+        run: |
+          aws s3 sync dist/ s3://${{ secrets.S3_BUCKET_NAME }}/ --acl public-read
+
+      - name: 6.发送构建结果邮件
+        if: always() # 无论上一步是否失败，都执行此步骤
+        uses: dawidd6/action-send-mail@v3
+        with:
+
+          from: ${{ secrets.MAIL_USERNAME }}
+          # --- 邮件配置 ---
+          server_address: smtp.gmail.com # 替换为你的SMTP服务器地址
+          server_port: 465 # 替换为你的SMTP端口 (通常是465或587)
+          username: ${{ secrets.MAIL_USERNAME }} # 存储在Secrets中的邮箱用户名
+          password: ${{ secrets.MAIL_PASSWORD }} # 存储在Secrets中的邮箱密码
+          subject: 'Gitea Actions 构建通知: ${{ job.status }} - AiDA back-java Develop'
+          # 收件人列表，可以根据需要更改
+          to: 'cgzhou@aidlab.hk,zchengrong@yeah.net' # 替换为实际收件人邮箱
+
+          # --- 邮件正文内容 ---
+          body: |
+            项目: AiDA WEB-Node.js 生产分支构建部署
+            分支: StableVersion
+            
+            🎉 构建结果: ${{ job.status }}
+            
+            📅 构建时间: ${{ steps.build_start_time.outputs.current_time }}
+            
+            🔗 构建链接: ${{ gitea.server_url }}/${{ gitea.repository.owner.name }}/${{ gitea.repository.name }}/actions/runs/${{ gitea.run_id }}
+
+          # 确保邮件内容为纯文本，或者你可以设置为 html: true 并调整 body
+          content_type: text/plain

.gitea/workflows/research_build_manual.yaml

@@ -0,0 +1,85 @@
+name: 手动触发 AiDA 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_aida/Research/research-aida-web-front
+
+    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: research
+
+      - name: 2.设置 Node.js 环境
+        uses: actions/setup-node@v6
+        with:
+          node-version: ${{ matrix.node-version }}
+      - run: npm install
+      - run: npm run build:dev
+      - 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 重载命令已发送。"
+
+      - name: 5.发送构建结果邮件
+        if: always() # 无论上一步是否失败，都执行此步骤
+        uses: dawidd6/action-send-mail@v3
+        with:
+
+          from: ${{ secrets.MAIL_USERNAME }}
+          # --- 邮件配置 ---
+          server_address: smtp.gmail.com # 替换为你的SMTP服务器地址
+          server_port: 465 # 替换为你的SMTP端口 (通常是465或587)
+          username: ${{ secrets.MAIL_USERNAME }} # 存储在Secrets中的邮箱用户名
+          password: ${{ secrets.MAIL_PASSWORD }} # 存储在Secrets中的邮箱密码
+          subject: 'Gitea Actions 构建通知: ${{ job.status }} - AiDA back-java Develop'
+          # 收件人列表，可以根据需要更改
+          to: 'xupei3360@163.com,txli@aidlab.hk,cgzhou@aidlab.hk,zchengrong@yeah.net' # 替换为实际收件人邮箱
+
+          # --- 邮件正文内容 ---
+          body: |
+            项目: AiDA back-java Develop
+            分支: dev/3.1_release_merge
+            
+            🎉 构建结果: ${{ job.status }}
+            
+            📅 构建时间: ${{ steps.build_start_time.outputs.current_time }}
+            
+            🔗 构建链接: ${{ gitea.server_url }}/${{ gitea.repository.owner.name }}/${{ gitea.repository.name }}/actions/runs/${{ gitea.run_id }}
+
+          # 确保邮件内容为纯文本，或者你可以设置为 html: true 并调整 body
+          content_type: text/plain

src/assets/style/style.css

@@ -168,6 +168,7 @@ li {
 }
 .ant-modal-mask {
   background-color: #666666;
+  opacity: 0.5;
 }
 .select_block {
   height: 4rem;

src/assets/style/style.less

@@ -173,6 +173,7 @@ input:focus{
 }
 .ant-modal-mask{
 	background-color: #666666;
+	opacity: .5;
 }
 .select_block{
 	height: 4rem;

src/component/Detail/detailLeft/colorBox/index.vue

@@ -141,6 +141,7 @@ export default defineComponent({
 					JSON.stringify(colorData.selectDetail.color.gradient) == JSON.stringify(color?.gradient)
 					&& colorData.selectDetail.color.rgba?.r
 				){
+					console.log('---',index)
 					isNoSelect = true
 					colorData.selectColor = item
 					colorData.colorList.index = index
@@ -160,8 +161,8 @@ export default defineComponent({
 					if(color?.gradient){
 						item.gradient = color?.gradient
 					} 
-					colorData.colorList.index = index
-					colorData.selectColor = item
+					// colorData.colorList.index = index
+					// colorData.selectColor = item
 				}
 				colorData.colorList.list[newVal].push(item)
 			}

src/component/Detail/detailLeft/module/libraryList.vue

@@ -350,6 +350,7 @@ export default defineComponent({
 			margin-top: 1rem;
 			justify-content: space-between;
 			align-content: flex-start;
+			padding-bottom: 2rem;
 			// &::-webkit-scrollbar{display: none;}
 			> .content_img_item{
 				width: calc((50% - 1rem));
@@ -368,9 +369,12 @@ export default defineComponent({
 			> .material_content_list_loding{
 				width: 100%;
 				aspect-ratio: 1/1;
+				height: 4rem;
 				overflow: hidden;
 				> img{
 					width: 100%;
+					height: 100%;
+					object-fit: contain;
 				}
 			}
 		}

src/component/home/newProject/workspace.vue

@@ -38,7 +38,7 @@
 			</div>
 			<div class="style marginBottom" v-if="show.style">
 				<div class="text">{{$t('Habit.Style')}}：</div>
-				<div class="center">{{ selectObject?.styleName?selectObject?.styleName:'All' }}</div>
+				<div class="center">{{ selectObject?.styleName?selectObject?.styleName:$t('Header.All') }}</div>
 				<div class="gallery_btn" @click="setStyle">{{ $t('Habit.Select') }}</div>
 			</div>
 			<div class="style brand marginBottom">

src/component/mainPage/signUp/index.vue

@@ -2,50 +2,94 @@
   <div class="signUp">
     <div class="selectSignUp" v-show="!isSelectSignUp">
       <div class="titleTitle">{{ productList.Advantages }}</div>
-			<div class="selectMonthlyYearly" :class="[monthlyOrYearly == 'monthly' ? 'left' : 'right']">
+      <div
+        class="selectMonthlyYearly"
+        :class="[monthlyOrYearly == 'monthly' ? 'left' : 'right']"
+      >
         <div class="bg"></div>
-				<div class="leftText" @click="setMonthlyOrYearly('monthly')">{{ productList.Monthly }}</div>
-				<div class="rightText" @click="setMonthlyOrYearly('yearl')">{{ productList.Yearly }}</div>
+        <div class="leftText" @click="setMonthlyOrYearly('monthly')">
+          {{ productList.Monthly }}
+        </div>
+        <div class="rightText" @click="setMonthlyOrYearly('yearl')">
+          {{ productList.Yearly }}
+        </div>
       </div>
       <div class="gallery_list product_list">
-				<div class="gallery_item" v-for="item in productList[monthlyOrYearly]" :key="item">
+        <div
+          class="gallery_item"
+          v-for="item in productList[monthlyOrYearly]"
+          :key="item"
+          :class="[
+            { recommended: item.recommended },
+            { monthly: monthlyOrYearly === 'monthly' },
+            { yearly: monthlyOrYearly === 'yearl' },
+            { academic: item.type === 'academic' }
+          ]"
+        >
           <div class="product_signUp_box">
-						<img class="img" :src="item?.img" alt="">
+            <img class="img" :src="item?.img" alt="" />
             <div class="title">{{ item?.title }}</div>
-						<div class="info" :class="{academic:item.type == 'academic'}">{{ item?.info }}</div>
+            <div class="info" :class="{ academic: item.type == 'academic' }">
+              {{ item?.info }}
+            </div>
             <div class="price " v-if="item.type != 'academic'">
               <div>{{ item?.price }}</div>
-							<span :class="{yearl:monthlyOrYearly == 'yearl'}">{{ item?.detail }}</span>
+              <span
+                :class="[
+                  { yearl: monthlyOrYearly == 'yearl' },
+                  { personal: item.type === 'personal' }
+                ]"
+				style="white-space: nowrap;"
+              >
+                {{ item?.detail }}
+              </span>
             </div>
             <div class="price academic" v-if="item.type == 'academic'">
               <div>{{ item?.custom }}</div>
-							<span style="font-size: 1.4rem;">{{ item?.customInfo }}</span>
+              <span style="font-size: 1.4rem">{{ item?.customInfo }}</span>
             </div>
-						<ul class="product_detail" :class="{'academic':(item.type == 'academic' && !isSelectSuccessively)}">
+            <ul
+              class="product_detail"
+              :class="[
+                { academic: item.type == 'academic' && !isSelectSuccessively },
+                { chinese: isSelectSuccessively }
+              ]"
+            >
               <li v-for="detailItem in item?.detailList">{{ detailItem }}</li>
             </ul>
-						<div class="gallery_btn gallery_btn_radius" v-if="item?.btn != 'Contact us' && item?.btn != '联系我们'" @click="createAccount">{{ item?.btn }}</div>
-						<div class="gallery_btn gallery_btn_radius" v-else @click="handleContactUs">{{ item?.btn }}</div>
+            <div
+              class="gallery_btn gallery_btn_radius submit"
+              v-if="item?.btn != 'Contact us' && item?.btn != '联系我们'"
+              @click="createAccount"
+            >
+              {{ item?.btn }}
+            </div>
+            <div
+              class="gallery_btn gallery_btn_radius submit"
+              v-else
+              @click="handleContactUs"
+            >
+              {{ item?.btn }}
+            </div>
           </div>
           <div class="highlight" v-if="item?.highlight">{{ item?.highlight }}</div>
         </div>
       </div>
-
     </div>
     <registerModel ref="registerModel"></registerModel>
   </div>
 </template>
 <script>
-	import { defineComponent, ref, reactive, watch, onMounted, nextTick, toRefs } from "vue";
+import { defineComponent, ref, reactive, watch, onMounted, nextTick, toRefs } from 'vue'
 import registerModel from './registerModel.vue'
-import { message } from "ant-design-vue";
+import { message } from 'ant-design-vue'
 import CChargeIcon from '@/assets/icons/CCharge.svg'
 
 export default defineComponent({
   components: {
-		    registerModel,
+    registerModel
   },
-        name: "login",
+  name: 'login',
   props: ['isSelectSuccessively'],
   // emits: ['close'],
   setup(props, { emit }) {
@@ -62,122 +106,143 @@ import { message } from "ant-design-vue";
         Yearly: '年度',
         monthly: [
           {
-							title: "试用版",
+            title: '免费版',
             img: CChargeIcon,
             type: 'personal',
-							info: "您的AI时尚设计助手",
-							price: '100积分',
-							detail: "",
-							highlight: "",
+            info: '您的AI时尚设计助手',
+            price: 'HK$0',
+            detail: '5天·50积分',
+            highlight: '',
             discounts: '9折优惠',
             detailList: [
               '轻松充值积分',
               '可在公共化画廊分享设计并与设计师互动',
               '支持月付/年付选项',
               '适合个人创作者、独立设计师以及所有时尚爱好者',
-								'客户支持',
+              '客户支持'
             ],
-							btn: '立即开始',
+            btn: '立即开始'
           },
           {
-							title: "个人版",
+            title: '个人版',
             img: '/image/homeIntroduct/personal.png',
             type: 'personal',
-							info: "您的AI时尚设计助手",
+            info: '您的AI时尚设计助手',
             price: 'HK$100',
-							detail: "每月·500积分",
-							highlight: "",
+            detail: '每月·500积分',
+            highlight: '',
             discounts: '9折优惠',
             detailList: [
               '轻松充值积分',
               '可在公共化画廊分享设计并与设计师互动',
               '支持月付/年付选项',
               '适合个人创作者、独立设计师以及所有时尚爱好者',
-								'客户支持',
+              '客户支持'
             ],
-							btn: '立即开始',
+            btn: '订阅'
           },
           {
-							title: "个人专业版",
+            title: '个人专业版',
             img: '/image/homeIntroduct/personal.png',
             type: 'personal',
-							info: "您的AI时尚设计助手",
+            info: '您的AI时尚设计助手',
             price: 'HK$500',
-							detail: "每月·3500积分",
-							highlight: "推荐",
+            detail: '每月·3500积分',
+            highlight: '推荐',
+            recommended: true,
             discounts: '9折优惠',
             detailList: [
               '轻松充值积分',
               '可在公共画廊中分享设计并与设计师互动',
               '支持月付/年付选项',
               '适合个人创作者、独立设计师以及所有时尚爱好者',
-								'客户支持',
+              '客户支持'
             ],
-							btn: '立即开始',
-						},{
-							title: "教育版",
+            btn: '订阅'
+          },
+          {
+            title: '教育版',
             img: '/image/homeIntroduct/academic.png',
             type: 'academic',
-							info: "高校多用户管理系统",
+            info: '高校多用户管理系统',
             price: '',
-							detail: "",
+            detail: '',
             custom: '定制方案',
             customInfo: '可提供专属教育优惠，详情请联系我们',
-							highlight: "",
+            highlight: '',
             discounts: '',
             detailList: [
               '灵活的自定义程序以满足学校需求',
-								"项目期间每月信用额度自动续期",
+              '项目期间每月信用额度自动续期',
               '可在用户之间灵活共享和分配账户信用额度',
               'AI辅助设计教学功能',
-								"从设计灵感、草图创作到完整时装系列的尖端教学工具",
-								"基本3D设计功能",
-								"客户与技术支援",
+              '从设计灵感、草图创作到完整时装系列的尖端教学工具',
+              '基本3D设计功能',
+              '客户与技术支援'
             ],
-							btn: '联系我们',
-						},
+            btn: '联系我们'
+          }
         ],
         yearl: [
           {
-							title: "个人版",
+            title: '免费版',
+            img: CChargeIcon,
+            type: 'personal',
+            info: '您的AI时尚设计助手',
+            price: 'HK$0',
+            detail: '5天·50积分',
+            highlight: '',
+            discounts: '9折优惠',
+            detailList: [
+              '轻松充值积分',
+              '可在公共化画廊分享设计并与设计师互动',
+              '支持月付/年付选项',
+              '适合个人创作者、独立设计师以及所有时尚爱好者',
+              '客户支持'
+            ],
+            btn: '立即开始'
+          },
+          {
+            title: '个人版',
             img: '/image/homeIntroduct/personal.png',
             type: 'personal',
-							info: "您的AI时尚设计助手",
+            info: '您的AI时尚设计助手',
             price: 'HK$5,000',
-							detail: "每年·50000积分",
-							highlight: "免费试用5天",
+            detail: '每年·50000积分',
+            highlight: '',
             discounts: '9折优惠',
             detailList: [
               '灵活的自定义程序以满足学校需求',
               '可在用户之间灵活共享和分配账户信用额度',
               'AI辅助设计教学功能',
               '支持草图创意和设计灵感教学',
-								'基础3D设计功能',
+              '基础3D设计功能'
             ],
-							btn: '立即开始',
-						},{
-							title: "教育版",
+            btn: '订阅'
+          },
+          {
+            title: '教育版',
             img: '/image/homeIntroduct/academic.png',
             type: 'academic',
-							info: "高校多用户管理系统",
+            info: '高校多用户管理系统',
             price: '',
-							detail: "",
+            detail: '',
             custom: '定制方案',
             customInfo: '可提供专属教育优惠，详情请联系我们',
-							highlight: "",
+            highlight: '',
             discounts: '',
             detailList: [
               '灵活的自定义程序以满足学校需求',
-								"项目期间每月信用额度自动续期",
+              '项目期间每月信用额度自动续期',
               '可在用户之间灵活共享和分配账户信用额度',
               'AI辅助设计教学功能',
-								"从设计灵感、草图创作到完整时装系列的尖端教学工具",
-								"基本3D设计功能",
-								"客户与技术支援",
-							],
-							btn: '联系我们',
-						},
+              '从设计灵感、草图创作到完整时装系列的尖端教学工具',
+              '基本3D设计功能',
+              '客户与技术支援'
             ],
+            btn: '联系我们'
+          }
+        ]
       },
       productListEn: {
         Advantages: 'Our Pricing Plan',
@@ -185,68 +250,70 @@ import { message } from "ant-design-vue";
         Yearly: 'Yearly',
         monthly: [
           {
-							title:"Personal",
+            title: 'Free',
             img: CChargeIcon,
             type: 'personal',
-							info:"Your AI Fashion Design Assistant",
-							price:'100 credits',
-							detail:"",
-							highlight:"",
+            info: 'Your AI Fashion Design Assistant',
+            price: 'HK$0',
+            detail: '5 days · 50 credits',
+            highlight: '',
             discounts: '10% off',
             detailList: [
               'Easy to Top up Credits',
               'Option to Share Design and Interact with Designers in Public Gallery',
               'Support Monthly/Annual Payment Options',
               'Suitable for Individual Creator, Independent Designers and Fun for all Fashion Lovers',
-								'Customer and Technical Support',
+              'Customer and Technical Support'
             ],
-							btn:'Get Started',
+            btn: 'Get Started'
           },
           {
-							title:"Personal",
+            title: 'Personal',
             img: '/image/homeIntroduct/personal.png',
             type: 'personal',
-							info:"Your AI Fashion Design Assistant",
+            info: 'Your AI Fashion Design Assistant',
             price: 'HK$100',
-							detail:"per month · 500 credits",
-							highlight:"",
+            detail: 'per month · 500 credits',
+            highlight: '',
             discounts: '10% off',
             detailList: [
               'Easy to Top up Credits',
               'Option to Share Design and Interact with Designers in Public Gallery',
               'Support Monthly/Annual Payment Options',
               'Suitable for Individual Creator, Independent Designers and Fun for all Fashion Lovers',
-								'Customer and Technical Support',
+              'Customer and Technical Support'
             ],
-							btn:'Get Started',
+            btn: 'Subscribe'
           },
           {
-							title:"Personal",
+            title: 'Personal',
             img: '/image/homeIntroduct/personal.png',
             type: 'personal',
-							info:"Your AI Fashion Design Assistant",
+            info: 'Your AI Fashion Design Assistant',
             price: 'HK$500',
-							detail:"per month · 3500 credits",
-							highlight:"Recommended",
+            detail: 'per month · 3500 credits',
+            highlight: 'Recommended',
+            recommended: true,
             discounts: '10% off',
             detailList: [
               'Easy to Top up Credits',
               'Option to Share Design and Interact with Designers in Public Gallery',
               'Support Monthly/Annual Payment Options',
               'Suitable for Individual Creator, Independent Designers and Fun for all Fashion Lovers',
-								'Customer and Technical Support',
+              'Customer and Technical Support'
             ],
-							btn:'Get Started',
-						},{
-							title:"Academic",
+            btn: 'Subscribe'
+          },
+          {
+            title: 'Academic',
             img: '/image/homeIntroduct/academic.png',
             type: 'academic',
-							info:"Multi User Management System for Universities",
+            info: 'Multi User Management System for Universities',
             price: '',
-							detail:"",
+            detail: '',
             custom: 'Customize',
             customInfo: 'Special Academic rate aviable, please contact us for details.',
-							highlight:"",
+            highlight: '',
             discounts: '',
             detailList: [
               'Flexible Customize Program to Support School Needs',
@@ -255,39 +322,58 @@ import { message } from "ant-design-vue";
               'Al Assisted Design Teaching Function',
               'Cutting-edge Teaching Tool from Design Inspiration, Sketch Creation to Complete Fashion Collection',
               'Basic 3D Design Functions',
-								'Customer and Technical Support',
+              'Customer and Technical Support'
             ],
-							btn:'Contact us',
-						},
+            btn: 'Contact us'
+          }
         ],
         yearl: [
           {
-							title:"Personal",
-							img:'/image/homeIntroduct/personal.png',
-							type:'personal',
-							info:"Your AI Fashion Design Assistant",
-							price:'HK$5,000',
-							detail:"per month · 50000 credits",
-							highlight:"Free 5-Days Trial",
+            title: 'Free',
+            img: CChargeIcon,
+            type: 'free',
+            info: 'Your AI Fashion Design Assistant',
+            price: 'HK$0',
+            detail: '5 days · 50 credits',
+            highlight: '',
             discounts: '10% off',
             detailList: [
               'Easy to Top up Credits',
               'Option to Share Design and Interact with Designers in Public Gallery',
               'Support Monthly/Annual Payment Options',
               'Suitable for Individual Creator, Independent Designers and Fun for all Fashion Lovers',
-								'Customer and Technical Support',
+              'Customer and Technical Support'
             ],
-							btn:'Get Started',
-						},{
-							title:"Academic",
+            btn: 'Get Started'
+          },
+          {
+            title: 'Personal',
+            img: '/image/homeIntroduct/personal.png',
+            type: 'personal',
+            info: 'Your AI Fashion Design Assistant',
+            price: 'HK$5,000',
+            detail: 'per month · 50000 credits',
+            highlight: '',
+            discounts: '10% off',
+            detailList: [
+              'Easy to Top up Credits',
+              'Option to Share Design and Interact with Designers in Public Gallery',
+              'Support Monthly/Annual Payment Options',
+              'Suitable for Individual Creator, Independent Designers and Fun for all Fashion Lovers',
+              'Customer and Technical Support'
+            ],
+            btn: 'Subscribe'
+          },
+          {
+            title: 'Academic',
             img: '/image/homeIntroduct/academic.png',
             type: 'academic',
-							info:"Multi User Management System for Universities",
+            info: 'Multi User Management System for Universities',
             price: '',
-							detail:"",
+            detail: '',
             custom: 'Customize',
             customInfo: 'Special Academic rate aviable, please contact us for details.',
-							highlight:"",
+            highlight: '',
             discounts: '',
             detailList: [
               'Flexible Customize Program to Support School Needs',
@@ -296,23 +382,26 @@ import { message } from "ant-design-vue";
               'Al Assisted Design Teaching Function',
               'Cutting-edge Teaching Tool from Design Inspiration, Sketch Creation to Complete Fashion Collection',
               'Basic 3D Design Functions',
-								'Customer and Technical Support',
-							],
-							btn:'Contact us',
-						},
+              'Customer and Technical Support'
             ],
+            btn: 'Contact us'
+          }
+        ]
       }
     })
-			watch(()=>props.isSelectSuccessively,(newVal)=>{
+    watch(
+      () => props.isSelectSuccessively,
+      newVal => {
         if (newVal) {
           data.productList = data.productListCn
         } else {
           data.productList = data.productListEn
         }
-			},{immediate: true})
-			const close = ()=>{
-			}
-			const setMonthlyOrYearly = (val)=>{
+      },
+      { immediate: true }
+    )
+    const close = () => {}
+    const setMonthlyOrYearly = val => {
       data.monthlyOrYearly = val
     }
     const createAccount = () => {
@@ -369,7 +458,7 @@ import { message } from "ant-design-vue";
       }, 2000)
     }
 
-			const copyToClipboard = (text) => {
+    const copyToClipboard = text => {
       if (navigator.clipboard && window.isSecureContext) {
         // 使用现代 Clipboard API
         navigator.clipboard.writeText(text).catch(() => {
@@ -382,7 +471,7 @@ import { message } from "ant-design-vue";
       }
     }
 
-			const fallbackCopyToClipboard = (text) => {
+    const fallbackCopyToClipboard = text => {
       const textArea = document.createElement('textarea')
       textArea.value = text
       textArea.style.position = 'fixed'
@@ -399,18 +488,16 @@ import { message } from "ant-design-vue";
       document.body.removeChild(textArea)
     }
 
-			onMounted(()=>{
-				
-			})
+    onMounted(() => {})
     return {
       ...toRefs(dom),
       ...toRefs(data),
       close,
       setMonthlyOrYearly,
       createAccount,
-				handleContactUs,
+      handleContactUs
+    }
   }
-		},
 })
 </script>
 <style scoped lang="less">
@@ -429,7 +516,8 @@ import { message } from "ant-design-vue";
     font-size: 1.6rem;
     margin-bottom: 3rem;
   }
-	.back,.introduce>span{
+  .back,
+  .introduce > span {
     cursor: pointer;
   }
   .titleTitle {
@@ -443,19 +531,19 @@ import { message } from "ant-design-vue";
     }
   }
   .selectMonthlyYearly {
-		border: .7px solid #e7ebff;
-		background: #FBFBFB;
+    border: 0.7px solid #e7ebff;
+    background: #fbfbfb;
     border-radius: 1rem;
     width: 18.5rem;
-		box-shadow: 0px 0.72px 3.62px 0px #566EE81A inset;
+    box-shadow: 0px 0.72px 3.62px 0px #566ee81a inset;
     margin: 0 auto;
     display: flex;
     position: relative;
-		--selectPadding: .58rem;
+    --selectPadding: 0.58rem;
     padding: var(--selectPadding);
     @media (max-width: 767px) {
-			--selectPadding: .36rem;
-			border-radius: .58rem;
+      --selectPadding: 0.36rem;
+      border-radius: 0.58rem;
       width: 10.8rem;
     }
     &.left {
@@ -475,15 +563,16 @@ import { message } from "ant-design-vue";
       }
     }
     > .bg {
-			border: .7px solid #E7EBFF;
-			box-shadow: 0px 4.35px 26.08px 0px #B5C2FB1A;
+      border: 0.7px solid #e7ebff;
+      box-shadow: 0px 4.35px 26.08px 0px #b5c2fb1a;
       background: #ffffff;
       width: calc(50% - var(--selectPadding) * 2);
       height: calc(100% - var(--selectPadding) * 2);
       position: absolute;
-			transition: all .3s;
+      transition: all 0.3s;
     }
-		> .leftText,> .rightText{
+    > .leftText,
+    > .rightText {
       cursor: pointer;
       font-weight: 400;
       font-size: 1.7rem;
@@ -510,33 +599,42 @@ import { message } from "ant-design-vue";
       flex-direction: column;
       justify-content: center;
     }
-	}
-	.gallery_list_box{
-		
   }
   .gallery_list {
     display: flex;
     // justify-content: center;
     flex-wrap: wrap;
     justify-content: center;
-		margin-top: 4.3rem;
+    margin-top: 6rem;
     @media (max-width: 767px) {
       margin-top: 2.4rem;
     }
     .gallery_item {
-			width: 44.1rem;
-			height: 56.9rem;
-			padding: 2.09rem;
-			border-radius: 1.8rem;
-			border: .72px solid #E7EBFF;
+      width: 36.2rem;
+      height: 46.8rem;
+      padding: 2.38rem;
+      border-radius: 1.55rem;
+      border: 0.2rem solid #e7ebff;
       margin-right: 8rem;
       position: relative;
+      box-shadow: 0px 15.5px 23.84px 0px #bccaff21;
+
+      &.recommended {
+        border-radius: 1.8rem;
+        border: 2px solid transparent;
+        background: linear-gradient(#fff, #fff) padding-box,
+          linear-gradient(88.13deg, #fbd2ff 0.91%, #e6d3ff 52.5%, #b694ff 101.09%)
+            border-box;
+        background-origin: border-box;
+        background-clip: padding-box, border-box;
+      }
       @media (max-width: 767px) {
         width: 100%;
         height: auto;
         border-radius: 1.3rem;
         margin: 0;
         margin-bottom: 2.8rem;
+		padding: 2rem;
         padding-bottom: 1.3rem;
       }
       .product_signUp_box {
@@ -549,7 +647,7 @@ import { message } from "ant-design-vue";
         margin-bottom: 0rem;
       }
       .img {
-				margin-bottom: 1.4rem;
+        margin-bottom: 1.2rem;
         width: 4rem;
         height: 4rem;
         @media (max-width: 767px) {
@@ -559,35 +657,35 @@ import { message } from "ant-design-vue";
         }
       }
       .title {
-				font-size: 3.1rem;
-				margin-bottom: 1rem;
+        font-size: 2.6rem;
+        margin-bottom: 0.8rem;
         text-align: left;
         font-weight: 500;
         @media (max-width: 767px) {
           font-size: 2.3rem;
-					margin-bottom: .73rem;
+          margin-bottom: 0.73rem;
         }
       }
       .info {
         font-weight: 400;
         font-size: 1.4rem;
         color: #797878;
-				margin-bottom: 1.7rem;
         font-family: 'pingfang_regular';
         &.academic {
-					margin-bottom: .4rem;
+          margin-bottom: 0.4rem;
         }
         @media (max-width: 767px) {
           font-size: 1.25rem;
-					margin-bottom: 1.25rem;
+          // margin-bottom: 1.25rem;
         }
       }
       .price {
         // margin-bottom: 5.2rem;
-				border-bottom: .72px solid #E7EBFF;
+        border-bottom: 0.72px solid #e7ebff;
         width: 100%;
         display: flex;
-				align-items: flex-end;
+        column-gap: 0.7rem;
+        align-items: center;
         @media (max-width: 767px) {
           margin-bottom: 2.3rem;
         }
@@ -595,13 +693,13 @@ import { message } from "ant-design-vue";
           align-items: flex-start;
           flex-direction: column;
           > div {
-						margin-bottom: .9rem;
-						font-size: 4.3rem;
+            margin-bottom: 0.9rem;
+            font-size: 3.6rem;
             line-height: 1;
-						letter-spacing: -.072rem;
+
             @media (max-width: 767px) {
               font-size: 3.1rem;
-							margin-bottom: .5rem;
+              margin-bottom: 0.5rem;
             }
           }
           > span {
@@ -610,47 +708,60 @@ import { message } from "ant-design-vue";
         }
         > div {
           font-weight: 500;
-					font-size: 4.3rem;
-					color: #1B223C;
+          font-size: 3.6rem;
+          letter-spacing: -0.06rem;
+          color: #1b223c;
+          margin: 0.3rem 0;
           @media (max-width: 767px) {
-						font-size: 3.14rem;
+            font-size: 3rem;
           }
         }
         > span {
           font-weight: 500;
-					font-size: 1.7rem;
+          font-size: 1.3rem;
           color: #797878;
-					margin-bottom: 1.5rem;
-					margin-left: 1rem;
+          // margin-bottom: 1.5rem;
+          // margin-left: 1rem;
           &.yearl {
             font-size: 1.3rem;
           }
           @media (max-width: 767px) {
             font-size: 1.2rem;
-						margin-left: .7rem;
-						margin-bottom: 1rem;
+			margin-top: 1rem;
+            // margin-left: 0.7rem;
+            // margin-bottom: 1rem;
           }
         }
       }
-			.info,.detail,.gallery_btn{
+      .detail,
+      .gallery_btn {
         font-size: 1.6rem;
       }
       .highlight {
-				font-size: 1.3rem;
+        font-size: 1.4rem;
         position: absolute;
+        width: 12.41rem;
+        line-height: 3.4rem;
+        text-align: center;
         top: 0;
         right: 0;
-				background: linear-gradient(88.13deg, #FBD2FF 0.91%, #E6D3FF 52.5%, #B694FF 101.09%);
+        background: linear-gradient(
+          88.13deg,
+          #fbd2ff 0.91%,
+          #e6d3ff 52.5%,
+          #b694ff 101.09%
+        );
         // border-radius: .5rem 1.5rem 0px 1.5rem;
         border-top-right-radius: 1.5rem;
         border-bottom-left-radius: 0.5rem;
-				padding: .75rem .5rem;
         @media (max-width: 767px) {
-					padding: .55rem .36rem;
           // border-radius: .46rem .36rem 0px .9rem;
           border-top-right-radius: 1.1rem;
           border-bottom-left-radius: 0.4rem;
           font-size: 1rem;
+		  line-height: 2.5rem;
+		  font-weight: 500;
+		  width: 9rem;
         }
       }
       .product_detail {
@@ -661,20 +772,17 @@ import { message } from "ant-design-vue";
         justify-content: flex-end;
         overflow-y: auto;
         &.academic {
-					justify-content: flex-start
+          justify-content: flex-start;
         }
         li {
           list-style: disc;
-					margin-bottom: .3rem;
-					font-size: 1.6rem;
+          // margin-bottom: 0.3rem;
+          font-size: 1.3rem;
           font-weight: 500;
-					@media (max-width: 767px) {
-						font-size: 1.15rem;
-					}
-				}
-				li:last-child{
-					margin-bottom: 0;
         }
+        // li:last-child {
+        //   margin-bottom: 0;
+        // }
       }
       .gallery_btn {
         line-height: 4.6rem;
@@ -683,14 +791,102 @@ import { message } from "ant-design-vue";
         margin-top: auto;
         font-size: 1.7rem;
         font-weight: 500;
+        background-color: #1b223c;
+        &:hover {
+          background-color: #fff;
+        }
         @media (max-width: 767px) {
           margin-top: 2.5rem;
           font-size: 1.25rem;
           line-height: 3.4rem;
-					border-radius: .62rem;
+          border-radius: 0.62rem;
         }
       }
     }
+    .yearly {
+      width: 44.1rem;
+      height: 56.9rem;
+      padding: 2.89rem 2.89rem 3.31rem;
+      box-sizing: border-box;
+      .product_signUp_box {
+        .title {
+          font-size: 3.1rem;
+          margin-bottom: 1rem;
+        }
+        .info {
+          font-size: 1.7rem;
+        }
+        .price {
+          > div {
+            font-size: 4.34rem;
+            letter-spacing: -1px;
+          }
+          span {
+            font-size: 1.4rem;
+          }
+        }
+        .product_detail {
+          padding-top: 3.1rem;
+          justify-content: space-evenly;
+          li {
+            font-size: 1.6rem;
+          }
+        }
+      }
+      @media (max-width: 767px) {
+        width: 31.9rem;
+        height: 41.1rem;
+        padding: 2.09rem 2.09rem 2.11rem;
+        &.academic {
+          height: 52rem;
+        }
+        .product_signUp_box {
+          .img {
+            width: 3.4rem;
+            height: 3.4rem;
+          }
+          .title {
+            font-size: 2.3rem;
+            margin-bottom: 0;
+            letter-spacing: 0.05rem;
+          }
+          .info {
+            font-size: 1.2rem;
+          }
+          .price {
+            margin-bottom: 0;
+            div {
+              font-size: 3.1rem;
+            }
+            span {
+              font-size: 1.26rem;
+              &.personal {
+                font-size: 0.95rem;
+              }
+            }
+          }
+          .product_detail {
+            padding-top: 2rem;
+            justify-content: flex-end;
+            margin-bottom: 0;
+            &.chinese{
+              justify-content: space-evenly;
+            }
+            li {
+              font-size: 1.15rem;
+            }
+          }
+          .submit {
+            margin-top: 2rem;
+          }
+        }
+      }
+    }
+    .submit {
+      @media (max-width: 767px) {
+        margin-top: 2rem;
+      }
+    }
   }
 }
 </style>

src/lang/cn.ts

@@ -453,7 +453,8 @@ export default {
     jsContent4: '图片必须小于5MB',
     jsContent5: '图片已经上传是否继续上传',
     jsContent6: '输入的内容超过允许输入的最大长度',
-    jsContent7: '请输入内容~'
+    jsContent7: '请输入内容~',
+    jsContent8: '请输入项目名字~'
   },
   ModelPlacement: {
     Registration: '新增模特',

src/lang/en.ts

@@ -466,7 +466,8 @@ export default {
     jsContent4: 'Image must smaller than 5MB!',
     jsContent5: 'This picture has been uploaded whether to continue uploading？',
     jsContent6: 'The entered content exceeds the maximum length.',
-    jsContent7: 'Please enter content'
+    jsContent7: 'Please enter content',
+    jsContent8: 'Please enter the project name.'
   },
   ModelPlacement: {
     Registration: 'Registration',

src/views/HomeMain.vue

@@ -393,6 +393,27 @@
                   <span class="fi fi-rr-book-user"></span>
                   <span class="select_item_des">{{ $t('Header.Tutorial') }}</span>
                 </div>
+				<div class="select_item logo">
+					<a href="https://www.tiktok.com" target="_blank" >
+						<img src="@/assets/images/socialMediaLogo/tikTokIcon.png" alt="">
+					</a>
+					<a href="https://www.instagram.com" target="_blank" >
+						<img src="@/assets/images/socialMediaLogo/instagramIcon.png" alt="">
+					</a>
+					<a href="https://www.youtube.com" target="_blank" >
+						<img src="@/assets/images/socialMediaLogo/youTubeIcon.png" alt="">
+					</a>
+					<a href="https://www.xiaohongshu.com" target="_blank" >
+						<img src="@/assets/images/socialMediaLogo/xiaoHongShuIcon.png" alt="">
+					</a>
+					<a href="https://www.zhihu.com" target="_blank" >
+						<img src="@/assets/images/socialMediaLogo/zhiHuIcon.png" alt="">
+					</a>
+					<a href="https://www.bilibili.com/" target="_blank" >
+						<img src="@/assets/images/socialMediaLogo/biliBliIcon.png" alt="">
+					</a>
+				</div>
+
                 <div class="select_item_long"></div>
                 <div class="select_item" @click="logout()">
                   <span class="icon iconfont icon-tuichu"></span>
@@ -2013,6 +2034,25 @@ export default defineComponent({
                   font-size: 1.6rem;
                   margin-left: 1rem;
                   font-weight: 500;
+                }
+              }
+			  .logo{
+				padding: 1rem 0.5rem;
+				gap: 1rem;
+				cursor: auto;
+				> a{
+					width: 2.5rem;
+					height: 2.5rem;
+					border-radius: .5rem;
+					overflow: hidden;
+					display: flex;
+					> img{
+						width: 100%;
+						height: 100%;
+					}
+				}
+				 &:hover {
+                  background: #fff;
                 }
 			  }
               .select_item_long {

src/views/HomeRecommend.vue

@@ -6,14 +6,14 @@
         @click="turnToNewPage('/')"
         src="@/assets/images/homePage/aidaIcon.png"
       />
+      <div class="gallery_btn login white" @click="setLogin">{{ t('Login.Login') }}</div>
+      <div class="gallery_btn" @click="signUp">{{ t('Login.SignUp') }}</div>
       <div class="language_btn">
         <div @click="handleChangeLanguage">
           <i class="fi fi-rr-globe"></i>
           {{ isChinese ? 'CN' : 'EN' }}
         </div>
       </div>
-      <div class="gallery_btn login white" @click="setLogin">{{ t('Login.Login') }}</div>
-      <div class="gallery_btn" @click="signUp">{{ t('Login.SignUp') }}</div>
     </div>
 
     <div class="content">
@@ -229,8 +229,25 @@ export default defineComponent({
     .language_btn {
       color: #fff;
       cursor: pointer;
+	  font-size: 2.5rem;
+	  >div {
+		display: flex;
+		>i{
+			display: flex;
+			align-items: center;
+			font-size: 2.5rem;
+			margin-right: .7rem;
+		}
+	  }
       @media (max-width: 768px) {
+		  font-size: 1.5rem;
         color: #000;
+		>div {
+			>i{
+				font-size: 1.5rem;
+				margin-right: .7rem;
+			}
+		}
       }
     }
     > .gallery_btn {

src/views/HomeView/history.vue

@@ -9,7 +9,7 @@
             :placeholder="t('batchGeneration.Search')"
             @search="searchHistoryList"
           />
-          <div class="history_table_content" ref="historyTable">
+          <div class="history_table_content" ref="historyTable" @click.stop>
             <a-config-provider :locale="tableLocale">
               <a-table
                 row-class-name="history_table_row"
@@ -28,6 +28,14 @@
                 }"
               >
                 <template #bodyCell="{ column, text, record, index }">
+					<div class="update_name" v-if="column?.key === 'collectionName'">
+						<div v-if="updateName.selectIndex === index">
+							<input type="text" v-model="updateName.currentName">
+						</div>
+						<div v-show="updateName.selectIndex !== index">{{ record.name }}</div>
+						<i @click="setUpdateName(record.name,index)" v-show="updateName.selectIndex !== index" class="fi fi-rr-edit"></i>
+						<i @click="submitUpdateName" v-show="updateName.selectIndex === index" class="fi fi-sr-check-circle"></i>
+                    </div>
                   <div class="operate_list" v-if="column?.Operations">
                     <div
                       class="operate_item"
@@ -213,6 +221,39 @@ export default defineComponent({
       selectCode: selectCode,
       designType: ''
     }
+	const updateName = ref({
+		currentName:'',
+		selectIndex:-1,
+	})
+	const clearUpdateName = () => {
+		updateName.value.currentName = ''
+		updateName.value.selectIndex = -1
+		document.removeEventListener('click',clearUpdateName)
+	}
+	const setUpdateName = (name,index) => {
+		updateName.value.currentName = name
+		updateName.value.selectIndex = index
+		document.addEventListener('click',clearUpdateName)
+	}
+	const submitUpdateName = ()=>{
+		if(updateName.value.currentName === collectionList.value[updateName.value.selectIndex].name){
+			clearUpdateName()
+			return
+		}
+		if(updateName.value.selectIndex != -1){
+			if(!updateName.value.currentName)return message.info(t('HistoryPage.jsContent8'))
+			let data = {
+				id: collectionList.value[updateName.value.selectIndex].id, //library名字
+				name: updateName.value.currentName //history id
+			}
+			Https.axiosPost(Https.httpUrls.projectSaveOrUpdate, data)
+			.then(rv => {
+				collectionList.value[updateName.value.selectIndex].name = updateName.value.currentName
+				clearUpdateName()
+			})
+			.catch(res => {})
+		}
+	}
     provide('type', type)
     return {
       store,
@@ -232,7 +273,10 @@ export default defineComponent({
       tableLocale,
       projectSetting,
       tableSearchBar,
-      currentProjectPath
+      currentProjectPath,
+	  updateName,
+	  setUpdateName,
+	  submitUpdateName,
     }
   },
   data() {
@@ -608,6 +652,7 @@ export default defineComponent({
     customTableRow(record: any) {
       return {
         onDblclick: () => {
+			if(this.updateName.selectIndex !== -1)return
           this.retrieveHome(record)
         }
       }
@@ -726,6 +771,11 @@ export default defineComponent({
           }
           :deep(.ant-table-tbody > tr:hover) {
             background: #ededed;
+			.update_name{
+				> .fi-rr-edit{
+					display: flex;
+				}
+			}
           }
           :deep(.ant-table-tbody > tr > td) {
             border: none;
@@ -780,7 +830,26 @@ export default defineComponent({
               color: #000;
             }
           }
-
+		  .update_name{
+			display: flex;
+			align-items: center;
+			> div{
+				> input{
+					width: 12rem;
+					border-radius: .8rem;
+					padding-left: 1.5rem;
+				}
+			}
+			> i{
+				margin-left: 1.5rem;
+				cursor: pointer;
+				font-size: 2rem;
+				display: flex;
+			}
+			> .fi-rr-edit{
+				display: none;
+			}
+		  }
           .operate_list {
             display: flex;
             align-items: center;

src/views/Register.vue

@@ -13,7 +13,18 @@
 						@click="turnToNewPage('https://www.aidlab.hk/en/')"
 						src="@/assets/images/loginPage/aida_Logo_login.png"
 					/> -->
+          <div class="mobile_logo_group" v-if="isMoblie" @click="turnToNewPage('/')">
             <img
+              class="homeRecommend_logo aid"
+              src="@/assets/images/loginPage/aida_logo.png"
+            />
+            <img
+              class="homeRecommend_logo code"
+              src="@/assets/images/loginPage/aida_Logo_login.png"
+            />
+          </div>
+          <img
+            v-else
             class="homeRecommend_logo"
             @click="turnToNewPage('/')"
             src="@/assets/images/homePage/aidaIcon.png"
@@ -43,61 +54,72 @@
       <div class="homeRecommend_right">
         <!-- <div class="homeRecommend_right" v-if="userDetail.systemUser == -1"> -->
         <div class="cutLangue">
-					<div @click="()=>isSelectSuccessively = !isSelectSuccessively">
+          <div @click="() => (isSelectSuccessively = !isSelectSuccessively)">
             <i class="fi fi-rr-globe"></i>
             <!-- <a-switch :checked="isSelectSuccessively" @click="()=>isSelectSuccessively = !isSelectSuccessively" checked-children="EN" un-checked-children="CN"/> -->
             {{ isSelectSuccessively ? 'CN' : 'EN' }}
           </div>
         </div>
-				<div class="gallery_btn" @click="setLogin">{{ isSelectSuccessively?'登录':'Login' }}</div>
+        <div class="gallery_btn" @click="setLogin">
+          {{ isSelectSuccessively ? '登录' : 'Login' }}
+        </div>
       </div>
     </header>
     <div class="content">
       <signUp ref="signUp" :isSelectSuccessively="isSelectSuccessively"></signUp>
     </div>
   </div>
-	
 </template>
 <script>
-import { defineComponent, toRefs, reactive, ref , nextTick,computed, onMounted, onBeforeUnmount } from "vue";
-import { setCookie, getCookie, WriteCookie,clonAllCookie } from "@/tool/cookie";
-import { Https } from "@/tool/https";
-import { useStore } from "vuex";
-import { useRouter } from 'vue-router';
+import {
+  defineComponent,
+  toRefs,
+  reactive,
+  ref,
+  nextTick,
+  computed,
+  onMounted,
+  onBeforeUnmount,
+  watch
+} from 'vue'
+import { setCookie, getCookie, WriteCookie, clonAllCookie } from '@/tool/cookie'
+import { Https } from '@/tool/https'
+import { useStore } from 'vuex'
+import { useRouter } from 'vue-router'
 import signUp from '@/component/mainPage/signUp/index.vue'
 export default defineComponent({
   components: {
-		signUp,
+    signUp
   },
   setup() {
-        const store = useStore();
-		const router = useRouter();
+    const store = useStore()
+    const router = useRouter()
     let data = reactive({
       homeRecommendMax: null,
       signUp: null,
-			isSelectSuccessively:false,
+      isSelectSuccessively: false
     })
     let isMoblie = ref(false)
     let userDetail = computed(() => {
       return store.state.UserHabit.userDetail
     })
     let setLogin = () => {
-			router.push("/login");
+      router.push('/login')
     }
     let logout = () => {
-			let userInfo = store.state.UserHabit.userDetail;
+      let userInfo = store.state.UserHabit.userDetail
       let data = {
-                userId: userInfo?.userId,
-            };
+        userId: userInfo?.userId
+      }
       store.commit('createDetail')
       store.commit('createProbject')
       if (!data.userId) return
-			Https.axiosPost(Https.httpUrls.accountLogout, data).then((rv) => {
-				clonAllCookie();
-			});
+      Https.axiosPost(Https.httpUrls.accountLogout, data).then(rv => {
+        clonAllCookie()
+      })
     }
     let goHome = () => {
-			router.push('/home');
+      router.push('/home')
     }
     let time
     let updataIsMoblie = () => {
@@ -109,45 +131,59 @@ export default defineComponent({
           isMoblie.value = false
         }
       }, 500)
-			
     }
+
+    watch(
+      () => data.isSelectSuccessively,
+      val => {
+        let str = ''
+        if (val) {
+          str = 'CHINESE_SIMPLIFIED'
+        } else {
+          str = 'ENGLISH'
+        }
+        localStorage.setItem('loginLanguage', str)
+      }
+    )
+
     onMounted(() => {
+      updataIsMoblie()
+      const savedLang = localStorage.getItem('loginLanguage')
+      if (savedLang) {
+        data.isSelectSuccessively = savedLang === 'CHINESE_SIMPLIFIED'
+      }
       window.addEventListener('resize', updataIsMoblie)
     })
     onBeforeUnmount(() => {
-			window.removeEventListener('resize', updataIsMoblie);
-			
-		});
+      window.removeEventListener('resize', updataIsMoblie)
+    })
     return {
       ...toRefs(data),
       userDetail,
       setLogin,
       logout,
       goHome,
-			isMoblie,
+      isMoblie
     }
   },
   data() {
-        return {
-        };
+    return {}
   },
   watch: {
     // credits.value(newVal,oldVal){
     // 	console.log(String(newVal).length);
     // }
   },
-    mounted() {
-		
-    },
+  mounted() {},
   methods: {
     turnToNewPage(url) {
-            window.open(url);
+      window.open(url)
     },
     turnToWindow(url) {
-            window.open(url);
-        },
-    },
-});
+      window.open(url)
+    }
+  }
+})
 </script>
 
 <style lang="less" scoped>
@@ -157,7 +193,6 @@ export default defineComponent({
   height: 100%;
   flex-direction: column;
 
-	
   &.openSignUp {
     .homeRecommend_heade {
       position: relative;
@@ -185,7 +220,7 @@ export default defineComponent({
   position: absolute;
   align-items: center;
   z-index: 2;
-	border-bottom: 1px solid #DDD;
+  border-bottom: 1px solid #ddd;
   @media (max-width: 768px) {
     z-index: 1000;
     padding: 1.4rem 2.1rem;
@@ -236,7 +271,7 @@ export default defineComponent({
           display: flex;
           margin-right: 1rem;
           @media (max-width: 768px) {
-						margin-right: .7rem;
+            margin-right: 0.7rem;
             font-size: 2rem;
           }
         }
@@ -251,20 +286,14 @@ export default defineComponent({
     }
   }
   .homeRecommend_logo {
-        // width: 14.4rem;
     height: 8rem;
-        // height: 4rem;
-
     margin-top: 0;
     margin-right: 2rem;
     @media (max-width: 768px) {
       // height: 1.76rem;
       height: 4.5rem;
-			margin-right: .9rem;
+      margin-right: 0.9rem;
     }
-		// &:last-child{
-		// 	margin-right: 2rem;
-		// }
   }
   .login_footer_item_text {
     // margin-left: 5rem;
@@ -287,6 +316,22 @@ export default defineComponent({
       align-items: center;
       position: relative;
       height: 3.7rem;
+      .mobile_logo_group {
+        display: flex;
+        align-items: center;
+        cursor: pointer;
+        column-gap: 0.9rem;
+        .homeRecommend_logo {
+          &.aid {
+            width: 8rem;
+            height: 1.75rem;
+          }
+          &.code {
+            width: 5rem;
+            height: 1.98rem;
+          }
+        }
+      }
       &.marLeft2 {
         margin-left: 2rem;
       }
@@ -296,13 +341,13 @@ export default defineComponent({
         margin: 0 0.8rem;
         font-weight: 900;
         span {
-					margin: .7rem;
+          margin: 0.7rem;
         }
       }
       .icon-xiala {
         font-size: 1.4rem;
         cursor: pointer;
-				transition: .3s all;
+        transition: 0.3s all;
       }
       .icon_rotate {
         -moz-transform: rotate(180deg);
@@ -312,7 +357,6 @@ export default defineComponent({
       }
     }
   }
-    
 }
 .content {
   flex: 1;

src/views/affiliate/affiliatePage.vue

@@ -147,11 +147,11 @@ export default defineComponent({
 				}
 			});
 			//储存所有用户id和name
-			Https.axiosGet(Https.httpUrls.getAllUserId,).then((rv: any) => {
-				if (rv) {
-					store.commit('setAllUserList',rv);
-				}
-			})
+			// Https.axiosGet(Https.httpUrls.getAllUserId,).then((rv: any) => {
+			// 	if (rv) {
+			// 		store.commit('setAllUserList',rv);
+			// 	}
+			// })
 			let allCountry = country
 			sessionStorage.setItem('allCountry',JSON.stringify(allCountry));
 			// state.nowPageName = state.rootSubmenuKeys[0].name