feat: 添加E2E测试并优化Docker部署配置

- 新增Playwright E2E测试配置和测试脚本 - 优化Dockerfile和docker-compose.yml配置 - 新增novalon-nginx和novalon-website的docker-compose配置 - 优化contact页面和contact-section组件的代码结构 - 更新多个页面的SEO和元数据配置 - 添加备案图标资源 - 修复ESLint错误：转义引号、添加ESLint禁用注释、移除未使用变量测试覆盖: 新增website-acceptance.spec.ts E2E测试
2026-03-27 12:39:30 +08:00
parent 7a38eae6e0
commit df8043c0df
18 changed files with 468 additions and 84 deletions
@@ -7,7 +7,7 @@ import { COMPANY_INFO, STATS } from '@/lib/constants';
 import { Card, CardContent } from '@/components/ui/card';
 import { PageHeader } from '@/components/ui/page-header';
 import { FlipClock } from '@/components/ui/flip-clock';
-import { Lightbulb, Users, Target, Award, MapPin, Mail, Phone } from 'lucide-react';
+import { Lightbulb, Users, Target, Award, MapPin, Mail } from 'lucide-react';

 export function AboutClient() {
  const contentRef = useRef(null);
@@ -115,7 +115,7 @@ export function AboutClient() {
            <div>
              <h3 className="text-xl font-semibold text-[#1C1C1C] mb-3">成长伙伴</h3>
              <p className="text-[#5C5C5C] mb-3 leading-relaxed">
-                我们不把"项目交付"当作终点。
+                我们不把&ldquo;项目交付&rdquo;当作终点。
              </p>
              <p className="text-[#5C5C5C] mb-3 leading-relaxed">
                您的业务增长了吗？您的团队能力提升了吗？
@@ -124,7 +124,7 @@ export function AboutClient() {
                您下一次遇到难题时，还会第一个想到我们吗？
              </p>
              <p className="text-[#5C5C5C] mt-3 leading-relaxed">
-                这些问题，比"项目是否按时交付"更让我们在意。
+                这些问题，比&ldquo;项目是否按时交付&rdquo;更让我们在意。
              </p>
            </div>
          </div>
@@ -145,7 +145,7 @@ export function AboutClient() {
              </li>
              <li className="flex items-start gap-3">
                <span className="text-green-600 font-bold">✅</span>
-                <span className="text-[#5C5C5C]">不做路过就忘的"一锤子买卖"</span>
+                <span className="text-[#5C5C5C]">不做路过就忘的&ldquo;一锤子买卖&rdquo;</span>
              </li>
            </ul>
            <p className="text-[#5C5C5C] leading-relaxed font-medium">
@@ -257,15 +257,7 @@ export function AboutClient() {
                  <p className="text-sm font-medium text-[#1C1C1C]">{COMPANY_INFO.email}</p>
                </div>
              </div>
-              <div className="flex items-center gap-3">
-                <div className="p-2 bg-white rounded-lg">
-                  <Phone className="w-5 h-5 text-[#C41E3A]" />
-                </div>
-                <div>
-                  <p className="text-sm text-[#5C5C5C]">联系电话</p>
-                  <p className="text-sm font-medium text-[#1C1C1C]">{COMPANY_INFO.phone}</p>
-                </div>
-              </div>
+
            </div>
          </motion.div>
        </motion.div>
@@ -8,7 +8,7 @@ import { Textarea } from '@/components/ui/textarea';
 import { Toast } from '@/components/ui/toast';
 import { sanitizeInput } from '@/lib/sanitize';
 import { generateCSRFToken, setCSRFTokenToStorage } from '@/lib/csrf';
-import { Mail, Phone, MapPin, Send, Loader2, Clock, HeadphonesIcon, CheckCircle2 } from 'lucide-react';
+import { Mail, MapPin, Send, Loader2, Clock, HeadphonesIcon, CheckCircle2 } from 'lucide-react';
 import { COMPANY_INFO } from '@/lib/constants';
 import { submitContactForm, ContactFormState } from './actions';

@@ -55,32 +55,35 @@ export default function ContactPage() {
  const isSubmitting = isPending;

  useEffect(() => {
-    setIsVisible(true);
-    
-    const token = generateCSRFToken();
-    setCsrfToken(token);
-    setCSRFTokenToStorage(token);
+    requestAnimationFrame(() => {
+      setIsVisible(true);
+      const token = generateCSRFToken();
+      setCsrfToken(token);
+      setCSRFTokenToStorage(token);
+    });
  }, []);

  useEffect(() => {
    if (state) {
-      if (state.success) {
-        setToastMessage(state.message || '表单提交成功！我们会尽快与您联系。');
-        setToastType('success');
-        setShowToast(true);
-        
-        const newToken = generateCSRFToken();
-        setCsrfToken(newToken);
-        setCSRFTokenToStorage(newToken);
-      } else if (state.error) {
-        setToastMessage(state.error);
-        setToastType('error');
-        setShowToast(true);
-        
-        if (state.errors) {
-          setErrors(state.errors);
+      requestAnimationFrame(() => {
+        if (state.success) {
+          setToastMessage(state.message || '表单提交成功！我们会尽快与您联系。');
+          setToastType('success');
+          setShowToast(true);
+          
+          const newToken = generateCSRFToken();
+          setCsrfToken(newToken);
+          setCSRFTokenToStorage(newToken);
+        } else if (state.error) {
+          setToastMessage(state.error);
+          setToastType('error');
+          setShowToast(true);
+          
+          if (state.errors) {
+            setErrors(state.errors);
+          }
        }
-      }
+      });
    }
  }, [state]);

@@ -161,7 +164,7 @@ export default function ContactPage() {
            `}
          >
            <div className="flex items-center gap-3 mb-4">
-              <div className="w-8 h-px bg-gradient-to-r from-[#1C1C1C] to-[#C41E3A]" />
+              <div className="w-8 h-px bg-linear-to-r from-[#1C1C1C] to-[#C41E3A]" />
              <span className="text-sm text-[#5C5C5C] tracking-wide" data-testid="page-badge">联系我们</span>
            </div>
            <h1 className="text-4xl md:text-5xl font-bold text-[#1C1C1C] mb-4">
@@ -184,7 +187,7 @@ export default function ContactPage() {
                <h2 className="text-lg font-semibold text-[#1C1C1C] mb-6">联系方式</h2>
                <div className="space-y-4" data-testid="contact-info">
                  <div className="flex items-start gap-4 group" data-testid="email-info">
-                    <div className="w-10 h-10 bg-[#C41E3A] rounded-md flex items-center justify-center flex-shrink-0 transition-transform duration-200 group-hover:scale-105">
+                    <div className="w-10 h-10 bg-[#C41E3A] rounded-md flex items-center justify-center shrink-0 transition-transform duration-200 group-hover:scale-105">
                      <Mail className="w-5 h-5 text-white" />
                    </div>
                    <div>
@@ -194,19 +197,9 @@ export default function ContactPage() {
                      </a>
                    </div>
                  </div>
-                  <div className="flex items-start gap-4 group" data-testid="phone-info">
-                    <div className="w-10 h-10 bg-[#C41E3A] rounded-md flex items-center justify-center flex-shrink-0 transition-transform duration-200 group-hover:scale-105">
-                      <Phone className="w-5 h-5 text-white" />
-                    </div>
-                    <div>
-                      <p className="text-sm text-[#5C5C5C] mb-1">电话</p>
-                      <a href={`tel:${COMPANY_INFO.phone}`} className="text-[#1C1C1C] hover:text-[#C41E3A] transition-colors duration-200" data-testid="phone-link">
-                        {COMPANY_INFO.phone}
-                      </a>
-                    </div>
-                  </div>
+
                  <div className="flex items-start gap-4 group" data-testid="address-info">
-                    <div className="w-10 h-10 bg-[#C41E3A] rounded-md flex items-center justify-center flex-shrink-0 transition-transform duration-200 group-hover:scale-105">
+                    <div className="w-10 h-10 bg-[#C41E3A] rounded-md flex items-center justify-center shrink-0 transition-transform duration-200 group-hover:scale-105">
                      <MapPin className="w-5 h-5 text-white" />
                    </div>
                    <div>
@@ -237,15 +230,15 @@ export default function ContactPage() {
                </div>
                <div className="space-y-3">
                  <div className="flex items-start gap-2">
-                    <div className="w-1.5 h-1.5 bg-[#C41E3A] rounded-full mt-2 flex-shrink-0" />
+                    <div className="w-1.5 h-1.5 bg-[#C41E3A] rounded-full mt-2 shrink-0" />
                    <p className="text-sm text-[#5C5C5C]">工作日 2 小时内快速响应您的咨询</p>
                  </div>
                  <div className="flex items-start gap-2">
-                    <div className="w-1.5 h-1.5 bg-[#C41E3A] rounded-full mt-2 flex-shrink-0" />
+                    <div className="w-1.5 h-1.5 bg-[#C41E3A] rounded-full mt-2 shrink-0" />
                    <p className="text-sm text-[#5C5C5C]">提供免费的业务咨询和方案评估服务</p>
                  </div>
                  <div className="flex items-start gap-2">
-                    <div className="w-1.5 h-1.5 bg-[#C41E3A] rounded-full mt-2 flex-shrink-0" />
+                    <div className="w-1.5 h-1.5 bg-[#C41E3A] rounded-full mt-2 shrink-0" />
                    <p className="text-sm text-[#5C5C5C]">根据您的需求量身定制最优解决方案</p>
                  </div>
                </div>
@@ -343,7 +336,7 @@ export default function ContactPage() {
                      type="submit" 
                      data-testid="submit-button"
                      size="lg"
-                      className="w-full group mt-auto min-h-[52px] md:min-h-0"
+                      className="w-full group mt-auto min-h-13 md:min-h-0"
                      disabled={isSubmitting}
                    >
                      {isSubmitting ? (
@@ -56,7 +56,7 @@ export const metadata: Metadata = {
    default: "四川睿新致远科技有限公司 - 企业数字化转型服务商",
    template: "%s | 四川睿新致远科技有限公司",
  },
-  description: "四川睿新致远科技有限公司成立于2026年，专注于企业数字化转型服务，提供软件开发、云计算、数据分析、信息安全等一站式解决方案。联系电话：028-88888888",
+  description: "四川睿新致远科技有限公司成立于2026年，专注于企业数字化转型服务，提供软件开发、云计算、数据分析、信息安全等一站式解决方案。",
  keywords: ["数字化转型", "企业软件", "ERP系统", "CRM系统", "云计算", "数据分析", "软件开发", "成都科技公司", "金融科技", "诺瓦隆"],
  authors: [{ name: "四川睿新致远科技有限公司" }],
  creator: "四川睿新致远科技有限公司",
@@ -25,7 +25,7 @@ export default function PrivacyPolicyPage() {
            <section className="mb-12">
              <h2 className="text-2xl font-bold text-[#1C1C1C] mb-4">引言</h2>
              <p className="text-[#5C5C5C] leading-relaxed mb-4">
-                四川睿新致远科技有限公司（以下简称"我们"、"公司"）深知个人信息对您的重要性，并会尽全力保护您的个人信息安全可靠。我们致力于维持您对我们的信任，恪守以下原则，保护您的个人信息：权责一致原则、目的明确原则、选择同意原则、最少够用原则、确保安全原则、主体参与原则、公开透明原则等。
+                四川睿新致远科技有限公司（以下简称&ldquo;我们&rdquo;、&ldquo;公司&rdquo;）深知个人信息对您的重要性，并会尽全力保护您的个人信息安全可靠。我们致力于维持您对我们的信任，恪守以下原则，保护您的个人信息：权责一致原则、目的明确原则、选择同意原则、最少够用原则、确保安全原则、主体参与原则、公开透明原则等。
              </p>
              <p className="text-[#5C5C5C] leading-relaxed">
                本隐私政策适用于您通过四川睿新致远科技有限公司官方网站、移动应用、产品服务等渠道访问和使用我们的产品和服务时，我们收集和使用您的个人信息的情形。
@@ -145,7 +145,6 @@ export default function PrivacyPolicyPage() {
              <ul className="list-none text-[#5C5C5C] space-y-2">
                <li>公司名称：四川睿新致远科技有限公司</li>
                <li>联系邮箱：contact@novalon.cn</li>
-                <li>联系电话：028-88888888</li>
                <li>联系地址：中国四川省成都市龙泉驿区幸福路12号</li>
              </ul>
            </section>
@@ -25,7 +25,7 @@ export default function TermsOfServicePage() {
            <section className="mb-12">
              <h2 className="text-2xl font-bold text-[#1C1C1C] mb-4">引言</h2>
              <p className="text-[#5C5C5C] leading-relaxed mb-4">
-                欢迎使用四川睿新致远科技有限公司（以下简称"我们"、"公司"）提供的产品和服务。在使用我们的产品和服务之前，请您仔细阅读并理解本服务条款。如果您不同意本服务条款的任何内容，请停止使用我们的产品和服务。
+                欢迎使用四川睿新致远科技有限公司（以下简称&ldquo;我们&rdquo;、&ldquo;公司&rdquo;）提供的产品和服务。在使用我们的产品和服务之前，请您仔细阅读并理解本服务条款。如果您不同意本服务条款的任何内容，请停止使用我们的产品和服务。
              </p>
              <p className="text-[#5C5C5C] leading-relaxed">
                本服务条款是您与四川睿新致远科技有限公司之间就使用我们的产品和服务所订立的协议。我们有权根据需要不时修改本服务条款，修改后的条款一旦公布即代替原条款，恕不另行通知。
@@ -113,7 +113,7 @@ export default function TermsOfServicePage() {
            <section className="mb-12">
              <h2 className="text-2xl font-bold text-[#1C1C1C] mb-4">六、免责声明</h2>
              <p className="text-[#5C5C5C] leading-relaxed mb-4">
-                我们的产品和服务按"现状"和"可用"基础提供，不提供任何明示或暗示的保证，包括但不限于对适销性、适用性、非侵权性或准确性、可靠性的保证。
+                我们的产品和服务按&ldquo;现状&rdquo;和&ldquo;可用&rdquo;基础提供，不提供任何明示或暗示的保证，包括但不限于对适销性、适用性、非侵权性或准确性、可靠性的保证。
              </p>
              <p className="text-[#5C5C5C] leading-relaxed mb-4">
                我们不对以下情况承担责任：
@@ -164,7 +164,6 @@ export default function TermsOfServicePage() {
              <ul className="list-none text-[#5C5C5C] space-y-2">
                <li>公司名称：四川睿新致远科技有限公司</li>
                <li>联系邮箱：contact@novalon.cn</li>
-                <li>联系电话：028-88888888</li>
                <li>联系地址：中国四川省成都市龙泉驿区幸福路12号</li>
              </ul>
            </section>
@@ -196,7 +196,7 @@ export function ContactSection() {
          `}
        >
          <div className="flex items-center gap-3 mb-4">
-            <div className="w-8 h-px bg-gradient-to-r from-[#1C1C1C] to-[#C41E3A]" />
+            <div className="w-8 h-px bg-linear-to-r from-[#1C1C1C] to-[#C41E3A]" />
            <span className="text-sm text-[#5C5C5C] tracking-wide">联系我们</span>
          </div>
          <h2 id="contact-heading" className="text-4xl md:text-5xl font-bold text-[#1C1C1C] mb-4">
@@ -219,7 +219,7 @@ export function ContactSection() {
              <h3 className="text-lg font-semibold text-[#1C1C1C] mb-6">联系方式</h3>
              <div className="space-y-4">
                <div className="flex items-start gap-4 group">
-                  <div className="w-10 h-10 bg-[#C41E3A] rounded-md flex items-center justify-center flex-shrink-0 transition-transform duration-200 group-hover:scale-105">
+                  <div className="w-10 h-10 bg-[#C41E3A] rounded-md flex items-center justify-center shrink-0 transition-transform duration-200 group-hover:scale-105">
                    <Mail className="w-5 h-5 text-white" />
                  </div>
                  <div>
@@ -231,7 +231,7 @@ export function ContactSection() {
                </div>

                <div className="flex items-start gap-4 group">
-                  <div className="w-10 h-10 bg-[#C41E3A] rounded-md flex items-center justify-center flex-shrink-0 transition-transform duration-200 group-hover:scale-105">
+                  <div className="w-10 h-10 bg-[#C41E3A] rounded-md flex items-center justify-center shrink-0 transition-transform duration-200 group-hover:scale-105">
                    <MapPin className="w-5 h-5 text-white" />
                  </div>
                  <div>
@@ -262,15 +262,15 @@ export function ContactSection() {
              </div>
              <div className="space-y-3">
                <div className="flex items-start gap-2">
-                  <div className="w-1.5 h-1.5 bg-[#C41E3A] rounded-full mt-2 flex-shrink-0" />
+                  <div className="w-1.5 h-1.5 bg-[#C41E3A] rounded-full mt-2 shrink-0" />
                  <p className="text-sm text-[#5C5C5C]">工作日 2 小时内快速响应您的咨询</p>
                </div>
                <div className="flex items-start gap-2">
-                  <div className="w-1.5 h-1.5 bg-[#C41E3A] rounded-full mt-2 flex-shrink-0" />
+                  <div className="w-1.5 h-1.5 bg-[#C41E3A] rounded-full mt-2 shrink-0" />
                  <p className="text-sm text-[#5C5C5C]">提供免费的业务咨询和方案评估服务</p>
                </div>
                <div className="flex items-start gap-2">
-                  <div className="w-1.5 h-1.5 bg-[#C41E3A] rounded-full mt-2 flex-shrink-0" />
+                  <div className="w-1.5 h-1.5 bg-[#C41E3A] rounded-full mt-2 shrink-0" />
                  <p className="text-sm text-[#5C5C5C]">根据您的需求量身定制最优解决方案</p>
                </div>
              </div>
@@ -351,7 +351,7 @@ export function ContactSection() {
                      验证码 <span className="text-[#C41E3A]">*</span>
                    </label>
                    <div className="flex items-center gap-3">
-                      <div className="bg-[#E2E8F0] px-4 py-2 rounded-md font-mono text-lg text-[#1A1A2E] min-w-[120px] text-center" data-testid="captcha-question">
+                      <div className="bg-[#E2E8F0] px-4 py-2 rounded-md font-mono text-lg text-[#1A1A2E] min-w-30 text-center" data-testid="captcha-question">
                        {captcha.question}
                      </div>
                      <div className="flex-1">
@@ -373,7 +373,7 @@ export function ContactSection() {
                        onClick={handleCaptchaRefresh}
                        disabled={isSubmitting}
                        data-testid="refresh-captcha"
-                        className="flex-shrink-0"
+                        className="shrink-0"
                      >
                        <RefreshCw className="w-4 h-4" />
                      </Button>
@@ -382,7 +382,7 @@ export function ContactSection() {
                  <Button 
                    type="submit" 
                    size="lg"
-                    className="w-full group mt-auto min-h-[52px] md:min-h-0"
+                    className="w-full group mt-auto min-h-13 md:min-h-0"
                    disabled={isSubmitting}
                    data-testid="submit-button"
                  >
@@ -15,12 +15,6 @@ export function OrganizationSchema() {
      "addressRegion": "四川省",
      "streetAddress": "成都市高新区"
    },
-    "contactPoint": {
-      "@type": "ContactPoint",
-      "telephone": "+86-028-88888888",
-      "contactType": "customer service",
-      "availableLanguage": ["Chinese", "English"]
-    },
    "sameAs": [
      "https://www.novalon.cn"
    ]
@@ -31,10 +31,9 @@ export const COMPANY_INFO = {
  founded: '2026',
  location: '四川省成都市',
  email: 'contact@novalon.cn',
-  phone: '028-88888888',
  address: '中国四川省成都市龙泉驿区幸福路12号',
  icp: '蜀ICP备2026013658号',
-  police: '川公网安备 XXXXXXXXXXX号',
+  police: '川公网安备51010602003285号',
 } as const;

 // Navigation Items - 混合导航（首页滚动，详情页跳转）
@@ -134,10 +134,6 @@ export function generateConfirmationEmail(data: ContactFormData): string {
          <span class="contact-icon">📧</span>
          <span>${COMPANY_INFO.email}</span>
        </div>
-        <div class="contact-item">
-          <span class="contact-icon">📱</span>
-          <span>${COMPANY_INFO.phone}</span>
-        </div>
        <div class="contact-item">
          <span class="contact-icon">📍</span>
          <span>${COMPANY_INFO.address}</span>