From e62d14d2f7a68d3ec8443c96d470968c21539c72 Mon Sep 17 00:00:00 2001
From: rd <1344903914@qq.com>
Date: Tue, 9 Sep 2025 14:08:54 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=9C=AA=E5=BB=BA=E7=AB=8B=E5=95=86?=
 =?UTF-8?q?=E8=81=94=EF=BC=8C=E9=A6=96=E6=AC=A1=E7=99=BB=E9=99=86=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                                   |   2 +-
 src/router/index.ts                           |  13 +-
 src/styles/components/ant-button.scss         |   2 +-
 src/styles/components/ant-input.scss          |   4 +-
 src/styles/components/ant-step.scss           |  16 ++
 src/styles/font.scss                          |  16 +-
 .../login/components/login-form/index.vue     |   8 +-
 .../login/components/register-form/index.vue  |   6 +-
 src/views/trial/img/icon-check.png            | Bin 0 -> 3218 bytes
 src/views/trial/img/icon-info.png             | Bin 0 -> 2805 bytes
 src/views/trial/index.vue                     | 221 ++++++++++++++++++
 src/views/trial/style.scss                    |  95 ++++++++
 12 files changed, 362 insertions(+), 21 deletions(-)
 create mode 100644 src/views/trial/img/icon-check.png
 create mode 100644 src/views/trial/img/icon-info.png
 create mode 100644 src/views/trial/index.vue
 create mode 100644 src/views/trial/style.scss

diff --git a/src/App.vue b/src/App.vue
index 2e627f8..54e0400 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,6 +1,6 @@
 <template>
   <a-config-provider :locale="zhCN" size="small" :theme="redTheme">
-    <router-view v-if="$route.path === '/login' || ['ExploreList', 'ExploreDetail'].includes($route.name)" />
+    <router-view v-if="$route.path === '/login' || ['ExploreList', 'ExploreDetail', 'Trial'].includes($route.name)" />
     <LayoutBasic v-else />
   </a-config-provider>
 </template>
diff --git a/src/router/index.ts b/src/router/index.ts
index d6de39f..d79a09a 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -32,14 +32,23 @@ export const router = createRouter({
         requiresAuth: false,
         requireLogin: true,
         group: GROUP_MAIN_NAME,
-      }
+      },
     },
     {
       path: '/chat/:conversationId?',
       name: 'Home',
       component: () => import('@/views/home/index.vue'),
       meta: {
-        requiresAuth: false,
+        requiresAuth: true,
+        requireLogin: true,
+      },
+    },
+    {
+      path: '/trial',
+      name: 'Trial',
+      component: () => import('@/views/trial/index.vue'),
+      meta: {
+        requiresAuth: true,
         requireLogin: true,
       },
     },
diff --git a/src/styles/components/ant-button.scss b/src/styles/components/ant-button.scss
index 79571a7..ad53838 100644
--- a/src/styles/components/ant-button.scss
+++ b/src/styles/components/ant-button.scss
@@ -1,5 +1,5 @@
 .ant-btn {
-  border-radius: 2px !important;
+  border-radius: 4px !important;
   border: 1px solid #d7d7d9 !important;
   color: #3c4043 !important;
   font-family: $font-family-regular;
diff --git a/src/styles/components/ant-input.scss b/src/styles/components/ant-input.scss
index a35bcab..1f99625 100644
--- a/src/styles/components/ant-input.scss
+++ b/src/styles/components/ant-input.scss
@@ -27,7 +27,7 @@
   &.ant-input-focus,
   &.ant-textarea-focus {
     background-color: var(--color-bg-2) !important;
-    border-color: rgb(var(--primary-6)) !important;
+    border-color: $color-primary !important;
     box-shadow: 0 0 0 0 var(--color-primary-light-2) !important;
   }
   &.ant-input-disabled {
@@ -72,7 +72,7 @@ textarea.ant-input {
   &:focus,
   &-focused {
     box-shadow: none !important;
-    border-color: rgb(var(--primary-6)) !important;
+    border-color: $color-primary !important;
   }
   .ant-input {
     height: 30px;
diff --git a/src/styles/components/ant-step.scss b/src/styles/components/ant-step.scss
index 2eab583..e2061c1 100644
--- a/src/styles/components/ant-step.scss
+++ b/src/styles/components/ant-step.scss
@@ -53,4 +53,20 @@
       }
     }
   }
+  &.ant-steps-dot {
+    .ant-steps-item-process {
+      .ant-steps-item-tail {
+        &::after {
+          background-color: #e6e6e8 !important;
+        }
+      }
+    }
+    .ant-steps-item-finish {
+      .ant-steps-item-tail {
+        &::after {
+          background-color: #6d4cfe !important;
+        }
+      }
+    }
+  }
 }
diff --git a/src/styles/font.scss b/src/styles/font.scss
index 3b1ea9a..28a9c4e 100644
--- a/src/styles/font.scss
+++ b/src/styles/font.scss
@@ -18,27 +18,27 @@
 }
 
 .font-family-regular {
-  font-family: $font-family-regular;
+  font-family: $font-family-regular !important;
 }
 .font-family-medium {
-  font-family: $font-family-medium;
+  font-family: $font-family-medium !important;
 }
 .font-family-light {
-  font-family: $font-family-light;
+  font-family: $font-family-light !important;
 }
 .font-family-bold {
-  font-family: $font-family-bold;
+  font-family: $font-family-bold !important;
 }
 
 .font-family-manrope-regular {
-  font-family: $font-family-manrope-regular;
+  font-family: $font-family-manrope-regular !important;
 }
 .font-family-manrope-medium {
-  font-family: $font-family-manrope-medium;
+  font-family: $font-family-manrope-medium !important;
 }
 .font-family-manrope-bold {
-  font-family: $font-family-manrope-bold;
+  font-family: $font-family-manrope-bold !important;
 }
 .font-family-manrope-semiBold {
-  font-family: $font-family-manrope-semiBold;
+  font-family: $font-family-manrope-semiBold !important;
 }
diff --git a/src/views/login/components/login-form/index.vue b/src/views/login/components/login-form/index.vue
index 0dec9e4..f1c5410 100644
--- a/src/views/login/components/login-form/index.vue
+++ b/src/views/login/components/login-form/index.vue
@@ -33,7 +33,7 @@
               </div>
             </template>
           </Input>
-          <p class="color-#F64B31 text-12px font-400 lh-20px font-family-regular" v-if="errMsg">
+          <p class="color-#F64B31 text-12px font-400 lh-20px font-family-regular" v-show="errMsg">
             {{ errMsg }}
           </p>
         </FormItem>
@@ -43,7 +43,7 @@
               <img :src="visible ? icon2 : icon1" width="20" height="20" class="cursor-pointer" />
             </template>
           </Input.Password>
-          <p class="color-#F64B31 text-12px font-400 lh-20px font-family-regular" v-if="errMsg">
+          <p class="color-#F64B31 text-12px font-400 lh-20px font-family-regular" v-show="errMsg">
             {{ errMsg }}
           </p>
         </FormItem>
@@ -263,9 +263,9 @@ const getCaptcha = async () => {
 };
 
 // 验证码验证通过后
-const handleVerificationSubmit = () => {
+const handleVerificationSubmit = async () => {
   isVerificationVisible.value = false;
-  postClearRateLimiter();
+  await postClearRateLimiter();
   getCaptcha();
 };
 
diff --git a/src/views/login/components/register-form/index.vue b/src/views/login/components/register-form/index.vue
index e9a0bb9..19a92c2 100644
--- a/src/views/login/components/register-form/index.vue
+++ b/src/views/login/components/register-form/index.vue
@@ -48,7 +48,7 @@
               </div>
             </template>
           </Input>
-          <p class="color-#F64B31 text-12px font-400 lh-20px font-family-regular" v-if="errMsg">
+          <p class="color-#F64B31 text-12px font-400 lh-20px font-family-regular" v-show="errMsg">
             {{ errMsg }}
           </p>
         </FormItem>
@@ -283,9 +283,9 @@ const getCaptcha = async () => {
 };
 
 // 验证码验证通过后
-const handleVerificationSubmit = () => {
+const handleVerificationSubmit = async () => {
   isVerificationVisible.value = false;
-  postClearRateLimiter();
+  await postClearRateLimiter();
   getCaptcha();
 };
 
diff --git a/src/views/trial/img/icon-check.png b/src/views/trial/img/icon-check.png
new file mode 100644
index 0000000000000000000000000000000000000000..b859859709075b3a52f1db9798ce2c87cc513f04
GIT binary patch
literal 3218
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
Ku%MWEC;bl<(%wP<

literal 0
HcmV?d00001

diff --git a/src/views/trial/img/icon-info.png b/src/views/trial/img/icon-info.png
new file mode 100644
index 0000000000000000000000000000000000000000..677e49a603159a827c2f848930c0708ae435153e
GIT binary patch
literal 2805
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
bNLe6VE{V!=d|y+y|D^(3OGjJ{)+_0Md@m)#

literal 0
HcmV?d00001

diff --git a/src/views/trial/index.vue b/src/views/trial/index.vue
new file mode 100644
index 0000000..77832e3
--- /dev/null
+++ b/src/views/trial/index.vue
@@ -0,0 +1,221 @@
+<template>
+  <Layout class="flex justify-center items-center trial-wrap">
+    <Layout.Header class="header-wrap">
+      <div class="h-full px-24px">
+        <div class="w-full h-full relative flex justify-between">
+          <div class="flex items-center cursor-pointer" @click="handleUserHome">
+            <img src="@/assets/img/icon-logo.png" alt="" width="96" height="24" />
+          </div>
+          <RightSide />
+        </div>
+      </div>
+    </Layout.Header>
+    <Layout class="flex trial-content items-center">
+      <div class="w-800px">
+        <!-- 未建联 -->
+        <section class="w-full" v-if="status === 1">
+          <div class="rounded-16px mb-16px bg-#fff px-24px py-16px flex justify-between">
+            <div class="flex items-center">
+              <span class="cts !text-18px !lh-26px !color-#000 mr-8px">申请试用</span>
+              <div class="rounded-2px bg-#F0EDFF px-8px flex items-center">
+                <span class="cts !color-#6D4CFE">0-3个工作日</span>
+              </div>
+            </div>
+          </div>
+          <div class="rounded-16px mb-16px bg-#fff p-24px">
+            <p class="cts !text-16px !lh-24px !color-#000 mb-32px">基本信息</p>
+            <Form ref="formRef" :model="formData" :rules="formRules" layout="vertical" class="w-full form-wrap">
+              <FormItem name="name" label="联系人">
+                <Input
+                  v-model:value="formData.name"
+                  placeholder="请输入您的姓名"
+                  size="large"
+                  allowClear
+                  class="w-500px"
+                />
+              </FormItem>
+              <FormItem name="company_name" label="公司名称">
+                <Input
+                  v-model:value="formData.company_name"
+                  placeholder="请输入您的公司名称，个人用户写无"
+                  size="large"
+                  allowClear
+                  class="w-500px"
+                />
+              </FormItem>
+              <FormItem name="mobile" label="联系电话">
+                <Input
+                  v-model:value="formData.mobile"
+                  placeholder="请输入您的联系电话"
+                  size="large"
+                  allowClear
+                  class="w-500px"
+                />
+              </FormItem>
+            </Form>
+          </div>
+          <div class="rounded-16px bg-#fff px-24px py-16px">
+            <Button type="primary" class="mb-10px" @click="handleSubmit">免费申请</Button>
+            <span class="cts !font-400 !color-#737478"
+              >申请成功后，您可开启
+              <span class="color-#6D4CFE !font-500">7</span>
+              天免费试用，试用结束后，若满意可直接升级正式版，数据将自动保留</span
+            >
+          </div>
+        </section>
+
+        <!-- 建立商务联系中 -->
+        <section class="w-full" v-if="status === 2">
+          <div class="rounded-16px bg-#fff px-36px pt-80px pb-60px flex flex-col items-center">
+            <img :src="icon2" width="96" height="96" class="mb-8px" />
+            <p class="cts !text-18px !lh-26px mb-8px">您的试用申请已提交</p>
+            <p class="cts !font-400 !color-#737478 font-family-regular">
+              我们将在 1-3 个工作日内完成审核，审核结果会通过电话/短信告知您。
+            </p>
+            <p class="cts !font-400 !color-#737478 font-family-regular mb-40px">
+              若超过 3 个工作日未收到通知，可拨打客服电话 <span class="!color-#6D4CFE">153 5932 0192</span> 咨询
+            </p>
+            <div class="px-24px py-16px rounded-12px bg-#F2F3F5 w-full">
+              <p class="mb-16px cts !color-#000 !text-18px !lh-26px">进度</p>
+              <Steps :current="1" :items="trialingStepsItems">
+                <template #progressDot="{ prefixCls }">
+                  <span :class="`${prefixCls}-icon-dot`" />
+                </template>
+              </Steps>
+            </div>
+          </div>
+        </section>
+
+        <!-- 试用到期 -->
+        <section class="w-full" v-if="status === 3">
+          <div class="rounded-16px bg-#fff px-36px pt-80px pb-60px flex flex-col items-center">
+            <img :src="icon1" width="96" height="96" class="mb-8px" />
+            <p class="cts !text-18px !lh-26px mb-8px">试用已到期</p>
+            <p class="cts !font-400 !color-#737478 font-family-regular">
+              您的 7 天产品试用已到期，若想继续使用，可拨打客服电话
+            </p>
+            <p class="cts !font-400 !color-#737478 font-family-regular mb-40px">
+              <span class="!color-#6D4CFE">153 5932 0192</span> 咨询续用事宜
+            </p>
+            <div class="px-24px py-16px rounded-12px bg-#F2F3F5 w-full">
+              <p class="mb-16px cts !color-#000 !text-18px !lh-26px">进度</p>
+              <Steps :current="2" :items="trialEndStepsItems">
+                <template #progressDot="{ prefixCls }">
+                  <span :class="`${prefixCls}-icon-dot`" />
+                </template>
+              </Steps>
+            </div>
+          </div>
+        </section>
+      </div>
+    </Layout>
+  </Layout>
+</template>
+
+<script setup lang="ts">
+import { Layout, Form, Button, FormItem, Input, Steps } from 'ant-design-vue';
+import RightSide from '@/layouts/components/navbar/components/right-side/index.vue';
+
+import { handleUserHome } from '@/utils/user';
+
+import icon1 from './img/icon-info.png';
+import icon2 from './img/icon-check.png';
+
+type Status = 1 | 2 | 3;
+
+const formRef = ref();
+const submitting = ref(false);
+const status = ref<Status>(1);
+const formData = ref({
+  mobile: '',
+  name: '',
+  company_name: '',
+});
+const formRules = {
+  name: {
+    required: true,
+    trigger: ['blur'],
+
+    validator: (_rule, value) => {
+      if (!value) {
+        return Promise.reject('请填写姓名');
+      } else {
+        return Promise.resolve();
+      }
+    },
+  },
+  company_name: {
+    required: true,
+    trigger: ['blur'],
+
+    validator: (_rule, value) => {
+      if (!value) {
+        return Promise.reject('请填写公司名称');
+      } else {
+        return Promise.resolve();
+      }
+    },
+  },
+  mobile: {
+    required: true,
+    trigger: ['blur'],
+
+    validator: (_rule, value) => {
+      if (!value) {
+        return Promise.reject('请填写联系电话');
+      } else {
+        return Promise.resolve();
+      }
+    },
+  },
+};
+
+const trialingStepsItems = computed(() => {
+  return [
+    {
+      title: '提交申请',
+      description: '2025/09/01 12:00:00',
+    },
+    {
+      title: '人工审核',
+      description: '处理中',
+    },
+    {
+      title: '开始试用',
+      description: '等待',
+    },
+  ];
+});
+const trialEndStepsItems = computed(() => {
+  return [
+    {
+      title: '提交申请',
+      description: '2025/09/01 12:00:00',
+    },
+    {
+      title: '人工审核',
+      description: '已完成',
+    },
+    {
+      title: '试用到期',
+      description: '已完成',
+    },
+  ];
+});
+
+const handleSubmit = async () => {
+  submitting.value = true;
+  formRef.value
+    .validate()
+    .then(() => {
+      console.log('验证通过');
+    })
+    .finally(() => {
+      submitting.value = false;
+    });
+};
+</script>
+
+<style scoped lang="scss">
+@import './style.scss';
+</style>
diff --git a/src/views/trial/style.scss b/src/views/trial/style.scss
new file mode 100644
index 0000000..9531a7a
--- /dev/null
+++ b/src/views/trial/style.scss
@@ -0,0 +1,95 @@
+.trial-wrap {
+  background: transparent;
+  min-width: 1200px;
+  .cts {
+    color: #211f24;
+    font-family: $font-family-medium;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 22px;
+  }
+  :deep(.ant-steps) {
+    .ant-steps-item {
+      margin-left: 0;
+      .ant-steps-item-icon {
+        width: 10px;
+        height: 10px;
+      }
+      .ant-steps-item-content {
+        margin-top: 8px;
+        .ant-steps-item-title {
+          color: var(--Text-1, #211f24);
+          font-family: $font-family-regular;
+          font-size: 16px;
+          font-style: normal;
+          font-weight: 400;
+          line-height: 24px;
+        }
+        .ant-steps-item-description {
+          color: var(--Text-3, #737478);
+          font-family: $font-family-regular;
+          font-size: 14px;
+          font-style: normal;
+          font-weight: 400;
+          line-height: 22px;
+        }
+      }
+      &.ant-steps-item-wait {
+        .ant-steps-icon {
+          .ant-steps-icon-dot {
+            background: #d7d7d9;
+          }
+        }
+      }
+      &.ant-steps-item-active,
+      &.ant-steps-item-finish {
+        .ant-steps-icon {
+          .ant-steps-icon-dot {
+            background: #6d4cfe;
+          }
+        }
+        .ant-steps-item-content {
+          .ant-steps-item-title {
+            padding: 0;
+            font-family: $font-family-medium;
+          }
+        }
+      }
+    }
+  }
+  .header-wrap {
+    background: transparent;
+    height: $navbar-height;
+    line-height: $navbar-height;
+    padding-inline: inherit;
+    color: inherit;
+    width: 100%;
+    min-width: $layout-min-width;
+    :deep(.right-wrap) {
+      .task-icon,
+      .agent-entry {
+        display: none;
+      }
+    }
+  }
+  .trial-content {
+    width: 100%;
+    height: 100%;
+    background: transparent;
+    min-height: calc(100vh - $navbar-height);
+    :deep(.ant-form) {
+      .ant-form-item {
+        &:not(:last-child) {
+          margin-bottom: 24px !important;
+        }
+        .ant-form-item-label {
+          > label {
+            font-family: $font-family-medium;
+            font-weight: 500;
+          }
+        }
+      }
+    }
+  }
+}