|
|
@@ -1 +1,731 @@
|
|
|
-<p>upload-screen works!</p>
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="zh-CN">
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
|
|
+ <title>智能图片上传助手</title>
|
|
|
+ <!-- 使用国内CDN引入Ant Design Mobile -->
|
|
|
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/antd-mobile@5.32.0/2x/antd-mobile.min.css">
|
|
|
+ <style>
|
|
|
+ :root {
|
|
|
+ --primary-color: #ff7d00;
|
|
|
+ --success-color: #52c41a;
|
|
|
+ --error-color: #f5222d;
|
|
|
+ --warning-color: #faad14;
|
|
|
+ --text-color: rgba(0, 0, 0, 0.85);
|
|
|
+ --border-radius: 8px;
|
|
|
+ --box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
|
|
+ }
|
|
|
+
|
|
|
+ * {
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+
|
|
|
+ body {
|
|
|
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
|
|
+ color: var(--text-color);
|
|
|
+ background-color: #f5f5f5;
|
|
|
+ line-height: 1.5;
|
|
|
+ }
|
|
|
+
|
|
|
+ .container {
|
|
|
+ max-width: 100%;
|
|
|
+ padding: 16px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ min-height: 100vh;
|
|
|
+ }
|
|
|
+
|
|
|
+ .header {
|
|
|
+ text-align: center;
|
|
|
+ margin-bottom: 24px;
|
|
|
+ padding: 16px 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .header h1 {
|
|
|
+ font-size: 24px;
|
|
|
+ color: var(--primary-color);
|
|
|
+ margin-bottom: 8px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .header p {
|
|
|
+ color: #666;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .upload-section {
|
|
|
+ background-color: white;
|
|
|
+ border-radius: var(--border-radius);
|
|
|
+ padding: 20px;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ box-shadow: var(--box-shadow);
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ }
|
|
|
+
|
|
|
+ .upload-area {
|
|
|
+ border: 2px dashed #d9d9d9;
|
|
|
+ border-radius: var(--border-radius);
|
|
|
+ padding: 32px 16px;
|
|
|
+ text-align: center;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: all 0.3s;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .upload-area:hover {
|
|
|
+ border-color: var(--primary-color);
|
|
|
+ }
|
|
|
+
|
|
|
+ .upload-area.active {
|
|
|
+ border-color: var(--primary-color);
|
|
|
+ background-color: #fff7e6;
|
|
|
+ }
|
|
|
+
|
|
|
+ .upload-icon {
|
|
|
+ font-size: 48px;
|
|
|
+ color: var(--primary-color);
|
|
|
+ margin-bottom: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .upload-text {
|
|
|
+ margin-bottom: 8px;
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+
|
|
|
+ .upload-hint {
|
|
|
+ color: #999;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .preview-section {
|
|
|
+ margin-top: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .preview-title {
|
|
|
+ font-size: 16px;
|
|
|
+ margin-bottom: 12px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .preview-title .badge {
|
|
|
+ background-color: var(--primary-color);
|
|
|
+ color: white;
|
|
|
+ border-radius: 10px;
|
|
|
+ padding: 2px 8px;
|
|
|
+ font-size: 12px;
|
|
|
+ margin-left: 8px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .preview-grid {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ gap: 8px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .preview-item {
|
|
|
+ width: calc(33.333% - 6px);
|
|
|
+ aspect-ratio: 1;
|
|
|
+ border-radius: var(--border-radius);
|
|
|
+ overflow: hidden;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+
|
|
|
+ .preview-item img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ object-fit: cover;
|
|
|
+ }
|
|
|
+
|
|
|
+ .preview-item .remove-btn {
|
|
|
+ position: absolute;
|
|
|
+ top: 4px;
|
|
|
+ right: 4px;
|
|
|
+ background-color: rgba(0, 0, 0, 0.5);
|
|
|
+ color: white;
|
|
|
+ width: 20px;
|
|
|
+ height: 20px;
|
|
|
+ border-radius: 50%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ font-size: 12px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+
|
|
|
+ .action-buttons {
|
|
|
+ display: flex;
|
|
|
+ gap: 12px;
|
|
|
+ margin-top: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .action-btn {
|
|
|
+ flex: 1;
|
|
|
+ padding: 12px;
|
|
|
+ border-radius: var(--border-radius);
|
|
|
+ border: none;
|
|
|
+ font-weight: 500;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: all 0.3s;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ gap: 8px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .primary-btn {
|
|
|
+ background-color: var(--primary-color);
|
|
|
+ color: white;
|
|
|
+ }
|
|
|
+
|
|
|
+ .primary-btn:hover {
|
|
|
+ background-color: #ff9c33;
|
|
|
+ }
|
|
|
+
|
|
|
+ .default-btn {
|
|
|
+ background-color: white;
|
|
|
+ color: var(--text-color);
|
|
|
+ border: 1px solid #d9d9d9;
|
|
|
+ }
|
|
|
+
|
|
|
+ .default-btn:hover {
|
|
|
+ border-color: var(--primary-color);
|
|
|
+ color: var(--primary-color);
|
|
|
+ }
|
|
|
+
|
|
|
+ .status-message {
|
|
|
+ padding: 12px;
|
|
|
+ border-radius: var(--border-radius);
|
|
|
+ margin-top: 16px;
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .success-message {
|
|
|
+ background-color: #f6ffed;
|
|
|
+ border: 1px solid #b7eb8f;
|
|
|
+ color: var(--success-color);
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 8px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .error-message {
|
|
|
+ background-color: #fff2f0;
|
|
|
+ border: 1px solid #ffccc7;
|
|
|
+ color: var(--error-color);
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 8px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .loading-bar {
|
|
|
+ height: 4px;
|
|
|
+ background-color: #e8e8e8;
|
|
|
+ border-radius: 2px;
|
|
|
+ margin-top: 16px;
|
|
|
+ overflow: hidden;
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .loading-progress {
|
|
|
+ height: 100%;
|
|
|
+ background-color: var(--primary-color);
|
|
|
+ width: 0%;
|
|
|
+ transition: width 0.3s;
|
|
|
+ }
|
|
|
+
|
|
|
+ .ai-assistant {
|
|
|
+ background-color: white;
|
|
|
+ border-radius: var(--border-radius);
|
|
|
+ padding: 16px;
|
|
|
+ box-shadow: var(--box-shadow);
|
|
|
+ margin-top: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .ai-header {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 12px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .ai-icon {
|
|
|
+ width: 32px;
|
|
|
+ height: 32px;
|
|
|
+ background-color: #fff7e6;
|
|
|
+ border-radius: 50%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ margin-right: 12px;
|
|
|
+ color: var(--primary-color);
|
|
|
+ }
|
|
|
+
|
|
|
+ .ai-title {
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+
|
|
|
+ .ai-content {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #666;
|
|
|
+ }
|
|
|
+
|
|
|
+ .ai-tips {
|
|
|
+ margin-top: 12px;
|
|
|
+ padding: 8px 12px;
|
|
|
+ background-color: #f6f6f6;
|
|
|
+ border-radius: var(--border-radius);
|
|
|
+ font-size: 13px;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 新增的上传目标选择样式 */
|
|
|
+ .target-selection {
|
|
|
+ display: none;
|
|
|
+ margin-top: 16px;
|
|
|
+ padding: 16px;
|
|
|
+ background-color: #f9f9f9;
|
|
|
+ border-radius: var(--border-radius);
|
|
|
+ }
|
|
|
+
|
|
|
+ .target-options {
|
|
|
+ display: flex;
|
|
|
+ gap: 12px;
|
|
|
+ margin-top: 12px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .target-option {
|
|
|
+ flex: 1;
|
|
|
+ padding: 12px;
|
|
|
+ border: 1px solid #d9d9d9;
|
|
|
+ border-radius: var(--border-radius);
|
|
|
+ text-align: center;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: all 0.3s;
|
|
|
+ }
|
|
|
+
|
|
|
+ .target-option:hover {
|
|
|
+ border-color: var(--primary-color);
|
|
|
+ }
|
|
|
+
|
|
|
+ .target-option.selected {
|
|
|
+ border-color: var(--primary-color);
|
|
|
+ background-color: #fff7e6;
|
|
|
+ }
|
|
|
+
|
|
|
+ .target-option-icon {
|
|
|
+ font-size: 24px;
|
|
|
+ margin-bottom: 8px;
|
|
|
+ color: var(--primary-color);
|
|
|
+ }
|
|
|
+
|
|
|
+ .target-option-title {
|
|
|
+ font-weight: 500;
|
|
|
+ margin-bottom: 4px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .target-option-desc {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #666;
|
|
|
+ }
|
|
|
+
|
|
|
+ .confirm-buttons {
|
|
|
+ display: flex;
|
|
|
+ gap: 12px;
|
|
|
+ margin-top: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ @media (max-width: 480px) {
|
|
|
+ .preview-item {
|
|
|
+ width: calc(50% - 4px);
|
|
|
+ }
|
|
|
+
|
|
|
+ .target-options {
|
|
|
+ flex-direction: column;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+ <div class="container">
|
|
|
+ <div class="header">
|
|
|
+ <h1>智能图片上传助手</h1>
|
|
|
+ <p>轻松上传并管理您的图片，AI助手为您提供智能建议</p>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="upload-section">
|
|
|
+ <div class="upload-area" id="uploadArea">
|
|
|
+ <div class="upload-icon">
|
|
|
+ <svg viewBox="0 0 1024 1024" width="1em" height="1em" fill="currentColor">
|
|
|
+ <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path>
|
|
|
+ <path d="M464 336a48 48 0 1 0 96 0 48 48 0 1 0-96 0zm72 112h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V456c0-4.4-3.6-8-8-8z"></path>
|
|
|
+ </svg>
|
|
|
+ </div>
|
|
|
+ <div class="upload-text">点击或拖拽图片到此处上传</div>
|
|
|
+ <div class="upload-hint">支持JPG、PNG格式，单张图片不超过5MB</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="preview-section">
|
|
|
+ <div class="preview-title">
|
|
|
+ 已选图片
|
|
|
+ <span class="badge" id="imageCount">0</span>
|
|
|
+ </div>
|
|
|
+ <div class="preview-grid" id="previewGrid"></div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 新增的上传目标选择区域 -->
|
|
|
+ <div class="target-selection" id="targetSelection">
|
|
|
+ <div style="text-align: center; margin-bottom: 12px; font-weight: 500;">请选择上传目标</div>
|
|
|
+ <div class="target-options">
|
|
|
+ <div class="target-option" data-target="merchant">
|
|
|
+ <div class="target-option-icon">
|
|
|
+ <svg viewBox="0 0 1024 1024" width="1em" height="1em" fill="currentColor">
|
|
|
+ <path d="M864 248H728l-36.4-72.8c-4.1-8.1-12.3-13.2-21.4-13.2H354c-9.1 0-17.3 5.1-21.4 13.2L296 248H160c-44.2 0-80 35.8-80 80v456c0 44.2 35.8 80 80 80h704c44.2 0 80-35.8 80-80V328c0-44.2-35.8-80-80-80zm8 536c0 4.4-3.6 8-8 8H160c-4.4 0-8-3.6-8-8V328c0-4.4 3.6-8 8-8h186.7l17.1-34.1h214.2l17.1 34.1H864c4.4 0 8 3.6 8 8v456zM512 384c-88.4 0-160 71.6-160 160s71.6 160 160 160 160-71.6 160-160-71.6-160-160-160zm0 256c-53 0-96-43-96-96s43-96 96-96 96 43 96 96-43 96-96 96z"></path>
|
|
|
+ </svg>
|
|
|
+ </div>
|
|
|
+ <div class="target-option-title">上传给商家</div>
|
|
|
+ <div class="target-option-desc">将图片发送给合作的商家</div>
|
|
|
+ </div>
|
|
|
+ <div class="target-option" data-target="company">
|
|
|
+ <div class="target-option-icon">
|
|
|
+ <svg viewBox="0 0 1024 1024" width="1em" height="1em" fill="currentColor">
|
|
|
+ <path d="M858.5 763.6a374 374 0 0 0-80.6-119.5 375.63 375.63 0 0 0-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 0 0-80.6 119.5A371.7 371.7 0 0 0 136 901.8a8 8 0 0 0 8 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 0 0 8-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"></path>
|
|
|
+ </svg>
|
|
|
+ </div>
|
|
|
+ <div class="target-option-title">上传给图片公司</div>
|
|
|
+ <div class="target-option-desc">将图片提交给图片库公司</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="confirm-buttons">
|
|
|
+ <button class="action-btn default-btn" id="cancelTargetBtn">
|
|
|
+ 取消
|
|
|
+ </button>
|
|
|
+ <button class="action-btn primary-btn" id="confirmTargetBtn" disabled>
|
|
|
+ 确认上传
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="loading-bar" id="loadingBar">
|
|
|
+ <div class="loading-progress" id="loadingProgress"></div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="status-message" id="successMessage">
|
|
|
+ <svg viewBox="0 0 1024 1024" width="1em" height="1em" fill="currentColor">
|
|
|
+ <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 0 1-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z"></path>
|
|
|
+ </svg>
|
|
|
+ <span id="successText">图片上传成功！</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="status-message" id="errorMessage">
|
|
|
+ <svg viewBox="0 0 1024 1024" width="1em" height="1em" fill="currentColor">
|
|
|
+ <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path>
|
|
|
+ <path d="M464 336a48 48 0 1 0 96 0 48 48 0 1 0-96 0zm72 112h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V456c0-4.4-3.6-8-8-8z"></path>
|
|
|
+ </svg>
|
|
|
+ <span id="errorText">上传失败，请重试</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="action-buttons">
|
|
|
+ <button class="action-btn default-btn" id="cancelBtn">
|
|
|
+ <svg viewBox="0 0 1024 1024" width="1em" height="1em" fill="currentColor">
|
|
|
+ <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path>
|
|
|
+ <path d="M685.4 354.8c-4.7-4.7-12.3-4.7-17 0L512 465.6 355.4 309c-4.7-4.7-12.3-4.7-17 0l-34.9 34.9c-4.7 4.7-4.7 12.3 0 17l156.5 156.8-156.5 156.8c-4.7 4.7-4.7 12.3 0 17l34.9 34.9c4.7 4.7 12.3 4.7 17 0l156.6-156.6 156.6 156.6c4.7 4.7 12.3 4.7 17 0l34.9-34.9c4.7-4.7 4.7-12.3 0-17L546.9 512l156.5-156.8c4.7-4.7 4.7-12.3 0-17l-34.9-34.4z"></path>
|
|
|
+ </svg>
|
|
|
+ 取消
|
|
|
+ </button>
|
|
|
+ <button class="action-btn primary-btn" id="uploadBtn">
|
|
|
+ <svg viewBox="0 0 1024 1024" width="1em" height="1em" fill="currentColor">
|
|
|
+ <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path>
|
|
|
+ <path d="M464 336a48 48 0 1 0 96 0 48 48 0 1 0-96 0zm72 112h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V456c0-4.4-3.6-8-8-8z"></path>
|
|
|
+ </svg>
|
|
|
+ 上传
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="ai-assistant">
|
|
|
+ <div class="ai-header">
|
|
|
+ <div class="ai-icon">
|
|
|
+ <svg viewBox="0 0 1024 1024" width="1em" height="1em" fill="currentColor">
|
|
|
+ <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path>
|
|
|
+ <path d="M512 140c-205.4 0-372 166.6-372 372s166.6 372 372 372 372-166.6 372-372-166.6-372-372-372zm171.8 527.1c1.2 1.5 1.9 3.3 1.9 5.1 0 4.5-3.6 8-8 8l-66-.3-99.3-118.4-99.3 118.5-66.1.3c-4.5 0-8-3.6-8-8 0-1.9.7-3.7 1.9-5.1l130.1-155L340.5 359c-1.2-1.4-1.9-3.2-1.9-5.1 0-4.4 3.6-8 8-8l66.1.3 99.3 118.4 99.3-118.5 66-.3c4.5 0 8 3.6 8 8 0 1.9-.7 3.7-1.9 5.1L553.5 514l130 155z"></path>
|
|
|
+ </svg>
|
|
|
+ </div>
|
|
|
+ <div class="ai-title">AI助手提示</div>
|
|
|
+ </div>
|
|
|
+ <div class="ai-content">
|
|
|
+ <p>我可以帮助您：</p>
|
|
|
+ <ul style="margin-top: 8px; margin-left: 20px;">
|
|
|
+ <li>自动检测重复图片</li>
|
|
|
+ <li>优化图片质量</li>
|
|
|
+ <li>建议最佳上传目标</li>
|
|
|
+ </ul>
|
|
|
+ <div class="ai-tips" id="aiTip">
|
|
|
+ 请上传图片，我将为您分析并提供建议。
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 使用国内CDN引入Ant Design Mobile JS -->
|
|
|
+ <script src="https://cdn.jsdelivr.net/npm/antd-mobile@5.32.0/2x/antd-mobile.min.js"></script>
|
|
|
+ <script>
|
|
|
+ document.addEventListener('DOMContentLoaded', function() {
|
|
|
+ // 模拟已存在的图片库（实际应用中应该从服务器获取）
|
|
|
+ const existingImages = [
|
|
|
+ '1a2b3c4d5e', // 模拟图片hash值
|
|
|
+ '6f7g8h9i0j',
|
|
|
+ 'k1l2m3n4o5'
|
|
|
+ ];
|
|
|
+
|
|
|
+ const uploadArea = document.getElementById('uploadArea');
|
|
|
+ const fileInput = document.createElement('input');
|
|
|
+ fileInput.type = 'file';
|
|
|
+ fileInput.multiple = true;
|
|
|
+ fileInput.accept = 'image/jpeg, image/png';
|
|
|
+ fileInput.style.display = 'none';
|
|
|
+
|
|
|
+ const previewGrid = document.getElementById('previewGrid');
|
|
|
+ const imageCount = document.getElementById('imageCount');
|
|
|
+ const uploadBtn = document.getElementById('uploadBtn');
|
|
|
+ const cancelBtn = document.getElementById('cancelBtn');
|
|
|
+ const loadingBar = document.getElementById('loadingBar');
|
|
|
+ const loadingProgress = document.getElementById('loadingProgress');
|
|
|
+ const successMessage = document.getElementById('successMessage');
|
|
|
+ const errorMessage = document.getElementById('errorMessage');
|
|
|
+ const successText = document.getElementById('successText');
|
|
|
+ const errorText = document.getElementById('errorText');
|
|
|
+ const aiTip = document.getElementById('aiTip');
|
|
|
+
|
|
|
+ // 新增的上传目标选择相关元素
|
|
|
+ const targetSelection = document.getElementById('targetSelection');
|
|
|
+ const targetOptions = document.querySelectorAll('.target-option');
|
|
|
+ const cancelTargetBtn = document.getElementById('cancelTargetBtn');
|
|
|
+ const confirmTargetBtn = document.getElementById('confirmTargetBtn');
|
|
|
+
|
|
|
+ let selectedFiles = [];
|
|
|
+ let selectedTarget = null;
|
|
|
+
|
|
|
+ // 点击上传区域触发文件选择
|
|
|
+ uploadArea.addEventListener('click', function() {
|
|
|
+ fileInput.click();
|
|
|
+ });
|
|
|
+
|
|
|
+ // 拖拽相关事件
|
|
|
+ uploadArea.addEventListener('dragover', function(e) {
|
|
|
+ e.preventDefault();
|
|
|
+ uploadArea.classList.add('active');
|
|
|
+ });
|
|
|
+
|
|
|
+ uploadArea.addEventListener('dragleave', function() {
|
|
|
+ uploadArea.classList.remove('active');
|
|
|
+ });
|
|
|
+
|
|
|
+ uploadArea.addEventListener('drop', function(e) {
|
|
|
+ e.preventDefault();
|
|
|
+ uploadArea.classList.remove('active');
|
|
|
+
|
|
|
+ if (e.dataTransfer.files.length > 0) {
|
|
|
+ handleFiles(e.dataTransfer.files);
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ // 文件选择处理
|
|
|
+ fileInput.addEventListener('change', function() {
|
|
|
+ if (fileInput.files.length > 0) {
|
|
|
+ handleFiles(fileInput.files);
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ // 处理选择的文件
|
|
|
+ function handleFiles(files) {
|
|
|
+ Array.from(files).forEach(file => {
|
|
|
+ // 检查文件类型
|
|
|
+ if (!file.type.match('image.*')) {
|
|
|
+ showError('只能上传图片文件');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 检查文件大小
|
|
|
+ if (file.size > 5 * 1024 * 1024) {
|
|
|
+ showError('图片大小不能超过5MB');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 模拟检查图片是否已存在（实际应用中应该计算图片hash并与服务器比对）
|
|
|
+ const reader = new FileReader();
|
|
|
+ reader.onload = function(e) {
|
|
|
+ // 模拟图片hash（实际应用中应该使用更复杂的算法）
|
|
|
+ const simulatedHash = Math.random().toString(36).substring(2, 12);
|
|
|
+
|
|
|
+ if (existingImages.includes(simulatedHash)) {
|
|
|
+ showError('图库中已有该图片');
|
|
|
+ } else {
|
|
|
+ addImagePreview(file, e.target.result, simulatedHash);
|
|
|
+ }
|
|
|
+ };
|
|
|
+ reader.readAsDataURL(file);
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ // 添加图片预览
|
|
|
+ function addImagePreview(file, dataUrl, hash) {
|
|
|
+ if (selectedFiles.some(f => f.hash === hash)) {
|
|
|
+ showError('已添加过该图片');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ selectedFiles.push({ file, dataUrl, hash });
|
|
|
+ updatePreview();
|
|
|
+
|
|
|
+ // AI提示更新
|
|
|
+ aiTip.textContent = `已选择 ${selectedFiles.length} 张图片，建议您检查后上传。`;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 更新预览区域
|
|
|
+ function updatePreview() {
|
|
|
+ previewGrid.innerHTML = '';
|
|
|
+ imageCount.textContent = selectedFiles.length;
|
|
|
+
|
|
|
+ selectedFiles.forEach((item, index) => {
|
|
|
+ const previewItem = document.createElement('div');
|
|
|
+ previewItem.className = 'preview-item';
|
|
|
+
|
|
|
+ const img = document.createElement('img');
|
|
|
+ img.src = item.dataUrl;
|
|
|
+
|
|
|
+ const removeBtn = document.createElement('div');
|
|
|
+ removeBtn.className = 'remove-btn';
|
|
|
+ removeBtn.innerHTML = '×';
|
|
|
+ removeBtn.addEventListener('click', function(e) {
|
|
|
+ e.stopPropagation();
|
|
|
+ selectedFiles.splice(index, 1);
|
|
|
+ updatePreview();
|
|
|
+ });
|
|
|
+
|
|
|
+ previewItem.appendChild(img);
|
|
|
+ previewItem.appendChild(removeBtn);
|
|
|
+ previewGrid.appendChild(previewItem);
|
|
|
+ });
|
|
|
+
|
|
|
+ uploadBtn.disabled = selectedFiles.length === 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 上传按钮点击事件 - 现在显示目标选择界面
|
|
|
+ uploadBtn.addEventListener('click', function() {
|
|
|
+ if (selectedFiles.length === 0) return;
|
|
|
+
|
|
|
+ // 显示目标选择界面
|
|
|
+ targetSelection.style.display = 'block';
|
|
|
+ // 滚动到目标选择区域
|
|
|
+ targetSelection.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
|
|
|
+ });
|
|
|
+
|
|
|
+ // 取消按钮点击事件
|
|
|
+ cancelBtn.addEventListener('click', function() {
|
|
|
+ selectedFiles = [];
|
|
|
+ updatePreview();
|
|
|
+ hideMessages();
|
|
|
+ });
|
|
|
+
|
|
|
+ // 目标选项点击事件
|
|
|
+ targetOptions.forEach(option => {
|
|
|
+ option.addEventListener('click', function() {
|
|
|
+ // 移除所有选中状态
|
|
|
+ targetOptions.forEach(opt => opt.classList.remove('selected'));
|
|
|
+ // 添加当前选中状态
|
|
|
+ this.classList.add('selected');
|
|
|
+ selectedTarget = this.dataset.target;
|
|
|
+ confirmTargetBtn.disabled = false;
|
|
|
+ });
|
|
|
+ });
|
|
|
+
|
|
|
+ // 取消目标选择
|
|
|
+ cancelTargetBtn.addEventListener('click', function() {
|
|
|
+ targetSelection.style.display = 'none';
|
|
|
+ selectedTarget = null;
|
|
|
+ targetOptions.forEach(opt => opt.classList.remove('selected'));
|
|
|
+ confirmTargetBtn.disabled = true;
|
|
|
+ });
|
|
|
+
|
|
|
+ // 确认目标并上传
|
|
|
+ confirmTargetBtn.addEventListener('click', function() {
|
|
|
+ if (!selectedTarget) return;
|
|
|
+
|
|
|
+ // 隐藏目标选择界面
|
|
|
+ targetSelection.style.display = 'none';
|
|
|
+
|
|
|
+ // 显示加载条
|
|
|
+ loadingBar.style.display = 'block';
|
|
|
+ loadingProgress.style.width = '0%';
|
|
|
+
|
|
|
+ // 根据选择的目标更新AI提示
|
|
|
+ const targetName = selectedTarget === 'merchant' ? '商家' : '图片公司';
|
|
|
+ aiTip.textContent = `正在上传${selectedFiles.length}张图片给${targetName}...`;
|
|
|
+
|
|
|
+ // 模拟上传过程
|
|
|
+ let progress = 0;
|
|
|
+ const interval = setInterval(() => {
|
|
|
+ progress += Math.random() * 10;
|
|
|
+ if (progress >= 100) {
|
|
|
+ progress = 100;
|
|
|
+ clearInterval(interval);
|
|
|
+
|
|
|
+ // 模拟上传完成
|
|
|
+ setTimeout(() => {
|
|
|
+ loadingBar.style.display = 'none';
|
|
|
+
|
|
|
+ // 随机模拟成功或失败
|
|
|
+ if (Math.random() > 0.2) {
|
|
|
+ showSuccess(`${selectedFiles.length}张图片已成功上传给${targetName}！`);
|
|
|
+ selectedFiles = [];
|
|
|
+ updatePreview();
|
|
|
+ selectedTarget = null;
|
|
|
+ targetOptions.forEach(opt => opt.classList.remove('selected'));
|
|
|
+ confirmTargetBtn.disabled = true;
|
|
|
+ } else {
|
|
|
+ showError('上传失败，请检查网络后重试');
|
|
|
+ }
|
|
|
+ }, 300);
|
|
|
+ }
|
|
|
+ loadingProgress.style.width = `${progress}%`;
|
|
|
+ }, 200);
|
|
|
+ });
|
|
|
+
|
|
|
+ // 显示成功消息
|
|
|
+ function showSuccess(message) {
|
|
|
+ successText.textContent = message;
|
|
|
+ successMessage.style.display = 'flex';
|
|
|
+ errorMessage.style.display = 'none';
|
|
|
+ }
|
|
|
+
|
|
|
+ // 显示错误消息
|
|
|
+ function showError(message) {
|
|
|
+ errorText.textContent = message;
|
|
|
+ errorMessage.style.display = 'flex';
|
|
|
+ successMessage.style.display = 'none';
|
|
|
+
|
|
|
+ // 3秒后自动隐藏
|
|
|
+ setTimeout(hideMessages, 3000);
|
|
|
+ }
|
|
|
+
|
|
|
+ // 隐藏所有消息
|
|
|
+ function hideMessages() {
|
|
|
+ successMessage.style.display = 'none';
|
|
|
+ errorMessage.style.display = 'none';
|
|
|
+ }
|
|
|
+
|
|
|
+ // 初始化按钮状态
|
|
|
+ uploadBtn.disabled = true;
|
|
|
+ confirmTargetBtn.disabled = true;
|
|
|
+ });
|
|
|
+ </script>
|
|
|
+</body>
|
|
|
+</html>
|
