feat: change theme for mobile site is ready

web/src/views/mobile/pages/ImageMj.vue

@@ -270,6 +270,7 @@
 
     </div>
 
+    <button style="display: none" class="copy-prompt" :data-clipboard-text="prompt" id="copy-btn">复制</button>
   </div>
 </template>
 
@@ -280,7 +281,6 @@ import {
   showFailToast,
   showNotify,
   showToast,
-  showDialog,
   showImagePreview,
   showSuccessToast
 } from "vant";
@@ -291,6 +291,7 @@ import {checkSession} from "@/action/session";
 import {useRouter} from "vue-router";
 import {Delete} from "@element-plus/icons-vue";
 import {showLoginDialog} from "@/utils/libs";
+import Clipboard from "clipboard";
 
 const activeColspan = ref([""])
 
@@ -337,8 +338,18 @@ const socket = ref(null)
 const power = ref(0)
 const activeName = ref("txt2img")
 const isLogin = ref(false)
+const prompt = ref('')
+const clipboard = ref(null)
 
 onMounted(() => {
+  clipboard.value = new Clipboard(".copy-prompt");
+  clipboard.value.on('success', () => {
+    showNotify({type: 'success', message: '复制成功', duration: 1000})
+  })
+  clipboard.value.on('error', () => {
+    showNotify({type: 'danger', message: '复制失败', duration: 2000})
+  })
+
   checkSession().then(user => {
     power.value = user['power']
     userId.value = user.id
@@ -354,6 +365,7 @@ onMounted(() => {
 
 onUnmounted(() => {
   socket.value = null
+  clipboard.value.destroy()
 })
 
 const mjPower = ref(1)
@@ -616,11 +628,15 @@ const publishImage = (item, action) => {
 }
 
 const showPrompt = (item) => {
-  showDialog({
+  prompt.value = item.prompt
+  showConfirmDialog({
     title: "绘画提示词",
     message: item.prompt,
+    confirmButtonText: "复制",
+    cancelButtonText: "关闭",
   }).then(() => {
-    // on close
+    document.querySelector('#copy-btn').click()
+  }).catch(() => {
   });
 }
 

web/src/views/mobile/pages/ImageSd.vue

@@ -198,7 +198,7 @@
                 <el-button type="success" v-else @click="publishImage($event, item, true)" circle>
                   <i class="iconfont icon-share-bold"></i>
                 </el-button>
-                <el-button type="primary" @click="showTask(item)" circle>
+                <el-button type="primary" @click="showPrompt(item)" circle>
                   <i class="iconfont icon-prompt"></i>
                 </el-button>
               </div>
@@ -208,7 +208,7 @@
       </van-list>
 
     </div>
-
+    <button style="display: none" class="copy-prompt-sd" :data-clipboard-text="prompt" id="copy-btn-sd">复制</button>
   </div>
 </template>
 
@@ -232,7 +232,6 @@ import {showLoginDialog} from "@/utils/libs";
 
 const listBoxHeight = ref(window.innerHeight - 40)
 const mjBoxHeight = ref(window.innerHeight - 150)
-const showTaskDialog = ref(false)
 const item = ref({})
 const isLogin = ref(false)
 const activeColspan = ref([""])
@@ -338,15 +337,15 @@ const connect = () => {
 }
 
 const clipboard = ref(null)
+const prompt = ref('')
 onMounted(() => {
   initData()
-  clipboard.value = new Clipboard('.copy-prompt-sd');
+  clipboard.value = new Clipboard(".copy-prompt-sd");
   clipboard.value.on('success', () => {
-    showNotify({type: "success", message: "复制成功！"});
+    showNotify({type: 'success', message: '复制成功', duration: 1000})
   })
-
   clipboard.value.on('error', () => {
-    showNotify({type: "danger", message: '复制失败！'});
+    showNotify({type: 'danger', message: '复制失败', duration: 2000})
   })
 
   httpGet("/api/config/get?key=system").then(res => {
@@ -438,7 +437,7 @@ const generate = () => {
     return showToast("请输入绘画提示词！")
   }
 
-  if (params.value.seed === '') {
+  if (!params.value.seed) {
     params.value.seed = -1
   }
   params.value.session_id = getSessionId()
@@ -450,14 +449,17 @@ const generate = () => {
   })
 }
 
-const showTask = (row) => {
-  item.value = row
-  showTaskDialog.value = true
-}
-
-const copyParams = (row) => {
-  params.value = row.params
-  showTaskDialog.value = false
+const showPrompt = (item) => {
+  prompt.value = item.prompt
+  showConfirmDialog({
+    title: "绘画提示词",
+    message: item.prompt,
+    confirmButtonText: "复制",
+    cancelButtonText: "关闭",
+  }).then(() => {
+    document.querySelector('#copy-btn-sd').click()
+  }).catch(() => {
+  });
 }
 
 const removeImage = (event, item) => {

web/src/views/mobile/pages/ImgWall.vue

@@ -13,7 +13,13 @@
               style="height: 100%;width: 100%;"
           >
             <van-cell v-for="item in data['mj'].data" :key="item.id">
-              <van-image :src="item['img_thumb']" @click="showPrompt(item)" fit="cover"/>
+              <van-image :src="item['img_thumb']" @click="imageView(item)" fit="cover"/>
+
+              <div class="opt-box">
+                <el-button type="primary" @click="showPrompt(item)" circle>
+                  <i class="iconfont icon-prompt"></i>
+                </el-button>
+              </div>
             </van-cell>
           </van-list>
         </van-tab>
@@ -27,7 +33,13 @@
               @load="onLoad"
           >
             <van-cell v-for="item in data['sd'].data" :key="item.id">
-              <van-image :src="item['img_thumb']" @click="showPrompt(item)" fit="cover"/>
+              <van-image :src="item['img_thumb']" @click="imageView(item)" fit="cover"/>
+
+              <div class="opt-box">
+                <el-button type="primary" @click="showPrompt(item)" circle>
+                  <i class="iconfont icon-prompt"></i>
+                </el-button>
+              </div>
             </van-cell>
           </van-list>
         </van-tab>
@@ -36,13 +48,19 @@
         </van-tab>
       </van-tabs>
     </div>
+
+    <button style="display: none" class="copy-prompt-wall" :data-clipboard-text="prompt" id="copy-btn-wall">复制
+    </button>
   </div>
 </template>
 
 <script setup>
-import {ref} from "vue";
+import {onMounted, onUnmounted, ref} from "vue";
 import {httpGet} from "@/utils/http";
-import {showDialog, showFailToast} from "vant";
+import {showConfirmDialog, showDialog, showFailToast, showImagePreview, showNotify} from "vant";
+import {Delete} from "@element-plus/icons-vue";
+import Clipboard from "clipboard";
+import {ElMessage} from "element-plus";
 
 const activeName = ref("mj")
 const data = ref({
@@ -52,7 +70,7 @@ const data = ref({
     error: false,
     page: 1,
     pageSize: 12,
-    url: "/api/mj/jobs",
+    url: "/api/mj/imgWall",
     data: []
   },
   "sd": {
@@ -61,7 +79,7 @@ const data = ref({
     error: false,
     page: 1,
     pageSize: 12,
-    url: "/api/sd/jobs",
+    url: "/api/sd/imgWall",
     data: []
   },
   "dalle3": {
@@ -70,11 +88,32 @@ const data = ref({
     error: false,
     page: 1,
     pageSize: 12,
-    url: "/api/dalle3/jobs",
+    url: "/api/dalle3/imgWall",
     data: []
   }
 })
 
+const prompt = ref('')
+const clipboard = ref(null)
+onMounted(() => {
+  clipboard.value = new Clipboard(".copy-prompt-wall");
+  clipboard.value.on('success', () => {
+    showNotify({type: 'success', message: '复制成功', duration: 1000})
+  })
+  clipboard.value.on('error', () => {
+    showNotify({type: 'danger', message: '复制失败', duration: 2000})
+  })
+
+
+  clipboard.value.on('error', () => {
+    ElMessage.error('复制失败！');
+  })
+})
+
+onUnmounted(() => {
+  clipboard.value.destroy()
+})
+
 const onLoad = () => {
   const d = data.value[activeName.value]
   httpGet(`${d.url}?status=1&page=${d.page}&page_size=${d.pageSize}&publish=true`).then(res => {
@@ -105,22 +144,39 @@ const onLoad = () => {
 };
 
 const showPrompt = (item) => {
-  showDialog({
+  prompt.value = item.prompt
+  showConfirmDialog({
     title: "绘画提示词",
     message: item.prompt,
+    confirmButtonText: "复制",
+    cancelButtonText: "关闭",
   }).then(() => {
-    // on close
+    document.querySelector('#copy-btn-wall').click()
+  }).catch(() => {
   });
 }
+
+const imageView = (item) => {
+  showImagePreview([item['img_url']]);
+}
 </script>
 
 <style lang="stylus">
 .img-wall {
   .content {
     .van-cell__value {
+      min-height 80px
+
       .van-image {
         width 100%
       }
+
+      .opt-box {
+        position absolute
+        right 0
+        top 0
+        padding 10px
+      }
     }
   }
 }