feat: 试卷预览

src/components/shared/RemarkListModal.vue

@@ -42,7 +42,7 @@ import BaseDialog from '@/components/element/BaseDialog.vue'
 import BaseTable from '@/components/element/BaseTable.vue'
 import ConfirmButton from '../common/ConfirmButton.vue'
 
-import type { EpTableColumn, EpTableProps } from 'global-type'
+import type { EpTableColumn } from 'global-type'
 import type { ExtractApiResponse } from 'api-type'
 
 type HistoryTask = ExtractArrayValue<ExtractApiResponse<'getMarkHistory'>>
@@ -53,6 +53,7 @@ const props = defineProps<{ modelValue: boolean }>()
 
 const emits = defineEmits<{
   (e: 'task-change', data: HistoryTask): void
+  (e: 'update:modeValue', visible: boolean): void
 }>()
 
 const visible = useVModel(props)

src/components/shared/message/MessageHistory.vue

@@ -9,20 +9,28 @@
           <span class="m-r-base user-name">{{ message.sendUserName }}</span>
           <span class="message-time">{{ message.sendTime }}</span>
         </div>
-        <pre class="message-info-content" v-html="message.content"></pre>
+        <pre class="message-info-content" @click="onContentClick" v-html="message.content"></pre>
       </div>
     </template>
   </div>
+  <image-preview v-model="previewModalVisible" :url="paperPath"></image-preview>
 </template>
 
 <script setup lang="ts" name="MessageHistory">
 /** 历史消息 */
-import { watch } from 'vue'
+import { watch, ref } from 'vue'
 import useFetch from '@/hooks/useFetch'
 import Empty from '@/components/common/Empty.vue'
+import ImagePreview from '../ImagePreview.vue'
 
 const props = defineProps<{ sendUserId?: number }>()
 
+/** 图片预览 */
+const previewModalVisible = ref<boolean>(false)
+
+/** 图片路径 */
+const paperPath = ref<string>('')
+
 const { fetch: getMessageHistory, result: history } = useFetch('getMessageHistory')
 
 watch(
@@ -34,6 +42,15 @@ watch(
   },
   { immediate: true }
 )
+
+const onContentClick = (e: Event) => {
+  const target = e.target as HTMLButtonElement
+  const path = target.getAttribute('data-path')
+  if (path) {
+    previewModalVisible.value = true
+    paperPath.value = path
+  }
+}
 </script>
 
 <style scoped lang="scss">

src/components/shared/message/MessageList.vue

@@ -29,6 +29,7 @@
         <div class="flex-1 overflow-hidden p-base">
           <pre
             class="full-h radius-base p-extra-base scroll-y-auto message-info-content"
+            @click="onContentClick"
             v-html="currentMessage?.content"
           ></pre>
         </div>
@@ -40,6 +41,7 @@
       <message-history v-if="showHistory" :send-user-id="currentMessage?.sendUserId"></message-history>
     </div>
   </div>
+  <image-preview v-model="previewModalVisible" :url="paperPath"></image-preview>
 </template>
 
 <script setup lang="ts" name="MessageList">
@@ -50,6 +52,7 @@ import dayjs from 'dayjs'
 import { Close } from '@element-plus/icons-vue'
 import useFetch from '@/hooks/useFetch'
 import MessageHistory from '@/components/shared/message/MessageHistory.vue'
+import ImagePreview from '../ImagePreview.vue'
 
 import type { ExtractApiResponse } from 'api-type'
 
@@ -57,6 +60,12 @@ type MessageType = ExtractArrayValue<ExtractApiResponse<'getMessageList'>>
 
 const emits = defineEmits(['close', 'change-type', 'reply'])
 
+/** 图片预览 */
+const previewModalVisible = ref<boolean>(false)
+
+/** 图片路径 */
+const paperPath = ref<string>('')
+
 const showHistory = ref<boolean>(false)
 
 const { fetch: getMessageList, result: messageList } = useFetch('getMessageList')
@@ -84,6 +93,15 @@ const onReply = () => {
   }
 }
 
+const onContentClick = (e: Event) => {
+  const target = e.target as HTMLButtonElement
+  const path = target.getAttribute('data-path')
+  if (path) {
+    previewModalVisible.value = true
+    paperPath.value = path
+  }
+}
+
 getMessageList().then((result) => (currentMessage.value = result?.[0]))
 </script>