feat: 在文生图的图片展示组件中添加编辑按钮

src/components/DialogWrap.vue

@@ -255,7 +255,7 @@ export default defineComponent({
     /**
      * 初始化临时历史记录
      * 在对话过程中，消息记录是一条一条的呈现
-     * 而在历史记录面板中，一个对话框中可能有多条对话
+     * 而在历史记录面板中，一个对话框中可能有多条对话，一次性直接加载
      */
     const tempHistory = initTempHistory();
 
@@ -384,7 +384,6 @@ export default defineComponent({
       window.open(pdf_url);
     }
 
-
     const addLoading = (data) => {
       const mockData = DOCUMENT_RESULT;
       data.capacity = {
@@ -439,7 +438,6 @@ export default defineComponent({
       helper.webSocket.close();
     });
 
-
     onMounted(() => {
       scrollToEnd();
       /**
@@ -448,7 +446,6 @@ export default defineComponent({
        */
       applyRefferencePopover(props.list);
 
-
       // socket 消息队列
       // TODO: 只允许保存一条消息
       let msg_list = [];
@@ -505,7 +502,6 @@ export default defineComponent({
       createSocket();
 
       helper.webSocket.onmessage = (event) => {
-        // console.log(event, 'websocket 信息');
         /**
          * 例如：ws://localhost/api/chat/ws/42e4fcdc9bea11efac300242ac160006/765f672c700f49b79a473fc906fe388c?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJ1c2VyIiwidXNlcl9pZCI6MjEsImV4cCI6MTczMjQzNzkzNH0.7SPOZpnaTUu2KPzWIJrhhkRehjePeuL8TABo7rNgnCY
          */

src/components/PictureCards.vue

@@ -10,10 +10,10 @@
       </div>
     </section>
 
-    <!-- <AnwserPictureResult :image_list="image_list"/> -->
+    <AnwserPictureResult :image_list="image_list"/>
     <!-- <AnwserPictureLoading /> -->
 
-    <ImgEditBtn />
+    <!-- <ImgEditBtn /> -->
     
     <footer v-if="hasUpload" class="picture-upload-footer">
       <a-popover :popup-visible="showUpload" position="tl" @popup-visible-change="() => {

src/components/anwser-pictures/AnwserInfo.vue

@@ -28,7 +28,7 @@ import right_normal_icon from '../../assets/images/right-normal.svg'
 
 const props = defineProps({
     current: Number, // 当前的序号
-    total: Number // 回答的总数
+    total: Number, // 回答的总数
 });
 
 const emit = defineEmits('pre', 'next');
@@ -102,7 +102,7 @@ const handleNext = () => {
 }
 
 .anwser-pictures-info{
-    margin-top: 15px;
+    /* margin-top: 15px; */
     font-size: 16px;
 }
 </style>

src/components/anwser-pictures/AnwserPictureResult.vue

@@ -26,13 +26,17 @@
             </a-carousel>
         </div>
 
-        <AnwserInfo  
-            v-if="!is_only_one" 
-            :current="cur_index" 
-            :total="image_total" 
-            @pre="handlePre" 
-            @next="handleNext" 
-        />
+        <div class="anwser-info-container-with-edit">
+            <AnwserInfo  
+                v-if="!is_only_one" 
+                :current="cur_index" 
+                :total="image_total" 
+                @pre="handlePre" 
+                @next="handleNext" 
+            />
+
+            <ImgEditBtn :image_url="image_list[cur_index]"/>
+        </div>
     </div>
 </template>
 <script setup>
@@ -45,6 +49,9 @@ import left_normal_icon from '../../assets/images/left-normal.svg'
 import right_hover_icon from '../../assets/images/right-hover.svg'
 import right_normal_icon from '../../assets/images/right-normal.svg'
 
+import ImgEditBtn from '../image-editor/ImgEditBtn.vue';
+
+
 const cur_index = ref(1);
 
 const props = defineProps({
@@ -99,24 +106,9 @@ const handleNext = () => {
     overflow: hidden;
 }
 
-.anwser-pictures-index-container{
-    display: flex;
-    align-items: center;
-}
-
-.pic-arrow-btn{
-    cursor: pointer;
+.anwser-info-container-with-edit{
+    margin-top: 15px;
     display: flex;
-    justify-content: center;
     align-items: center;
 }
-
-.current-index{
-    font-weight: bold;
-}
-
-.anwser-pictures-info{
-    margin-top: 15px;
-    font-size: 16px;
-}
 </style>

src/components/image-editor/ImgEditBtn.vue

@@ -1,5 +1,5 @@
 <template>
-  <a-button @click="handleClick" class="comfyui-btn">
+  <a-button @click="handleClick" class="image-edit-btn">
     编辑图片
   </a-button>
 
@@ -8,32 +8,8 @@
       编辑图片
     </template>
     
-    <div style="padding:20px">
-      <TuiImageEditor :options="{
-        includeUI: {
-          loadImage: {
-            // path: 'img/sampleImage.jpg',
-            path: 'http://localhost/src/assets/slider/logo.jpg',
-            name: 'SampleImage'
-          },
-          theme: blackTheme, // or whiteTheme
-          menu: ['shape', 'filter'],
-          initMenu: 'filter',
-          uiSize: {
-              // width: '1000px',
-              height: '600px'
-          },
-          menuBarPosition: 'bottom',
-          locale: zh_local,
-          theme: theme
-        },
-        // cssMaxWidth: 700,
-        // cssMaxHeight: 500,
-        selectionStyle: {
-          cornerSize: 20,
-          rotatingPointOffset: 70
-        },
-      }"/>
+    <div style="padding:20px; height: 100%;">
+      <TuiImageEditor :image_url="image_url" />
     </div>
   </a-modal>
 </template>
@@ -44,6 +20,10 @@ import logo from '../../assets/images/comfyui-logo.png'
 
 import TuiImageEditor from './TuiImageEditorVue3.vue';
 
+const props = defineProps({
+  image_url: String
+});
+
 const visible = ref(false);
 
 const handleClick = () => {
@@ -55,166 +35,13 @@ const handleOk = () => {
 const handleCancel = () => {
     visible.value = false;
 }
-
-const zh_local = {
-  Crop: "裁剪",
-  Load: '替换图片',
-  DeleteAll: "全部删除",
-  Delete: "删除",
-  Undo: "撤销",
-  Redo: "反撤销",
-  Reset: "重置",
-  Flip: "镜像",
-  Rotate: "旋转",
-  Draw: "画",
-  Shape: "形状标注",
-  Icon: "图标标注",
-  Text: "文字标注",
-  Mask: "遮罩",
-  Filter: "滤镜",
-  Bold: "加粗",
-  Italic: "斜体",
-  Underline: "下划线",
-  Left: "左对齐",
-  Center: "居中",
-  Right: "右对齐",
-  Color: "颜色",
-  "Text size": "字体大小",
-  Custom: "自定义",
-  Square: "正方形",
-  Apply: "应用",
-  Cancel: "取消",
-  "Flip X": "X 轴",
-  "Flip Y": "Y 轴",
-  Range: "区间",
-  Stroke: "描边",
-  Fill: "填充",
-  Circle: "圆",
-  Triangle: "三角",
-  Rectangle: "矩形",
-  Free: "曲线",
-  Straight: "直线",
-  Arrow: "箭头",
-  "Arrow-2": "箭头2",
-  "Arrow-3": "箭头3",
-  "Star-1": "星星1",
-  "Star-2": "星星2",
-  Polygon: "多边形",
-  Location: "定位",
-  Heart: "心形",
-  Bubble: "气泡",
-  "Custom icon": "自定义图标",
-  "Load Mask Image": "加载蒙层图片",
-  Grayscale: "灰度",
-  Blur: "模糊",
-  Sharpen: "锐化",
-  Emboss: "浮雕",
-  "Remove White": "除去白色",
-  Distance: "距离",
-  Brightness: "亮度",
-  Noise: "噪音",
-  "Color Filter": "彩色滤镜",
-  Sepia: "棕色",
-  Sepia2: "棕色2",
-  Invert: "负片",
-  Pixelate: "像素化",
-  Threshold: "阈值",
-  Tint: "色调",
-  Multiply: "正片叠底",
-  Blend: "混合色",
-  Double: '双击',
-  Download: '预览图片'
-};
-
-const theme = {
-  // image 坐上角度图片
-  'common.bi.image': '', // 在这里换上你喜欢的logo图片
-  'common.bisize.width': '0px',
-  'common.bisize.height': '0px',
-  'common.backgroundImage': 'none',
-  'common.backgroundColor': '#f3f4f6',
-  'common.border': '1px solid #444',
-
-  // header
-  'header.backgroundImage': 'none',
-  'header.backgroundColor': '#f3f4f6',
-  'header.border': '0px',
-
-  // load button
-  'loadButton.backgroundColor': '#fff',
-  'loadButton.border': '1px solid #ddd',
-  'loadButton.color': '#222',
-  'loadButton.fontFamily': 'NotoSans, sans-serif',
-  'loadButton.fontSize': '12px',
-  'loadButton.display': 'none', // 可以直接隐藏掉
-
-  // download button
-  'downloadButton.backgroundColor': '#fdba3b',
-  'downloadButton.border': '1px solid #fdba3b',
-  'downloadButton.color': '#fff',
-  'downloadButton.fontFamily': 'NotoSans, sans-serif',
-  'downloadButton.fontSize': '12px',
-  'downloadButton.display': 'none', // 可以直接隐藏掉
-
-  // icons default
-  'menu.normalIcon.color': '#8a8a8a',
-  'menu.activeIcon.color': '#555555',
-  'menu.disabledIcon.color': '#434343',
-  'menu.hoverIcon.color': '#e9e9e9',
-  'submenu.normalIcon.color': '#8a8a8a',
-  'submenu.activeIcon.color': '#e9e9e9',
-
-  'menu.iconSize.width': '24px',
-  'menu.iconSize.height': '24px',
-  'submenu.iconSize.width': '32px',
-  'submenu.iconSize.height': '32px',
-
-  // submenu primary color
-  'submenu.backgroundColor': '#1e1e1e',
-  'submenu.partition.color': '#858585',
-
-  // submenu labels
-  'submenu.normalLabel.color': '#858585',
-  'submenu.normalLabel.fontWeight': 'lighter',
-  'submenu.activeLabel.color': '#fff',
-  'submenu.activeLabel.fontWeight': 'lighter',
-
-  // checkbox style
-  'checkbox.border': '1px solid #ccc',
-  'checkbox.backgroundColor': '#fff',
-
-  // rango style
-  'range.pointer.color': '#fff',
-  'range.bar.color': '#666',
-  'range.subbar.color': '#d1d1d1',
-
-  'range.disabledPointer.color': '#414141',
-  'range.disabledBar.color': '#282828',
-  'range.disabledSubbar.color': '#414141',
-
-  'range.value.color': '#fff',
-  'range.value.fontWeight': 'lighter',
-  'range.value.fontSize': '11px',
-  'range.value.border': '1px solid #353535',
-  'range.value.backgroundColor': '#151515',
-  'range.title.color': '#fff',
-  'range.title.fontWeight': 'lighter',
-
-  // colorpicker style
-  'colorpicker.button.border': '1px solid #1e1e1e',
-  'colorpicker.title.color': '#fff'
-};
 </script>
 
 <style scoped>
-.comfyui-btn{
-    border-radius: 30px;
-    color: #353535;
-}
-.comfyui-logo-img{
-    width: 22px;
-    display: inline-block;
-    margin-right: 5px;
+.image-edit-btn{
+  width: 100px;
+  border-radius: 30px;
+  color: #353535;
 }
 </style>
 
@@ -222,6 +49,7 @@ const theme = {
 .image-editor-modal{
 
 }
+
 .arco-modal-body.image-editor-body{
     width: 100%;
     /* height: 900px; */

src/components/image-editor/TuiImageEditorVue3.vue

@@ -1,5 +1,5 @@
 <template>
-  <div ref="editor" style="width: 100%; height: 100%"></div>
+  <div ref="editor"></div>
 </template>
 <script setup>
 import {useTemplateRef, onMounted, onUnmounted} from 'vue'
@@ -8,22 +8,24 @@ import 'tui-color-picker/dist/tui-color-picker.css';
 import 'tui-image-editor/dist/tui-image-editor.css';
 
 const props = defineProps({
-  includeUi: {
-      type: Boolean,
-      default: true,
-    },
-    /**
-     * @see https://nhn.github.io/tui.image-editor/latest/ImageEditor
-     */
-    options: {
-      type: Object,
-      default() {
-        return {
-          cssMaxWidth: 700,
-          cssMaxHeight: 900,
-        };
-      },
-    },
+  // includeUi: {
+  //   type: Boolean,
+  //   default: true,
+  // },
+  // /**
+  //  * @see https://nhn.github.io/tui.image-editor/latest/ImageEditor
+  //  */
+  // options: {
+  //   type: Object,
+  //   default() {
+  //     return {
+  //       cssMaxWidth: 700,
+  //       cssMaxHeight: 900,
+  //     };
+  //   },
+  // },
+  // 图片地址
+  image_url: String,
 });
 
 const includeUIOptions = {
@@ -164,7 +166,7 @@ const zh_local = {
   Multiply: "正片叠底",
   Blend: "混合色",
   Double: '双击',
-  Download: '预览图片'
+  Download: '下载图片'
 };
 
 const theme = {
@@ -247,99 +249,195 @@ const theme = {
 
 
 
+// -----------------------
 
-
-  // image 坐上角度图片
-    "common.bi.image": "", // 在这里换上你喜欢的logo图片
-    "common.bisize.width": "0px",
-    "common.bisize.height": "0px",
-    "common.backgroundImage": "none",
-    "common.backgroundColor": "#f3f4f6",
-    "common.border": "1px solid #444",
-
-    // header
-    "header.backgroundImage": "none",
-    "header.backgroundColor": "#f3f4f6",
-    "header.border": "0px",
-    "header.margin": "0px auto",
-
-    // load button
-    "loadButton.backgroundColor": "#fff",
-    "loadButton.border": "1px solid #ddd",
-    "loadButton.color": "#222",
-    "loadButton.fontFamily": "NotoSans, sans-serif",
-    "loadButton.fontSize": "12px",
-    // "loadButton.width": "150px",
-    // "loadButton.display": "none", // 可以直接隐藏掉
-
-    // download button
-    "downloadButton.backgroundColor": "#fdba3b",
-    "downloadButton.border": "1px solid #fdba3b",
-    "downloadButton.color": "#fff",
-    "downloadButton.fontFamily": "NotoSans, sans-serif",
-    "downloadButton.fontSize": "12px",
-    // "downloadButton.display": "none", // 可以直接隐藏掉
-
-    // icons default
-    "menu.normalIcon.color": "#8a8a8a",
-    "menu.activeIcon.color": "#555555",
-    "menu.disabledIcon.color": "#434343",
-    "menu.hoverIcon.color": "#e9e9e9",
-    "submenu.normalIcon.color": "#8a8a8a",
-    "submenu.activeIcon.color": "#e9e9e9",
-
-    "menu.iconSize.width": "24px",
-    "menu.iconSize.height": "24px",
-    "submenu.iconSize.width": "32px",
-    "submenu.iconSize.height": "32px",
-
-    // submenu primary color
-    "submenu.backgroundColor": "#1e1e1e",
-    "submenu.partition.color": "#858585",
-
-    // submenu labels
-    "submenu.normalLabel.color": "#858585",
-    "submenu.normalLabel.fontWeight": "lighter",
-    "submenu.activeLabel.color": "#fff",
-    "submenu.activeLabel.fontWeight": "lighter",
-
-    // checkbox style
-    "checkbox.border": "1px solid #ccc",
-    "checkbox.backgroundColor": "#fff",
-
-    // rango style
-    "range.pointer.color": "#fff",
-    "range.bar.color": "#666",
-    "range.subbar.color": "#d1d1d1",
-
-    "range.disabledPointer.color": "#414141",
-    "range.disabledBar.color": "#282828",
-    "range.disabledSubbar.color": "#414141",
-
-    "range.value.color": "#fff",
-    "range.value.fontWeight": "lighter",
-    "range.value.fontSize": "11px",
-    "range.value.border": "1px solid #353535",
-    "range.value.backgroundColor": "#151515",
-    "range.title.color": "#fff",
-    "range.title.fontWeight": "lighter",
-
-    // colorpicker style
-    "colorpicker.button.border": "1px solid #1e1e1e",
-    "colorpicker.title.color": "#fff"
+  // // image 坐上角度图片
+  //   "common.bi.image": "", // 在这里换上你喜欢的logo图片
+  //   "common.bisize.width": "0px",
+  //   "common.bisize.height": "0px",
+  //   "common.backgroundImage": "none",
+  //   "common.backgroundColor": "#f3f4f6",
+  //   "common.border": "1px solid #444",
+
+  //   // header
+  //   "header.backgroundImage": "none",
+  //   "header.backgroundColor": "#f3f4f6",
+  //   "header.border": "0px",
+  //   "header.margin": "0px auto",
+
+  //   // load button
+  //   "loadButton.backgroundColor": "#fff",
+  //   "loadButton.border": "1px solid #ddd",
+  //   "loadButton.color": "#222",
+  //   "loadButton.fontFamily": "NotoSans, sans-serif",
+  //   "loadButton.fontSize": "12px",
+  //   // "loadButton.width": "150px",
+  //   // "loadButton.display": "none", // 可以直接隐藏掉
+
+  //   // download button
+  //   "downloadButton.backgroundColor": "#fdba3b",
+  //   "downloadButton.border": "1px solid #fdba3b",
+  //   "downloadButton.color": "#fff",
+  //   "downloadButton.fontFamily": "NotoSans, sans-serif",
+  //   "downloadButton.fontSize": "12px",
+  //   // "downloadButton.display": "none", // 可以直接隐藏掉
+
+  //   // icons default
+  //   "menu.normalIcon.color": "#8a8a8a",
+  //   "menu.activeIcon.color": "#555555",
+  //   "menu.disabledIcon.color": "#434343",
+  //   "menu.hoverIcon.color": "#e9e9e9",
+  //   "submenu.normalIcon.color": "#8a8a8a",
+  //   "submenu.activeIcon.color": "#e9e9e9",
+
+  //   "menu.iconSize.width": "24px",
+  //   "menu.iconSize.height": "24px",
+  //   "submenu.iconSize.width": "32px",
+  //   "submenu.iconSize.height": "32px",
+
+  //   // submenu primary color
+  //   "submenu.backgroundColor": "#1e1e1e",
+  //   "submenu.partition.color": "#858585",
+
+  //   // submenu labels
+  //   "submenu.normalLabel.color": "#858585",
+  //   "submenu.normalLabel.fontWeight": "lighter",
+  //   "submenu.activeLabel.color": "#fff",
+  //   "submenu.activeLabel.fontWeight": "lighter",
+
+  //   // checkbox style
+  //   "checkbox.border": "1px solid #ccc",
+  //   "checkbox.backgroundColor": "#fff",
+
+  //   // rango style
+  //   "range.pointer.color": "#fff",
+  //   "range.bar.color": "#666",
+  //   "range.subbar.color": "#d1d1d1",
+
+  //   "range.disabledPointer.color": "#414141",
+  //   "range.disabledBar.color": "#282828",
+  //   "range.disabledSubbar.color": "#414141",
+
+  //   "range.value.color": "#fff",
+  //   "range.value.fontWeight": "lighter",
+  //   "range.value.fontSize": "11px",
+  //   "range.value.border": "1px solid #353535",
+  //   "range.value.backgroundColor": "#151515",
+  //   "range.title.color": "#fff",
+  //   "range.title.fontWeight": "lighter",
+
+  //   // colorpicker style
+  //   "colorpicker.button.border": "1px solid #1e1e1e",
+  //   "colorpicker.title.color": "#fff",
+
+
+// -----------------------
+
+    "common.bi.image": "", // 左上角logo图片
+  "common.bisize.width": "0px",
+  "common.bisize.height": "0px",
+  "common.backgroundImage": "none",
+  "common.backgroundColor": "#f3f4f6",
+  "common.border": "1px solid #333",
+
+  // header
+  "header.backgroundImage": "none",
+  "header.backgroundColor": "#f3f4f6",
+  "header.border": "0px",
+  
+  // load button
+  "loadButton.backgroundColor": "#fff",
+  "loadButton.border": "1px solid #ddd",
+  "loadButton.color": "#222",
+  "loadButton.fontFamily": "NotoSans, sans-serif",
+  "loadButton.fontSize": "12px",
+  // "loadButton.display": "none", // 隐藏
+
+  // download button
+  "downloadButton.backgroundColor": "#fdba3b",
+  "downloadButton.border": "1px solid #fdba3b",
+  "downloadButton.color": "#fff",
+  "downloadButton.fontFamily": "NotoSans, sans-serif",
+  "downloadButton.fontSize": "12px",
+  // "downloadButton.display": "none", // 隐藏
+
+  // icons default
+  "menu.normalIcon.color": "#8a8a8a",
+  "menu.activeIcon.color": "#555555",
+  "menu.disabledIcon.color": "#ccc",
+  "menu.hoverIcon.color": "#e9e9e9",
+  "submenu.normalIcon.color": "#8a8a8a",
+  "submenu.activeIcon.color": "#e9e9e9",
+
+  "menu.iconSize.width": "24px",
+  "menu.iconSize.height": "24px",
+  "submenu.iconSize.width": "32px",
+  "submenu.iconSize.height": "32px",
+
+  // submenu primary color
+  "submenu.backgroundColor": "#1e1e1e",
+  "submenu.partition.color": "#858585",
+
+  // submenu labels
+  "submenu.normalLabel.color": "#858585",
+  "submenu.normalLabel.fontWeight": "lighter",
+  "submenu.activeLabel.color": "#fff",
+  "submenu.activeLabel.fontWeight": "lighter",
+
+  // checkbox style
+  "checkbox.border": "1px solid #ccc",
+  "checkbox.backgroundColor": "#fff",
+
+  // rango style
+  "range.pointer.color": "#fff",
+  "range.bar.color": "#666",
+  "range.subbar.color": "#d1d1d1",
+
+  "range.disabledPointer.color": "#414141",
+  "range.disabledBar.color": "#282828",
+  "range.disabledSubbar.color": "#414141",
+
+  "range.value.color": "#fff",
+  "range.value.fontWeight": "lighter",
+  "range.value.fontSize": "11px",
+  "range.value.border": "1px solid #353535",
+  "range.value.backgroundColor": "#151515",
+  "range.title.color": "#fff",
+  "range.title.fontWeight": "lighter",
+
+  // colorpicker style
+  "colorpicker.button.border": "1px solid #1e1e1e",
+  "colorpicker.title.color": "#fff",
 };
 
 onMounted(() => {
-    let options = props.options;
-
-    if (props.includeUi) {
-      options = Object.assign(includeUIOptions, props.options);
+    // let options = props.options;
+
+    // if (props.includeUi) {
+    //   options = Object.assign(includeUIOptions, props.options);
+    // }
+
+    // options.includeUI.locale = zh_local;
+    // options.includeUI.theme = theme;
+
+    const opts = {
+      includeUI: {
+        loadImage: {
+          // path: "https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c1d7a1feb60346449c1a64893888989a~tplv-k3u1fbpfcp-watermark.image",
+          // path: 'http://localhost/src/assets/slider/logo.jpg',
+          path: props.image_url,
+          name: "image",
+        },
+        initMenu: "draw", // 默认打开的菜单项
+        menuBarPosition: "bottom", // 菜单所在的位置
+        locale: zh_local, // 本地化语言为中文
+        theme: theme
+      },
+      cssMaxWidth: 1000, // canvas 最大宽度
+      cssMaxHeight: 600, // canvas 最大高度
     }
 
-    options.includeUI.locale = zh_local;
-    options.includeUI.theme = theme;
-
-    editorInstance = new ImageEditor(editor.value, options);
+    editorInstance = new ImageEditor(editor.value, opts);
     addEventListener();
 });
 
@@ -352,3 +450,9 @@ onUnmounted(() => {
   editorInstance = null;
 });
 </script>
+
+<style>
+.image-editor-body .tui-image-editor{
+  top: 0 !important;
+}
+</style>