修改coustom_many2many_checkboxes组件的展示方式，控制图片展示大小，修改点击预览图展示的样式优化

jikimo_frontend/static/src/fields/custom_many2many_checkboxes/custom_many2many_checkboxes.css

@@ -1,41 +1,99 @@
-.zoomed {
-  position: fixed !important;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%) scale(10);
+
+.processing-capabilities-grid {
+    display: grid;
+    grid-template-columns: repeat(6, 1fr);
+    gap: 10px;
+    width: 100%;
 }
 
-.many2many_flex {
-  display: flex;
+.grid-item {
+    display: flex;
+    align-items: center;
 }
 
-.many2many_flex>div {
-  margin-right: 15px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
+.item-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+}
+/*控制图片大小*/
+.item-icon {
+    width: 50px;
+    height: 50px;
+    margin-bottom: 5px;
 }
 
-.many2many_flex>div>:nth-child(2) {
-  position: relative;
+.item-label {
+    font-size: 12px;
+    word-break: break-word;
 }
 
-.close {
-  width: 20px;
-  height: 20px;
-  position: absolute;
-  top: -8.8px;
-  right: -8.8px;
-  color: #fff;
-  background-color: #000;
-  opacity: 0;
-  text-align: center;
-  line-height: 20px;
-  font-size: 18px;
+@media (max-width: 1200px) {
+    .processing-capabilities-grid {
+        grid-template-columns: repeat(4, 1fr);
+    }
 }
 
-.img_close {
-  opacity: 1;
-  transform: scale(0.1);
-  cursor: pointer;
+@media (max-width: 768px) {
+    .processing-capabilities-grid {
+        grid-template-columns: repeat(3, 1fr);
+    }
+}
+
+@media (max-width: 480px) {
+    .processing-capabilities-grid {
+        grid-template-columns: repeat(2, 1fr);
+    }
+}
+.image-preview-container {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.9);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 1000;
+    opacity: 0;
+    transition: opacity 0.3s ease;
+}
+
+.image-preview-container.show {
+    opacity: 1;
+}
+
+.image-preview {
+    max-width: 90%;
+    max-height: 90%;
+    object-fit: contain;
+    box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
+    border-radius: 5px;
+    transform: scale(0.9);
+    transition: transform 0.3s ease;
+}
+
+.image-preview-container.show .image-preview {
+    transform: scale(1);
+}
+
+.image-preview-close {
+    position: absolute;
+    top: 20px;
+    right: 30px;
+    color: #fff;
+    font-size: 40px;
+    font-weight: bold;
+    transition: 0.3s;
+    cursor: pointer;
+    opacity: 0.7;
+}
+
+.image-preview-close:hover,
+.image-preview-close:focus {
+    opacity: 1;
+    text-decoration: none;
+    cursor: pointer;
 }

jikimo_frontend/static/src/fields/custom_many2many_checkboxes/custom_many2many_checkboxes.js

@@ -4,35 +4,57 @@ import {Many2ManyCheckboxesField} from "@web/views/fields/many2many_checkboxes/m
 import {registry} from "@web/core/registry";
 
 export class MyCustomWidget extends Many2ManyCheckboxesField {
-    // 你可以重写或者添加一些方法和属性
-    // 例如，你可以重写setup方法来添加一些事件监听器或者初始化一些变量
     setup() {
-        super.setup(); // 调用父类的setup方法
-        // 你自己的代码
+        super.setup();
     }
 
-    onImageClick(event) {
-        // 放大图片逻辑
-        // 获取图片元素
-        const img = event.target;
-        const close = img.nextSibling;
+    onImageClick(event, src) {
+        event.preventDefault();
+        event.stopPropagation();
 
-        // 实现放大图片逻辑
-        // 比如使用 CSS 放大
-        img.parentElement.classList.add('zoomed');
-        close.classList.add('img_close');
-    }
+        // 创建预览框
+        const previewContainer = document.createElement('div');
+        previewContainer.className = 'image-preview-container';
 
-    onCloseClick(event) {
-        const close = event.target;
-        const img = close.previousSibling;
-        img.parentElement.classList.remove('zoomed');
-        close.classList.remove('img_close');
+        const previewImg = document.createElement('img');
+        previewImg.src = src;
+        previewImg.className = 'image-preview';
+        // 设置放大的预览图片大小
+        previewImg.style.width = '600px';
+        previewImg.style.height = 'auto'; // 保持宽高比
+
+        const closeButton = document.createElement('span');
+        closeButton.innerHTML = '×';
+        closeButton.className = 'image-preview-close';
+
+        previewContainer.appendChild(previewImg);
+        previewContainer.appendChild(closeButton);
+        document.body.appendChild(previewContainer);
+
+        // 添加关闭预览的事件监听器
+        const closePreview = () => {
+            previewContainer.classList.remove('show');
+            setTimeout(() => {
+                document.body.removeChild(previewContainer);
+            }, 300);
+        };
+
+        closeButton.addEventListener('click', closePreview);
+
+        // 点击预览框外部也可以关闭
+        previewContainer.addEventListener('click', (e) => {
+            if (e.target === previewContainer) {
+                closePreview();
+            }
+        });
+
+        // 使用 setTimeout 来触发过渡效果
+        setTimeout(() => {
+            previewContainer.classList.add('show');
+        }, 10);
     }
 }
 
 MyCustomWidget.template = "jikimo_frontend.MyCustomWidget";
-// MyCustomWidget.supportedTypes = ['many2many'];
-
-registry.category("fields").add("custom_many2many_checkboxes", MyCustomWidget);
 
+registry.category("fields").add("custom_many2many_checkboxes", MyCustomWidget);

jikimo_frontend/static/src/fields/custom_many2many_checkboxes/custom_many2many_checkboxes.xml

@@ -2,27 +2,22 @@
 <templates xml:space="preserve">
 
     <t t-name="jikimo_frontend.MyCustomWidget" owl="1">
-        <div aria-atomic="true" class="many2many_flex">
+        <div aria-atomic="true" class="many2many_flex processing-capabilities-grid">
             <t t-foreach="items" t-as="item" t-key="item[0]">
-                <div>
+                <div class="grid-item">
                     <CheckBox
                             value="isSelected(item)"
                             disabled="props.readonly"
                             onChange="(ev) => this.onChange(item[0], ev)"
                     >
-                        <t t-esc="item[1]"/>
-
+                        <div class="item-content">
+                            <img t-att-src="item[2]" class="item-icon" t-on-click="(ev) => this.onImageClick(ev, item[2])"/>
+                            <span class="item-label"><t t-esc="item[1]"/></span>
+                        </div>
                     </CheckBox>
-                    <div t-on-dblclick="onImageClick">
-                    <t>
-                        <img t-att-src="item[2]" width="50" height="50"/>
-                        <div class="close" t-on-click="onCloseClick">×</div>
-                    </t>
                 </div>
-                </div>
-
             </t>
         </div>
     </t>
 
-</templates>
+</templates>