设置路由管理员可以访问

Reviewed-on: #1

.gitea/workflows/develop_build.yaml

@@ -1,56 +0,0 @@
-name: AiDA WEB-Node.js Develop 分支构建部署123
-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: 1.检出代码
-        uses: actions/checkout@v4
-
-      - 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 重载命令已发送。"

.gitea/workflows/develop_build_manual.yaml

@@ -1,50 +0,0 @@
-name: 手动触发 AiDA WEB-Node.js Develop 分支构建部署
-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: 1.检出代码
-        uses: actions/checkout@v4
-
-      - 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 重载命令已发送。"

.gitea/workflows/prod_build_schedule.yaml

@@ -1,56 +0,0 @@
-name: AiDA WEB-Node.js StableVersion 分支构建部署
-on:
-  schedule:
-    #       cron为UTC时区，构建时间=部署时间-8小时 {*分 (-8)时 *日 *月  *周}  ---
-    #      示例： 1月1日22点22分触发构建 cron写作 - '22 14 1 1 *'
-    - cron: '22 14 1 1 *'
-
-jobs:
-  build:
-    runs-on: ubuntu-latest
-
-    strategy:
-      matrix:
-        node-version: [ 18.18.0 ]
-
-    steps:
-      - name: 1.检出代码
-        uses: actions/checkout@v4
-        with:
-          ref: StableVersion
-
-      - name: 2.打印当前分支信息
-        run: |
-          echo "Current branch being deployed is: $(git rev-parse --abbrev-ref HEAD)"
-          echo "The code is from the 'main' branch, as specified in 'actions/checkout'."
-
-      - name: 3.设置 Node.js 环境 ${{ matrix.node-version }}
-        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.部署完成
-        run: echo "构建和部署到 S3 任务完成。"

prod_build_manual.yaml

@@ -47,7 +47,7 @@ jobs:
 
       - name: 5.同步 dist 目录到 S3
         run: |
-          aws s3 sync dist/* s3://${{ secrets.S3_BUCKET_NAME }}/ --acl public-read
+          aws s3 sync dist/ s3://${{ secrets.S3_BUCKET_NAME }}/ --acl public-read
 
       - name: 6.部署完成
         run: echo "构建和部署到 S3 任务完成。"

src/App.vue

@@ -1,7 +1,16 @@
 <template>
   <router-view/>
+  <div class="loading" v-show="loading"><a-spin :delay="0.5" /></div>
 </template>
 
+<script setup>
+	import { computed } from 'vue';
+	import { useStore } from 'vuex';
+	const store = useStore();
+	const loading = computed(() => store.state.loading || store.state.view_loading);
+
+</script>
+
 <style lang="less">
 #app {
   font-family: Avenir, Helvetica, Arial, sans-serif;
@@ -9,7 +18,19 @@
   -moz-osx-font-smoothing: grayscale;
   height: 100%;
 }
-
+.loading{
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	background-color: rgba(0,0,0,0.4);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	z-index: 999999999999;
+	color: #fff;
+}
 .ipad{
 	*{
 		-webkit-touch-callout:none;

src/assets/images/socialMediaLogo/faceBookIcon.svg

@@ -0,0 +1,10 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2427_2565)">
+<path d="M12 0C5.37264 0 0 5.37264 0 12C0 17.6275 3.87456 22.3498 9.10128 23.6467V15.6672H6.62688V12H9.10128V10.4198C9.10128 6.33552 10.9498 4.4424 14.9597 4.4424C15.72 4.4424 17.0318 4.59168 17.5685 4.74048V8.06448C17.2853 8.03472 16.7933 8.01984 16.1822 8.01984C14.2147 8.01984 13.4544 8.76528 13.4544 10.703V12H17.3741L16.7006 15.6672H13.4544V23.9122C19.3963 23.1946 24.0005 18.1354 24.0005 12C24 5.37264 18.6274 0 12 0Z" fill="#2C2C2C"/>
+</g>
+<defs>
+<clipPath id="clip0_2427_2565">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>

src/assets/images/socialMediaLogo/linkedinIcon.svg

@@ -0,0 +1,10 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2427_2564)">
+<path d="M22.2234 0H1.77187C0.792187 0 0 0.773438 0 1.72969V22.2656C0 23.2219 0.792187 24 1.77187 24H22.2234C23.2031 24 24 23.2219 24 22.2703V1.72969C24 0.773438 23.2031 0 22.2234 0ZM7.12031 20.4516H3.55781V8.99531H7.12031V20.4516ZM5.33906 7.43438C4.19531 7.43438 3.27188 6.51094 3.27188 5.37187C3.27188 4.23281 4.19531 3.30937 5.33906 3.30937C6.47813 3.30937 7.40156 4.23281 7.40156 5.37187C7.40156 6.50625 6.47813 7.43438 5.33906 7.43438ZM20.4516 20.4516H16.8937V14.8828C16.8937 13.5563 16.8703 11.8453 15.0422 11.8453C13.1906 11.8453 12.9094 13.2938 12.9094 14.7891V20.4516H9.35625V8.99531H12.7687V10.5609H12.8156C13.2891 9.66094 14.4516 8.70938 16.1813 8.70938C19.7859 8.70938 20.4516 11.0813 20.4516 14.1656V20.4516V20.4516Z" fill="#2C2C2C"/>
+</g>
+<defs>
+<clipPath id="clip0_2427_2564">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>

src/assets/images/socialMediaLogo/socialIcons.svg

@@ -0,0 +1,10 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2426_2350)">
+<path d="M23.5233 7.12823C23.5233 7.12823 23.2913 5.49009 22.5766 4.77079C21.6717 3.8241 20.6601 3.81946 20.196 3.76377C16.8733 3.52246 11.8846 3.52246 11.8846 3.52246H11.8754C11.8754 3.52246 6.88669 3.52246 3.564 3.76377C3.09994 3.81946 2.08828 3.8241 1.18336 4.77079C0.468703 5.49009 0.241312 7.12823 0.241312 7.12823C0.241312 7.12823 0 9.05409 0 10.9753V12.7759C0 14.6971 0.236672 16.6229 0.236672 16.6229C0.236672 16.6229 0.468703 18.2611 1.17872 18.9804C2.08364 19.9271 3.27164 19.8946 3.80067 19.9967C5.70333 20.1777 11.88 20.2334 11.88 20.2334C11.88 20.2334 16.8733 20.2241 20.196 19.9874C20.6601 19.9317 21.6717 19.9271 22.5766 18.9804C23.2913 18.2611 23.5233 16.6229 23.5233 16.6229C23.5233 16.6229 23.76 14.7017 23.76 12.7759V10.9753C23.76 9.05409 23.5233 7.12823 23.5233 7.12823ZM9.42511 14.9616V8.28374L15.8431 11.6343L9.42511 14.9616Z" fill="#2C2C2C"/>
+</g>
+<defs>
+<clipPath id="clip0_2426_2350">
+<rect width="23.76" height="23.76" fill="white"/>
+</clipPath>
+</defs>
+</svg>

src/assets/images/socialMediaLogo/tikTokIcon.svg

@@ -0,0 +1,3 @@
+<svg width="21" height="24" viewBox="0 0 21 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.9218 0H10.9175V16.1843C10.9175 18.1127 9.37747 19.6967 7.4609 19.6967C5.54433 19.6967 4.00424 18.1127 4.00424 16.1843C4.00424 14.2905 5.51011 12.7408 7.35825 12.672V8.60871C3.28553 8.67755 0 12.0177 0 16.1843C0 20.3854 3.35398 23.76 7.49514 23.76C11.6362 23.76 14.9902 20.351 14.9902 16.1843V7.88555C16.4961 8.98748 18.3442 9.64174 20.295 9.67619V5.61287C17.2833 5.50957 14.9218 3.03026 14.9218 0Z" fill="#2C2C2C"/>
+</svg>

src/assets/style/style.css

@@ -1250,10 +1250,14 @@ tr > .ant-picker-cell-in-view.ant-picker-cell-range-hover-start:last-child::afte
   background: #000 !important;
   border-color: #000 !important;
 }
+.ant-spin .ant-spin-dot {
+  width: 1.5em;
+  height: 1.5em;
+}
 .ant-spin-dot-item {
   background-color: #000000 !important;
-  width: 9px !important;
+  width: 0.9em !important;
-  height: 9px !important;
+  height: 0.9em !important;
 }
 .ant-spin {
   color: #000;
@@ -1358,7 +1362,7 @@ tr > .ant-picker-cell-in-view.ant-picker-cell-range-hover-start:last-child::afte
 }
 .admin_page .admin_state_item > span {
   white-space: nowrap;
-  width: 13rem;
+  min-width: 13rem;
 }
 .admin_page .admin_state_item > span > span {
   color: red;

src/assets/style/style.less

@@ -1378,10 +1378,14 @@ tr > .ant-picker-cell-in-view.ant-picker-cell-range-hover-start:last-child::afte
 	}
 }
 //loding样式
+.ant-spin .ant-spin-dot{
+	width: 1.5em;
+	height: 1.5em;
+}
 .ant-spin-dot-item{
     background-color: #000000 !important;
-	width: 9px !important;
+	width: .9em !important;
-    height: 9px !important;
+    height: .9em !important;
 }
 .ant-spin{
 	color: #000;
@@ -1490,7 +1494,7 @@ tr > .ant-picker-cell-in-view.ant-picker-cell-range-hover-start:last-child::afte
 		align-items: center;
 		>span{
 			white-space: nowrap;
-			width: 13rem;
+			min-width: 13rem;
 			>span{
 				color: red;
 			}

src/component/Administrator/SE/allUser/addAllUser.vue

@@ -17,7 +17,8 @@
     <div class="generalModel_btn">
       <div class="generalModel_closeIcon" @click.stop="cancelDsign()">
         <svg
-          width="100%" height="100%"
+          width="100%"
+          height="100%"
           viewBox="0 0 46 46"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
@@ -49,7 +50,10 @@
     </div>
     <div class="allUserPoeration_center admin_page">
       <div class="admin_state_item">
-        <span>{{ $t('admin.UserName') }}: <span>*</span></span>
+        <span>
+          {{ $t('admin.UserName') }}:
+          <span>*</span>
+        </span>
         <input
           v-model="userName"
           :placeholder="$t('admin.enterUserName')"
@@ -58,7 +62,10 @@
         />
       </div>
       <div class="admin_state_item">
-        <span>{{ $t('admin.UserEmail') }}: <span>*</span></span>
+        <span>
+          {{ $t('admin.UserEmail') }}:
+          <span>*</span>
+        </span>
         <input
           v-model="userEmail"
           :placeholder="$t('admin.enterEmail')"
@@ -67,7 +74,10 @@
         />
       </div>
       <div class="admin_state_item">
-        <span>{{ $t('admin.Password') }}: <span>*</span></span>
+        <span>
+          {{ $t('admin.Password') }}:
+          <span>*</span>
+        </span>
         <input
           @focus="focus"
           @blur="blur"
@@ -86,6 +96,19 @@
           style="width: 250px"
         />
       </div>
+      <div class="admin_state_item" v-if="title?.value == 'Edit'">
+        <span>
+          {{ $t('admin.SubscribePlan') }}:
+          <span>*</span>
+        </span>
+        <a-select
+          v-model:value="subscriptionPlanId"
+          style="width: 250px"
+          :options="activePlanOptions"
+          :field-names="{ label: 'name', value: 'id' }"
+          :placeholder="$t('admin.SelectPlan')"
+        ></a-select>
+      </div>
     </div>
     <div class="allUserPoeration_btn admin_page">
       <div class="admin_search_item" @click="cancelDsign">{{ $t('admin.Close') }}</div>
@@ -96,7 +119,7 @@
     <a-spin size="large" />
   </div>
 </template>
-<script>
+<script lang="ts">
 import {
   defineComponent,
   ref,
@@ -105,90 +128,114 @@ import {
   onMounted,
   nextTick,
   toRefs,
-} from "vue";
+  computed
-import { Https } from "@/tool/https";
+} from 'vue'
-import { Modal, message } from "ant-design-vue";
+import { Https } from '@/tool/https'
-import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
+import { Modal, message } from 'ant-design-vue'
-import { formatTime, isEmail } from "@/tool/util";
+import { ExclamationCircleOutlined } from '@ant-design/icons-vue'
-import md5 from "md5";
+import { formatTime, isEmail } from '@/tool/util'
+import md5 from 'md5'
 import { useI18n } from 'vue-i18n'
 export default defineComponent({
   components: {},
-  emits: ["searchHistoryList"],
+  props: {
+    planOptions: {
+      type: Array,
+      default: () => []
+    }
+  },
+  emits: ['searchHistoryList'],
   setup(props, { emit }) {
     const { t } = useI18n()
+    const { planOptions } = toRefs(props)
+    // 筛选出状态为 ACTIVE 的订阅计划
+    const activePlanOptions = computed(() => {
+      if (!planOptions.value || !Array.isArray(planOptions.value)) {
+        return []
+      }
+      return planOptions.value.filter((plan: any) => plan.status === 'ACTIVE')
+    })
     let operations = reactive({
       operationsModal: false,
       operationsEdit: false,
       loadingShow: false,
-      title: null,
+      title: null
-    });
+    })
     let operationsData = reactive({
       accountId: -1,
-      userName: "",
+      userName: '',
-      userEmail: "",
+      userEmail: '',
-      password: "",
+      password: '',
-      oldPassword: "",
+      oldPassword: '',
-      credits: "",
+      credits: '',
-    });
+      subscriptionPlanId: '',
+      oldSubscriptionPlanId: ''
+    })
     let state = ref([
       {
-        label: "visitor",
+        label: 'visitor',
-        value: "0",
+        value: '0'
       },
       {
-        label: "yearly",
+        label: 'yearly',
-        value: "1",
+        value: '1'
       },
       {
-        label: "monthly",
+        label: 'monthly',
-        value: "2",
+        value: '2'
       },
       {
-        label: "trial",
+        label: 'trial',
-        value: "3",
+        value: '3'
-      },
+      }
-    ]);
+    ])
     let init = (funStr, data) => {
-      operations.operationsModal = true;
+      operations.operationsModal = true
-      operations.operationsEdit = true;
+      operations.operationsEdit = true
-      operations.title = funStr;
+      operations.title = funStr
-      if (funStr.value == "Add") operations.operationsEdit = false;
+      if (funStr.value == 'Add') operations.operationsEdit = false
-      if (funStr.value == "Edit") {
+      if (funStr.value == 'Edit') {
-        operationsData.accountId = data.id;
+        operationsData.accountId = data.id
-        operationsData.userName = data.userName;
+        operationsData.userName = data.userName
-        operationsData.userEmail = data.userEmail;
+        operationsData.userEmail = data.userEmail
-        operationsData.password = data.userPassword?data.userPassword:null;
+        operationsData.password = data.userPassword ? data.userPassword : null
-        operationsData.oldPassword = data.userPassword;
+        operationsData.oldPassword = data.userPassword
         // operationsData.validStartTime='2024-08-05T00:00:06'
         // operationsData.validEndTime='2024-08-05T00:00:06'
-        operationsData.credits = data.creditsUsageLimit;
+        operationsData.credits = data.creditsUsageLimit
+        operationsData.subscriptionPlanId = data.subscriptionPlanId || ''
+        operationsData.oldSubscriptionPlanId = data.subscriptionPlanId || ''
         // operationsData.accountId = data.accountId
         // operationsData.userName = data.userName
         // operationsData.userEmail = data.userEmail
         // operationsData.validStartTime = formatTime(data.validStartTime)
         // operationsData.validEndTime = formatTime(data.validEndTime)
       }
-    };
+      if (funStr.value == 'Add') {
-    let focus = (event) => {
+        operationsData.subscriptionPlanId = ''
+        operationsData.oldSubscriptionPlanId = ''
+      }
+    }
+    let focus = event => {
       if (operationsData.password == operationsData.oldPassword) {
-        operationsData.password = "";
+        operationsData.password = ''
+      }
+    }
+    let blur = event => {
+      console.log(operationsData.password == '' && operationsData.oldPassword)
+      if (operationsData.password == '' && operationsData.oldPassword) {
+        operationsData.password = operationsData.oldPassword
       }
-    };
-    let blur = (event) => {
-      console.log(operationsData.password == "" && operationsData.oldPassword);
-      if (operationsData.password == "" && operationsData.oldPassword) {
-        operationsData.password = operationsData.oldPassword;
     }
-    };
     let setAddData = () => {
       return {
         creditsUsageLimit: operationsData.credits,
         userEmail: operationsData.userEmail,
-        userPassword: operationsData.password?md5(operationsData.password + "abc"):'',
+        userPassword: operationsData.password ? md5(operationsData.password + 'abc') : '',
         userName: operationsData.userName,
-      };
+        subscriptionPlanId: operationsData.subscriptionPlanId
-    };
+      }
+    }
     let setEditData = () => {
       return {
         id: operationsData.accountId,
@@ -198,57 +245,63 @@ export default defineComponent({
         userPassword:
           operationsData.password == operationsData.oldPassword
             ? null
-            : md5(operationsData.password + "abc"),
+            : md5(operationsData.password + 'abc'),
-      };
+        subscriptionPlanId: operationsData.subscriptionPlanId
-    };
+      }
+    }
     let cancelDsign = () => {
-      operationsData.accountId = -1;
+      operationsData.accountId = -1
-      operationsData.userName = "";
+      operationsData.userName = ''
-      operationsData.userEmail = "";
+      operationsData.userEmail = ''
-      operationsData.password = "";
+      operationsData.password = ''
-      operationsData.credits = "";
+      operationsData.credits = ''
-      operations.operationsModal = false;
+      operationsData.subscriptionPlanId = ''
-    };
+      operationsData.oldSubscriptionPlanId = ''
+      operations.operationsModal = false
+    }
     let setOk = () => {
-      let data;
+      let data
-      if (operations.title?.value == "Add") {
+      if (operations.title?.value == 'Add') {
-        data = setAddData();
+        data = setAddData()
         if (!isEmail(data.userEmail)) {
-          message.info(t('admin.jsContent1'));
+          message.info(t('admin.jsContent1'))
-          return;
+          return
         }
-        if (
+        if (!data.userName || !data.userEmail || !data.userPassword)
-          !data.userName ||
+          return message.warning(t('admin.jsContent2'))
-          !data.userEmail ||
+        Https.axiosPost(Https.httpUrls.addOrUpdateSubAccount, data).then(rv => {
-          !data.userPassword
-        )
-          return message.warning(t('admin.jsContent2'));
-        Https.axiosPost(Https.httpUrls.addOrUpdateSubAccount, data).then(
-          (rv) => {
           if (rv) {
-              cancelDsign();
+            cancelDsign()
-              emit("searchHistoryList");
+            emit('searchHistoryList')
           }
-          }
+        })
-        );
       } else {
-        data = setEditData();
+        data = setEditData()
         if (!isEmail(data.userEmail)) {
-          message.info("The email format is incorrect");
+          message.info('The email format is incorrect')
-          return;
+          return
         }
-        if (!data.userName || !data.userEmail)
+        if (!data.userName || !data.userEmail || !data.subscriptionPlanId)
-          return message.warning("Please check the input box marked with *");
+          return message.warning('Please check the input box marked with *')
-        Https.axiosPost(Https.httpUrls.addOrUpdateSubAccount, data).then(
+        const needSwitchPlan =
-          (rv) => {
+          operationsData.subscriptionPlanId &&
+          operationsData.subscriptionPlanId !== operationsData.oldSubscriptionPlanId
+        Https.axiosPost(Https.httpUrls.addOrUpdateSubAccount, data).then(async rv => {
           if (rv) {
-              cancelDsign();
+            if (needSwitchPlan) {
-              emit("searchHistoryList");
+              await Https.axiosGet(Https.httpUrls.switchSubAccountSubscribePlan, {
+                params: {
+                  targetSubscriptionPlanId: operationsData.subscriptionPlanId,
+                  subAccId: operationsData.accountId
+                }
+              })
+            }
+            cancelDsign()
+            emit('searchHistoryList')
+          }
+        })
       }
     }
-        );
-      }
-    };
     return {
       ...toRefs(operations),
       ...toRefs(operationsData),
@@ -258,14 +311,16 @@ export default defineComponent({
       focus,
       blur,
       setOk,
-    };
+      planOptions,
+      activePlanOptions
+    }
   },
   data() {
-    return {};
+    return {}
   },
   mounted() {},
-  methods: {},
+  methods: {}
-});
+})
 </script>
 <style lang="less" scoped>
 :deep(.allUserPoeration_modal) {

src/component/Administrator/SE/allUser/index.vue

@@ -8,42 +8,14 @@
             style="width: 230px"
             class="range_picker"
             v-model:value="rangePickerValue"
-                        :placeholder="[
+            :placeholder="[$t('HistoryPage.StartDate'), $t('HistoryPage.EndDate')]"
-                            $t('HistoryPage.StartDate'),
-                            $t('HistoryPage.EndDate'),
-                        ]"
             valueFormat="YYYY-MM-DD"
           >
             <template #suffixIcon>
-                            <span
+              <span class="icon iconfont range_picker_icon icon-rili"></span>
-                                class="icon iconfont range_picker_icon icon-rili"
-                            ></span>
             </template>
           </a-range-picker>
         </div>
-                <!-- <div class="admin_state_item">
-                    <span>Country or Region:</span>
-					<a-select
-                        v-model:value="country"
-						:allowClear="true"
-						show-search
-                        style="width: 230px"
-                        :filter-option="filterOption"
-                        placeholder="Select Item..."
-                        max-tag-count="responsive"
-                        :options="allCountry"
-                    ></a-select>
-                </div> -->
-                <!-- <div class="admin_state_item">
-                    <span>Email:</span>
-                    <input
-                        v-model="email"
-                        placeholder="Please enter email"
-                        @keydown.enter="gettrialList"
-                        type="text"
-                        style="width: 230px"
-                    />
-                </div> -->
         <div class="admin_state_item">
           <span>{{ $t('admin.UserName') }}:</span>
           <a-select
@@ -58,19 +30,6 @@
             @keydown.enter="gettrialList"
           ></a-select>
         </div>
-                <!-- <div class="admin_state_item">
-                    <span>User Type:</span>
-                    <a-select
-                        v-model:value="systemUser"
-                        size="large"
-                        style="width: 230px"
-                        optionFilterProp="label"
-                        :options="state"
-                        placeholder="Please select"
-                        allowClear
-                        show-search
-                    ></a-select>
-                </div> -->
       </div>
       <div class="admin_search">
         <div class="admin_search_item" @click="searchHistoryList">
@@ -79,41 +38,66 @@
         <div class="admin_search_item" @click="addhHistoryList">
           {{ $t('admin.add') }}
         </div>
-				<div class="admin_search_item" style="width: auto;padding: 0 2rem;" @click="downloadTemplate">
+        <div
+          class="admin_search_item"
+          style="width: auto; padding: 0 2rem"
+          @click="downloadTemplate"
+        >
           {{ $t('admin.DownloadTemplate') }}
         </div>
-				<div class="admin_search_item" style="width: auto;padding: 0 2rem;" @click="uploadTemplate">
+        <div
+          class="admin_search_item"
+          style="width: auto; padding: 0 2rem"
+          @click="uploadTemplate"
+        >
           {{ $t('admin.UploadTemplate') }}
         </div>
-				<div class="admin_search_item" style="width: auto;padding: 0 2rem;" @click="ExportAccountData">
+        <div
+          class="admin_search_item"
+          style="width: auto; padding: 0 2rem"
+          @click="ExportAccountData"
+        >
           {{ $t('admin.ExportAccountData') }}
         </div>
-				<div class="admin_search_item" style="width: auto;padding: 0 2rem;" @click="deleteList">
+        <div
+          class="admin_search_item"
+          style="width: auto; padding: 0 2rem"
+          @click="deleteList"
+        >
           {{ $t('admin.Delete') }}
         </div>
       </div>
       <div class="admin_state_list">
-                <div
+        <div class="admin_state_list_item" @click="lastGeTrialList('year')">
-                    class="admin_state_list_item"
-                    @click="lastGeTrialList('year')"
-                >
           {{ $t('admin.NearlyAYear') }}
         </div>
-                <div
+        <div class="admin_state_list_item" @click="lastGeTrialList('month')">
-                    class="admin_state_list_item"
-                    @click="lastGeTrialList('month')"
-                >
           {{ $t('admin.LastMonth') }}
         </div>
-                <div
+        <div class="admin_state_list_item" @click="lastGeTrialList('week')">
-                    class="admin_state_list_item"
-                    @click="lastGeTrialList('week')"
-                >
           {{ $t('admin.LastWeek') }}
         </div>
       </div>
     </div>
     <div class="admin_table_content" ref="historyTable">
+      <div class="admin_state_list plan_list">
+        <div
+          v-for="plan in planFilterOptions"
+          :key="plan.id"
+          class="plan_item"
+          :class="{ 
+            active: subscriptionPlanId === plan.id,
+            disabled: plan.status === 'PENDING'
+          }"
+          @click="plan.status !== 'PENDING' && selectPlanFilter(plan.id)"
+        >
+          <span class="plan_name">{{ plan.name }}</span>
+          <MoreOutlined 
+            class="plan_more_icon" 
+            @click.stop="plan.status !== 'PENDING' && openPlanRenameModal(plan)" 
+          />
+        </div>
+      </div>
       <a-table
         @resizeColumn="handleResizeColumn"
         :loading="tableLoading"
@@ -123,14 +107,14 @@
         rowKey="id"
         :scroll="{ y: historyTableHeight }"
         @change="changePage"
-				:showSorterTooltip='false'
+        :showSorterTooltip="false"
         :pagination="{
           showSizeChanger: true,
           current: currentPage,
           pageSize: pageSize,
           total: total,
           showQuickJumper: true,
-                    bordered: false,
+          bordered: false
         }"
       >
         <template #bodyCell="{ column, text, record, index }">
@@ -138,27 +122,45 @@
             <div
               class="operate_item"
               @click="setAagree(record)"
-							style="margin-right: 2rem;"
+              style="margin-right: 2rem"
             >
               {{ $t('admin.Edit') }}
             </div>
-						<div
+            <div class="operate_item" @click="deleteAagree(record)">
-                            class="operate_item"
-                            @click="deleteAagree(record)"
-                        >
               {{ $t('admin.Delete') }}
             </div>
-                        <!-- <div
-							class="operate_item"
-							@click="deleteGroup(record, index)"
-						>
-							Delete
-						</div> -->
           </div>
         </template>
       </a-table>
     </div>
-		<allUserPoerationsVue ref="allUserPoerationsVue" @searchHistoryList="searchHistoryList"></allUserPoerationsVue>
+    <allUserPoerationsVue
+      ref="allUserPoerationsVue"
+      @searchHistoryList="searchHistoryList"
+      :plan-options="planFilterOptions"
+    ></allUserPoerationsVue>
+    <div class="renamePlanModal" ref="renamePlanModal"></div>
+    <!-- 重命名订阅计划弹窗 -->
+    <a-modal
+      v-model:visible="renamePlanModalVisible"
+      :title="$t('admin.RenamePlan')"
+      @ok="confirmRenamePlan"
+      @cancel="cancelRenamePlan"
+      :ok-text="$t('admin.OK')"
+      :cancel-text="$t('admin.Cancel')"
+      :get-container="() => $refs.renamePlanModal"
+    >
+      <div class="rename-plan-form">
+        <div class="admin_state_item">
+          <span>{{ $t('admin.PlanName') }}:</span>
+          <a-input
+            v-model:value="renamePlanForm.planName"
+            :placeholder="$t('admin.InputPlanName')"
+            style="width: 250px"
+            @pressEnter="confirmRenamePlan"
+          />
+        </div>
+      </div>
+    </a-modal>
   </div>
 </template>
 <script lang="ts">
@@ -169,23 +171,27 @@ import {
   computed,
   reactive,
   toRefs,
-    onMounted,
+  unref,
-} from "vue";
+  watch
-import { formatTime } from "@/tool/util";
+} from 'vue'
-import { useStore } from "vuex";
+import { formatTime } from '@/tool/util'
-import { Https } from "@/tool/https";
+import { useStore } from 'vuex'
-import { Modal,message } from 'ant-design-vue';
+import { Https } from '@/tool/https'
-import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+import { Modal, message, Input } from 'ant-design-vue'
-import allUserPoerationsVue from "./addAllUser.vue";
+import { ExclamationCircleOutlined, MoreOutlined } from '@ant-design/icons-vue'
+import allUserPoerationsVue from './addAllUser.vue'
 import { useI18n } from 'vue-i18n'
 export default defineComponent({
-    components: {allUserPoerationsVue,},
+  components: { allUserPoerationsVue, MoreOutlined },
   setup() {
     const store: any = useStore()
-		const selectedRowKeys = ref([]) as any;
+    const currentOrganizationId = computed(
+      () => store.state.UserHabit.userDetail.organizationId
+    )
+    const selectedRowKeys = ref([]) as any
     const onSelectChange = (changableRowKeys: string[]) => {
-			selectedRowKeys.value = changableRowKeys;
+      selectedRowKeys.value = changableRowKeys
-		};
+    }
     let filter: any = reactive({
       dataList: [],
       tableLoading: false,
@@ -196,10 +202,11 @@ export default defineComponent({
       rowSelection: computed(() => {
         return {
           selectedRowKeys: unref(selectedRowKeys),
-					onChange: onSelectChange,
+          onChange: onSelectChange
         }
       })
-        });
+    })
+
     const { t } = useI18n()
 
     let filterData: any = reactive({
@@ -207,159 +214,154 @@ export default defineComponent({
       currentPage: 1,
       pageSize: 10,
       total: 0,
-            country: "",
+      country: '',
-            email: "",
+      email: '',
-            userType: "",
+      userType: '',
       ids: [],
-            occupation: "",
+      occupation: '',
-            systemUser: "",
+      systemUser: '',
-            order: "", //'Ascending  升序 Descending 降序'
+      order: '', //'Ascending  升序 Descending 降序'
       orderBy: '',
-            userName: "",
+      userName: '',
-        });
+      subscriptionPlanId: ''
+    })
 
-        let renameData: any = ref({}); //修改名字选中的数据
+    let renameData: any = ref({}) //修改名字选中的数据
+    const renamePlanModalVisible = ref(false)
+    const renamePlanForm = reactive({
+      planId: null as number | null,
+      planName: ''
+    })
     const columns: any = computed(() => {
       return [
         {
-                    title: t("admin.UserId"),
+          title: t('admin.UserId'),
-                    align: "center",
+          align: 'center',
-                    dataIndex: "id",
+          dataIndex: 'id',
-                    key: "id",
+          key: 'id',
           width: 100,
-                    fixed: "left",
+          fixed: 'left',
-					sorter: true,
+          sorter: true
         },
         {
-                    title: t("admin.Email"),
+          title: t('admin.Email'),
-                    align: "center",
+          align: 'center',
-                    dataIndex: "userEmail",
+          dataIndex: 'userEmail',
-                    key: "userEmail",
+          key: 'userEmail',
           width: 200,
           ellipsis: true
         },
         {
-                    title: t("admin.UserName"),
+          title: t('admin.UserName'),
-                    align: "center",
+          align: 'center',
-                    dataIndex: "userName",
+          dataIndex: 'userName',
-                    key: "userName",
+          key: 'userName',
           width: 150,
           ellipsis: true
-                    // customRender: (record: any) => {
-                    //     let time = formatTime(
-                    //         record.text / 1000,
-                    //         "YYYY-MM-DD hh:mm:ss"
-                    //     );
-                    //     return time;
-                    // },
         },
         {
-                    title: t("admin.language"),
+          title: t('admin.language'),
-                    align: "center",
+          align: 'center',
-                    dataIndex: "language",
+          dataIndex: 'language',
-                    key: "language",
+          key: 'language',
           width: 100,
           ellipsis: true,
           customRender: (record: any) => {
-                        return t(`admin.${record.text}`);
+            return t(`admin.${record.text}`)
-                    },
+          }
         },
         {
-                    title: t("admin.CreateDate"),
+          title: t('admin.CreateDate'),
-                    align: "center",
+          align: 'center',
-                    dataIndex: "createDate",
+          dataIndex: 'createDate',
-                    key: "createDate",
+          key: 'createDate',
           width: 200,
-					sorter: true,
+          sorter: true
         },
         {
-                    title: t("admin.Credits"),
+          title: t('admin.Credits'),
-                    align: "center",
+          align: 'center',
-                    // width: 150,
+          dataIndex: 'credits',
-                    // minWidth: 100,
+          key: 'credits',
-                    // maxWidth: 200,
-                    // resizable: true,
-                    dataIndex: "credits",
-                    key: "credits",
           width: 100,
-					sorter: true,
+          sorter: true
         },
         {
-                    title: t("admin.CreditsUsage"),	
+          title: t('admin.CreditsUsage'),
-                    align: "center",
+          align: 'center',
-                    dataIndex: "creditsUsage",
+          dataIndex: 'creditsUsage',
-                    key: "creditsUsage",
+          key: 'creditsUsage',
           width: 150,
-					sorter: true,
+          sorter: true
         },
         {
-                    title: t("admin.CreditsUsageLimit"),	
+          title: t('admin.CreditsUsageLimit'),
-                    align: "center",
+          align: 'center',
-                    dataIndex: "creditsUsageLimit",
+          dataIndex: 'creditsUsageLimit',
-                    key: "creditsUsageLimit",
+          key: 'creditsUsageLimit',
           width: 200,
-					sorter: true,
+          sorter: true
         },
         {
-                    title: t("admin.Operations"),
+          title: t('admin.Operations'),
-                    key: "operation",
+          key: 'operation',
           width: 120,
-                    align: "center",
+          align: 'center',
-                    fixed: "right",
+          fixed: 'right',
-                    // slots:{customRender:'action'}
+          Operations: true
-                    Operations: true,
+        }
-                },
+      ]
-            ];
+    })
-        });
     //改变页码
     let changePage = (e: any, filters: any, sorter: any) => {
-            filterData.currentPage = e.current;
+      filterData.currentPage = e.current
-            filterData.pageSize = e.pageSize;
+      filterData.pageSize = e.pageSize
       if (sorter.order) {
         if (sorter.columnKey == 'id') {
           filterData.orderBy = 'id'
-				}else if(sorter.columnKey == "createDate"){
+        } else if (sorter.columnKey == 'createDate') {
           filterData.orderBy = 'time'
-				}else if(sorter.columnKey == "credits"){
+        } else if (sorter.columnKey == 'credits') {
           filterData.orderBy = 'credits'
         }
       }
       if (sorter.order) {
-				filterData.order = sorter.order == "descend" ? "Descending" : "Ascending";
+        filterData.order = sorter.order == 'descend' ? 'Descending' : 'Ascending'
       } else {
         filterData.order = ''
       }
 
-            gettrialList();
+      gettrialList()
-        };
+    }
 
     //查询列表
     let searchHistoryList = () => {
-            filterData.currentPage = 1;
+      filterData.currentPage = 1
-            gettrialList();
+      gettrialList()
-        };
+    }
     let clearHistoryList = () => {
-            filterData.rangePickerValue = [],
+      ;(filterData.rangePickerValue = []),
-			filterData.currentPage = 1,
+        (filterData.currentPage = 1),
-			filterData.pageSize = 10,
+        (filterData.pageSize = 10),
-			filterData.total = 0,
+        (filterData.total = 0),
-			filterData.country = "",
+        (filterData.country = ''),
-			filterData.email = "",
+        (filterData.email = ''),
-			filterData.userType = "",
+        (filterData.userType = ''),
-			filterData.ids = [],
+        (filterData.ids = []),
-			filterData.occupation = "",
+        (filterData.occupation = ''),
-			filterData.order = "", //'Ascending  升序 Descending 降序'
+        (filterData.order = ''), //'Ascending  升序 Descending 降序'
-			filterData.orderBy = "", //'Ascending  升序 Descending 降序'
+        (filterData.orderBy = ''), //'Ascending  升序 Descending 降序'
-			filterData.systemUser = "",
+        (filterData.systemUser = ''),
-			filterData.userName = "";
+        (filterData.userName = ''),
-        };
+        (filterData.subscriptionPlanId = '')
+    }
     let setHistoryListData = () => {
       let startDate: any = filterData.rangePickerValue?.[0]
-                ? filterData.rangePickerValue[0] + " " + "00:00:00"
+        ? filterData.rangePickerValue[0] + ' ' + '00:00:00'
-                : "";
+        : ''
       let endDate: any = filterData.rangePickerValue?.[1]
-                ? filterData.rangePickerValue[1] + " " + "23:59:59"
+        ? filterData.rangePickerValue[1] + ' ' + '23:59:59'
-                : "";
+        : ''
       let data = {
         endTime: endDate,
         startTime: startDate,
@@ -375,100 +377,164 @@ export default defineComponent({
         orderBy: filterData.orderBy,
         // userName: filterData.userName,
         userName: filterData.ids,
-				
+        subscriptionPlanId: filterData.subscriptionPlanId
-            };
+      }
-            return data;
+      return data
-        };
+    }
     //获取列表
-        let gettrialList = () => {
+    const gettrialList = () => {
-            filter.tableLoading = true;
+      filter.tableLoading = true
-            let data = setHistoryListData();
+      let data = setHistoryListData()
-            Https.axiosPost(Https.httpUrls.subAccountList, data).then(
+      Https.axiosPost(Https.httpUrls.subAccountList, data).then((rv: any) => {
-                (rv: any) => {
         if (rv) {
-						console.log(rv)
+          filter.dataList = rv.content
-                        // this.dataList = rv
+          filterData.total = rv.total
-                        filter.dataList = rv.content;
+          filter.tableLoading = false
-                        filterData.total = rv.total;
-                        filter.tableLoading = false;
 
           // this.workspaceItem.position = this.singleTypeList[0].label
         }
+      })
     }
-            );
-        };
     let lastGeTrialList = (str: string) => {
-            clearHistoryList();
+      clearHistoryList()
-            let currentDate = new Date();
+      let currentDate = new Date()
-            let currentTimestamp = Math.floor(currentDate.getTime() / 1000);
+      let currentTimestamp = Math.floor(currentDate.getTime() / 1000)
       // 计算30天前的时间戳
-            let thirtyDaysAgoTimestamp;
+      let thirtyDaysAgoTimestamp
-            if (str == "year") {
+      if (str == 'year') {
-                thirtyDaysAgoTimestamp = currentTimestamp - 360 * 24 * 60 * 60;
+        thirtyDaysAgoTimestamp = currentTimestamp - 360 * 24 * 60 * 60
-            } else if (str == "month") {
+      } else if (str == 'month') {
-                thirtyDaysAgoTimestamp = currentTimestamp - 30 * 24 * 60 * 60;
+        thirtyDaysAgoTimestamp = currentTimestamp - 30 * 24 * 60 * 60
-            } else if (str == "week") {
+      } else if (str == 'week') {
-                thirtyDaysAgoTimestamp = currentTimestamp - 7 * 24 * 60 * 60;
+        thirtyDaysAgoTimestamp = currentTimestamp - 7 * 24 * 60 * 60
+      }
+      filterData.rangePickerValue[0] = formatTime(thirtyDaysAgoTimestamp, 'YYYY-MM-DD')
+      gettrialList()
     }
-            filterData.rangePickerValue[0] = formatTime(
-                thirtyDaysAgoTimestamp,
-                "YYYY-MM-DD"
-            );
-            gettrialList();
-        };
     let filterOption = (input: any, option: any) => {
       // 使用 option.label 进行搜索
-            return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
+      return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
-        };
+    }
+    // 订阅计划筛选（按钮点击）
+    const selectPlanFilter = async (planId: string) => {
+      filterData.subscriptionPlanId = planId
+      // 切换管理员订阅计划
+      Https.axiosGet(Https.httpUrls.switchSubscribePlan, {
+        params: {
+          targetSubscriptionPlanId: planId,
+          adminAccId: store.state.UserHabit.userDetail.id
+        }
+      }).then((res: any) => {
+        console.log(res)
+      })
+      searchHistoryList()
+    }
+    const planFilterOptions = ref([])
+    const fetchSubscribePlanList = () => {
+      const orgId = currentOrganizationId.value
+      if (!orgId) return
+      Https.axiosPost(Https.httpUrls.searchSubscribeByOrg, {
+        organizationId: orgId,
+        status: ['ACTIVE','PENDING']
+      }).then(res => {
+        // 将与当前用户 subscriptionPlanId 相同的订阅计划放到第一个
+        const userSubscriptionPlanId = store.state.UserHabit.userDetail.subscriptionPlanId
+        if (userSubscriptionPlanId && Array.isArray(res)) {
+          const sortedList = [...res].sort((a: any, b: any) => {
+            const isAUserPlan = a.id == userSubscriptionPlanId
+            const isBUserPlan = b.id == userSubscriptionPlanId
+            if (isAUserPlan && !isBUserPlan) return -1
+            if (!isAUserPlan && isBUserPlan) return 1
+            return 0
+          })
+          planFilterOptions.value = sortedList
+        } else {
+          planFilterOptions.value = res
+        }
+      })
+    }
+    // 监听组织ID，获取到值后再拉取订阅计划
+    watch(
+      () => currentOrganizationId.value,
+      orgId => {
+        if (orgId) {
+          fetchSubscribePlanList()
+          const userSubscriptionPlanId = store.state.UserHabit.userDetail.subscriptionPlanId
+          if (userSubscriptionPlanId) {
+            selectPlanFilter(userSubscriptionPlanId)
+          }
+        }
+      },
+      { immediate: true }
+    )
+    // 打开重命名弹窗（基于当前点击的计划）
+    const openPlanRenameModal = plan => {
+      renamePlanForm.planId = plan.id
+      renamePlanForm.planName = plan?.name || ''
+      renamePlanModalVisible.value = true
+      console.log(renamePlanForm)
+    }
     let addhHistoryList = () => {
       allUserPoerationsVue.value.init({ value: 'Add', label: t('admin.add') }, '')
-		};
+    }
     let allUserPoerationsVue = ref()
     let setAagree = (data: any) => {
       allUserPoerationsVue.value.init({ value: 'Edit', label: t('admin.Edit') }, data)
     }
     const downloadTemplate = () => {
-			Https.axiosGet(Https.httpUrls.subAccountImportExcelDownload,{responseType: 'blob',env:{binary:true}}).then((rv:any)=>{
+      Https.axiosGet(Https.httpUrls.subAccountImportExcelDownload, {
-				const link = document.createElement('a');
+        responseType: 'blob',
-				link.href = rv.url;
+        env: { binary: true }
-				link.download = 'file.xlsx'; // 设置正确的文件扩展名
+      }).then((rv: any) => {
-				document.body.appendChild(link);
+        const link = document.createElement('a')
-				link.click();
+        link.href = rv.url
-				document.body.removeChild(link);
+        link.download = 'file.xlsx' // 设置正确的文件扩展名
+        document.body.appendChild(link)
+        link.click()
+        document.body.removeChild(link)
         // 释放 URL 对象
-				URL.revokeObjectURL(link.href);
+        URL.revokeObjectURL(link.href)
       })
     }
     const ExportAccountData = () => {
-			Https.axiosGet(Https.httpUrls.exportAccountsToExcel,{headers:{responseType: 'blob',},env:{binary:true,binaryType:'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8'}}).then((rv:any)=>{
+      Https.axiosGet(Https.httpUrls.exportAccountsToExcel, {
-				const link = document.createElement('a');
+        headers: { responseType: 'blob' },
-				link.href = rv.url;
+        env: {
-				link.download = 'file.xlsx'; // 设置正确的文件扩展名
+          binary: true,
-				document.body.appendChild(link);
+          binaryType:
-				link.click();
+            'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8'
-				document.body.removeChild(link);
+        }
+      }).then((rv: any) => {
+        const link = document.createElement('a')
+        link.href = rv.url
+        link.download = 'file.xlsx' // 设置正确的文件扩展名
+        document.body.appendChild(link)
+        link.click()
+        document.body.removeChild(link)
         // 释放 URL 对象
-				URL.revokeObjectURL(link.href);
+        URL.revokeObjectURL(link.href)
       })
     }
     const uploadTemplate = () => {
-			const fileInput = document.createElement('input');	
+      const fileInput = document.createElement('input')
-			fileInput.type = 'file';
+      fileInput.type = 'file'
-			fileInput.accept = '.xlsx'; // 只接受 .xlsx 文件
+      fileInput.accept = '.xlsx' // 只接受 .xlsx 文件
       fileInput.onchange = (event: any) => {
-				const file = event.target.files[0]; // 获取选择的文件
+        const file = event.target.files[0] // 获取选择的文件
         if (file) {
-					let param = new FormData(); 
+          let param = new FormData()
-					param.append('file',file);
+          param.append('file', file)
-					let config:any = {headers:{'Content-Type':'multipart/form-data','Accept':'*/*'  }}
+          let config: any = {
-					Https.axiosPost(Https.httpUrls.subAccountImport,param,config)
+            headers: { 'Content-Type': 'multipart/form-data', 'Accept': '*/*' }
-					.then((rv:any)=>{
-						gettrialList();
-					})
           }
-			};
+          Https.axiosPost(Https.httpUrls.subAccountImport, param, config).then(
-			fileInput.click();
+            (rv: any) => {
-
+              gettrialList()
+            }
+          )
+        }
+      }
+      fileInput.click()
     }
     const confirmDelete = () => {
       return new Promise<void>((resolve, reject) => {
@@ -484,7 +550,7 @@ export default defineComponent({
           onCancel() {
             resolve(false)
           }
-				});
+        })
       })
     }
     const deleteList = async () => {
@@ -494,9 +560,10 @@ export default defineComponent({
       if (!boolean) {
         return
       }
-			Https.axiosPost(Https.httpUrls.deleteSubAccount,{deleteIdList:selectedRowKeys.value})
+      Https.axiosPost(Https.httpUrls.deleteSubAccount, {
-			.then((rv:any)=>{
+        deleteIdList: selectedRowKeys.value
-				gettrialList();
+      }).then((rv: any) => {
+        gettrialList()
       })
     }
     const deleteAagree = async (event: any) => {
@@ -507,18 +574,44 @@ export default defineComponent({
       const value = {
         deleteIdList: [event.id]
       }
-			Https.axiosPost(Https.httpUrls.deleteSubAccount,value)
+      Https.axiosPost(Https.httpUrls.deleteSubAccount, value).then((rv: any) => {
-			.then((rv:any)=>{
+        gettrialList()
-				gettrialList();
       })
     }
-        onMounted(() => {
+
-			let allCountry: any = sessionStorage.getItem("allCountry");
+    // 确认重命名
-            if (allCountry) {
+    const confirmRenamePlan = () => {
-                filter.allCountry = JSON.parse(allCountry);
+      if (!renamePlanForm.planName || !renamePlanForm.planName.trim()) {
+        message.warning(t('admin.PlanNameRequired'))
+        return
       }
-            gettrialList();
+
-        });
+      Https.axiosPost(Https.httpUrls.updateSubscribePlan, {
+        id: renamePlanForm.planId,
+        name: renamePlanForm.planName.trim()
+      })
+        .then((rv: any) => {
+          message.success(t('admin.RenamePlanSuccess'))
+          renamePlanModalVisible.value = false
+          fetchSubscribePlanList()
+        })
+        .catch((error: any) => {
+          message.error(error.message || t('admin.RenamePlanFailed'))
+        })
+    }
+    // 取消重命名
+    const cancelRenamePlan = () => {
+      renamePlanModalVisible.value = false
+      renamePlanForm.planId = null
+      renamePlanForm.planName = ''
+    }
+    onMounted(() => {
+      let allCountry: any = sessionStorage.getItem('allCountry')
+      if (allCountry) {
+        filter.allCountry = JSON.parse(allCountry)
+      }
+      gettrialList()
+    })
     return {
       ...toRefs(filter),
       ...toRefs(filterData),
@@ -537,24 +630,54 @@ export default defineComponent({
       uploadTemplate,
       deleteList,
       deleteAagree,
-        };
+      planFilterOptions,
+      selectPlanFilter,
+      openPlanRenameModal,
+      renamePlanModalVisible,
+      renamePlanForm,
+      confirmRenamePlan,
+      cancelRenamePlan,
+      fetchSubscribePlanList
+    }
   },
   data() {
     return {
       historyTableHeight: 0,
       handleResizeColumn: (w: any, col: any) => {
-                col.width = w;
+        col.width = w
-            },
+      }
-        };
+    }
   },
   mounted() {
-        let historyTable: any = this.$refs.historyTable;
+    this.updateTableHeight()
-        this.historyTableHeight = historyTable.clientHeight - 200;
+    window.addEventListener('resize', this.updateTableHeight)
   },
-    methods: {},
+  beforeUnmount() {
-});
+    window.removeEventListener('resize', this.updateTableHeight)
+  },
+  methods: {
+    updateTableHeight() {
+      const historyTable: any = this.$refs.historyTable
+      if (historyTable) {
+        // 为底部分页器预留固定空间，使表格部分高度固定且分页器始终可见
+        this.historyTableHeight = historyTable.clientHeight - 200
+      }
+    }
+  }
+})
 </script>
 <style lang="less" scoped>
+.admin_page {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+.admin_table_content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
 .admin_page .admin_table_search .admin_state {
   display: flex;
   width: 70%;
@@ -570,4 +693,77 @@ export default defineComponent({
     font-size: 1.6rem;
   }
 }
+.plan_list {
+  margin-top: 1rem;
+  display: flex;
+  // flex-wrap: wrap;
+  padding-left: 2.8rem;
+  column-gap: 0.6rem;
+  margin-bottom: 2rem;
+  .plan_item {
+    height: 4rem;
+    width: auto;
+    min-width: 10rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    // font-size: 1.8rem;
+
+    font-weight: 600;
+    border-radius: 1.3rem;
+    color: #fff;
+    cursor: pointer;
+    border: 1.8px solid #000;
+    background-color: #000;
+    padding: 0 1rem 0 2rem;
+
+    &:hover {
+      color: #000;
+      background-color: #fff;
+    }
+
+    &.active {
+      background: #ffffff;
+      color: #000000;
+    }
+
+    &.disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+      background-color: #d9d9d9;
+      border-color: #d9d9d9;
+      color: #999;
+
+      &:hover {
+        background-color: #d9d9d9;
+        color: #999;
+      }
+    }
+  }
+
+  .plan_item {
+    column-gap: 0.6rem;
+  }
+
+  .plan_more_icon {
+    font-size: 1.6rem;
+    cursor: pointer;
+  }
+}
+.subscription-plan-cell {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.rename-plan-form {
+  padding: 2rem 0;
+  .admin_state_item {
+    display: flex;
+    align-items: center;
+    > span {
+      width: 10rem;
+      margin-right: 1rem;
+    }
+  }
+}
 </style>

src/component/Canvas/CanvasEditor/index.vue

@@ -902,7 +902,7 @@ const changeCanvas = async (command) => {
     ...command, // 传递完整的命令数据
   };
   emit("changeCanvas", commandData);
-  if (command.canUndo || command.canRedo) {
+  if ((command.canUndo || command.canRedo) && props.enabledRedGreenMode) {
     setTimeout(async () => {
       const imageData = await canvasManager.exportImage({
         restoreOpacityInRedGreen: true, // 恢复红绿图模式下的透明度

src/component/Canvas/CanvasEditor/managers/ExportManager.js

@@ -555,23 +555,17 @@ export class ExportManager {
       );
     }
 
-    // 获取固定图层对象的边界矩形（包含位置、尺寸、缩放等信息）
-    const fixedBounds = fixedLayerObject?.getBoundingRect?.();
-
     // 使用固定图层的实际显示尺寸作为导出画布尺寸
-    const canvasWidth = Math.round(fixedBounds.width);
+    const canvasWidth = Math.round(fixedLayerObject.width * fixedLayerObject.scaleX);
-    const canvasHeight = Math.round(fixedBounds.height);
+    const canvasHeight = Math.round(fixedLayerObject.height * fixedLayerObject.scaleY);
 
     console.log(`红绿图模式导出，画布尺寸: ${canvasWidth}x${canvasHeight}`);
-    console.log("固定图层边界:", fixedBounds);
 
     // 创建固定尺寸的临时画布
     const scaleFactor = 2; // 高清导出
     const tempCanvas = document.createElement("canvas");
     tempCanvas.width = canvasWidth * scaleFactor;
     tempCanvas.height = canvasHeight * scaleFactor;
-    tempCanvas.style.width = canvasWidth + "px";
-    tempCanvas.style.height = canvasHeight + "px";
 
     const tempFabricCanvas = new fabric.StaticCanvas(tempCanvas, {
       width: canvasWidth,
@@ -584,8 +578,7 @@ export class ExportManager {
 
     try {
       // 获取裁剪路径对象（如果存在）
-      const clipPathObject = await this._getClipPathObject(fixedBounds);
+      const clipPathObject = await this._getClipPathObject(fixedLayerObject);
-
       // 克隆并添加所有对象到临时画布，需要调整位置相对于固定图层
       for (let i = 0; i < objectsToExport.length; i++) {
         const obj = objectsToExport[i];
@@ -594,19 +587,20 @@ export class ExportManager {
           restoreOpacityInRedGreen && true
         );
         if (cloned) {
-          // 调整对象位置：将原画布坐标转换为以固定图层为原点的相对坐标
           cloned.set({
-            left: cloned.left - fixedBounds.left,
+            left: 0,
-            top: cloned.top - fixedBounds.top,
+            top: 0,
+			originX: "left",
+			originY: "top",
           });
 
           // 更新对象坐标
           cloned.setCoords();
 
           // 设置裁剪路径到对象
-          if (clipPathObject) {
+        //   if (clipPathObject) {
-            cloned.clipPath = clipPathObject;
+        //     cloned.clipPath = clipPathObject;
-          }
+        //   }
 
           tempFabricCanvas.add(cloned);
         }

src/component/Detail/DesignDetail.vue

@@ -61,7 +61,7 @@
 					<model 
 						ref="model" 
 						:key="positionKey"
-
+						@addDetail="addDetail"
 						@canvasReload="canvasReload" 
 						@detailEdit="detailEdit" 
 						@addSketch="()=>isEditPattern.value = ''"
@@ -78,7 +78,16 @@
 				<div class="item detailRight" :class="{canvas:isEditPattern.value}">
 					<div class="submit">
 					</div>
-					<div class="contentRight" v-if="currentDetailType && !isEditPattern.value">
+					<div class="contentRight" v-if="currentDetailType === 'sketch' && !selectDetail?.newDetail?.[currentDetailType] && !selectDetail.sketchString && !isEditPattern.value">
+						<img 
+							style="width: 100%; height: 100%;object-fit: contain;"
+							:src="
+							'/image/toolsGuide/' +
+							(locale == 'ENGLISH' ? 'detailEN' : 'detailCN') +
+							'.png'
+						" alt="">
+					</div>
+					<div class="contentRight" v-else-if="currentDetailType && !isEditPattern.value">
 						<detailRight ref="detailRight"></detailRight>
 						<div class="btn" 
 							v-show="
@@ -102,7 +111,7 @@
 					</div> -->
 				</div>
 			</div>
-			
+			<addDetails ref="addDetails" @setSloganData="setSloganData"></addDetails>
         </a-modal>
          <div class="mark_loading" v-show="loadingShow">
             <a-spin size="large" />
@@ -128,17 +137,18 @@ import { useI18n } from 'vue-i18n'
 import addDetails from '@/component/Detail/addDetails.vue'
 export default defineComponent({
     components:{
-		detailLeft,model,detailRight,canvasBox
+		detailLeft,model,detailRight,canvasBox,addDetails
     },
 	emits:['destroy'],
     setup(props,{emit}) {
         const store = useStore();
-      
+		const {locale} = useI18n()
 		const detailDom = reactive({
 			model:null,
 			canvasBox,
 			detailRight,
 			detailLeft:null as any,
+			addDetails:null as any,
 		})
 		const userDetail = computed(()=>{
 			return store.state.UserHabit.userDetail
@@ -506,6 +516,17 @@ export default defineComponent({
 			sessionStorage.setItem('revocation', JSON.stringify(revocation));
 			sessionStorage.setItem('oppositeRevocation',JSON.stringify([]));
 		}
+
+		const addDetail = () =>{
+			let addDetails:any = detailDom.addDetails
+			addDetails.init(detailData.selectDetail,'')
+		}
+		const setSloganData = (data:any)=>{
+			detailData.selectDetail.sketchString = data
+			if(detailData.currentDetailType == 'sketch' && detailData.selectDetail?.newDetail?.sketch){
+				detailData.selectDetail.newDetail.sketch = null
+			}
+		}
 		onMounted(()=>{
 			window.addEventListener('resize', handleResize);
 		})
@@ -518,6 +539,7 @@ export default defineComponent({
 		})
 		
         return{
+			locale,
 			...toRefs(detailDom),
 			...toRefs(detailData),
             closeModal,
@@ -531,6 +553,8 @@ export default defineComponent({
 			canvasReload,
 			modelOnLoad,
 			sketchSysToLibrary,
+			addDetail,
+			setSloganData,
         }
     },
 	

src/component/Detail/canvas/index.vue

@@ -230,7 +230,7 @@ export default defineComponent({
 			let size = {
 				...detailData.canvasConfig,
 			}
-
+			store.commit('DesignDetail/updataDetailItem',{maskUrl:value})
 			segmentImage(value,full,size).then(async (rv)=>{
 				let front = detailData.frontBack.front[detailData.imgDomIndex]
 				let back = detailData.frontBack.back[detailData.imgDomIndex]
@@ -243,7 +243,7 @@ export default defineComponent({
 				let base64 = await resizeImageWithNativeCanvas(front.oldMaskUrl,value)
 				front.maskUrl = base64
 				back.imageUrl = rv.targetBackUrl
-				store.commit('DesignDetail/updataDetailItem',{maskUrl:value})
+				// store.commit('DesignDetail/updataDetailItem',{maskUrl:value})
 			})
 
 		}

src/component/Detail/detailLeft/index.vue

@@ -6,7 +6,6 @@
 		<element v-show="currentDetailType == 'element'"></element>
 		<accessory v-show="currentDetailType == 'accessory'"></accessory>
 		<models v-show="currentDetailType == 'models'"></models>
-		<addDetails ref="addDetails" @setSloganData="setSloganData"></addDetails>
     </div>
 </template>
 <script lang="ts">
@@ -22,12 +21,12 @@ import color from './colorBox/index.vue'
 import element from './element.vue'
 import accessory from './accessory.vue'
 import models from './models.vue'
-import addDetails from '@/component/Detail/addDetails.vue'
 
 export default defineComponent({
     components:{
-		sketch,print,color,addDetails,element,models,accessory
+		sketch,print,color,element,models,accessory
     },
+	emit:['addDetail'],
     setup(props,{emit}) {
         const store = useStore();
 		const detailData = reactive({
@@ -45,14 +44,7 @@ export default defineComponent({
 			sketch:null as any,
 		})
 		const addDetail = () =>{
-			let addDetails:any = getDetailListDom.addDetails
+			emit('addDetail')
-			addDetails.init(detailData.selectDetail,'')
-		}
-		const setSloganData = (data:any)=>{
-			detailData.selectDetail.sketchString = data
-			if(detailData.currentDetailType == 'sketch' && detailData.selectDetail?.newDetail?.sketch){
-				detailData.selectDetail.newDetail.sketch = null
-			}
 		}
 		const sketchSysToLibrary = ()=>{//系统sketch添加到library更新library
 			getDetailListDom.sketch.sketchSysToLibrary()
@@ -63,7 +55,6 @@ export default defineComponent({
 			...toRefs(getDetailListData),
 			...toRefs(getDetailListDom),
 			addDetail,
-			setSloganData,
 			sketchSysToLibrary,
         }
     },

src/component/Detail/detailLeft/sketch.vue

@@ -5,7 +5,7 @@
 			<!-- <img :src="selectDetail?.sketchString?selectDetail?.sketchString:selectDetail.path" alt=""> -->
 			<img :src="selectDetail.path" alt="">
 			<!-- <img :src="selectDetail.sketchString || selectDetail.path" alt=""> -->
-			<i :title="$t('DesignDetail.editSketchTitle')" class="fi fi-rs-pencil-paintbrush" @click.stop="openAddDetail"></i>
+			<!-- <i :title="$t('DesignDetail.editSketchTitle')" class="fi fi-rs-pencil-paintbrush" @click.stop="openAddDetail"></i> -->
 		</div>
 		<div class="select_sketch" v-else>
 			<div>

src/component/Detail/model/index.vue

@@ -14,6 +14,7 @@
 				<i class="icon iconfont icon-chehui" @click="revocation"></i>
 				<i class="icon iconfont icon-fanchehui" @click="oppositeRevocation"></i>
 				<!-- 编辑 -->
+				<i class="fi fi-rs-pencil-paintbrush" :title="$t('DesignDetail.editSketchTitle')" :class="{'pointerEventsNone':!selectDetail?.id}" @click="()=>$emit('addDetail')"></i>
 				<i class="fi fi-rr-edit" :title="$t('DesignDetail.editTitle')" :class="{active:isEditPattern.value == 'canvasEditor','pointerEventsNone':!selectDetail?.id}" @click="showDesignImgDetail('canvasEditor')"></i>
 
 				<i class="icon iconfont icon-clothes" :title="$t('Canvas.editFrontBack')" style="font-size: 3.2rem;" @click="showDesignImgDetail('redGreenExample')" :class="{active:isEditPattern.value == 'redGreenExample','pointerEventsNone':!selectDetail?.id}"></i>
@@ -50,7 +51,7 @@ export default defineComponent({
     components:{
 		position,modelNav
     },
-	emits:['detailEdit','canvasReload','addSketch','revocation','oppositeRevocation','modelOnLoad','sketchSysToLibrary'],
+	emits:['detailEdit','canvasReload','addSketch','revocation','oppositeRevocation','modelOnLoad','sketchSysToLibrary','addDetail'],
     setup(props,{emit}) {
 		const {t} = useI18n()
         const store = useStore();

src/component/HomePage/Cropper.vue

@@ -30,7 +30,7 @@
                         :outputSize="option.size"
                         :outputType="option.outputType"
                         :auto-crop="option.autoCrop"
-						:fixedBox="isRound"
+						:fixedBox="!isRound"
 						:movable="true"
                         :fixed="isRound"
                         :auto-crop-width="option.autoCropWidth"
@@ -333,7 +333,6 @@ export default defineComponent({
             .cut_picture_review_block{
                 width: 100%;
                 height: calc(100% - 6.8rem*1.2);
-				min-height: calc(100% - 6.8rem*1.2);
 				margin: 0 auto;
 				.next_step_button{
 					margin-top: 2rem;

src/component/HomePage/Generate.vue

@@ -1379,6 +1379,7 @@ export default defineComponent({
         display: flex;
         align-items: center;
         justify-content: center;
+		position: absolute;
       }
       img {
         // width: calc(10rem*1.2);

src/component/HomePage/layout.vue

@@ -34,8 +34,8 @@
 					</div>
 				</div>
 				<div class="layout_centent" :class="{active:flex_direction}" id="layoutCentent">
-					<div v-for="item,index in layoutList" :key="item" :class="moodbClassName[index]" class="modal_imgItem" v-layout="item" @mousedown="setpitch(item,index)"  @touchstart="setpitch(item,index)" ref="content" >
+					<div v-for="item,index in layoutList" :key="item" :class="moodbClassName[index]" class="modal_imgItem" v-layout="item" @mousedown="setpitch(item,index)"  @touchstart="setpitch(item,index)" ref="content"  :style="{'background-image':`url(${item.imgUrl})`,'transform':`scale(${item.zoom?item.zoom:1}) rotateZ(${item.angle?item.angle:0}deg)`}">
-						<img crossOrigin="anonymous" :src="item.imgUrl" :style="{'transform':`translate(-50%, -50%) scale(${item.zoom?item.zoom:1}) rotateZ(${item.angle?item.angle:0}deg)`}"  draggable="false" :class="moodbClassName[index]" v-modelImg> 
+						<!-- <img crossOrigin="anonymous" :src="item.imgUrl" :style="{'transform':`translate(-50%, -50%) scale(${item.zoom?item.zoom:1}) rotateZ(${item.angle?item.angle:0}deg)`}"  draggable="false" :class="moodbClassName[index]" v-modelImg>  -->
 						<ul v-show="item.setPitch" class="layout_btn" >
 							<li class="layout_btn_top" v-compile.stop="'top'"></li>
 							<li class="layout_btn_bottom" v-compile.stop="'bottom'"></li>
@@ -736,6 +736,7 @@ export default defineComponent({
 		setmoodb(item:any){
 			this.moodbClassName = item
 			this.$emit('setmoodbClass',this.moodbClassName)
+			this.styleObj.class = this.moodbClassName
 			if(this.content){
 				for (item of (this.content as any)) {
 					item.classList.remove('active')
@@ -772,7 +773,7 @@ export default defineComponent({
 		initDomStyle(){
 			nextTick(()=>{
 				this.content.forEach((item:any,index:any) => {
-					if(this.styleObj.domStyle[index]){
+					if(this.styleObj.domStyle[index]?.left){
 						item.classList.add('active')
 						this.initStyle(item,this.styleObj.domStyle[index])
 					}
@@ -794,7 +795,7 @@ export default defineComponent({
 			})
 		},
 		initStyle(dom:any,style:any){
-			if(!style)return
+			if(!style || !dom)return
 			for (const [property, value] of Object.entries(style)) {
 				
 				dom.style.setProperty(property, value);
@@ -806,7 +807,7 @@ export default defineComponent({
 				this.styleObj.domStyle.push(this.setStyle(item.style))
 				this.domObj.dom.forEach((domName:any,index:any) => {
 					let style = this.domObj.domStyle[index]
-					let dom = item.querySelector(domName)
+					let dom = item.querySelector(domName) || item
 					this.styleObj[style].push(this.setStyle(dom.style))
 				})
 			});
@@ -840,7 +841,6 @@ export default defineComponent({
 					let config:any = {headers:{'Content-Type':'multipart/form-data','Accept':'*/*'  }}
 					Https.axiosPost(Https.httpUrls.elementUpload,param,config)
 					.then((rv: any) => {
-							// console.log(rv);
 							rv.imgUrl = rv.url
 							this.layout = false
 							this.loadingShow = false
@@ -1062,27 +1062,12 @@ export default defineComponent({
 				// 	height: 100%;
 				// }
 				overflow: hidden;
+				background-repeat: no-repeat;
+				background-position: center;
+				background-size: cover;
 				&.active{
 					position: absolute;
 				}
-				img{
-					// object-fit: cover;
-					// width: 100%;
-					// height: 100%;
-					pointer-events: none;
-					float: left;
-					user-select:none;
-					-webkit-user-drag: none;
-					position: absolute;
-					top: 50%;
-					left: 50%;
-					transform: translate(-50%,-50%) scale(1);
-				}
-				::selection {
-						// background: rgba(0,0,0,0);
-						// background: yellow;
-					}
-			
 			}
 		}
 		.wh1{

src/component/HomePage/renew.vue

@@ -19,7 +19,8 @@
       <div class="generalModel_closeIcon" @click.stop="cancelDsign()">
         <!-- <i class="fi fi-rr-cross-small"></i> -->
         <svg
-			width="100%" height="100%"
+          width="100%"
+          height="100%"
           viewBox="0 0 46 46"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
@@ -49,20 +50,32 @@
     <div class="renewContent">
       <div class="left">
         <div class="video">
-			  <video autoplay loop muted playsinline src="@/assets/images/icon/paymentVideo.mp4"></video>
+          <video
+            autoplay
+            loop
+            muted
+            playsinline
+            src="@/assets/images/icon/paymentVideo.mp4"
+          ></video>
           <div class="mask"></div>
         </div>
-		  <div class="title">{{ $t("Renew.Strengths") }}</div>
+        <div class="title">{{ $t('Renew.Strengths') }}</div>
         <div class="content">
           <div class="benefitsItem">
             <div class="describe">
               <div class="icon">
-				  <img src="@/assets/images/icon/paymentIntroduce1.png" alt="">
+                <img src="@/assets/images/icon/paymentIntroduce1.png" alt="" />
               </div>
               <div class="text">
-				  <p class="title">{{ $t("Renew.StrengthsTitle1") }}<br>{{ $t("Renew.StrengthsTitle1_1") }}</p>
+                <p class="title">
+                  {{ $t('Renew.StrengthsTitle1') }}
+                  <br />
+                  {{ $t('Renew.StrengthsTitle1_1') }}
+                </p>
                 <p class="info">
-					  {{ $t("Renew.StrengthsInfo1") }}<br>{{ $t("Renew.StrengthsInfo1_1") }}
+                  {{ $t('Renew.StrengthsInfo1') }}
+                  <br />
+                  {{ $t('Renew.StrengthsInfo1_1') }}
                 </p>
               </div>
             </div>
@@ -70,12 +83,18 @@
           <div class="benefitsItem">
             <div class="describe">
               <div class="icon">
-				  <img src="@/assets/images/icon/paymentIntroduce2.png" alt="">
+                <img src="@/assets/images/icon/paymentIntroduce2.png" alt="" />
               </div>
               <div class="text">
-				  <p class="title">{{ $t("Renew.StrengthsTitle2") }}<br>{{ $t("Renew.StrengthsTitle2_1") }}</p>
+                <p class="title">
+                  {{ $t('Renew.StrengthsTitle2') }}
+                  <br />
+                  {{ $t('Renew.StrengthsTitle2_1') }}
+                </p>
                 <p class="info">
-					  {{ $t("Renew.StrengthsInfo2") }}<br>{{ $t("Renew.StrengthsInfo2_1") }}
+                  {{ $t('Renew.StrengthsInfo2') }}
+                  <br />
+                  {{ $t('Renew.StrengthsInfo2_1') }}
                 </p>
               </div>
             </div>
@@ -83,13 +102,21 @@
           <div class="benefitsItem">
             <div class="describe">
               <div class="icon">
-				  <img src="@/assets/images/icon/paymentIntroduce3.png" alt="">
+                <img src="@/assets/images/icon/paymentIntroduce3.png" alt="" />
               </div>
               <div class="text">
                 <p class="title"></p>
-				  <p class="title">{{ $t("Renew.StrengthsTitle3") }}<br>{{ $t("Renew.StrengthsTitle3_1") }}</p>
+                <p class="title">
+                  {{ $t('Renew.StrengthsTitle3') }}
+                  <br />
+                  {{ $t('Renew.StrengthsTitle3_1') }}
+                </p>
                 <p class="info">
-					  {{ $t("Renew.StrengthsInfo3") }}<br>{{ $t("Renew.StrengthsInfo3_1") }}<br>{{ $t("Renew.StrengthsInfo3_2") }}
+                  {{ $t('Renew.StrengthsInfo3') }}
+                  <br />
+                  {{ $t('Renew.StrengthsInfo3_1') }}
+                  <br />
+                  {{ $t('Renew.StrengthsInfo3_2') }}
                 </p>
               </div>
             </div>
@@ -97,12 +124,18 @@
           <div class="benefitsItem">
             <div class="describe">
               <div class="icon">
-				  <img src="@/assets/images/icon/paymentIntroduce4.png" alt="">
+                <img src="@/assets/images/icon/paymentIntroduce4.png" alt="" />
               </div>
               <div class="text">
-				  <p class="title">{{ $t("Renew.StrengthsTitle4") }}<br>{{ $t("Renew.StrengthsTitle4_1") }}</p>
+                <p class="title">
+                  {{ $t('Renew.StrengthsTitle4') }}
+                  <br />
+                  {{ $t('Renew.StrengthsTitle4_1') }}
+                </p>
                 <p class="info">
-					  {{ $t("Renew.StrengthsInfo4") }}<br>{{ $t("Renew.StrengthsInfo4_1") }}
+                  {{ $t('Renew.StrengthsInfo4') }}
+                  <br />
+                  {{ $t('Renew.StrengthsInfo4_1') }}
                 </p>
               </div>
             </div>
@@ -111,7 +144,7 @@
       </div>
       <div class="right">
         <div class="title">
-			{{ $t("Renew.title") }}
+          {{ $t('Renew.title') }}
         </div>
         <!-- <div class="info">{{ $t("Renew.unlimited") }}</div> -->
         <div class="content">
@@ -119,36 +152,31 @@
             class="productItem"
             :class="{
               active: item.price == current.price,
-				sellWell: item.sellWell,
+              sellWell: item.sellWell
             }"
             v-for="item in personage"
             :key="item.price"
             @click="setPromotionData(item)"
           >
-			  <div class="popular" v-show="item.sellWell">{{ $t("Renew.MOSTPOPULAR") }}</div>
+            <div class="popular" v-show="item.sellWell">
+              {{ $t('Renew.MOSTPOPULAR') }}
+            </div>
             <div class="priceBox">
               <div class="left">
                 <p class="productType">1 {{ item.type.label }}</p>
-				  <p class="price">${{ item.price }}</p>
+                <p class="price">HK $ {{ item.price }}</p>
               </div>
               <div class="right">
                 <div class="promotion">
-					<div
+                  <div class="succeed" v-show="item.promotionData.error == 'true'">
-					  class="succeed"
-					  v-show="item.promotionData.error == 'true'"
-					>
                     {{ item.promotionData.code }}
-					  <i
+                    <i class="fi fi-sr-times-hexagon" @click="clearPromotionCode"></i>
-						class="fi fi-sr-times-hexagon"
-						@click="clearPromotionCode"
-					  ></i>
                   </div>
                   <div
                     class="input"
                     @click.stop
                     v-show="
-						!item.promotionData.error ||
+                      !item.promotionData.error || item.promotionData.error == 'false'
-						item.promotionData.error == 'false'
                     "
                   >
                     <input
@@ -156,14 +184,11 @@
                       :placeholder="$t('Renew.promotionCode')"
                       v-model="item.promotionData.code"
                     />
-					  <div style="cursor: pointer; background-color: #000; font-size: 1.2rem; color: #fff; padding: 0 .5rem;" @click="examine(item)">
+                    <div class="apply-btn" @click="examine(item)">
-						{{ $t("Renew.use") }}
+                      {{ $t('Renew.use') }}
                     </div>
                   </div>
-					<div
+                  <div class="error" v-show="item.promotionData.error == 'false'">
-					  class="error"
-					  v-show="item.promotionData.error == 'false'"
-					>
                     {{ item.promotionData.str }}
                   </div>
                 </div>
@@ -181,7 +206,7 @@
         <div class="payment">
           <div class="allocation">
             <div class="selectType">
-				<div class="text">{{ $t("Renew.Payment") }}:</div>
+              <div class="text">{{ $t('Renew.Payment') }}:</div>
               <label>
                 <input
                   name="payment"
@@ -190,7 +215,7 @@
                   v-model="PaymentType"
                   @change="setPaymentType('CreditCard')"
                 />
-				  {{ $t("Renew.CreditCard") }}
+                {{ $t('Renew.CreditCard') }}
               </label>
               <label>
                 <input
@@ -200,43 +225,47 @@
                   v-model="PaymentType"
                   @change="setPaymentType('Alipay')"
                 />
-				  {{ $t("Renew.Alipay") }}
+                {{ $t('Renew.Alipay') }}
               </label>
             </div>
           </div>
           <div class="gallery_btn gallery_btn_radius" @click="payment">
-				  {{ $t("upgradePlan.Continue") }}
+            {{ $t('upgradePlan.Continue') }}
           </div>
           <div class="payMethod_payAffirm_clause" ref="labelDisclaimer">
             <label>
               <!-- <input type="checkbox" v-model="clause" /> -->
-				<span class="generalModelDescription"
+              <span class="generalModelDescription">
-				  >{{ $t("upgradePlan.policy")}}
+                {{ $t('upgradePlan.policy') }}
                 <a
                   href="https://code-create.com.hk/aida-terms-and-conditions/"
-					target="_blank">
+                  target="_blank"
-					{{ $t("upgradePlan.policy1") }}
+                >
+                  {{ $t('upgradePlan.policy1') }}
                 </a>
                 &
                 <a
                   href="https://code-create.com.hk/aida-subscription-agreement/"
-					target="_blank">
+                  target="_blank"
-					{{ $t("upgradePlan.policy2") }}
+                >
+                  {{ $t('upgradePlan.policy2') }}
                 </a>
                 <!-- . * -->
-				  </span
+              </span>
-				>
             </label>
             <label class="secure">
-				  <span><i class="fi fi-rr-shield-check"></i>Pay safe & secure</span>
+              <span>
+                <i class="fi fi-rr-shield-check"></i>
+                Pay safe & secure
+              </span>
             </label>
             <label class="payIcon">
-				  <img class="stripe" src="@/assets/images/icon/stripe.svg" alt="">
+              <img class="stripe" src="@/assets/images/icon/stripe.svg" alt="" />
-				  <img class="alipay" src="@/assets/images/icon/alipay.svg" alt="">
+              <img class="alipay" src="@/assets/images/icon/alipay.svg" alt="" />
-				  <img class="alipay" src="@/assets/images/icon/jcbPay.svg" alt="">
+              <img class="alipay" src="@/assets/images/icon/jcbPay.svg" alt="" />
-				  <img class="alipay" src="@/assets/images/icon/mastercardPay.svg" alt="">
+              <img class="alipay" src="@/assets/images/icon/mastercardPay.svg" alt="" />
-				  <img class="alipay" src="@/assets/images/icon/yinlianPay.svg" alt="">
+              <img class="alipay" src="@/assets/images/icon/yinlianPay.svg" alt="" />
-				  <img class="alipay" src="@/assets/images/icon/visaPay.svg" alt="">
+              <img class="alipay" src="@/assets/images/icon/visaPay.svg" alt="" />
             </label>
           </div>
           <!-- <div class="paySecure">
@@ -250,101 +279,104 @@
       <a-spin size="large" />
     </div>
     <div class="mark_loading" v-show="isShowMark" state="true">
-		<div class="mark_loading_title">{{ $t("upgradePlan.completed") }}</div>
+      <div class="mark_loading_title">{{ $t('upgradePlan.completed') }}</div>
-		<div class="mark_loading_intro">{{ $t("upgradePlan.hint") }}</div>
+      <div class="mark_loading_intro">{{ $t('upgradePlan.hint') }}</div>
       <div class="mark_loading_title_box">
         <div class="mark_loading_btn mark_loading_btn2" @click="setPaidBack">
-			{{ $t("upgradePlan.Back") }}
+          {{ $t('upgradePlan.Back') }}
         </div>
         <div class="mark_loading_btn" @click="completePayment">OK</div>
       </div>
     </div>
   </a-modal>
-	<payMethod
+  <payMethod ref="payMethod" @completePayment="cancelDsign" type="renew"></payMethod>
-	  ref="payMethod"
-	  @completePayment="cancelDsign"
-	  type="renew"
-	></payMethod>
 </template>
 
 <script lang="ts">
-  import { defineComponent, computed, reactive, toRefs, onMounted, onBeforeUnmount } from "vue";
+import {
-  import { message } from "ant-design-vue";
+  defineComponent,
-  import payMethod from "@/component/Pay/payMethod.vue";
+  computed,
-  import { useStore } from "vuex";
+  reactive,
-  import { useI18n } from "vue-i18n";
+  toRefs,
-  import { Https } from "@/tool/https";
+  onMounted,
-  import md5 from "md5";
+  onBeforeUnmount
+} from 'vue'
+import { message } from 'ant-design-vue'
+import payMethod from '@/component/Pay/payMethod.vue'
+import { useStore } from 'vuex'
+import { useI18n } from 'vue-i18n'
+import { Https } from '@/tool/https'
+import md5 from 'md5'
 export default defineComponent({
   components: {
-	  payMethod,
+    payMethod
   },
   setup() {
-	  const store = useStore();
+    const store = useStore()
-	  const { t } = useI18n();
+    const { t } = useI18n()
     let renew = reactive({
       renewModel: false,
       renewModelMask: true,
-		pageWidth: "50%",
+      pageWidth: '50%'
-	  });
+    })
     let payMethodData = reactive({
       clause: false,
       labelDisclaimer: null as any,
       newWindow: null as any,
       isShowMark: false,
-		isShowMark_: false,
+      isShowMark_: false
-	  });
+    })
     let renewData = reactive({
       personage: [
         {
-			price: "100",
+          price: '100',
           sellWell: true,
           activity: false, //活动打折
           type: {
-			  value: "EcoMonth",
+            value: 'EcoMonth',
-			  label: computed(()=>t("Renew.Monthly")),
+            label: computed(() => t('Renew.Monthly'))
           },
           //   PaymentType: "CreditCard",
           promotionData: {
-			  code: "",
+            code: '',
-			  error: "",
+            error: '',
-			  str: "",
+            str: '',
-			  price: "",
+            price: ''
-			},
+          }
         },
         {
-			price: "500",
+          price: '500',
           sellWell: false,
           activity: false, //活动打折
           type: {
-			  value: "Month",
+            value: 'Month',
-			  label: computed(()=>t("Renew.Monthly")),
+            label: computed(() => t('Renew.Monthly'))
           },
           //   PaymentType: "CreditCard",
           promotionData: {
-			  code: "",
+            code: '',
-			  error: "",
+            error: '',
-			  str: "",
+            str: '',
-			  price: "",
+            price: ''
-			},
+          }
         },
         {
-			price: "5,000",
+          price: '5,000',
           sellWell: false,
           activity: false, //活动打折
-			typeValue: "year",
+          typeValue: 'year',
           type: {
-			  value: "Year",
+            value: 'Year',
-			  label: computed(()=>t("Renew.Yearly")),
+            label: computed(() => t('Renew.Yearly'))
           },
           //   PaymentType: "CreditCard",
           promotionData: {
-			  code: "",
+            code: '',
-			  error: "",
+            error: '',
-			  str: "",
+            str: '',
-			  price: "",
+            price: ''
-			},
+          }
-		  },
+        }
       ],
       // personage:computed(()=>{
       //     return {
@@ -365,55 +397,55 @@
       // }),
       firm: computed(() => {
         return {
-			title: "Education Edition",
+          title: 'Education Edition',
           price: {
-			  year: "500",
+            year: '500'
           },
           unit: {
-			  year: "HKD / Year",
+            year: 'HKD / Year'
           },
-			type: "year",
+          type: 'year',
           autoRenewal: {
-			  text: t("Renew.automatically"),
+            text: t('Renew.automatically'),
-			  value: true,
+            value: true
           },
-			typeList: ["year"],
+          typeList: ['year'],
-			info: "Customised plan",
+          info: 'Customised plan'
-		  };
+        }
       }),
       education: computed(() => {
         return {
-			title: "Enterprise Edition",
+          title: 'Enterprise Edition',
           price: {
-			  year: "500",
+            year: '500'
           },
           unit: {
-			  year: "HKD / Year",
+            year: 'HKD / Year'
           },
-			type: "year",
+          type: 'year',
           autoRenewal: {
-			  text: t("Renew.automatically"),
+            text: t('Renew.automatically'),
-			  value: true,
+            value: true
           },
-			typeList: ["year"],
+          typeList: ['year'],
-			info: "Customised plan",
+          info: 'Customised plan'
-		  };
+        }
       }),
       current: {} as any,
       payMethod: null as any,
-		PaymentType: "CreditCard",
+      PaymentType: 'CreditCard'
-	  });
+    })
     const init = () => {
-		renew.renewModel = true;
+      renew.renewModel = true
-		renewData.current = renewData.personage[1];
+      renewData.current = renewData.personage[1]
-	  };
+    }
     const cancelDsign = () => {
-		renew.renewModel = false;
+      renew.renewModel = false
       store.dispatch('getUserDetail')
-	  };
+    }
     const setPaymentType = (str: any) => {
-		renewData.PaymentType = str;
+      renewData.PaymentType = str
-	  };
+    }
     const payment = () => {
       //   if (!payMethodData.clause) {
       //     let labelDisclaimer: any = payMethodData.labelDisclaimer;
@@ -425,104 +457,92 @@
       //     }
       //     return;
       //   }
-		if (!renewData.PaymentType)
+      if (!renewData.PaymentType) return message.info(t('Renew.PleaseSelectPayment'))
-		  return message.info(t("Renew.PleaseSelectPayment"));
+      let url = window.location.origin + '/paySucceed'
-		let url = window.location.origin + "/paySucceed";
       let data = {
-		  autoRenewal: renewData.PaymentType != "Alipay", //false为不自动续费
+        autoRenewal: renewData.PaymentType != 'Alipay', //false为不自动续费
-		  productName: "Subscription",
+        productName: 'Subscription',
         quantity: 1,
         returnUrl: url,
         subscribeType: renewData.current.type.value, //yearly为年费，monthly为月费
-		  wallet: "ALIPAYHK",
+        wallet: 'ALIPAYHK',
-		  promotionCode: renewData.current.promotionData.code,
+        promotionCode: renewData.current.promotionData.code
-		};
+      }
-		let httpsUrl = Https.httpUrls.payStripe;
+      let httpsUrl = Https.httpUrls.payStripe
-		payMethodData.isShowMark_ = true;
+      payMethodData.isShowMark_ = true
       Https.axiosPost(httpsUrl, data)
         .then((rv: any) => {
-			var width = 800;
+          var width = 800
-			var height = 600;
+          var height = 600
-			var left = (screen.width - width) / 2;
+          var left = (screen.width - width) / 2
-			var top = (screen.height - height) / 2;
+          var top = (screen.height - height) / 2
           payMethodData.newWindow = window.open(
-			  "",
+            '',
-			  "_blank",
+            '_blank',
-			  "width=" +
+            'width=' + width + ', height=' + height + ', left=' + left + ', top=' + top
-				width +
+          )
-				", height=" +
+          let herf = rv
-				height +
-				", left=" +
-				left +
-				", top=" +
-				top
-			);
-			let herf = rv;
           if (payMethodData.newWindow) {
-			  payMethodData.newWindow.location.href = herf;
+            payMethodData.newWindow.location.href = herf
           } else {
             // window.open(herf, '_blank');
-			  window.location.href = herf;
+            window.location.href = herf
           }
-			payMethodData.newWindow = null;
+          payMethodData.newWindow = null
-			payMethodData.isShowMark = true;
+          payMethodData.isShowMark = true
-			payMethodData.isShowMark_ = false;
+          payMethodData.isShowMark_ = false
+        })
+        .catch(res => {
+          payMethodData.isShowMark_ = false
         })
-		  .catch((res) => {
-			payMethodData.isShowMark_ = false;
-		  });
 
       // renewData.payMethod.init(data)
-	  };
+    }
     const setPaidBack = () => {
-		payMethod.payMethodModel = false;
+      payMethod.payMethodModel = false
-		payMethodData.isShowMark = false;
+      payMethodData.isShowMark = false
-		payMethodData.clause = false;
+      payMethodData.clause = false
-	  };
+    }
     const completePayment = () => {
-		renew.renewModel = false;
+      renew.renewModel = false
-		setPaidBack();
+      setPaidBack()
-	  };
+    }
     const examine = (item: any) => {
       // renewData.promotionData.error
-		let price = item?.price;
+      let price = item?.price
-		const normalNumber = Number(price.replace(/,/g, ""));
+      const normalNumber = Number(price.replace(/,/g, ''))
       if (!item.promotionData.code) {
-		  return;
+        return
       }
       let data = {
         promotionCode: item.promotionData.code,
-		  price: normalNumber,
+        price: normalNumber
-		};
+      }
-		Https.axiosGet(Https.httpUrls.checkCoupon, { params: data }).then(
+      Https.axiosGet(Https.httpUrls.checkCoupon, { params: data }).then((rv: any) => {
-		  (rv: any) => {
         if (rv) {
           renewData.personage.forEach((personageItem: any) => {
             if (personageItem.price == item.price) {
-				  if (rv.status == "valid") {
+              if (rv.status == 'valid') {
-					item.promotionData.error = "true";
+                item.promotionData.error = 'true'
-					item.promotionData.price = Number(
+                item.promotionData.price = Number(rv.discountedPrice).toLocaleString()
-					  rv.discountedPrice
-					).toLocaleString();
               } else {
-					item.promotionData.error = "false";
+                item.promotionData.error = 'false'
-					item.promotionData.str = rv.message;
+                item.promotionData.str = rv.message
               }
             }
-			  });
+          })
         } else {
         }
+      })
     }
-		);
-	  };
     const clearPromotionCode = () => {
-		renewData.current.promotionData.error = "";
+      renewData.current.promotionData.error = ''
-		renewData.current.promotionData.code = "";
+      renewData.current.promotionData.code = ''
-		renewData.current.promotionData.price = "";
+      renewData.current.promotionData.price = ''
-	  };
+    }
     const setPromotionData = (item: any) => {
-		renewData.current = item;
+      renewData.current = item
-	  };
+    }
     return {
       store,
       ...toRefs(renew),
@@ -536,18 +556,18 @@
       completePayment,
       examine,
       clearPromotionCode,
-		setPromotionData,
+      setPromotionData
-	  };
+    }
   },
   data() {
-	  return {};
+    return {}
   },
   methods: {
     turnToWindow(url: any) {
-		window.open(url);
+      window.open(url)
-	  },
+    }
-	},
+  }
-  });
+})
 </script>
 <style lang="less" scoped>
 .renew {
@@ -607,7 +627,7 @@
           height: 100%;
           left: 0;
           top: 0;
-			  background: rgba(0,0,0,.5);
+          background: rgba(0, 0, 0, 0.5);
         }
       }
 
@@ -679,11 +699,11 @@
           margin-bottom: 1rem;
           border-radius: 1rem;
           overflow: hidden;
-			border: 1.5px solid #E7EBFF;
+          border: 1.5px solid #e7ebff;
           cursor: pointer;
 
           > .popular {
-			  background: #1B223C;
+            background: #1b223c;
             font-weight: 600;
             display: flex;
             justify-content: center;
@@ -745,15 +765,31 @@
                   display: flex;
                   align-items: center;
                   border-radius: 2rem;
-					border: 2px solid #000;
+                  border: 1.5px solid rgb(216, 218, 220);
                   overflow: hidden;
                   padding: 0 1rem;
+                  background-color: #fff;
                   input {
                     border: none;
                     height: 3rem;
                     width: 10rem;
                     font-size: 1.2rem;
                     background: rgba(0, 0, 0, 0);
+                    &::placeholder {
+                      color: #c4c4c4;
+                    }
+                  }
+                  .apply-btn {
+                    cursor: pointer;
+                    background-color: rgb(27, 34, 60);
+                    font-size: 0.8rem;
+                    color: #fff;
+                    width: 3.3rem;
+                    height: 1.4rem;
+                    line-height: 1.4rem;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
                   }
                 }
                 > .error {
@@ -768,11 +804,11 @@
               }
             }
           }
-			&.active,&:hover {
+          &.active,
+          &:hover {
             // 40% opacity
             background: rgba(231, 235, 255, 0.4);
             // border: 2px solid #0ea982;
-			 
           }
           &.sellWell {
             // border: 2px solid #0ea982;
@@ -810,10 +846,15 @@
         > .gallery_btn {
           width: 100%;
           margin: 2rem 0;
-			margin-bottom: .5rem;
+          margin-bottom: 0.5rem;
           margin-top: 1rem;
-			background: #1B223C;
+          background: #1b223c;
           color: #fff;
+          // width: 41.8rem;
+          height: 4rem;
+          box-sizing: border-box;
+          line-height: 4rem;
+          border-radius: 0.6rem;
         }
         > .payMethod_payAffirm_clause {
           text-align: center;
@@ -839,8 +880,8 @@
             border: 1px solid #ededed;
             background: #f1fbf9;
             color: #1cb36c;
-			  padding: .4rem .8rem;
+            padding: 0.4rem 0.8rem;
-			  border-radius: .5rem;
+            border-radius: 0.5rem;
             margin-top: 4rem;
             > span {
               display: flex;
@@ -848,14 +889,14 @@
             }
             i {
               display: flex;
-				  margin-right: .5rem;
+              margin-right: 0.5rem;
             }
           }
           > .payIcon {
             height: 2rem;
             margin-top: 1rem;
             img {
-				  margin: 0 .3rem;
+              margin: 0 0.3rem;
               height: 100%;
             }
           }
@@ -953,4 +994,3 @@
   }
 }
 </style>
-  

src/component/LibraryPage/brandDetail.vue

@@ -41,7 +41,7 @@
 					<i v-else class="fi fi-br-check" @click="editChek('brandSlogan')"></i>
 				</div>
 			</div>
-			<div class="compute" style="flex:1;text-align: right;" v-show="fall?.list?.length > 0">
+			<div class="compute" style="margin-left: auto;text-align: right;" v-show="fall?.list?.length > 0">
 				<!-- <div @click="setProgress(50)">123123123</div> -->
 				<div class="gallery_btn" @click="compute" :class="{'loading':!(schedule.num == 1||(schedule.num == 0 && !schedule.state))}">
 					{{$t('brandDNA.Compute')}}
@@ -546,6 +546,7 @@ export default defineComponent({
 				}
 				.gallery_btn{
 					&.loading{
+						width: min-content;
 						pointer-events: none;
 						color: #5F5F5F;
 					}

src/component/LoginPage/googleLogin.vue

@@ -6,7 +6,7 @@
 		<!-- <div class="icon" @click="toGmailLogin"> -->
 		<div class="icon">
 			<img src="@/assets/images/loginPage/gmailIcon.svg" alt="">
-			<span>{{ $props.text }}</span>
+			<span>{{ displayText }}</span>
 		 </div>
     </div>
 </template>
@@ -21,7 +21,7 @@
 		props: {
 			text: {
 				type: String,
-				default: 'Sign in with Google'
+				default: ''
 			}
 		},
 		setup(props, { emit }) {
@@ -108,6 +108,9 @@
 			const toGmailLogin = ()=>{
 				message.info(t('account.canNotUtilize'))
 			}
+			const displayText = computed(() => {
+				return props.text || t('Login.LoginWithGoogle')
+			})
 			onBeforeUnmount(()=>{
 				var existingScript = document.querySelector(`script[src="${data.scriptSrc}"]`);
 				if(existingScript){
@@ -120,6 +123,7 @@
 			})
 			return {
 				toGmailLogin,
+				displayText,
             }
 		},
     })

src/component/LoginPage/login/personal.vue

@@ -553,13 +553,14 @@ export default defineComponent({
 				loginType: "EMAIL",
 				userId: this.userId,
 			};
-			this.$emit('update:isMask',true)
+			this.store.commit('set_loading', true)
 			Https.axiosPost(Https.httpUrls.accountLogin, data)
 				.then((rv: any) => {
 					this.setSuccessLogin(rv);
+					this.store.commit('set_loading', false)
 				})
 				.catch((res) => {
-					this.$emit('update:isMask',false)
+					this.store.commit('set_loading', false)
 				});
 		},1000)
     },

src/component/LoginPage/weiXinLogin.vue

@@ -2,7 +2,7 @@
   <div class="Container">
     <div class="icon" @click="openWeiXinModel">
       <img src="@/assets/images/loginPage/weiXinIcon.svg" alt="" />
-      <span>{{ $props.text }}</span>
+      <span>{{ displayText }}</span>
     </div>
     <weiXinModel ref="weiXinModel"></weiXinModel>
   </div>
@@ -18,6 +18,7 @@ import {
   toRefs,
 } from "vue";
 import weiXinModel from "./weiXinModel.vue";
+import { useI18n } from 'vue-i18n'
 export default defineComponent({
   name: "login",
   components: {
@@ -26,20 +27,25 @@ export default defineComponent({
   props: {
     text: {
       type: String,
-      default: "Sign in with Wechat",
+	  default: ''
     },
   },
-  setup() {
+  setup(props) {
     let weiXinDom = reactive({
       weiXinModel: null,
     });
+	const { t } = useI18n()
     const openWeiXinModel = () => {
       weiXinDom.weiXinModel.init();
     };
+	const displayText = computed(() => {
+		return props.text || t('Login.LoginWithWechat')
+	})
     onMounted(() => {});
     return {
       ...toRefs(weiXinDom),
       openWeiXinModel,
+	  displayText,
     };
   },
 });

src/component/WorksPage/newScaleImage.vue

@@ -113,8 +113,8 @@
 								<img v-for="item in scaleImageData?.designPythonOutfitList" v-lazy="item.designUrl">
 							</div>
 						</div>
-						<div v-if="userDetail.systemList.indexOf(1) > -1 && scaleImageData.isMine != 1 && scaleImageData.selected != 1 && scaleImageData.openSource != 0" class="started_btn" @click="setChoose" >{{$t('newScaleImage.SecondaryCreation')}}</div>
+						<!-- <div v-if="userDetail.systemList.indexOf(1) > -1 && scaleImageData.isMine != 1 && scaleImageData.selected != 1 && scaleImageData.openSource != 0" class="started_btn" @click="setChoose" >{{$t('newScaleImage.SecondaryCreation')}}</div> -->
-						<!-- <div v-if="systemUser.value == 1 && scaleImageData.isMine != 1 && scaleImageData.selected != 1" class="started_btn" @click="setChoose" :title="systemUser.value != 1?$t('newScaleImage.jsContent1'): scaleImageData.openSource == 0?$t('newScaleImage.jsContent2'):''" :class="{active:systemUser.value != 1?true:scaleImageData.openSource == 0}">{{$t('newScaleImage.SecondaryCreation')}}</div> -->
+						<div v-if="userDetail.systemList.indexOf(1) > -1 && scaleImageData.openSource != 0" class="started_btn" @click="setChoose" >{{$t('newScaleImage.SecondaryCreation')}}</div>
 					</div>
 					<div v-else class="newScaleImage_right_content_generate">
 						<div class="scaleImage_chunk_item content_left_generate_item">
@@ -458,6 +458,7 @@ export default defineComponent({
 					message.info(t('newScaleImage.jsContent2'))
 					return
 				}
+				store.state.Workspace.cachedRoutes = [];
 				let id = await getWorks(imgData.scaleImageData.id)
 				await router.push(`/home/history/${id}`)
 				store.commit('setChooseIsDesign',false)

src/component/home/design/collection/MoodboardUpload.vue

@@ -132,8 +132,8 @@
 				</div>
 				<div class="modal_img_max">
 					<div v-if="!modalImg[0]?.id" class="modal_img" id="modal_img" :class="{active:flex_direction}">
-						<div v-for="item,index in layoutList" :class="[moodb_className[index]]"  class="modal_imgItem">
+					<!-- <div class="modal_img" id="modal_img" :class="{active:flex_direction}"> -->
-							<img :src="item.imgUrl" v-modelImg>
+						<div v-for="item,index in layoutList" :class="[moodb_className[index]]" :style="{'background-image':`url(${item.imgUrl})`}" class="modal_imgItem">
 						</div>
 					</div>
 					<div v-else class="modal_img">
@@ -244,30 +244,6 @@ export default defineComponent({
         this.token = getCookie("token") || "";
         this.uploadUrl = getUploadUrl();
     },
-	directives:{
-		modelImg:{
-			mounted(el) {
-				let parentNode = el.parentNode
-				if(parentNode.offsetHeight >= parentNode.offsetWidth){
-					el.style.height = 100+'%'
-					el.style.width = 'auto'
-				}else{
-					el.style.width = 100+'%'
-					el.style.height = 'auto'
-				}
-			},
-			updated (el) {
-				let parentNode = el.parentNode
-				if(parentNode.offsetHeight >= parentNode.offsetWidth){
-					el.style.height = 100+'%'
-					el.style.width = 'auto'
-				}else{
-					el.style.width = 100+'%'
-					el.style.height = 'auto'
-				}
-			}
-		}
-	},
     methods: {
         open(num: Number) {
             this.openClick = num;
@@ -445,7 +421,7 @@ export default defineComponent({
 					}
 				}
 				this.edieShow = true
-				if(this.moodb_[arr.length-1].length == 2){
+				if(this.moodb_[arr.length-1].length == 1){
 					this.moodb_className = this.moodb_[arr.length-1][0]
 				}else{
 					this.moodb_className = this.moodb_[arr.length-1][random]
@@ -628,6 +604,7 @@ export default defineComponent({
 				height: calc(5rem*1.2);
 				overflow-x: hidden;
 				display: flex;
+				
 				&.modal_img::-webkit-scrollbar {
 					display: none;
 				}
@@ -706,15 +683,9 @@ export default defineComponent({
 					position: relative;
 					overflow: hidden;
 					text-align: center;
-					img{
+					background-repeat: no-repeat;
-						position: absolute;
+					background-position: center;
-						top: 50%;
+					background-size: cover;
-						left: 50%;
-						transform: translate(-50%,-50%);
-						// float: left;
-						// user-select:none;
-						// -webkit-user-drag: none;
-					}
 				}
 				.wh1{
 					width: 23%;

src/component/home/design/collection/PrintboardUpload.vue

@@ -145,7 +145,7 @@
 		</div>
 		<!-- 取消请求 -->
 		<scaleImage ref="scaleImage"></scaleImage>
-        <Cropper ref="Cropper" @handleCropperSuccess="handleCropperSuccess" @closeCropper="deletUploadFile()" :cropperFileData="cropperFileData" :isRound="false" :isUpload="isUpload"></Cropper>
+        <Cropper ref="Cropper" @handleCropperSuccess="handleCropperSuccess" @closeCropper="deletUploadFile()" :cropperFileData="cropperFileData" :isUpload="isUpload"></Cropper>
     </div>
 </template>
 <script lang="ts">

src/component/home/design/editDesignType/index.vue

@@ -242,7 +242,16 @@
               </div>
             </div>
             <div class="prompt-input-container" v-show="!showMotion">
-              <div class="title">{{ $t('ProductImg.Prompt') }}</div>
+              <div class="title">
+				<span>{{ $t('ProductImg.Prompt') }}</span>
+				<SvgIcon
+					class="cursor-icon"
+					@click="handleNavigateHelp"
+					name="CHelpFlip"
+					size="18"
+					color="#000"
+				/>
+			  </div>
               <promptInput :content="prompt" ref="promptInputRef" />
             </div>
             <div class="transferPose" v-show="showMotion">
@@ -380,7 +389,7 @@
       <a-spin size="large" />
     </div>
     <template>
-      <Prompt v-if="scaleImageList[scaleImageIndex]?.resultType === 'ToProductImage'" v-model:showModal="showPromptAssist" isDesignPage />
+      <Prompt v-if="scaleImageList[scaleImageIndex]?.resultType === 'ToProductImage'" v-model:showModal="showPromptAssist" />
       <PromptEditProduct v-if="scaleImageList[scaleImageIndex]?.resultType === 'Relight'" v-model:showModal="showPromptAssist" />
     </template>
     <Product
@@ -450,7 +459,7 @@ export default defineComponent({
     let userDetail: any = computed(() => {
       return store.state.UserHabit.userDetail
     })
-    let { t } = useI18n()
+    let { t, locale } = useI18n()
     const textareaRef = useTemplateRef<HTMLTextAreaElement>('textareaRef')
     const videoType = ref(2)
     const showMotion = computed(() => videoType.value === 1)
@@ -599,13 +608,13 @@ export default defineComponent({
     })
     const showPromptAssist = ref(false)
     const handleClickAssistBtn = () => {
-      const { httpType } = store.state.Workspace.probjects
+    //   const { httpType } = store.state.Workspace.probjects
-      const isSingleDesign = httpType === 'SINGLE_DESIGN'
+    //   const isSingleDesign = httpType === 'SINGLE_DESIGN'
-      if (!isSingleDesign) {
+    //   if (!isSingleDesign) {
-        const promptText = t('ProductImg.Series')
+    //     const promptText = t('ProductImg.Series')
-        productimg.productimgSearchName = promptText
+    //     productimg.productimgSearchName = promptText
-        return
+    //     return
-      }
+    //   }
       showPromptAssist.value = true
     }
 
@@ -1310,7 +1319,13 @@ export default defineComponent({
         return videoType.value === 3 ? false : true
       }
     })
-
+	const handleNavigateHelp = () => {
+      const url =
+        locale === 'CHINESE_SIMPLIFIED'
+          ? 'https://aida-user-manual-chinese.super.site/2b08f755cedd80a985cffdf2af80c538'
+          : 'https://aida-user-manual.super.site/advanced-tool/animated-product-image/to-product-video-prompt-assist '
+      window.open(url,'_blank')
+    }
     onBeforeUnmount(() => {
       clearInterval(prductimgTime)
       clearInterval(remPrductimgTime)
@@ -1374,7 +1389,8 @@ export default defineComponent({
       handlePlayNewVideo,
       isNewVideoPlaying,
       showDropdown,
-      inputPlaceholder
+      inputPlaceholder,
+	  handleNavigateHelp
     }
   },
   data() {
@@ -1787,10 +1803,14 @@ export default defineComponent({
             box-sizing: border-box;
           }
 		  .title {
-            font-weight: 500;
+			display: flex;
-            color: #000;
+			align-items: center;
-            font-size: 1.7rem;
+			column-gap: 1rem;
-            margin-bottom: 1.4rem;
+			.cursor-icon {
+				display: flex;
+				width: auto;
+				cursor: pointer;
+			}
 		  }
         }
         .prompt-container {

src/component/home/design/index.vue

@@ -682,6 +682,7 @@ export default defineComponent({
 			store.commit("cancelDeleteDesignCollectionList",index);
 		}
 		const designMousedown = (e:any,design:any,str:string)=>{
+			collItemSize.isMove = false
 			if(str != 'disLike'){
 				if(design.resultType != 'Design' || designData.isUnfold)return
 				if(str != 'like' && showDesignMark.value) return
@@ -695,7 +696,6 @@ export default defineComponent({
 			startY = e.clientY,
 			left = item.el.offsetLeft,
 			top = item.el.offsetTop;
-			collItemSize.isMove = false
 			let moveFun = (e:any) => {
 				collItemSize.isMove = true
 				let X = e.clientX - startX + left;
@@ -1200,6 +1200,11 @@ export default defineComponent({
 				likeDesignCollectionList.value.forEach((likeItem:any,index:any)=>{
 					if(likeItem?.childList?.length > 0){
 						let index = likeItem.childList.findIndex((item:any)=>{return item.taskId == listItem})
+						likeItem.childList.forEach((item)=>{
+							if(item.sort > likeItem.childList[index].sort){
+								item.sort -= 1
+							}
+						})
 						likeItem.childList.splice(index,1)
 					}
 				})

src/component/home/index.vue

@@ -7,7 +7,7 @@
 			<!-- <div v-show="openType === 'history'" class="function">
 				<design :key="componentKey" ref="design"></design>
 			</div> -->
-			<router-view v-if="
+			<router-view v-show="
 				(openType && openType != 'history' && !routeQuery.id) || 
 				$route.path != '/home'" 
 				@setTask="setTask"
@@ -23,7 +23,7 @@
 			<!-- <div v-else-if="routeQuery.id" class="function">
 				<design :key="componentKey" ref="design"></design>
 			</div> -->
-			<div v-else-if="!routeQuery.history" class="function">
+			<div v-if="!$route.params.id && !routeQuery.id" class="function">
 				<newPorject ref="newPorject" @newProject=newProject></newPorject>
 			</div>
 			<!-- <iframe src="https://kaput-relative-4bb.notion.site/ebd/22a8f755cedd809e98a2c8c6366ee701" width="100%" height="100%" frameborder="0" allowfullscreen /> -->
@@ -55,13 +55,16 @@ export default defineComponent({
 		const data = reactive({
 			openType:'', 
 			componentKey:null,
-			isShowMark:false,
+			isShowMark:true,
 			routeQuery:{} as any,
 			selectObject:computed(()=>store.state.Workspace.probjects) as any,//选择的项目
 			chatData:null as any,
 			dataLoad:true as any,
 			cachedRoutes:computed(()=>store.state.Workspace.cachedRoutes),//
 		})
+		onMounted(()=>{
+			data.isShowMark = false
+		})
 		let settingGetHistory:any = inject('settingGetHistory')
 		const setIsShowMark = (boolean:boolean)=>{
 			data.isShowMark = boolean

src/component/home/tools/poseTransfer/index.vue

@@ -777,6 +777,7 @@ export default defineComponent({
       })
     }
     const likeSetBtn = (id: any, str: string) => {
+		console.log(1111)
       data.likeList.forEach((item: any, index: any) => {
         if (item.id == id && id) {
           if (str == 'zoom') {
@@ -814,6 +815,7 @@ export default defineComponent({
     let likeFile = (item: any, str: any, index: any) => {
       let url
       let value = {}
+	  console.log(props.isDesignPage)
       if (str == 'like') {
         value = {
           likeOrDislike: 'like',
@@ -1669,7 +1671,7 @@ export default defineComponent({
         .ant-upload-select-picture-card {
           width: 100%;
           height: 100%;
-          border: 1px solid #000;
+          border: 0.1rem solid #000;
           background: #fff;
         }
       }

src/component/home/tools/poseTransfer/promptInput.vue

@@ -65,7 +65,7 @@ defineExpose({
 <style lang="less" scoped>
 .promptInput {
   --promptInputBorderRadius: 10px;
-  --promptInputBorder: 2px solid #dcdfe6;
+  --promptInputBorder: 1px solid #000;
   --promptInputPadding: 1.5rem;
 
   width: 100%;
@@ -86,7 +86,7 @@ defineExpose({
 .sender-container {
   position: relative;
   border-radius: 10px;
-  border: 2px solid #dcdfe6;
+  border: 1px solid #000;
   padding: 1.5rem;
   font-size: 1.8rem;
   .sender-wrapper {
@@ -100,7 +100,7 @@ defineExpose({
 .textarea-container {
   position: relative;
   border-radius: 10px;
-  border: 2px solid #dcdfe6;
+  border: 1px solid #000;
   padding: 1.5rem;
   height: auto;
   font-size: 1.8rem;

src/component/home/tools/toProduct/Prompt.vue

@@ -121,7 +121,7 @@ const promptList = computed(() => {
     return [t('ProductImg.UploadWithoutModel'), t('ProductImg.UploadWithModel')]
   } else {
     // 如果是从design来的
-    if (isSingleDesign) {
+    if (props.isDesignPage) {
       // SINGLE_DESIGN: 两个提示词
       // 根据年龄和性别选择对应的提示词
       let firstPrompt: string // 不带模特的提示词
@@ -255,8 +255,8 @@ const exampleList = computed(() => {
     }
   } else {
     const { ageGroup, httpType, sex } = store.state.Workspace.probjects
-    const isSingleDesign = httpType === 'SINGLE_DESIGN'
+    // const isSingleDesign = httpType === 'SINGLE_DESIGN'
-    if (!isSingleDesign) return {}
+    // if (!isSingleDesign) return {}
     const isAdult = ageGroup === 'Adult'
     const isFemale = sex === 'Female'
     if (isAdult) {

src/component/home/tools/toProduct/index.vue

@@ -1101,13 +1101,13 @@ export default defineComponent({
 
     const showPromptAssist = ref(false)
     const handleClickAssistBtn = () => {
-      const { httpType } = store.state.Workspace.probjects
+      //   const { httpType } = store.state.Workspace.probjects
-      const isSingleDesign = httpType === 'SINGLE_DESIGN'
+      //   const isSingleDesign = httpType === 'SINGLE_DESIGN'
-      if (props.isDesignPage && !isSingleDesign) {
+      //   if (props.isDesignPage && !isSingleDesign) {
-        const promptText = t('ProductImg.Series')
+      //     const promptText = t('ProductImg.Series')
-        productImgData.searchName[props.productimgMenu.value] = promptText
+      //     productImgData.searchName[props.productimgMenu.value] = promptText
-        return
+      //     return
-      }
+      //   }
       showPromptAssist.value = true
     }
 
@@ -1536,6 +1536,7 @@ export default defineComponent({
         height: 17.8rem;
         border-width: 1px;
         background: #fff;
+        border: 0.1rem solid #000;
       }
     }
   }

src/component/mainPage/signUp/index.vue

@@ -51,7 +51,7 @@
             <ul
               class="product_detail"
               :class="[
-                { academic: item.type == 'academic' && !isSelectSuccessively },
+                { academic: item.type == 'academic' },
                 { chinese: isSelectSuccessively }
               ]"
             >
@@ -106,12 +106,12 @@ export default defineComponent({
         Yearly: '年度',
         monthly: [
           {
-            title: '免费版',
+            title: '试用版',
             img: CChargeIcon,
             type: 'personal',
             info: '您的AI时尚设计助手',
             price: 'HK$0',
-            detail: '5天·50积分',
+            detail: '自注册之日起 5 天内 · 50 个积分',
             highlight: '',
             discounts: '9折优惠',
             detailList: [
@@ -185,12 +185,12 @@ export default defineComponent({
         ],
         yearl: [
           {
-            title: '免费版',
+            title: '试用版',
             img: CChargeIcon,
             type: 'personal',
             info: '您的AI时尚设计助手',
             price: 'HK$0',
-            detail: '5天·50积分',
+            detail: '自注册之日起 5 天内 · 50 个积分',
             highlight: '',
             discounts: '9折优惠',
             detailList: [
@@ -250,12 +250,12 @@ export default defineComponent({
         Yearly: 'Yearly',
         monthly: [
           {
-            title: 'Free',
+            title: 'Trial',
             img: CChargeIcon,
             type: 'personal',
             info: 'Your AI Fashion Design Assistant',
             price: 'HK$0',
-            detail: '5 days · 50 credits',
+            detail: '5 days from sign-up · 50 credits',
             highlight: '',
             discounts: '10% off',
             detailList: [
@@ -329,12 +329,12 @@ export default defineComponent({
         ],
         yearl: [
           {
-            title: 'Free',
+            title: 'Trial',
             img: CChargeIcon,
-            type: 'free',
+            type: 'personal',
             info: 'Your AI Fashion Design Assistant',
             price: 'HK$0',
-            detail: '5 days · 50 credits',
+            detail: '5 days from sign-up · 50 credits',
             highlight: '',
             discounts: '10% off',
             detailList: [

src/lang/cn.ts

@@ -1530,7 +1530,21 @@ export default {
     Relight: '打光',
     ChatRobot: '对话生成',
     Yes: '是',
-    No: '否'
+    No: '否',
+    SubscribePlan: '订阅计划',
+    SwitchPlanSuccess: '切换订阅计划成功',
+    SwitchPlanFailed: '切换订阅计划失败',
+    NoPlanSelected: '请先选择订阅计划',
+    PlanNameRequired: '请输入计划名称',
+    PlanNotFound: '计划不存在',
+    RenamePlanSuccess: '重命名成功',
+    RenamePlanFailed: '重命名失败',
+    RenamePlan: '重命名订阅计划',
+    PlanName: '计划名称',
+    InputPlanName: '请输入计划名称',
+    Cancel: '取消',
+    SelectPlan: '选择计划',
+    AllPlan: '全部'
   },
   Login: {
     Login: '登录',
@@ -1543,11 +1557,13 @@ export default {
     LoginMethod: '使用以下方式登录：',
     Individual: '个人账号',
     Academic: '学术账号',
-    LogoOnToAiDA: '登录到AiDA 3.1',
+    LogonToAiDA: '登录到AiDA 3.1',
     Infomation: '请填写以下信息',
     Device: '请使用iPad或电脑登录',
     AgreePolicies: '请勾选条款、隐私政策和费用',
-    PasswordConditions: '您必须满足所有密码条件才能注册'
+    PasswordConditions: '您必须满足所有密码条件才能注册',
+    LoginWithGoogle: '使用谷歌账号登录',
+    LoginWithWechat: '使用微信登录',
   },
   LoginPersonal: {
     Email: '邮箱',

src/lang/en.ts

@@ -959,7 +959,7 @@ export default {
     MOSTPOPULAR: 'MOST POPULAR',
     Monthly: 'Monthly',
     Yearly: 'Yearly',
-    promotionCode: 'Coupon',
+    promotionCode: 'Coupon Code',
     use: 'Apply',
     PromoCodeError:
       'Please check if the promo code is correct or if the date has expired',
@@ -1574,7 +1574,21 @@ export default {
     Relight: 'Relight',
     ChatRobot: 'ChatRobot',
     Yes: 'Yes',
-    No: 'No'
+    No: 'No',
+    SubscribePlan:'Subscribe  Plan',
+    SwitchPlanSuccess: 'Switch subscription plan successfully',
+    SwitchPlanFailed: 'Failed to switch subscription plan',
+    NoPlanSelected: 'Please select a subscription plan first',
+    PlanNameRequired: 'Please enter plan name',
+    PlanNotFound: 'Plan not found',
+    RenamePlanSuccess: 'Rename successfully',
+    RenamePlanFailed: 'Failed to rename',
+    RenamePlan: 'Rename Subscription Plan',
+    PlanName: 'Plan Name',
+    InputPlanName: 'Please enter plan name',
+    Cancel: 'Cancel',
+    SelectPlan: 'Select Plan',
+    AllPlan:'All'
   },
   Login: {
     Login: 'Login',
@@ -1591,7 +1605,9 @@ export default {
     Infomation: 'Please fill your information below',
     Device: 'If you need to design, please log in using an iPad or computer.',
     AgreePolicies: 'Please agree to all terms, privacy policy, and fees.',
-    PasswordConditions: 'You must satisfy ALL password conditions to register.'
+    PasswordConditions: 'You must satisfy ALL password conditions to register.',
+    LoginWithGoogle: 'Sign in with Google',
+    LoginWithWechat: 'Sign in with Wechat',
   },
   LoginPersonal: {
     Email: 'Email',

src/router/index.ts

@@ -290,6 +290,13 @@ const routes: Array<RouteRecordRaw> = [
         component: () =>
           import("@/component/Administrator/organization/organization.vue"),
       },
+      {
+        path: "subscriptionPlan",
+        name: "subscriptionPlan",
+        meta: { enter: 3 },
+        component: () =>
+          import("@/component/Administrator/subscriptionPlan.vue"),
+      },
       //企业版教育管理员页面
       {
         path: "allUserSE",
@@ -498,12 +505,17 @@ function isTimeRangePassed(timeRange) {
 }
 
 router.beforeEach((to: any, from, next) => {
+	store.commit("set_view_loading", true);
   //系统维护时间
-	const time = '2025-11-21T23:00:00 - 2025-11-22T00:00:00';
+	const time = '2025-12-19T21:00:00 - 2025-12-19T22:00:00';
 	if (isTimeRangePassed(time) == 'in_progress') {
 	  // 	系统维护
 		const toName = to.name === 'upgrade';
-		if(upgradeList.indexOf(to.path) > -1){
+		if(to.query.status == 'admin'){
+			localStorage.setItem('isAdminVisit', 'true')
+		}
+		const isAdminVisit = localStorage.getItem('isAdminVisit') == 'true'
+		if(upgradeList.indexOf(to.path) > -1 || isAdminVisit){
 			next();
 		}else{
 			if (toName) {
@@ -513,6 +525,7 @@ router.beforeEach((to: any, from, next) => {
 			}
 		}
 	} else {
+		localStorage.setItem('isAdminVisit', 'false')
 		
 		// 机房用户
 		let herfData = window.location.search.substring(1);
@@ -540,5 +553,7 @@ router.beforeEach((to: any, from, next) => {
   
   // if(systemUser == 0){//游客用户只能进入这两个页面
 });
-
+router.afterEach((to, from) => {
+	store.commit("set_view_loading", false);
+});
 export default router;

src/store/index.ts

@@ -13,10 +13,22 @@ export interface RootState{
 
 export default createStore<RootState>({
   state: {
+	loading: false,
+	dataLoading: true,
+	view_loading: false,
   },
   getters: {
   },
   mutations: {
+	set_loading(state, v){
+		state.loading = v;
+	},
+	set_view_loading(state, v){
+		state.view_loading = v;
+	},
+	set_dataLoading(state, v){
+		state.dataLoading = v;
+	},
   },
   actions: {
   },

src/store/userHabit/userHabit.ts

@@ -80,12 +80,14 @@ const userHabit : Module<UserHabit,RootState> = {
 			systemList:[],
 			expireTime:null,
 			language:'',
+			organizationId: null,
 			timeData:{
 				isExpiration:false,
 				text:''
 			},
 			subscriptionType:null,
 			subscriptionId:null,
+			subscriptionPlanId:null,
 			usernameModify:0,
 			occupation:'',//职业
 			country:'',//国家
@@ -195,12 +197,14 @@ const userHabit : Module<UserHabit,RootState> = {
 				systemList:[],
 				expireTime:null,
 				language:'',
+				organizationId: null,
 				timeData:{
 					isExpiration:false,
 					text:''
 				},
 				subscriptionType:null,
 				subscriptionId:null,
+				subscriptionPlanId:null,
 				//是否是affiliate用户
 				affiliate:false,
 				usernameModify:0,
@@ -230,6 +234,7 @@ const userHabit : Module<UserHabit,RootState> = {
 			state.userDetail.avatar = data.avatar//头像
 			state.userDetail.country = data.country//头像
 			state.userDetail.occupation = data.occupation//头像
+			state.userDetail.organizationId = data.organizationId //所属组织
 			state.userDetail.usernameModify = data.usernameModify//当月剩余修改次数
 			state.userDetail.isBeginner = data.isBeginner == 1 ? true : false;//是否完成新手指引
 			state.userDetail.title = data.title//当月剩余修改次数
@@ -315,6 +320,7 @@ const userHabit : Module<UserHabit,RootState> = {
 			state.userDetail.status = data.status//当前订阅类型
 			// state.userDetail.status = data.status || 'active'//当前订阅类型
 			state.userDetail.subscriptionId = data.subscriptionId//最新订阅id
+			state.userDetail.subscriptionPlanId = data.subscriptionPlanId//最新订阅计划id
 		},
 		setUpgradePlan(state,data){
 			state.upgradePlan.value = data

src/tool/adminRouter.js

@@ -177,6 +177,12 @@ const all = (t)=>{
 		route:'/administrator/organization',
 		key:'sub13',
 		isShow:true,
+	},{
+		name:'Subscription Plan',
+		icon:'usetime',
+		route:'/administrator/subscriptionPlan',
+		key:'sub14',
+		isShow:true,
 	}]
 }
 const schoolOrEnterprise = (t) =>{

src/tool/https.js

@@ -160,11 +160,9 @@ export const Https = {
 
     endpoint: `api/third/party/your-secured-endpoint`, //获取唯一标识是否存在
 
-
     designWorksRegister: '/api/account/designWorksRegister', //注册
     designWorksRegisterCode: '/api/account/designWorksRegisterCode', //注册
 
-
     preLogin: '/api/account/preLogin', //预先登入
     schoolLogin: '/api/account/schoolLogin', //学校管理员登录
     enterpriseLogin: '/api/account/enterpriseLogin', //企业管理员登录
@@ -260,8 +258,6 @@ export const Https = {
     poselikeOrDisike: `/api/generate/likeOrDislike`, //postTransform like
     getAllPose: `/api/generate/getAllPose`, //获取动作
 
-
-		
     //拼贴
     genSketchRecon: `/api/generate/genSketchRecon`,
     saveReconCanvas: `/api/generate/saveReconCanvas`,
@@ -325,7 +321,13 @@ export const Https = {
     deletePromCode: `/api/stripe/deletePromCode`, //删除优惠券
     addOrganization: `/api/inquiry/addOrganization`, //添加企业版或者教育版
     queryOrganization: `/api/inquiry/queryOrganization`, //查询企业版或者教育版
-		
+    createSubscribePlan: '/api/subscription_plan/createPlan', // 创建订阅计划
+    deleteSubscribePlan: '/api/subscription_plan/deletePlan', // 删除订阅计划
+    updateSubscribePlan: '/api/subscription_plan/updatePlan', // 修改订阅计划
+    searchAllSubscribePlan: '/api/subscription_plan/searchByPage', // 分页查询所有订阅计划
+    searchSubscribeByOrg: '/api/subscription_plan/searchByOrganizationIdAndStatus', // 不分页查询
+    switchSubscribePlan: '/api/subscription_plan/switchSubscriptionPlan', // 切换管理员订阅计划
+    switchSubAccountSubscribePlan: '/api/subscription_plan/switchSubAccSubscriptionPlan', // 切换子账号订阅计划
 
     //云生成
     designCloud: `/api/design/designCloud`, //创建云生成
@@ -379,7 +381,6 @@ export const Https = {
     getTasksHistory: `/api/tasks/getAllTask`, //获取所有任务列表
     prepareForSR: `/api/python/prepareForSR`, //超分
 
-
     //作品广场
     publish: `/api/portfolio/publish`, //发布作品到作品广场
     getPorfolio: `/api/portfolio/page`, //查询作品广场
@@ -439,8 +440,7 @@ export const Https = {
     getHistoryNotification: `/api/message/getHistoryNotification`, //获取历史消息
     oneClickRead: `/api/message/oneClickRead`, //全部设为已读
     personalHomepage: `/api/account/personalHomepage`, //获取个人主页信息
-		refreshMinioUrl:`/api/third/party/refreshMinioUrl`,//获取可以使用的minio地址
+    refreshMinioUrl: `/api/third/party/refreshMinioUrl` //获取可以使用的minio地址
-		
   },
 
   axiosGet(url, config) {
@@ -449,12 +449,15 @@ export const Https = {
         resolve('')
         return
       }
-            axios.get(url,config).then(response => {
+      axios
+        .get(url, config)
+        .then(response => {
           resolve(response)
-                }).catch((error) => {
+        })
+        .catch(error => {
           reject(error)
         })
-        });    
+    })
   },
 
   axiosPut(url, data) {
@@ -463,12 +466,15 @@ export const Https = {
         resolve('')
         return
       }
-            axios.put(url, data).then(response => {
+      axios
+        .put(url, data)
+        .then(response => {
           resolve(response)
-                }).catch((error) => {
+        })
+        .catch(error => {
           reject(error)
         })
-        });    
+    })
   },
 
   axiosPost(url, data, config) {
@@ -477,12 +483,15 @@ export const Https = {
         resolve('')
         return
       }
-            axios.post(url, data,config).then(response => {
+      axios
+        .post(url, data, config)
+        .then(response => {
           resolve(response)
-                }).catch((error) => {
+        })
+        .catch(error => {
           reject(error)
         })
-        });    
+    })
   },
 
   axiosDelete(url, newData) {
@@ -491,16 +500,14 @@ export const Https = {
         resolve('')
         return
       }
-            axios.delete(url,{data:newData}).then(response => {
+      axios
+        .delete(url, { data: newData })
+        .then(response => {
           resolve(response)
-                }).catch((error) => {
+        })
+        .catch(error => {
           reject(error)
         })
-        });    
+    })
-    },
+  }
-
- 
-
-
-
 }

src/views/Administrator.vue

@@ -17,14 +17,14 @@
                 mode="inline"
 				@click="handleClick"
             >
-				<div v-for="(menu) in rootSubmenuKeys" :key="menu.key" >
+                <div v-for="(menu) in rootSubmenuKeys" :key="`menu-${menu.key}`" >
-                    <a-menu-item :key="menu.key" :name="menu.name" :route="menu.route" v-if="!menu.children">
+                    <a-menu-item :key="`item-${menu.key}`" :name="menu.name" :route="menu.route" v-if="!menu.children">
                         <template #icon>
 							<span :class="['icon','iconfont', 'menu_icon', menu.icon]"></span>
 						</template>
                         <span class="menu_title" :title="menu.name">{{menu.name}}</span>
                     </a-menu-item>
-                    <a-sub-menu :key="menu.key" v-else> 
+                    <a-sub-menu :key="`sub-${menu.key}`" v-else> 
                         <template #icon>
                             <span :class="['icon','iconfont', 'menu_icon', menu.icon]"></span>
                         </template>
@@ -67,7 +67,7 @@
 <script lang="ts">
 import { LoadingOutlined } from "@ant-design/icons-vue";
 import { message, Upload } from "ant-design-vue";
-import { defineComponent, onMounted, h, ref, nextTick, computed,reactive, toRefs, onBeforeMount } from "vue";
+import { defineComponent, onMounted, h, ref, nextTick, computed,reactive, toRefs, onBeforeMount, watch } from "vue";
 import { MailOutlined, AppstoreOutlined, SettingOutlined } from '@ant-design/icons-vue';
 import { Https } from "@/tool/https";
 import { useStore } from "vuex";
@@ -102,11 +102,38 @@ export default defineComponent({
 				// 5,7
 			rootSubmenuKeys: [],
 			openKeys: [],
-			selectedKeys: ['sub1'],
+			selectedKeys: [],
 			nowPageName:'All User',//当前页面名称
 		});
 		let routers:any = ref([])
 
+		const syncMenuStatus = (path:string)=>{
+			if(!state.rootSubmenuKeys.length)return
+			let matched = false
+			state.rootSubmenuKeys.some((item:any)=>{
+				if(item.children){
+					const target = item.children.find((child:any)=>child.route === path)
+					if(target){
+						state.selectedKeys = [target.key]
+						state.openKeys = [`sub-${item.key}`]
+						state.nowPageName = target.name
+						matched = true
+						return true
+					}
+				}else if(item.route === path){
+					state.selectedKeys = [`item-${item.key}`]
+					state.openKeys = []
+					state.nowPageName = item.name
+					matched = true
+					return true
+				}
+				return false
+			})
+			if(!matched){
+				state.selectedKeys = []
+			}
+		}
+
 
 		const onOpenChange = (openKeys: string[]) => {
 			const latestOpenKey:any = openKeys.find(key => state.openKeys.indexOf(key) === -1);
@@ -150,24 +177,12 @@ export default defineComponent({
 				state.rootSubmenuKeys = adminRouter.all(t);
 			}
 			const route = router.currentRoute.value
-			if(state.rootSubmenuKeys.some((item:any) => item.route === route.path) || route.path == "/administrator"){
+			const isMenuRoute = state.rootSubmenuKeys.some((item:any) => item.route === route.path || item.children?.some((child:any)=>child.route === route.path))
+			// 如果是管理员首页或未匹配菜单，才重定向到首个菜单；否则保持当前路由，避免刷新回到 allUser
+			if (route.path === "/administrator" || !isMenuRoute) {
 				router.push(state.rootSubmenuKeys[0].route)
-			}else{
-				router.push('/administrator')
 			}
-			// state.rootSubmenuKeys.forEach((item:any) => {
+			syncMenuStatus(router.currentRoute.value.path)
-			// 	if(item.children){
-			// 		item.children.forEach((item:any) => {
-			// 			if(item.route == router.currentRoute.value.path){
-			// 				state.selectedKeys[0] = item.key
-			// 			}
-			// 		});
-			// 	}else{
-			// 		if(item.route == router.currentRoute.value.path){
-			// 			state.selectedKeys[0] = item.key
-			// 		}
-			// 	}
-			// });
 			//储存所有用户id和name
 			Https.axiosGet(Https.httpUrls.getAllUserId,).then((rv: any) => {
 				if (rv) {
@@ -192,8 +207,11 @@ export default defineComponent({
 			// router.push(state.rootSubmenuKeys[0].route)
             
         })
+		watch(()=>router.currentRoute.value.path,(path)=>{
+			syncMenuStatus(path)
+		},{immediate:true})
 			onBeforeMount(()=>{
-			state.selectedKeys = ['sub1']
+			state.selectedKeys = []
 		})
 		return {
 			...toRefs(state),

src/views/HomeMain.vue

@@ -394,23 +394,23 @@
                   <span class="select_item_des">{{ $t('Header.Tutorial') }}</span>
                 </div>
 				<div class="select_item logo">
-					<a href="https://www.tiktok.com" target="_blank" >
+					<a href="https://www.tiktok.com/@aida_codecreate" target="_blank" >
-						<img src="@/assets/images/socialMediaLogo/tikTokIcon.png" alt="">
+						<img src="@/assets/images/socialMediaLogo/tikTokIcon.svg" alt="">
 					</a>
-					<a href="https://www.instagram.com" target="_blank" >
+					<a href="https://www.facebook.com/CodeCreateAI" target="_blank" >
-						<img src="@/assets/images/socialMediaLogo/instagramIcon.png" alt="">
+						<img src="@/assets/images/socialMediaLogo/faceBookIcon.svg" alt="">
 					</a>
-					<a href="https://www.youtube.com" target="_blank" >
+					<a href="https://www.youtube.com/@AiDA-3.1" target="_blank" >
-						<img src="@/assets/images/socialMediaLogo/youTubeIcon.png" alt="">
+						<img src="@/assets/images/socialMediaLogo/socialIcons.svg" alt="">
 					</a>
-					<a href="https://www.xiaohongshu.com" target="_blank" >
+					<a href="https://www.linkedin.com/company/code-create-limited" target="_blank" >
-						<img src="@/assets/images/socialMediaLogo/xiaoHongShuIcon.png" alt="">
+						<img src="@/assets/images/socialMediaLogo/linkedinIcon.svg" alt="">
 					</a>
-					<a href="https://www.zhihu.com" target="_blank" >
+					<a href="https://xhslink.com/m/5Ony2FapizV" target="_blank" >
-						<img src="@/assets/images/socialMediaLogo/zhiHuIcon.png" alt="">
+						<img src="@/assets/images/socialMediaLogo/xiaoHongShuIcon.svg" alt="">
 					</a>
-					<a href="https://www.bilibili.com/" target="_blank" >
+					<a href="https://space.bilibili.com/3546717609789876?spm_id_from=333.788.upinfo.head.click" target="_blank" >
-						<img src="@/assets/images/socialMediaLogo/biliBliIcon.png" alt="">
+						<img src="@/assets/images/socialMediaLogo/biliBliIcon.svg" alt="">
 					</a>
 				</div>
 
@@ -427,11 +427,12 @@
           <div class="userSystem" v-show="pastDuePage">
             {{ $t('Header.pastDue') }}
           </div>
-          <div class="router" v-if="!getLangIsShowMark">
+          <div class="router" v-if="!dataLoading">
             <home
               ref="home"
               @setNewProject="() => (leftShow = true)"
               @setTask="setTask"
+			  :key="userDetail.language"
             ></home>
           </div>
         </div>
@@ -442,10 +443,10 @@
     <UpgradePlan ref="UpgradePlan"></UpgradePlan>
     <TaskPage ref="TaskPage"></TaskPage>
 
-    <div class="mark_loading" v-show="getLangIsShowMark">
+    <div class="mark_loading" v-show="dataLoading">
       <a-spin size="large" />
     </div>
-    <!-- <RobotAssist v-if="!getLangIsShowMark"></RobotAssist> -->
+    <!-- <RobotAssist v-if="!loading"></RobotAssist> -->
     <scaleVideo ref="scaleVideo"></scaleVideo>
     <!-- 进行续订 -->
     <renew ref="renew"></renew>
@@ -582,7 +583,7 @@ export default defineComponent({
     const getIdExistToHistory = async () => {
       return await new Promise((resolve, reject) => {
         let value = {
-          id: Number(route.params?.id || route.query?.history)
+          id: Number(route.query?.id || route.query?.history)
         }
         Https.axiosPost(Https.httpUrls.historyProject, value)
           .then(rv => {
@@ -603,9 +604,9 @@ export default defineComponent({
             }
           const key = Object.keys(query)?.[0]
           if (key) {
-            if (route.params?.id && !query.tools) {
+            if (query.id && !query.tools) {
               homeMainData.openType = 'history'
-              homeMainData.openTypeChild = route.params?.id
+              homeMainData.openTypeChild = query.id
             } else {
               homeMainData.openType = Object.keys(query)[0]
               homeMainData.openTypeChild = query[Object.keys(query)[0]]
@@ -614,6 +615,10 @@ export default defineComponent({
               homeMainData.openTypeChild = ''
               homeMainData.openType = ''
             }
+            if ((query?.id || query?.history) && !(await getIdExistToHistory())) {
+              router.push('/home')
+              return
+            }
           } else {
             homeMainData.openType = ''
             homeMainData.openTypeChild = ''
@@ -656,7 +661,7 @@ export default defineComponent({
     })
 
     let activeCredits = ref(false)
-    let getLangIsShowMark = ref(true)
+    let dataLoading = computed(() => (store.state.dataLoading))
     let messageNum = computed(() => {
       return store.state.UserHabit.messageSystem.messageNum
     })
@@ -933,12 +938,12 @@ export default defineComponent({
               rv.content.forEach((item, index) => {
                 let str = categorizeDate(item.updateTime) + 'list'
                 homeMainData.navTypeList.history[str].push(item)
-                if (item.id == (route.params?.id || route.query?.history)) {
+                if (item.id == (route.query?.id || route.query?.history)) {
                   existToHistoryIndex = rv.page * rv.size + index + 1 - rv.size
                 }
               })
               homeMainData.historyData.isNull = false
-              if ((route.params?.id || route.query?.history) && isFound < 1) setScrollTop()
+              if ((route.query?.id || route.query?.history) && isFound < 1) setScrollTop()
             } else {
               homeMainData.historyData.isNoData = true
             }
@@ -1070,7 +1075,7 @@ export default defineComponent({
       isMurmur,
       credits,
       activeCredits,
-      getLangIsShowMark,
+      dataLoading,
       messageNum,
       messageType,
       ...toRefs(stateList),
@@ -1128,11 +1133,11 @@ export default defineComponent({
       this.store
         .dispatch('getLangType')
         .then(() => {
-          this.getLangIsShowMark = false
+          this.store.commit('set_dataLoading', false)
           resolve()
         })
         .catch(() => {
-          this.getLangIsShowMark = false
+          this.store.commit('set_dataLoading', false)
           reject()
         })
     })
@@ -1334,7 +1339,7 @@ export default defineComponent({
       })
     },
     setLang(v) {
-      this.getLangIsShowMark = true
+      this.store.commit('set_dataLoading', true)
       Https.axiosGet(Https.httpUrls.changeUserLanguage, { params: { language: v } })
         .then(rv => {
           if (rv) {
@@ -1351,11 +1356,11 @@ export default defineComponent({
               window.location.reload()
               // window.location.href = '/home';
             }
-            this.getLangIsShowMark = false
+            this.store.commit('set_dataLoading', false)
           }
         })
         .catch(() => {
-          this.getLangIsShowMark = false
+          this.store.commit('set_dataLoading', false)
         })
     },
 
@@ -2038,16 +2043,15 @@ export default defineComponent({
               }
 			  .logo{
 				padding: 1rem 0.5rem;
-				gap: 1rem;
+				gap: 1.8rem;
 				cursor: auto;
+				justify-content: center;
 				> a{
-					width: 2.5rem;
+					width: auto;
-					height: 2.5rem;
+					height: 2.4rem;
-					border-radius: .5rem;
 					overflow: hidden;
 					display: flex;
 					> img{
-						width: 100%;
 						height: 100%;
 					}
 				}

src/views/HomeView/history.vue

@@ -175,7 +175,7 @@ export default defineComponent({
             if (record.text == 1) {
               str = useI18n().t('newScaleImage.Original')
             } else {
-              str = `@${record.record.userLikeGroupVO.originalAccountName}/${record.record.userLikeGroupVO.originalPortfolioName}`
+              str = `@${record.record.originalAccountName}/${record.record.originalPortfolioName}`
             }
             // let time = formatTime(record.text / 1000, 'YYYY-MM-DD hh:mm:ss')
             return str
@@ -857,7 +857,7 @@ export default defineComponent({
             padding: 0 1rem;
 
             .operate_item {
-              // font-size: 1.4rem;
+              font-size: 1.6rem;
               font-family: Roboto;
               font-weight: 400;
               color: #007ee5;

src/views/Login.vue

@@ -43,15 +43,12 @@
             <span>{{ t('Login.LogonToAiDA') }}</span>
           </div>
 		  <div class="info" v-show="!loginType">{{ t('Login.Infomation') }}</div>
-          <personal ref="personal" v-if="loginType == 'personal'" v-model:isMask="isMask"></personal>
+          <personal ref="personal" v-if="loginType == 'personal'"></personal>
           <school ref="school" v-if="loginType == 'school'"></school>
           <enterprise ref="enterprise" v-if="loginType == 'enterprise'"></enterprise>
 
         </div>
       </div>
-	  	<div class="mark_loading" v-show="isMask">
-			<a-spin size="large" />
-		</div>
     </div>
   </div>
 </template>
@@ -103,7 +100,6 @@ export default defineComponent({
     
     const loginData = reactive({
       loginType: "",
-      isMask: false,
     });
     const dataDom = reactive({
 		personal: null as any,