合同初步可以访问

2025-05-29 17:42:35 +08:00
parent 9200654c35
commit b92d87a3b4
16 changed files with 2239 additions and 0 deletions
@@ -0,0 +1,164 @@
+import { useState, useRef } from 'react';
+
+interface ContractSearchHeroProps {
+  onSearch: (query: string) => void;
+  initialQuery?: string;
+  tipText?: string;
+  tipIcon?: string;
+}
+
+export function ContractSearchHero({ 
+  onSearch, 
+  initialQuery = '',
+  tipText = '支持自然语言描述，AI将为您匹配最相关的模板',
+  tipIcon = 'ri-lightbulb-line'
+}: ContractSearchHeroProps) {
+  const [searchQuery, setSearchQuery] = useState(initialQuery);
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+  const handleSearchInputChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    const value = e.target.value;
+    setSearchQuery(value);
+    
+    // 自动调整高度
+    if (textareaRef.current) {
+      textareaRef.current.style.height = 'auto';
+      textareaRef.current.style.height = Math.max(80, textareaRef.current.scrollHeight) + 'px';
+    }
+  };
+
+  const handleSearch = () => {
+    onSearch(searchQuery);
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) {
+      e.preventDefault();
+      handleSearch();
+    }
+  };
+
+  return (
+    <div style={{
+      textAlign: 'center',
+      padding: '60px 0',
+      background: 'linear-gradient(135deg, rgba(0, 104, 74, 0.05) 0%, rgba(0, 104, 74, 0.02) 100%)',
+      borderRadius: '16px',
+      marginBottom: '32px'
+    }}>
+      <h1 style={{
+        fontSize: '32px',
+        fontWeight: '600',
+        color: 'rgba(0, 0, 0, 0.85)',
+        marginBottom: '12px',
+        margin: '0 0 12px 0'
+      }}>AI智能合同模板搜索</h1>
+      
+      <p style={{
+        fontSize: '16px',
+        color: 'rgba(0, 0, 0, 0.45)',
+        marginBottom: '40px',
+        margin: '0 0 40px 0'
+      }}>输入合同名称、用途或关键内容，快速找到最适合的模板</p>
+      
+      <div style={{
+        maxWidth: '600px',
+        margin: '0 auto',
+        position: 'relative'
+      }}>
+        <div style={{
+          background: 'white',
+          border: '2px solid #e5e7eb',
+          borderRadius: '12px',
+          padding: '16px 20px',
+          boxShadow: '0 4px 16px rgba(0, 0, 0, 0.08)',
+          transition: 'all 0.3s ease'
+        }}>
+          <textarea 
+            ref={textareaRef}
+            placeholder="例如：销售合同、设备采购协议、包含违约责任条款的合同..."
+            value={searchQuery}
+            onChange={handleSearchInputChange}
+            onKeyDown={handleKeyDown}
+            aria-label="合同模板搜索输入框"
+            style={{
+              width: '100%',
+              minHeight: '80px',
+              border: 'none',
+              outline: 'none',
+              resize: 'vertical',
+              fontSize: '16px',
+              lineHeight: '1.5',
+              background: 'transparent',
+              margin: '0',
+              padding: '0',
+              fontFamily: 'inherit'
+            }}
+          />
+          
+          {/* 搜索操作区域 - 水平布局 */}
+          <div style={{
+            display: 'flex',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            width: '100%',
+            marginTop: '16px',
+            paddingTop: '16px',
+            borderTop: '1px solid #f0f0f0'
+          }}>
+            {/* 提示文字 - 左侧 */}
+            <div style={{
+              fontSize: '12px',
+              color: 'rgba(0, 0, 0, 0.45)',
+              display: 'flex',
+              alignItems: 'center',
+              flex: '1'
+            }}>
+              <i className={tipIcon} style={{ marginRight: '4px', fontSize: '12px' }}></i>
+              {tipText}
+            </div>
+            
+            {/* 搜索按钮 - 右侧 */}
+            <button 
+              onClick={handleSearch}
+              disabled={!searchQuery.trim()}
+              aria-label="开始搜索"
+              style={{
+                background: '#00684a',
+                color: 'white',
+                border: 'none',
+                borderRadius: '8px',
+                padding: '10px 24px',
+                fontSize: '14px',
+                fontWeight: '500',
+                cursor: 'pointer',
+                transition: 'all 0.3s ease',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                gap: '6px',
+                margin: '0',
+                flexShrink: '0'
+              }}
+              onMouseEnter={(e) => {
+                if (!e.currentTarget.disabled) {
+                  e.currentTarget.style.background = '#005a40';
+                  e.currentTarget.style.transform = 'translateY(-1px)';
+                }
+              }}
+              onMouseLeave={(e) => {
+                if (!e.currentTarget.disabled) {
+                  e.currentTarget.style.background = '#00684a';
+                  e.currentTarget.style.transform = 'translateY(0)';
+                }
+              }}
+            >
+              <i className="ri-search-line" style={{ fontSize: '14px' }}></i>
+              智能搜索
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}