feat: 未建立商联，首次登陆页面

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>

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,
       },
     },

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;

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;

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;
+        }
+      }
+    }
+  }
 }

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;
 }

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();
 };
 

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();
 };
 

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>

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;
+          }
+        }
+      }
+    }
+  }
+}