Merge pull request #74 from RosyrRais/main

pref:表格文字溢出处理 复制链接反馈增加

src/pages/DataDisplay/data.vue

@@ -15,7 +15,9 @@
         <tr v-for="(t, index) in time">
           <th>{{ index+1 }}</th>
           <th>{{ t }}</th>
-          <th v-for="ans in answers">{{ ans.answers[index] }}</th>
+          <th v-for="ans in answers">
+            <overflow-panel :text="ans.answers[index]"/>
+          </th>
         </tr>
       </tbody>
     </table>
@@ -34,6 +36,7 @@ import { getAnswersAPI } from '@/apis';
 import { ref, watch } from 'vue';
 import { useMainStore } from '@/stores';
 import { useRequest } from 'vue-hooks-plus';
+import overflowPanel from './overflowPanel.vue';
 
 const tempStore = useMainStore().useTempStore();
 

src/pages/DataDisplay/index.vue

@@ -16,7 +16,7 @@
       <div v-show="!isCount" class="btn btn-sm" :class="isUnique ? 'btn-neutral' : 'btn-accent'" @click="changeUnique">展示近期</div>
       <span v-show="!isCount">搜索</span><input v-show="!isCount" class="input input-sm input-bordered" type="text" v-model="keyText">
     </div>
-    <div class="overflow-x-auto">
+    <div style="margin-bottom: 30vh;">
       <data-table :key-text="keyText" :is-unique="isUnique" v-show="!isCount"></data-table>
       <statics v-show="isCount"></statics>
     </div>

src/pages/DataDisplay/overflowPanel.vue

@@ -0,0 +1,47 @@
+<template>
+  <div class="relative cursor-default">
+    <div class="overflowText text-slate-700" @click="showModal">{{ text }}</div>
+    <div class="overflowModal" @mouseout="hideModal">{{ text }}</div>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  text: string
+}>();
+
+const showModal = (e: MouseEvent) => {
+  console.log("debug:1")
+  const et = (e.target as HTMLElement).nextElementSibling as HTMLElement;
+  et.style.display = "block";
+}
+
+const hideModal = (e: MouseEvent) => {
+  const et = e.target as HTMLElement;
+  et.style.display = "none";
+}
+
+</script>
+
+<style>
+.overflowText{
+  max-width: 230px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.overflowModal {
+  max-width: 500px;
+  position: absolute;
+  left: 0; top: 0;
+  padding: 8px 16px;
+  border: 2px solid rgb(176, 176, 176);
+  border-radius: 3px;
+  background-color: white;
+
+  word-wrap: break-word;
+  z-index: 5;
+  display: none;
+}
+</style>

src/pages/Home/questionnaireItem.vue

@@ -49,6 +49,7 @@ import router from '@/router';
 import {closeLoading, startLoading} from "@/utilities";
 import { useMainStore } from '@/stores';
 import CryptoJS from 'crypto-js';
+import { ElMessage } from 'element-plus';
 
 const tempStore = useMainStore().useTempStore();
 
@@ -100,6 +101,10 @@ const copyShareCode = () => {
   const Key = 'JingHong';
   const encryptedId = CryptoJS.AES.encrypt(props.idName+'',Key).toString();
   navigator.clipboard.writeText( "https://qa.lonesome.cn/View?id=" + encryptedId);
+  ElMessage({
+    message: '链接复制成功',
+    type: 'success',
+  })
 }
 
 const DetailInfo = () => {