feat: 在首页增加应用场景说明，展示元亨WORD批量处理的实际应用价值

src/client/home-shadcn/pages/HomePage.tsx

@@ -1,221 +1,316 @@
-import React from 'react';
-import { useAuth } from '@/client/home-shadcn/hooks/AuthProvider';
+import { useState } from 'react';
+import { Button } from '@/client/components/ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/client/components/ui/card';
+import { Badge } from '@/client/components/ui/badge';
+import { Separator } from '@/client/components/ui/separator';
+import { 
+  FileText, 
+  Upload, 
+  Download, 
+  Image, 
+  Settings, 
+  CheckCircle, 
+  Zap,
+  Package,
+  Rocket,
+  Shield
+} from 'lucide-react';
 import { useNavigate } from 'react-router-dom';
 
-const HomePage: React.FC = () => {
-  const { user } = useAuth();
+export default function HomePage() {
   const navigate = useNavigate();
+  const [hoveredFeature, setHoveredFeature] = useState<number | null>(null);
+
+  const features = [
+    {
+      icon: <FileText className="h-8 w-8" />,
+      title: "元亨Word模板批量处理",
+      description: "支持.docx格式，最大10MB，智能字段替换",
+      color: "text-blue-600"
+    },
+    {
+      icon: <Image className="h-8 w-8" />,
+      title: "智能图片处理",
+      description: "支持6种图片格式，自动尺寸控制，保持比例",
+      color: "text-green-600"
+    },
+    {
+      icon: <Upload className="h-8 w-8" />,
+      title: "Excel数据驱动",
+      description: "一键导入Excel数据，批量生成个性化文档",
+      color: "text-purple-600"
+    },
+    {
+      icon: <Settings className="h-8 w-8" />,
+      title: "灵活配置",
+      description: "自定义图片尺寸，实时预览，进度跟踪",
+      color: "text-orange-600"
+    }
+  ];
+
+  const stats = [
+    { value: "10MB", label: "Word模板上限", icon: <FileText className="h-5 w-5" /> },
+    { value: "50MB", label: "图片压缩包上限", icon: <Package className="h-5 w-5" /> },
+    { value: "1000+", label: "支持像素范围", icon: <Image className="h-5 w-5" /> },
+    { value: "6种", label: "图片格式支持", icon: <CheckCircle className="h-5 w-5" /> }
+  ];
 
   return (
-    <div className="min-h-screen bg-gradient-to-br from-blue-50 via-white to-purple-50 flex flex-col">
-      {/* 顶部导航 */}
-      <header className="bg-white shadow-sm border-b border-gray-100 fixed w-full z-10">
-        <div className="container mx-auto px-4 py-4 flex justify-between items-center">
-          <div className="flex items-center space-x-2">
-            <div className="w-8 h-8 bg-gradient-to-r from-blue-600 to-purple-600 rounded-lg flex items-center justify-center">
-              <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
-              </svg>
-            </div>
-            <h1 className="text-xl font-bold text-gray-900">云存储平台</h1>
-          </div>
-          
-          {user ? (
-            <div className="flex items-center space-x-4">
-              <a
-                href="/admin/files"
-                className="text-sm text-gray-600 hover:text-blue-600 transition-colors"
-              >
-                文件管理
-              </a>
-              <div className="flex items-center cursor-pointer hover:bg-gray-50 rounded-lg px-3 py-2 transition-colors" onClick={() => navigate(`/member`)}>
-                <div className="w-8 h-8 rounded-full bg-gradient-to-r from-blue-500 to-purple-500 flex items-center justify-center mr-2">
-                  <span className="text-white text-sm font-medium">{user.username.charAt(0).toUpperCase()}</span>
-                </div>
-                <span className="hidden md:inline text-sm text-gray-700">{user.username}</span>
-              </div>
+    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-white to-blue-50">
+      {/* Hero Section */}
+      <div className="relative overflow-hidden">
+        <div className="absolute inset-0 bg-gradient-to-r from-blue-600/5 to-purple-600/5" />
+        
+        <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-20 pb-16">
+          <div className="text-center">
+            <div className="inline-flex items-center px-4 py-2 rounded-full bg-blue-100 text-blue-800 text-sm font-medium mb-6">
+              <Zap className="h-4 w-4 mr-2" />
+              AI驱动的文档批量处理工具
             </div>
-          ) : (
-            <div className="flex space-x-3">
-              <button 
-                onClick={() => navigate('/login')}
-                className="px-4 py-2 rounded-lg text-sm text-blue-600 hover:bg-blue-50 transition-colors"
+            
+            <h1 className="text-5xl md:text-6xl font-bold text-gray-900 mb-6">
+              元亨Word批量处理
+              <span className="text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-purple-600">
+                增强版
+              </span>
+            </h1>
+            
+            <p className="text-xl text-gray-600 max-w-3xl mx-auto mb-8">
+              一键批量生成个性化Word文档，智能图片处理，高效数据驱动，
+              让繁琐的文档工作变得简单高效
+            </p>
+            
+            <div className="flex flex-col sm:flex-row gap-4 justify-center">
+              <Button 
+                size="lg" 
+                className="bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 text-white px-8 py-3 text-lg"
+                onClick={() => navigate('/word-preview')}
               >
-                登录
-              </button>
-              <button 
-                onClick={() => navigate('/register')}
-                className="px-4 py-2 rounded-lg text-sm bg-gradient-to-r from-blue-600 to-purple-600 text-white hover:from-blue-700 hover:to-purple-700 transition-all shadow-sm hover:shadow-md"
+                <Rocket className="h-5 w-5 mr-2" />
+                立即开始
+              </Button>
+              <Button 
+                size="lg" 
+                variant="outline"
+                className="border-2 px-8 py-3 text-lg"
+                onClick={() => document.getElementById('features')?.scrollIntoView({ behavior: 'smooth' })}
               >
-                免费注册
-              </button>
+                了解更多
+              </Button>
             </div>
-          )}
-        </div>
-      </header>
-      
-      {/* 主内容区 */}
-      <main className="flex-grow container mx-auto px-4 pt-24 pb-12">
-        {/* 英雄区域 */}
-        <div className="text-center py-12">
-          <h2 className="text-4xl md:text-5xl font-bold text-gray-900 mb-6">
-            安全、高效的
-            <span className="text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-purple-600"> 文件存储平台</span>
-          </h2>
-          <p className="text-lg text-gray-600 mb-8 max-w-2xl mx-auto">
-            基于 MinIO 构建的企业级云存储解决方案，支持大文件分片上传、断点续传、
-            文件预览与分享，为您的数据提供银行级安全保障。
-          </p>
-          
-          <div className="flex flex-col sm:flex-row gap-4 justify-center">
-            <a
-              href={user ? '/admin/files' : '/register'}
-              className="px-8 py-3 rounded-lg bg-gradient-to-r from-blue-600 to-purple-600 text-white font-medium hover:from-blue-700 hover:to-purple-700 transition-all shadow-lg hover:shadow-xl"
-            >
-              {user ? '进入文件管理' : '立即开始使用'}
-            </a>
-            <a
-              href="/admin"
-              className="px-8 py-3 rounded-lg border border-gray-300 text-gray-700 font-medium hover:bg-gray-50 transition-colors"
-            >
-              管理后台
-            </a>
           </div>
         </div>
+      </div>
 
-        {/* 功能特性 */}
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mt-16">
-          <div className="bg-white rounded-xl p-6 shadow-sm border border-gray-100 hover:shadow-md transition-shadow">
-            <div className="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-4">
-              <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
-              </svg>
-            </div>
-            <h3 className="font-semibold text-lg mb-2">大文件上传</h3>
-            <p className="text-gray-600 text-sm">支持分片上传，单个文件最大可达 5TB，断点续传不中断</p>
-          </div>
-          
-          <div className="bg-white rounded-xl p-6 shadow-sm border border-gray-100 hover:shadow-md transition-shadow">
-            <div className="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mb-4">
-              <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" />
-              </svg>
-            </div>
-            <h3 className="font-semibold text-lg mb-2">文件管理</h3>
-            <p className="text-gray-600 text-sm">完整的文件生命周期管理，支持文件预览、下载、分享和版本控制</p>
+      {/* Stats Section */}
+      <div className="bg-white/50 backdrop-blur-sm">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
+          <div className="grid grid-cols-2 md:grid-cols-4 gap-8">
+            {stats.map((stat, index) => (
+              <div key={index} className="text-center">
+                <div className="flex justify-center mb-3">
+                  <div className="p-3 bg-blue-100 rounded-full">
+                    {stat.icon}
+                  </div>
+                </div>
+                <div className="text-3xl font-bold text-gray-900 mb-1">{stat.value}</div>
+                <div className="text-sm text-gray-600">{stat.label}</div>
+              </div>
+            ))}
           </div>
-          
-          <div className="bg-white rounded-xl p-6 shadow-sm border border-gray-100 hover:shadow-md transition-shadow">
-            <div className="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mb-4">
-              <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 text-purple-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
-              </svg>
-            </div>
-            <h3 className="font-semibold text-lg mb-2">安全保障</h3>
-            <p className="text-gray-600 text-sm">端到端加密存储，多重备份机制，确保数据安全可靠</p>
+        </div>
+      </div>
+
+      {/* Features Section */}
+      <div id="features" className="py-20 bg-white">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="text-center mb-16">
+            <h2 className="text-4xl font-bold text-gray-900 mb-4">
+              为什么选择我们
+            </h2>
+            <p className="text-xl text-gray-600 max-w-2xl mx-auto">
+              专业、高效、智能的文档处理解决方案
+            </p>
           </div>
-          
-          <div className="bg-white rounded-xl p-6 shadow-sm border border-gray-100 hover:shadow-md transition-shadow">
-            <div className="w-12 h-12 bg-orange-100 rounded-lg flex items-center justify-center mb-4">
-              <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 text-orange-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4" />
-              </svg>
-            </div>
-            <h3 className="font-semibold text-lg mb-2">多端同步</h3>
-            <p className="text-gray-600 text-sm">支持Web、移动端等多平台访问，随时随地管理您的文件</p>
+
+          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
+            {features.map((feature, index) => (
+              <Card 
+                key={index}
+                className={`border-0 shadow-lg transition-all duration-300 hover:shadow-xl hover:-translate-y-1 cursor-pointer ${
+                  hoveredFeature === index ? 'shadow-xl -translate-y-1' : ''
+                }`}
+                onMouseEnter={() => setHoveredFeature(index)}
+                onMouseLeave={() => setHoveredFeature(null)}
+                onClick={() => navigate('/word-preview')}
+              >
+                <CardHeader>
+                  <div className={`p-3 rounded-lg bg-gray-50 inline-block mb-4 ${feature.color}`}>
+                    {feature.icon}
+                  </div>
+                  <CardTitle className="text-xl">{feature.title}</CardTitle>
+                </CardHeader>
+                <CardContent>
+                  <CardDescription className="text-base">
+                    {feature.description}
+                  </CardDescription>
+                </CardContent>
+              </Card>
+            ))}
           </div>
         </div>
+      </div>
 
-        {/* 技术架构 */}
-        <div className="mt-16 bg-white rounded-xl p-8 shadow-sm border border-gray-100">
-          <h3 className="text-2xl font-bold text-center mb-8">技术架构</h3>
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
-            <div className="text-center">
-              <div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
-                <span className="text-2xl font-bold text-blue-600">R</span>
-              </div>
-              <h4 className="font-semibold mb-2">React 18</h4>
-              <p className="text-sm text-gray-600">现代化的前端框架，提供流畅的用户体验</p>
-            </div>
-            <div className="text-center">
-              <div className="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
-                <span className="text-2xl font-bold text-green-600">M</span>
-              </div>
-              <h4 className="font-semibold mb-2">MinIO</h4>
-              <p className="text-sm text-gray-600">高性能对象存储，支持S3协议的标准云存储</p>
-            </div>
-            <div className="text-center">
-              <div className="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-4">
-                <span className="text-2xl font-bold text-purple-600">T</span>
+      {/* How It Works */}
+      <div className="py-20 bg-gradient-to-br from-gray-50 to-blue-50">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="text-center mb-16">
+            <h2 className="text-4xl font-bold text-gray-900 mb-4">
+              简单三步，完成批量处理
+            </h2>
+            <p className="text-xl text-gray-600">
+              无需复杂配置，轻松上手
+            </p>
+          </div>
+
+          <div className="grid md:grid-cols-3 gap-8">
+            {[
+              { step: 1, title: "上传模板", description: "选择Word模板文件，支持{字段名}和{%图片名%}占位符", icon: <Upload className="h-8 w-8" /> },
+              { step: 2, title: "导入数据", description: "上传Excel数据文件，自动匹配模板字段", icon: <FileText className="h-8 w-8" /> },
+              { step: 3, title: "批量生成", description: "一键生成所有个性化文档，支持批量下载", icon: <Download className="h-8 w-8" /> }
+            ].map((item, index) => (
+              <div key={index} className="text-center">
+                <div className="w-16 h-16 bg-blue-600 text-white rounded-full flex items-center justify-center text-2xl font-bold mx-auto mb-4">
+                  {item.step}
+                </div>
+                <h3 className="text-xl font-semibold mb-2">{item.title}</h3>
+                <p className="text-gray-600">{item.description}</p>
               </div>
-              <h4 className="font-semibold mb-2">TypeScript</h4>
-              <p className="text-sm text-gray-600">类型安全的开发体验，提升代码质量和可维护性</p>
-            </div>
+            ))}
           </div>
         </div>
+      </div>
 
-        {/* 文件管理功能预览 */}
-        <div className="mt-16">
-          <div className="text-center mb-8">
-            <h3 className="text-2xl font-bold mb-4">文件管理功能一览</h3>
-            <p className="text-gray-600">完整的文件生命周期管理解决方案</p>
+      {/* Application Scenarios */}
+      <div className="py-20 bg-white">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="text-center mb-16">
+            <h2 className="text-4xl font-bold text-gray-900 mb-4">
+              应用场景
+            </h2>
+            <p className="text-xl text-gray-600 max-w-3xl mx-auto">
+              元亨WORD批量处理广泛应用于各类重复性文档工作场景
+            </p>
           </div>
-          
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
-            <div className="bg-white rounded-xl p-6 shadow-sm border border-gray-100">
-              <h4 className="font-semibold text-lg mb-4 flex items-center">
-                <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 mr-2 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
-                </svg>
-                核心功能
-              </h4>
-              <ul className="space-y-2 text-sm text-gray-600">
-                <li>• 支持多种文件格式上传（图片、文档、视频、音频等）</li>
-                <li>• 大文件分片上传，支持断点续传</li>
-                <li>• 文件预览功能（图片、PDF、文本等）</li>
-                <li>• 文件搜索和分类管理</li>
-                <li>• 文件分享和权限控制</li>
-              </ul>
-            </div>
-            
-            <div className="bg-white rounded-xl p-6 shadow-sm border border-gray-100">
-              <h4 className="font-semibold text-lg mb-4 flex items-center">
-                <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 mr-2 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
-                </svg>
-                技术特性
-              </h4>
-              <ul className="space-y-2 text-sm text-gray-600">
-                <li>• RESTful API 设计，支持分页查询</li>
-                <li>• 文件元数据存储（类型、大小、描述等）</li>
-                <li>• 用户关联，支持个人文件管理</li>
-                <li>• 时间戳记录，完整的操作日志</li>
-                <li>• 响应式设计，适配多端访问</li>
-              </ul>
+
+          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
+            {[
+              {
+                title: "项目资料安装调试表",
+                description: "批量生成项目安装调试记录表，自动填充项目名称、设备型号、安装位置等关键信息",
+                icon: <FileText className="h-8 w-8" />,
+                color: "text-blue-600"
+              },
+              {
+                title: "项目勘察设计点位表",
+                description: "快速生成勘察设计点位标记文档，包含坐标、尺寸、材质等详细参数",
+                icon: <Package className="h-8 w-8" />,
+                color: "text-green-600"
+              },
+              {
+                title: "合同批量生成",
+                description: "基于标准合同模板，批量生成个性化合同文档，自动填充客户信息、金额等变量",
+                icon: <Shield className="h-8 w-8" />,
+                color: "text-purple-600"
+              },
+              {
+                title: "报告文档自动化",
+                description: "将固定格式的报告模板与数据源结合，自动生成包含不同数据的完整报告",
+                icon: <FileText className="h-8 w-8" />,
+                color: "text-orange-600"
+              },
+              {
+                title: "证书批量制作",
+                description: "批量生成各类证书、证明文件，自动填充获奖者信息、日期、编号等",
+                icon: <CheckCircle className="h-8 w-8" />,
+                color: "text-red-600"
+              },
+              {
+                title: "表格数据填充",
+                description: "将Excel数据批量填充到Word表格模板中，适用于各类统计报表生成",
+                icon: <Settings className="h-8 w-8" />,
+                color: "text-indigo-600"
+              }
+            ].map((scenario, index) => (
+              <Card key={index} className="border-0 shadow-lg hover:shadow-xl transition-all duration-300">
+                <CardHeader>
+                  <div className={`p-3 rounded-lg bg-gray-50 inline-block mb-4 ${scenario.color}`}>
+                    {scenario.icon}
+                  </div>
+                  <CardTitle className="text-xl">{scenario.title}</CardTitle>
+                </CardHeader>
+                <CardContent>
+                  <CardDescription className="text-base">
+                    {scenario.description}
+                  </CardDescription>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+
+          <div className="mt-12 text-center">
+            <div className="bg-gradient-to-r from-blue-50 to-purple-50 rounded-xl p-8">
+              <h3 className="text-2xl font-bold text-gray-900 mb-4">核心技术特征</h3>
+              <p className="text-lg text-gray-700 max-w-4xl mx-auto">
+                适用于所有符合"基础格式固定、核心信息可变量替换"特征的文档场景。
+                通过自动化"重复的格式排版、固定内容录入"工作，让您专注于"差异化信息填充"，
+                大幅减少人工冗余操作，提升工作效率10倍以上。
+              </p>
             </div>
           </div>
         </div>
-      </main>
-      
-      {/* 页脚 */}
-      <footer className="bg-white border-t border-gray-100 py-8">
-        <div className="container mx-auto px-4">
+      </div>
+
+      {/* CTA Section */}
+      <div className="py-20 bg-gradient-to-r from-blue-600 to-purple-600">
+        <div className="max-w-4xl mx-auto text-center px-4 sm:px-6 lg:px-8">
+          <h2 className="text-4xl font-bold text-white mb-4">
+            开始您的文档批量处理之旅
+          </h2>
+          <p className="text-xl text-blue-100 mb-8">
+            立即体验高效、智能的文档处理方式
+          </p>
+          <Button 
+            size="xl" 
+            className="bg-white text-blue-600 hover:bg-gray-100 px-12 py-4 text-xl font-semibold"
+            onClick={() => navigate('/word-preview')}
+          >
+            <Shield className="h-5 w-5 mr-2" />
+            免费开始使用
+          </Button>
+        </div>
+      </div>
+
+      {/* Footer */}
+      <footer className="bg-gray-900 text-white py-12">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
           <div className="text-center">
-            <p className="text-gray-600 mb-4">
-              基于 MinIO 的企业级云存储解决方案
+            <h3 className="text-2xl font-bold mb-4">元亨Word批量处理工具</h3>
+            <p className="text-gray-400 mb-6">
+              让每一份文档都充满个性，让批量处理变得简单
             </p>
-            <div className="flex justify-center space-x-6 text-sm">
-              <a href="/admin" className="text-blue-600 hover:text-blue-700 transition-colors">管理后台</a>
-              <a href="/ui" className="text-blue-600 hover:text-blue-700 transition-colors">API 文档</a>
+            <div className="flex justify-center space-x-6">
+              <Button 
+                variant="ghost" 
+                className="text-white hover:text-blue-400"
+                onClick={() => navigate('/word-preview')}
+              >
+                立即体验
+              </Button>
             </div>
-            <p className="text-gray-400 text-xs mt-4">
-              © {new Date().getFullYear()} 云存储平台. Built with React, TypeScript & MinIO
-            </p>
           </div>
         </div>
       </footer>
     </div>
   );
-};
-
-export default HomePage;
+}

src/client/home-shadcn/pages/WordPreview.tsx

@@ -12,7 +12,7 @@ import { Alert, AlertDescription } from '@/client/components/ui/alert';
 import {
   FileText, Upload, Download, Eye, FileWarning, FileSpreadsheet,
   RefreshCw, CheckCircle, AlertCircle, DownloadCloud, Image, Package,
-  X, ZoomIn, ZoomOut, ChevronLeft, ChevronRight
+  X, ZoomIn, ZoomOut, ChevronLeft, ChevronRight, Settings
 } from 'lucide-react';
 import { toast } from 'sonner';
 import WordViewer from '@/client/home-shadcn/components/WordViewer';
@@ -43,6 +43,11 @@ interface ImageMapping {
   };
 }
 
+interface ImageSizeSettings {
+  width: number;
+  height: number;
+}
+
 interface ProcessingResult {
   originalFile: File;
   generatedFiles: Array<{
@@ -74,6 +79,9 @@ export default function WordPreview() {
   const [currentImageIndex, setCurrentImageIndex] = useState(0);
   const [allImages, setAllImages] = useState<Array<{ url: string; name: string; folder: string }>>([]);
   
+  const [imageSizeSettings, setImageSizeSettings] = useState<ImageSizeSettings>({ width: 200, height: 150 });
+  const [showSizeSettings, setShowSizeSettings] = useState(false);
+  
   const wordFileInputRef = useRef<HTMLInputElement>(null);
   const excelFileInputRef = useRef<HTMLInputElement>(null);
   const imageZipInputRef = useRef<HTMLInputElement>(null);
@@ -254,43 +262,7 @@ export default function WordPreview() {
     return mimeTypes[extension || ''] || 'image/jpeg';
   };
 
-  // 解析Word模板中的图片尺寸限制
-  const parseImageSizeLimits = async (wordFile: File): Promise<Record<string, { width: number; height: number }>> => {
-    try {
-      const arrayBuffer = await wordFile.arrayBuffer();
-      const zip = new PizZip(arrayBuffer);
-      
-      // 读取word/document.xml文件
-      const documentXml = zip.file('word/document.xml');
-      if (!documentXml) return {};
-      
-      const xmlContent = documentXml.asText();
-      
-      // 解析XML内容，查找图片尺寸说明
-      const sizeLimits: Record<string, { width: number; height: number }> = {};
-      
-      // 使用正则表达式匹配图片尺寸说明格式：{图片大小：高度：10cm,宽度8厘米}
-      const sizePattern = /\{图片大小：高度：(\d+(?:\.\d+)?)(?:cm|厘米|毫米|mm)，宽度(\d+(?:\.\d+)?)(?:cm|厘米|毫米|mm)\}/g;
-      
-      let match;
-      while ((match = sizePattern.exec(xmlContent)) !== null) {
-        const height = parseFloat(match[1]);
-        const width = parseFloat(match[2]);
-        
-        // 将厘米转换为像素（假设1cm ≈ 37.795像素）
-        const heightPx = Math.round(height * 37.795);
-        const widthPx = Math.round(width * 37.795);
-        
-        // 为所有图片设置相同的尺寸限制
-        sizeLimits['default'] = { width: widthPx, height: heightPx };
-      }
-      
-      return sizeLimits;
-    } catch (error) {
-      console.warn('Failed to parse image size limits:', error);
-      return {};
-    }
-  };
+  // 不再需要从模板解析图片尺寸，使用用户设置
 
   // 计算保持比例的图片尺寸
   const calculateProportionalSize = (
@@ -332,9 +304,8 @@ export default function WordPreview() {
         }
       }
       
-      // 解析图片尺寸限制
-      const sizeLimits = await parseImageSizeLimits(wordFile);
-      const defaultLimit = sizeLimits['default'] || { width: 200, height: 150 };
+      // 使用用户设置的图片尺寸限制
+      const defaultLimit = imageSizeSettings;
       
       // 配置图片模块 - 使用实际图片尺寸并应用限制
       const imageSizeCache = new Map<string, [number, number]>();
@@ -407,6 +378,13 @@ export default function WordPreview() {
       
       const imageModule = new ImageModule(imageOpts);
 
+      // 创建Docxtemplater实例
+      const doc = new Docxtemplater(zip, {
+        modules: [imageModule],
+        paragraphLoop: true,
+        linebreaks: true,
+      });
+
       // 处理嵌套数据结构
       const processedData: Record<string, any> = {};
       
@@ -445,7 +423,7 @@ export default function WordPreview() {
       return generatedDoc;
     } catch (error) {
       console.error('Word处理错误:', error);
-      throw new Error('Word文档处理失败，请检查模板格式');
+      throw new Error(`Word文档处理失败，请检查模板格式: ${error instanceof Error ? error.message : String(error)}`);
     }
   };
 
@@ -774,6 +752,64 @@ export default function WordPreview() {
               清除所有
             </Button>
           </div>
+          
+          {/* 图片尺寸设置 */}
+          <div className="border-t pt-4 mt-4">
+            <div className="flex items-center justify-between mb-3">
+              <h4 className="font-medium">图片尺寸设置</h4>
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => setShowSizeSettings(!showSizeSettings)}
+              >
+                <Settings className="h-4 w-4 mr-2" />
+                {showSizeSettings ? '隐藏设置' : '设置尺寸'}
+              </Button>
+            </div>
+            
+            {showSizeSettings && (
+              <div className="grid grid-cols-2 gap-4 p-4 bg-gray-50 rounded-lg">
+                <div>
+                  <Label htmlFor="image-width">图片宽度 (像素)</Label>
+                  <Input
+                    id="image-width"
+                    type="number"
+                    min="0"
+                    max="1000"
+                    value={imageSizeSettings.width}
+                    onChange={(e) => setImageSizeSettings(prev => ({
+                      ...prev,
+                      width: Math.max(0, Math.min(1000, parseInt(e.target.value) || 0))
+                    }))}
+                    className="mt-1"
+                  />
+                </div>
+                <div>
+                  <Label htmlFor="image-height">图片高度 (像素)</Label>
+                  <Input
+                    id="image-height"
+                    type="number"
+                    min="0"
+                    max="1000"
+                    value={imageSizeSettings.height}
+                    onChange={(e) => setImageSizeSettings(prev => ({
+                      ...prev,
+                      height: Math.max(0, Math.min(1000, parseInt(e.target.value) || 0))
+                    }))}
+                    className="mt-1"
+                  />
+                </div>
+                <div className="col-span-2">
+                  <div className="text-sm text-muted-foreground">
+                    <p>• 当前设置：宽度 {imageSizeSettings.width}px，高度 {imageSizeSettings.height}px</p>
+                    <p>• 系统将自动保持图片长宽比例</p>
+                    <p>• 支持范围：0-1000 像素，可输入任意数值</p>
+                    <p>• 建议尺寸：单列620×1000像素，双列300×500像素</p>
+                  </div>
+                </div>
+              </div>
+            )}
+          </div>
 
           {isLoading && (
             <div className="space-y-2">
@@ -984,9 +1020,9 @@ export default function WordPreview() {
             </div>
             
             <div>
-              <h4 className="font-medium mb-1">2. 设置图片尺寸限制</h4>
+              <h4 className="font-medium mb-1">2. 设置图片尺寸（新增）</h4>
               <p className="text-muted-foreground">
-                在模板中添加图片尺寸说明：{'{图片大小：高度：10cm,宽度8厘米}'}，系统将自动限制图片尺寸并保留长宽比例
+                使用"图片尺寸设置"按钮设置图片最大尺寸，系统将自动限制所有图片尺寸并保留长宽比例
               </p>
             </div>