|
|
@@ -1,34 +1,1328 @@
|
|
|
<!DOCTYPE html>
|
|
|
-<html>
|
|
|
-
|
|
|
+<html lang="zh-CN">
|
|
|
<head>
|
|
|
-
|
|
|
<meta charset="utf-8">
|
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
|
- <meta name="viewport" content="width=device-width, initial-scale=1">
|
|
|
-
|
|
|
- <title>{$site.name|htmlentities}</title>
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
|
|
|
+ <title>AI 图片生成</title>
|
|
|
+ <!-- 引入Bootstrap CSS -->
|
|
|
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
|
|
|
+ <!-- 引入Font Awesome图标 -->
|
|
|
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
|
+ <!-- 引入自定义CSS -->
|
|
|
<link rel="shortcut icon" href="__CDN__/assets/img/favicon.ico"/>
|
|
|
<link href="__CDN__/assets/css/index.css" rel="stylesheet">
|
|
|
+ <style>
|
|
|
+ /* 自定义样式 */
|
|
|
+ body {
|
|
|
+ font-family: 'Microsoft YaHei', sans-serif;
|
|
|
+ background-color: #f7f8fa;
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ overflow: hidden;
|
|
|
+ height: 100vh;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 主内容区 */
|
|
|
+ .main-content {
|
|
|
+ display: flex;
|
|
|
+ flex: 1;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 左侧区域 */
|
|
|
+ .left-section {
|
|
|
+ flex: 2;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ overflow: hidden;
|
|
|
+ border-right: 1px solid #e5e7eb;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 图片生成结果区域 */
|
|
|
+ .chat-container {
|
|
|
+ flex: 1;
|
|
|
+ overflow-y: auto;
|
|
|
+ padding: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 右侧模板区域 */
|
|
|
+ .right-section {
|
|
|
+ flex: 1;
|
|
|
+ overflow-y: auto;
|
|
|
+ padding: 0;
|
|
|
+ scrollbar-width: thin;
|
|
|
+ scrollbar-color: #b0b8c1 transparent;
|
|
|
+ }
|
|
|
+
|
|
|
+ .right-section::-webkit-scrollbar {
|
|
|
+ width: 4px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .right-section::-webkit-scrollbar-track {
|
|
|
+ background: transparent;
|
|
|
+ }
|
|
|
+
|
|
|
+ .right-section::-webkit-scrollbar-thumb {
|
|
|
+ background: #b0b8c1;
|
|
|
+ border-radius: 2px;
|
|
|
+ transition: background-color 0.3s ease;
|
|
|
+ }
|
|
|
+
|
|
|
+ .right-section::-webkit-scrollbar-thumb:hover {
|
|
|
+ background: #8b949e;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 底部输入区域 */
|
|
|
+ .input-container {
|
|
|
+ border-top: 1px solid #e5e7eb;
|
|
|
+ padding: 15px 20px;
|
|
|
+ background-color: #ffffff;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 提示词卡片 */
|
|
|
+ .prompt-card {
|
|
|
+ max-width: 100%;
|
|
|
+ margin: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 已移除右侧模板区域,改用顶部模板区域 */
|
|
|
+
|
|
|
+ /* 图片放大模态框 */
|
|
|
+ .modal {
|
|
|
+ display: none;
|
|
|
+ position: fixed;
|
|
|
+ z-index: 1000;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background-color: rgba(0, 0, 0, 0.95);
|
|
|
+ overflow: hidden;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ opacity: 0;
|
|
|
+ transition: opacity 0.3s ease;
|
|
|
+ }
|
|
|
+
|
|
|
+ .modal.show {
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ .modal-content {
|
|
|
+ margin: 0;
|
|
|
+ display: block;
|
|
|
+ max-width: 95%;
|
|
|
+ max-height: 95vh;
|
|
|
+ width: auto;
|
|
|
+ height: auto;
|
|
|
+ object-fit: contain;
|
|
|
+ box-shadow: 0 5px 25px rgba(0, 0, 0, 0.5);
|
|
|
+ transition: transform 0.3s ease;
|
|
|
+ }
|
|
|
+
|
|
|
+ .close {
|
|
|
+ position: absolute;
|
|
|
+ top: 20px;
|
|
|
+ right: 35px;
|
|
|
+ color: #ffffff;
|
|
|
+ font-size: 40px;
|
|
|
+ font-weight: bold;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: all 0.3s ease;
|
|
|
+ text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
|
|
|
+ }
|
|
|
+
|
|
|
+ .close:hover,
|
|
|
+ .close:focus {
|
|
|
+ color: #ccc;
|
|
|
+ transform: scale(1.1);
|
|
|
+ text-decoration: none;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+
|
|
|
+ .close:hover,
|
|
|
+ .close:focus {
|
|
|
+ color: #bbb;
|
|
|
+ text-decoration: none;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 滚动条样式 */
|
|
|
+ .chat-container::-webkit-scrollbar {
|
|
|
+ width: 4px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .chat-container::-webkit-scrollbar-track {
|
|
|
+ background: transparent;
|
|
|
+ }
|
|
|
+
|
|
|
+ .chat-container::-webkit-scrollbar-thumb {
|
|
|
+ background: #b0b8c1;
|
|
|
+ border-radius: 2px;
|
|
|
+ transition: background-color 0.3s ease;
|
|
|
+ }
|
|
|
+
|
|
|
+ .chat-container::-webkit-scrollbar-thumb:hover {
|
|
|
+ background: #8b949e;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 顶部栏 */
|
|
|
+ .top-bar {
|
|
|
+ background-color: #ffffff;
|
|
|
+ padding: 12px 20px;
|
|
|
+ border-bottom: 1px solid #e5e7eb;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
|
|
|
+ }
|
|
|
+
|
|
|
+ .back-btn {
|
|
|
+ background: none;
|
|
|
+ border: none;
|
|
|
+ font-size: 20px;
|
|
|
+ color: #374151;
|
|
|
+ cursor: pointer;
|
|
|
+ padding: 4px;
|
|
|
+ border-radius: 4px;
|
|
|
+ transition: background-color 0.2s;
|
|
|
+ }
|
|
|
+
|
|
|
+ .back-btn:hover {
|
|
|
+ background-color: #f3f4f6;
|
|
|
+ }
|
|
|
+
|
|
|
+ .page-title {
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #111827;
|
|
|
+ margin: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 图片生成结果区域样式 */
|
|
|
+ .image-result-container {
|
|
|
+ margin: 0;
|
|
|
+ padding: 20px;
|
|
|
+ background-color: #ffffff;
|
|
|
+ border-radius: 12px;
|
|
|
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
|
|
|
+ min-height: 600px;
|
|
|
+ height: 600px;
|
|
|
+ width: 100%;
|
|
|
+ max-width: 100%;
|
|
|
+ overflow: hidden;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .image-result {
|
|
|
+ text-align: center;
|
|
|
+ height: 100%;
|
|
|
+ width: 100%;
|
|
|
+ overflow: hidden;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .image-container {
|
|
|
+ position: relative;
|
|
|
+ display: inline-block;
|
|
|
+ height: calc(100% - 40px);
|
|
|
+ width: auto;
|
|
|
+ overflow: hidden;
|
|
|
+ border: 1px solid #e0e0e0;
|
|
|
+ border-radius: 8px;
|
|
|
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
|
|
+ }
|
|
|
+
|
|
|
+ .generated-image {
|
|
|
+ max-width: 100%;
|
|
|
+ max-height: 100%;
|
|
|
+ height: auto;
|
|
|
+ width: auto;
|
|
|
+ cursor: pointer;
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+
|
|
|
+ .download-box {
|
|
|
+ margin-top: 10px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .download-btn {
|
|
|
+ background-color: #dc3545;
|
|
|
+ color: white;
|
|
|
+ border: none;
|
|
|
+ padding: 8px 16px;
|
|
|
+ border-radius: 4px;
|
|
|
+ cursor: pointer;
|
|
|
+ font-size: 14px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 5px;
|
|
|
+ transition: background-color 0.3s;
|
|
|
+ }
|
|
|
+
|
|
|
+ .download-btn:hover {
|
|
|
+ background-color: #c82333;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 确保加载状态下也保持固定大小 */
|
|
|
+ .image-loading {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ height: 100%;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 确保错误状态下也保持固定大小 */
|
|
|
+ .image-error {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ height: 100%;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 默认占位符样式 */
|
|
|
+ .image-placeholder {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ height: 100%;
|
|
|
+ width: 100%;
|
|
|
+ border: 1px solid #e0e0e0;
|
|
|
+ border-radius: 8px;
|
|
|
+ background-color: #ffffff;
|
|
|
+ color: #6c757d;
|
|
|
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
|
|
+ }
|
|
|
+
|
|
|
+ .image-placeholder i {
|
|
|
+ font-size: 48px;
|
|
|
+ margin-bottom: 16px;
|
|
|
+ color: #adb5bd;
|
|
|
+ }
|
|
|
+
|
|
|
+ .image-placeholder p {
|
|
|
+ font-size: 16px;
|
|
|
+ margin: 0;
|
|
|
+ color: #868e96;
|
|
|
+ }
|
|
|
+
|
|
|
+ .image-actions {
|
|
|
+ position: absolute;
|
|
|
+ top: 10px;
|
|
|
+ right: 10px;
|
|
|
+ margin-top: 0;
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+ gap: 10px;
|
|
|
+ z-index: 10;
|
|
|
+ }
|
|
|
+
|
|
|
+ .image-loading {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ padding: 60px 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .image-loading i {
|
|
|
+ font-size: 48px;
|
|
|
+ color: #007bff;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ animation: spin 1s linear infinite;
|
|
|
+ }
|
|
|
+
|
|
|
+ @keyframes spin {
|
|
|
+ from { transform: rotate(0deg); }
|
|
|
+ to { transform: rotate(360deg); }
|
|
|
+ }
|
|
|
+
|
|
|
+ .image-error {
|
|
|
+ padding: 40px 20px;
|
|
|
+ text-align: center;
|
|
|
+ color: #dc3545;
|
|
|
+ }
|
|
|
+
|
|
|
+ .download-btn, .regenerate-btn {
|
|
|
+ padding: 10px 20px;
|
|
|
+ border: none;
|
|
|
+ border-radius: 20px;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 500;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: all 0.3s ease;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 5px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .download-btn {
|
|
|
+ background-color: #28a745;
|
|
|
+ color: white;
|
|
|
+ }
|
|
|
+
|
|
|
+ .download-btn:hover {
|
|
|
+ background-color: #218838;
|
|
|
+ }
|
|
|
+
|
|
|
+ .regenerate-btn {
|
|
|
+ background-color: #007bff;
|
|
|
+ color: white;
|
|
|
+ }
|
|
|
+
|
|
|
+ .regenerate-btn:hover {
|
|
|
+ background-color: #0056b3;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 底部输入区域 */
|
|
|
+ .input-container {
|
|
|
+ background-color: #ffffff;
|
|
|
+ padding: 12px 20px;
|
|
|
+ border-top: 1px solid #e5e7eb;
|
|
|
+ box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05);
|
|
|
+ }
|
|
|
+
|
|
|
+ .prompt-card {
|
|
|
+ max-width: 800px;
|
|
|
+ margin: 0 auto;
|
|
|
+ border: 1px solid #e5e7eb;
|
|
|
+ border-radius: 5px;
|
|
|
+ text-align: left;
|
|
|
+ background-color: #ffffff;
|
|
|
+ transition: all 0.3s ease;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 提示词卡片底部样式 */
|
|
|
+ .prompt-footer {
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+ align-items: center;
|
|
|
+ margin-top: 12px;
|
|
|
+ gap: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 尺寸选择器样式 */
|
|
|
+ .size-selector {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 10px;
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ .size-selector label {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #4b5563;
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+
|
|
|
+ .size-select {
|
|
|
+ padding: 8px 16px;
|
|
|
+ border: 1px solid #d1d5db;
|
|
|
+ border-radius: 8px;
|
|
|
+ font-size: 14px;
|
|
|
+ background-color: #ffffff;
|
|
|
+ color: #374151;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: all 0.3s ease;
|
|
|
+ min-width: 120px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .size-select:hover {
|
|
|
+ border-color: #9ca3af;
|
|
|
+ }
|
|
|
+
|
|
|
+ .size-select:focus {
|
|
|
+ outline: none;
|
|
|
+ border-color: #007bff;
|
|
|
+ box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
|
|
|
+ }
|
|
|
+
|
|
|
+ .prompt-card:focus-within {
|
|
|
+ border-color: #007bff;
|
|
|
+ box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
|
|
|
+ }
|
|
|
+
|
|
|
+ .prompt-textarea {
|
|
|
+ width: 100%;
|
|
|
+ min-height: 60px;
|
|
|
+ border: none;
|
|
|
+ border-radius: 8px;
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: 1.5;
|
|
|
+ color: #374151;
|
|
|
+ resize: vertical;
|
|
|
+ outline: none;
|
|
|
+ font-family: 'Microsoft YaHei', sans-serif;
|
|
|
+ background-color: #ffffff;
|
|
|
+ overflow-y: auto;
|
|
|
+ scrollbar-width: thin;
|
|
|
+ }
|
|
|
+
|
|
|
+ .prompt-textarea::-webkit-scrollbar {
|
|
|
+ width: 4px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .prompt-textarea::-webkit-scrollbar-track {
|
|
|
+ background: transparent;
|
|
|
+ }
|
|
|
+
|
|
|
+ .prompt-textarea::-webkit-scrollbar-thumb {
|
|
|
+ background-color: #b0b8c1;
|
|
|
+ border-radius: 2px;
|
|
|
+ transition: background-color 0.3s ease;
|
|
|
+ }
|
|
|
+
|
|
|
+ .prompt-textarea::-webkit-scrollbar-thumb:hover {
|
|
|
+ background-color: #8b949e;
|
|
|
+ }
|
|
|
+
|
|
|
+ .char-count {
|
|
|
+ text-align: right;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #6b7280;
|
|
|
+ margin-top: 4px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .current-count {
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+
|
|
|
+ .max-count {
|
|
|
+ color: #9ca3af;
|
|
|
+ }
|
|
|
+
|
|
|
+ .prompt-actions {
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+ gap: 10px;
|
|
|
+ margin-top: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .clear-btn {
|
|
|
+ background-color: #ffffff;
|
|
|
+ color: #dc3545;
|
|
|
+ border: 1px solid #f87171;
|
|
|
+ border-radius: 8px;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 500;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: all 0.3s ease;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 6px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .clear-btn:hover {
|
|
|
+ background-color: #fee2e2;
|
|
|
+ border-color: #ef4444;
|
|
|
+ transform: translateY(-1px);
|
|
|
+ }
|
|
|
+
|
|
|
+ .optimize-btn {
|
|
|
+ background-color: #ffffff;
|
|
|
+ color: #4b5563;
|
|
|
+ padding: 10px 18px;
|
|
|
+ border: 1px solid #d1d5db;
|
|
|
+ border-radius: 8px;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 500;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: all 0.3s ease;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 6px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .optimize-btn:hover {
|
|
|
+ background-color: #f9fafb;
|
|
|
+ border-color: #9ca3af;
|
|
|
+ transform: translateY(-1px);
|
|
|
+ }
|
|
|
+
|
|
|
+ .arrow-btn {
|
|
|
+ background-color: #007bff;
|
|
|
+ color: white;
|
|
|
+ padding: 10px 14px;
|
|
|
+ border: none;
|
|
|
+ border-radius: 8px;
|
|
|
+ font-size: 16px;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: all 0.3s ease;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ min-width: 40px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .arrow-btn:hover {
|
|
|
+ background-color: #0056b3;
|
|
|
+ transform: translateY(-1px);
|
|
|
+ box-shadow: 0 4px 8px rgba(0, 123, 255, 0.25);
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 分类标签 */
|
|
|
+ .category-tab {
|
|
|
+ display: inline-block;
|
|
|
+ padding: 6px 16px;
|
|
|
+ margin: 0 3px;
|
|
|
+ background-color: #f3f4f6;
|
|
|
+ border-radius: 20px;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: all 0.3s ease;
|
|
|
+ font-size: 13px;
|
|
|
+ color: #4b5563;
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+
|
|
|
+ .category-tab.active {
|
|
|
+ background-color: #007bff;
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 分类标签滚动条 */
|
|
|
+ .category-tabs::-webkit-scrollbar {
|
|
|
+ height: 2px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .category-tabs::-webkit-scrollbar-track {
|
|
|
+ background: transparent;
|
|
|
+ border-radius: 1px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .category-tabs::-webkit-scrollbar-thumb {
|
|
|
+ background: #b0b8c1;
|
|
|
+ border-radius: 1px;
|
|
|
+ transition: background-color 0.3s ease;
|
|
|
+ }
|
|
|
+
|
|
|
+ .category-tabs::-webkit-scrollbar-thumb:hover {
|
|
|
+ background: #8b949e;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 模板卡片样式 */
|
|
|
+ /* 顶部模板区域样式 */
|
|
|
+ .top-templates {
|
|
|
+ background-color: #ffffff;
|
|
|
+ padding: 20px;
|
|
|
+ margin-bottom: 0;
|
|
|
+ border-radius: 0;
|
|
|
+ box-shadow: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .top-templates .category-tabs {
|
|
|
+ background-color: #ffffff;
|
|
|
+ padding: 10px 0;
|
|
|
+ margin-bottom: 15px;
|
|
|
+ border-bottom: 1px solid #e9ecef;
|
|
|
+ }
|
|
|
+
|
|
|
+ .top-templates .category-tab {
|
|
|
+ background-color: #f3f4f6;
|
|
|
+ color: #4b5563;
|
|
|
+ padding: 8px 16px;
|
|
|
+ margin: 0 3px;
|
|
|
+ border-radius: 20px;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 500;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: all 0.3s ease;
|
|
|
+ }
|
|
|
+
|
|
|
+ .top-templates .category-tab.active {
|
|
|
+ background-color: #007bff;
|
|
|
+ color: white;
|
|
|
+ }
|
|
|
+
|
|
|
+ .top-templates .category-tab:hover {
|
|
|
+ background-color: #e5e7eb;
|
|
|
+ }
|
|
|
+
|
|
|
+ .top-templates .category-tab.active:hover {
|
|
|
+ background-color: #0069d9;
|
|
|
+ }
|
|
|
+
|
|
|
+ .top-templates .template-grid {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: repeat(5, 1fr);
|
|
|
+ gap: 15px;
|
|
|
+ padding: 10px 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .top-templates .template-card {
|
|
|
+ background-color: #ffffff;
|
|
|
+ border-radius: 8px;
|
|
|
+ overflow: hidden;
|
|
|
+ transition: all 0.3s ease;
|
|
|
+ cursor: pointer;
|
|
|
+ box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
|
|
|
+ }
|
|
|
+
|
|
|
+ .top-templates .template-card:hover {
|
|
|
+ transform: translateY(-3px);
|
|
|
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
|
|
+ }
|
|
|
+
|
|
|
+ .top-templates .template-image {
|
|
|
+ width: 100%;
|
|
|
+ height: 180px;
|
|
|
+ object-fit: cover;
|
|
|
+ transition: transform 0.3s ease;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 已移除右侧模板区域相关样式 */
|
|
|
+
|
|
|
+ .template-title {
|
|
|
+ padding: 10px;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #333;
|
|
|
+ text-align: center;
|
|
|
+ background-color: #fafafa;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 图片容器样式 */
|
|
|
+ .template-image-container {
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 图片覆盖层样式 */
|
|
|
+ .template-overlay {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background-color: rgba(0, 0, 0, 0.5);
|
|
|
+ opacity: 0;
|
|
|
+ transition: opacity 0.3s ease;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 鼠标悬停或触屏时显示覆盖层 */
|
|
|
+ .template-card:hover .template-overlay {
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 使用模版按钮样式 */
|
|
|
+ .use-template-btn {
|
|
|
+ background-color: #007bff;
|
|
|
+ color: white;
|
|
|
+ border: none;
|
|
|
+ padding: 8px 16px;
|
|
|
+ border-radius: 4px;
|
|
|
+ font-size: 14px;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: background-color 0.3s ease;
|
|
|
+ }
|
|
|
+
|
|
|
+ .use-template-btn:hover {
|
|
|
+ background-color: #0056b3;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 底部区域样式 */
|
|
|
+ .bottom-section {
|
|
|
+ display: flex;
|
|
|
+ gap: 20px;
|
|
|
+ padding: 20px;
|
|
|
+ max-width: 1200px;
|
|
|
+ margin: 0 auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bottom-left {
|
|
|
+ flex: 2;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bottom-right {
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 底部模板区域样式 */
|
|
|
+ .bottom-right .category-tabs {
|
|
|
+ background-color: #ffffff;
|
|
|
+ padding: 15px 20px;
|
|
|
+ margin-bottom: 0;
|
|
|
+ border-bottom: 1px solid #e9ecef;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bottom-right .category-tab {
|
|
|
+ background-color: #f3f4f6;
|
|
|
+ color: #4b5563;
|
|
|
+ padding: 8px 16px;
|
|
|
+ margin: 0 3px;
|
|
|
+ border-radius: 20px;
|
|
|
+ font-size: 13px;
|
|
|
+ font-weight: 500;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: all 0.3s ease;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bottom-right .category-tab.active {
|
|
|
+ background-color: #007bff;
|
|
|
+ color: white;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bottom-right .category-tab:hover {
|
|
|
+ background-color: #e5e7eb;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bottom-right .category-tab.active:hover {
|
|
|
+ background-color: #0069d9;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bottom-right .template-grid {
|
|
|
+ grid-template-columns: repeat(3, 1fr);
|
|
|
+ gap: 10px;
|
|
|
+ padding: 10px 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bottom-right .template-card {
|
|
|
+ border-radius: 8px;
|
|
|
+ overflow: hidden;
|
|
|
+ box-shadow: 0 2px 8px rgba(0,0,0,0.05);
|
|
|
+ transition: transform 0.3s ease, box-shadow 0.3s ease;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bottom-right .template-image {
|
|
|
+ width: 100%;
|
|
|
+ height: 80px;
|
|
|
+ object-fit: cover;
|
|
|
+ transition: transform 0.3s ease;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bottom-right .template-card:hover {
|
|
|
+ transform: translateY(-2px);
|
|
|
+ box-shadow: 0 4px 12px rgba(0,0,0,0.1);
|
|
|
+ }
|
|
|
+
|
|
|
+ .bottom-right .template-card:hover .template-image {
|
|
|
+ transform: scale(1.05);
|
|
|
+ }
|
|
|
+
|
|
|
+ .footer {
|
|
|
+ background-color: #ffffff;
|
|
|
+ padding: 20px 0;
|
|
|
+ border-top: 1px solid #e9ecef;
|
|
|
+ margin-top: 40px;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 响应式调整 */
|
|
|
+ @media (max-width: 768px) {
|
|
|
+ /* 主内容区域改为上下布局 */
|
|
|
+ .main-content {
|
|
|
+ flex-direction: column;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 左右区域调整 */
|
|
|
+ .left-section {
|
|
|
+ flex: 1;
|
|
|
+ border-right: none;
|
|
|
+ border-bottom: 1px solid #e5e7eb;
|
|
|
+ }
|
|
|
+
|
|
|
+ .right-section {
|
|
|
+ flex: none;
|
|
|
+ max-height: 300px;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 搜索容器 */
|
|
|
+ .search-container {
|
|
|
+ padding: 20px 0 15px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .search-input {
|
|
|
+ font-size: 14px;
|
|
|
+ padding: 12px 15px 12px 70px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .search-tag {
|
|
|
+ padding: 6px 12px;
|
|
|
+ font-size: 13px;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 分类标签 */
|
|
|
+ .category-tab {
|
|
|
+ padding: 6px 15px;
|
|
|
+ font-size: 13px;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 模板网格 */
|
|
|
+ .template-grid {
|
|
|
+ grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
|
|
|
+ gap: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .template-image {
|
|
|
+ height: 150px;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 底部输入区域 */
|
|
|
+ .input-container {
|
|
|
+ padding: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .prompt-card {
|
|
|
+ padding: 12px;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 操作按钮 */
|
|
|
+ .prompt-actions {
|
|
|
+ gap: 8px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .clear-btn, .optimize-btn {
|
|
|
+ padding: 8px 12px;
|
|
|
+ font-size: 13px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .arrow-btn {
|
|
|
+ padding: 8px 12px;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ @media (max-width: 576px) {
|
|
|
+ /* 模板网格 */
|
|
|
+ .template-grid {
|
|
|
+ grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
|
|
|
+ gap: 8px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .template-image {
|
|
|
+ height: 130px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .template-title {
|
|
|
+ font-size: 12px;
|
|
|
+ padding: 6px;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 底部输入区域 */
|
|
|
+ .prompt-footer {
|
|
|
+ justify-content: flex-end;
|
|
|
+ }
|
|
|
+
|
|
|
+ .prompt-actions {
|
|
|
+ justify-content: stretch;
|
|
|
+ }
|
|
|
+
|
|
|
+ .clear-btn, .optimize-btn, .arrow-btn {
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ .size-selector {
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ </style>
|
|
|
</head>
|
|
|
|
|
|
<body>
|
|
|
+ <!-- 顶部栏 -->
|
|
|
+ <div class="top-bar">
|
|
|
+ <button class="back-btn" onclick="window.history.back()">
|
|
|
+ <i class="fas fa-arrow-left"></i>
|
|
|
+ </button>
|
|
|
+ <h1 class="page-title">AI 图片生成</h1>
|
|
|
+ <div></div> <!-- 占位符,使标题居中 -->
|
|
|
+ </div>
|
|
|
|
|
|
-<div id="mainbody">
|
|
|
- <div class="container">
|
|
|
- <div class="text-center">
|
|
|
- <h1>{$site.name|htmlentities}</h1>
|
|
|
- <a href="{:url('index/user/index', '', false, true)}">{:__('Member center')}</a>
|
|
|
+ <!-- 主要内容区域 -->
|
|
|
+ <div class="main-content">
|
|
|
+ <!-- 左侧区域 -->
|
|
|
+ <div class="left-section">
|
|
|
+ <!-- 图片生成结果区域 -->
|
|
|
+ <div class="chat-container">
|
|
|
+ <div class="image-result-container">
|
|
|
+ <div class="image-result" id="imageResult">
|
|
|
+ <!-- 默认占位符 -->
|
|
|
+ <div class="image-placeholder">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 底部输入区域 -->
|
|
|
+ <div class="input-container">
|
|
|
+ <div class="prompt-card">
|
|
|
+ <textarea class="prompt-textarea" rows="3" placeholder="描述你想要生成的图片内容" oninput="updateCharCount()"></textarea>
|
|
|
+ <div class="prompt-footer">
|
|
|
+ <div class="char-count">
|
|
|
+ <span class="current-count">0</span>/<span class="max-count">500</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="prompt-actions">
|
|
|
+ <div class="size-selector">
|
|
|
+ <label for="imageSize">尺寸:</label>
|
|
|
+ <select id="imageSize" class="size-select">
|
|
|
+ <option value="1024x1024">1024×1024 (正方形)</option>
|
|
|
+ <option value="1792x1024">1792×1024 (宽屏)</option>
|
|
|
+ <option value="1024x1792">1024×1792 (竖屏)</option>
|
|
|
+ </select>
|
|
|
+ </div>
|
|
|
+ <button class="clear-btn" onclick="clearPrompt()">
|
|
|
+ <i class="fas fa-trash"></i>
|
|
|
+ 清空
|
|
|
+ </button>
|
|
|
+ <button class="optimize-btn" onclick="optimizePrompt()">
|
|
|
+ <i class="fas fa-magic"></i>
|
|
|
+ 一键优化
|
|
|
+ </button>
|
|
|
+ <button class="arrow-btn" onclick="generateImage()">
|
|
|
+ <i class="fas fa-arrow-up"></i>
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 右侧模板区域 -->
|
|
|
+ <div class="right-section">
|
|
|
+ <!-- 模板区域 -->
|
|
|
+ <div class="top-templates">
|
|
|
+ <!-- 分类标签 -->
|
|
|
+ <div class="category-tabs">
|
|
|
+ <div class="container">
|
|
|
+ <div class="category-tab active" data-category="all">推荐模板</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 模板展示区域 -->
|
|
|
+ <div class="container template-container">
|
|
|
+ <div class="template-grid">
|
|
|
+ <!-- 动态生成产品卡片 -->
|
|
|
+ {volist name="products" id="product"}
|
|
|
+ <div class="template-card">
|
|
|
+ <div class="template-image-container">
|
|
|
+ <img src="{$product.full_image_url}" class="template-image">
|
|
|
+ <div class="template-overlay">
|
|
|
+ <button class="use-template-btn" onclick="useTemplate('{$product.chinese_description|addslashes}')">使用模版</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ {/volist}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
-</div>
|
|
|
|
|
|
-<div class="footer">
|
|
|
- <div class="container">
|
|
|
- <p>Copyright @ {$site.name|htmlentities} {:date('Y',time())} 版权所有 <a href="https://beian.miit.gov.cn" target="_blank">{$site.beian|htmlentities}</a></p>
|
|
|
+ <!-- 图片放大查看模态框 -->
|
|
|
+ <div id="imageModal" class="modal">
|
|
|
+ <span class="close">×</span>
|
|
|
+ <img class="modal-content" id="modalImage">
|
|
|
</div>
|
|
|
-</div>
|
|
|
|
|
|
+ <!-- 引入jQuery库 -->
|
|
|
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
|
|
|
+ <!-- 引入Bootstrap JS -->
|
|
|
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
|
|
+
|
|
|
+ <!-- 自定义JavaScript -->
|
|
|
+ <script>
|
|
|
+ // 使用模板功能
|
|
|
+ function useTemplate(description) {
|
|
|
+ // 将模板描述赋值到提示词文本框
|
|
|
+ const textarea = document.querySelector('.prompt-textarea');
|
|
|
+ if (textarea) {
|
|
|
+ textarea.value = description;
|
|
|
+ // 更新字符计数
|
|
|
+ updateCharCount();
|
|
|
+ // 可选:滚动到顶部的提示词文本框
|
|
|
+ textarea.scrollIntoView({ behavior: 'smooth' });
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 清空提示词功能
|
|
|
+ function clearPrompt() {
|
|
|
+ const textarea = document.querySelector('.prompt-textarea');
|
|
|
+ if (textarea) {
|
|
|
+ textarea.value = '';
|
|
|
+ textarea.focus();
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 一键优化提示词功能
|
|
|
+ function optimizePrompt() {
|
|
|
+ const textarea = document.querySelector('.prompt-textarea');
|
|
|
+ const optimizeBtn = document.querySelector('.optimize-btn');
|
|
|
+
|
|
|
+ if (textarea && textarea.value.trim() !== '') {
|
|
|
+ // 显示加载状态
|
|
|
+ const originalBtnText = optimizeBtn.innerHTML;
|
|
|
+ optimizeBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 优化中...';
|
|
|
+ optimizeBtn.disabled = true;
|
|
|
+
|
|
|
+ // 构造请求参数
|
|
|
+ const params = {
|
|
|
+ status_val: '文生文',
|
|
|
+ prompt: textarea.value,
|
|
|
+ model: 'gemini-2.0-flash'
|
|
|
+ };
|
|
|
+
|
|
|
+ // 发送AJAX请求
|
|
|
+ $.ajax({
|
|
|
+ url: '/index.php/api/work_order/GetTxtToTxt',
|
|
|
+ type: 'POST',
|
|
|
+ data: params,
|
|
|
+ dataType: 'json',
|
|
|
+ success: function(data) {
|
|
|
+ // 恢复按钮状态
|
|
|
+ optimizeBtn.innerHTML = originalBtnText;
|
|
|
+ optimizeBtn.disabled = false;
|
|
|
+
|
|
|
+ // 优化成功,更新文本框内容
|
|
|
+ textarea.value = data.data.content;
|
|
|
+ textarea.scrollTop = textarea.scrollHeight;
|
|
|
+ updateCharCount();
|
|
|
+
|
|
|
+ // 显示优化成功提示
|
|
|
+ const alert = document.createElement('div');
|
|
|
+ alert.className = 'alert alert-success';
|
|
|
+ alert.innerHTML = '提示词已优化!';
|
|
|
+ alert.style.position = 'fixed';
|
|
|
+ alert.style.top = '20px';
|
|
|
+ alert.style.right = '20px';
|
|
|
+ alert.style.zIndex = '9999';
|
|
|
+ document.body.appendChild(alert);
|
|
|
+
|
|
|
+ // 3秒后移除提示
|
|
|
+ setTimeout(() => {
|
|
|
+ alert.remove();
|
|
|
+ }, 3000);
|
|
|
+
|
|
|
+ }
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ alert('请先输入提示词!');
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 滚动到顶部功能
|
|
|
+ function scrollToTop() {
|
|
|
+ window.scrollTo({ top: 0, behavior: 'smooth' });
|
|
|
+ }
|
|
|
+
|
|
|
+ // 字符计数功能
|
|
|
+ function updateCharCount() {
|
|
|
+ const textarea = document.querySelector('.prompt-textarea');
|
|
|
+ const charCountElement = document.querySelector('.current-count');
|
|
|
+ if (textarea && charCountElement) {
|
|
|
+ const count = textarea.value.length;
|
|
|
+ charCountElement.textContent = count;
|
|
|
+
|
|
|
+ // 根据字符数改变颜色
|
|
|
+ if (count > 450) {
|
|
|
+ charCountElement.style.color = '#dc3545';
|
|
|
+ } else if (count > 400) {
|
|
|
+ charCountElement.style.color = '#ffc107';
|
|
|
+ } else {
|
|
|
+ charCountElement.style.color = '';
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 初始化字符计数
|
|
|
+ document.addEventListener('DOMContentLoaded', function() {
|
|
|
+ updateCharCount();
|
|
|
+ });
|
|
|
+
|
|
|
+ // 生成图片函数
|
|
|
+ function generateImage() {
|
|
|
+ const promptText = document.querySelector('.prompt-textarea').value.trim();
|
|
|
+ const imageSize = document.getElementById('imageSize').value;
|
|
|
+ const imageResultDiv = document.getElementById('imageResult');
|
|
|
+
|
|
|
+ // 检查是否有提示词
|
|
|
+ if (!promptText) {
|
|
|
+ alert('请先输入图片描述');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 显示加载状态
|
|
|
+ imageResultDiv.innerHTML = `
|
|
|
+ <div class="image-loading">
|
|
|
+ <i class="fas fa-spinner"></i>
|
|
|
+ <p>正在生成图片,请稍候...</p>
|
|
|
+ </div>
|
|
|
+ `;
|
|
|
+
|
|
|
+ // 发送请求到文生图接口
|
|
|
+ $.ajax({
|
|
|
+ url: '/index.php/api/work_order/GetTxtToTxt',
|
|
|
+ type: 'POST',
|
|
|
+ dataType: 'json',
|
|
|
+ data: {
|
|
|
+ status_val: '文生图',
|
|
|
+ prompt: promptText,
|
|
|
+ model: 'dall-e-3',
|
|
|
+ size: imageSize
|
|
|
+ },
|
|
|
+ success: function(response) {
|
|
|
+ // 处理成功响应
|
|
|
+ const imageData = response.data;
|
|
|
+ if (imageData && imageData.url) {
|
|
|
+ // 显示生成的图片
|
|
|
+ imageResultDiv.innerHTML = `
|
|
|
+ <div class="image-container">
|
|
|
+ <img src="${imageData.url}" alt="生成的图片" class="generated-image" onclick="showImageModal('${imageData.url}')" oncontextmenu="downloadImage('${imageData.url}'); return false;" ontouchstart="touchStartHandler(event, '${imageData.url}')" ontouchend="touchEndHandler()">
|
|
|
+ </div>
|
|
|
+ <div class="download-box">
|
|
|
+ <button class="download-btn" onclick="downloadImage('${imageData.url}')">
|
|
|
+ <i class="fas fa-download"></i> 下载图片
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ `;
|
|
|
+ } else {
|
|
|
+ imageResultDiv.innerHTML = `
|
|
|
+ <div class="image-error">
|
|
|
+ <i class="fas fa-exclamation-triangle"></i>
|
|
|
+ <p>图片生成失败:未返回有效图片数据</p>
|
|
|
+ </div>
|
|
|
+ `;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ // 触屏长按下载相关变量
|
|
|
+ let longPressTimer;
|
|
|
+ const LONG_PRESS_DELAY = 500; // 长按触发时间(毫秒)
|
|
|
+
|
|
|
+ // 触屏开始事件处理
|
|
|
+ function touchStartHandler(event, imageUrl) {
|
|
|
+ longPressTimer = setTimeout(() => {
|
|
|
+ downloadImage(imageUrl);
|
|
|
+ }, LONG_PRESS_DELAY);
|
|
|
+ }
|
|
|
+
|
|
|
+ // 触屏结束事件处理
|
|
|
+ function touchEndHandler() {
|
|
|
+ clearTimeout(longPressTimer);
|
|
|
+ }
|
|
|
+
|
|
|
+ // 下载图片函数
|
|
|
+ function downloadImage(imageUrl) {
|
|
|
+ console.log('开始下载图片:', imageUrl);
|
|
|
+
|
|
|
+ // 使用服务器端代理下载图片
|
|
|
+ const proxyUrl = '/index.php/api/work_order/download_image';
|
|
|
+
|
|
|
+ // 创建一个表单来发送请求
|
|
|
+ const form = document.createElement('form');
|
|
|
+ form.method = 'POST';
|
|
|
+ form.action = proxyUrl;
|
|
|
+ form.target = '_blank';
|
|
|
+
|
|
|
+ // 创建一个隐藏的输入字段来传递图片URL
|
|
|
+ const urlInput = document.createElement('input');
|
|
|
+ urlInput.type = 'hidden';
|
|
|
+ urlInput.name = 'image_url';
|
|
|
+ urlInput.value = imageUrl;
|
|
|
+
|
|
|
+ // 将输入字段添加到表单中
|
|
|
+ form.appendChild(urlInput);
|
|
|
+
|
|
|
+ // 将表单添加到页面并提交
|
|
|
+ document.body.appendChild(form);
|
|
|
+ form.submit();
|
|
|
+
|
|
|
+ // 清理资源
|
|
|
+ setTimeout(() => {
|
|
|
+ document.body.removeChild(form);
|
|
|
+ }, 100);
|
|
|
+ }
|
|
|
+
|
|
|
+ // 图片放大查看功能
|
|
|
+ const modal = document.getElementById('imageModal');
|
|
|
+ const modalImg = document.getElementById('modalImage');
|
|
|
+ const closeBtn = document.querySelector('.close');
|
|
|
+
|
|
|
+ function showImageModal(imageUrl) {
|
|
|
+ modal.style.display = 'flex';
|
|
|
+ // 添加一个短暂的延迟,确保display属性生效后再添加show类
|
|
|
+ setTimeout(() => {
|
|
|
+ modal.classList.add('show');
|
|
|
+ }, 10);
|
|
|
+ modalImg.src = imageUrl;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 关闭模态框
|
|
|
+ function closeImageModal() {
|
|
|
+ modal.classList.remove('show');
|
|
|
+ // 等待过渡动画完成后再隐藏模态框
|
|
|
+ setTimeout(() => {
|
|
|
+ modal.style.display = 'none';
|
|
|
+ }, 300);
|
|
|
+ }
|
|
|
+
|
|
|
+ // 点击关闭按钮关闭模态框
|
|
|
+ closeBtn.onclick = closeImageModal;
|
|
|
+
|
|
|
+ // 点击模态框外部关闭模态框
|
|
|
+ window.onclick = function(event) {
|
|
|
+ if (event.target === modal) {
|
|
|
+ closeImageModal();
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 按ESC键关闭模态框
|
|
|
+ document.addEventListener('keydown', function(event) {
|
|
|
+ if (event.key === 'Escape' && modal.style.display === 'block') {
|
|
|
+ closeImageModal();
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+
|
|
|
+ // 分类筛选功能
|
|
|
+ document.addEventListener('DOMContentLoaded', function() {
|
|
|
+ const categoryTabs = document.querySelectorAll('.category-tab');
|
|
|
+ const templateCards = document.querySelectorAll('.template-card');
|
|
|
+
|
|
|
+ categoryTabs.forEach(tab => {
|
|
|
+ tab.addEventListener('click', function() {
|
|
|
+ // 移除所有active类
|
|
|
+ categoryTabs.forEach(t => t.classList.remove('active'));
|
|
|
+ // 添加当前tab的active类
|
|
|
+ this.classList.add('active');
|
|
|
+
|
|
|
+ const category = this.getAttribute('data-category');
|
|
|
+
|
|
|
+ // 筛选模板(当前简单实现,可根据需要扩展)
|
|
|
+ templateCards.forEach(card => {
|
|
|
+ card.style.display = 'block';
|
|
|
+ });
|
|
|
+ });
|
|
|
+ });
|
|
|
+
|
|
|
+ // 平滑滚动
|
|
|
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
|
|
+ anchor.addEventListener('click', function (e) {
|
|
|
+ e.preventDefault();
|
|
|
+ document.querySelector(this.getAttribute('href')).scrollIntoView({
|
|
|
+ behavior: 'smooth'
|
|
|
+ });
|
|
|
+ });
|
|
|
+ });
|
|
|
+ });
|
|
|
+ </script>
|
|
|
</body>
|
|
|
|
|
|
</html>
|