feat: 新增图片题 (#75)

* feat: 新增图片题

.gitignore

@@ -10,6 +10,7 @@ eslintrc.cjs
 node_modules
 dist
 dist-ssr
+uploadToQiniu.js
 *.local
 
 # Editor directories and files

package.json

@@ -1,11 +1,11 @@
 {
   "name": "text-ci",
-  "version": "0.3.19",
+  "version": "0.3.2",
   "private": true,
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "build": "run-p type-check \"build-only {@}\" -- ",
+    "build": "run-p type-check \"build-only {@}\" --",
     "preview": "vite preview",
     "test:unit": "vitest",
     "build-only": "vite build",
@@ -22,7 +22,6 @@
     "naive-ui": "^2.39.0",
     "pinia": "^2.1.7",
     "pinia-plugin-persistedstate": "^3.2.1",
-    "qiniu": "^7.12.0",
     "vue": "^3.4.26",
     "vue-hooks-plus": "^2.2.1",
     "vue-router": "^4.3.2"
@@ -45,8 +44,6 @@
     "prettier": "^3.2.5",
     "tailwindcss": "^3.4.7",
     "typescript": "~5.4.0",
-    "unplugin-auto-import": "^0.18.2",
-    "unplugin-vue-components": "^0.27.4",
     "vite": "^5.2.11",
     "vitest": "^1.6.0",
     "vue-tsc": "^1.8.27"

src/pages/DetailInfo/file.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="bg-base-200 p-30 rounded-2xl shadow-lg hover:shadow-2xl hover:-translate-y-2 transform duration-700 my-30">
+  <div class="bg-base-300 p-30 rounded-2xl shadow-lg hover:shadow-2xl hover:-translate-y-2 transform duration-700 my-30">
     <div class="flex justify-between">
       <div class="flex-col">
         <div class="flex items-center gap-20">
@@ -21,8 +21,10 @@
       </div>
     </div>
     <div class="divider"></div>
-    <div class="flex-col p-5 overflow-y-auto h-60">
-      <input type="file" class="file-input file-input-bordered w-full max-w-xs shadow-md" />
+    <div class="flex-col p-5 overflow-y-auto h-160">
+      <el-upload action="#" list-type="picture-card" :auto-upload="false">
+        <el-icon><Plus /></el-icon>
+      </el-upload>
     </div>
     <div class="divider"></div>
     <div class="mt-20 flex justify-evenly items-center ">

src/pages/DetailInfo/index.vue

@@ -18,7 +18,7 @@
           </div>
           <div class="flex gap-10 my-5">
             <input type="radio" name="radio-1" class="radio-sm" :value="5" v-model="selectedOption"/>
-            <span>文件</span>
+            <span>图片</span>
           </div>
           <div class="flex gap-10 my-5">
             <input type="radio" name="radio-1" class="radio-sm" :value="3" v-model="selectedOption"/>

src/pages/View/checkbox.vue

@@ -7,7 +7,7 @@
           <span class="lg:text-xl md:text-md flex gap-5 items-center" >{{ props.title }} <el-tag type="primary" class="ml-5">多选</el-tag> <el-tag type="warning" v-if="!required">选答</el-tag> <el-tag type="danger" v-if="localUnique">唯一</el-tag></span>
         </div>
         <div class="flex items-center mt-15 ml-10">
-          <pre  class="text-sm text-gray-500 " >{{ props.describe }}</pre>
+          <pre  class="text-sm text-gray-500 break-all">{{ props.describe }}</pre>
         </div>
       </div>
       <div class="flex-col justify-center items-center">
@@ -111,10 +111,4 @@ watch(otherAnswerChecked,() => {
 </script>
 
 <style scoped>
-pre {
-  white-space: pre-wrap; /* css-3 */
-  word-wrap: break-word; /* InternetExplorer5.5+ */
-  white-space: -moz-pre-wrap; /* Mozilla,since1999 */
-  white-space: -o-pre-wrap; /* Opera7 */
-}
 </style>

src/pages/View/file.vue

@@ -1,74 +1,141 @@
 <template>
-  <div class="rounded mx-30 mt-30">
+  <div class="rounded mx-5 mt-30">
     <div class="flex justify-between">
       <div class="flex-col">
         <div class="flex items-center gap-20">
-          <span>{{ serial_num }}</span>
-          <span>{{ localTitle }}</span>
+          <span class="lg:text-xl md:text-md">{{ serial_num }}</span>
+          <span class="lg:text-xl md:text-md flex gap-5 items-center">
+            {{ title }}
+            <el-tag type="primary" class="ml-5">图片</el-tag>
+            <el-tag type="warning" v-if="!required">选答</el-tag>
+            <el-tag type="danger" v-if="unique">唯一</el-tag>
+          </span>
         </div>
-        <div class="flex items-center gap-20 my-10">
-          <span class="w-80">问题描述  | </span>
-          <span v-if="localDescribe" class="w-150">{{ localDescribe }}</span>
-          <span v-if="!localDescribe" class="w-150">此问卷没有描述</span>
-        </div>
-      </div>
-      <div class="flex-col justify-center items-center">
-        <div class="flex gap-10 ">
-          <span>必答</span>
-          <input type="checkbox" class="checkbox-sm" :disabled="true" v-model="localOptionChoose"/>
-        </div>
-        <div class="flex gap-10">
-          <span v-if="localUnique">唯一</span>
+        <div class="flex items-center mt-15 ml-10">
+          <pre class="text-sm text-gray-500 break-all">{{ describe }}</pre>
         </div>
       </div>
+      <div class="flex-col justify-center items-center"></div>
     </div>
-    <div class="divider"></div>
-    <div class="flex-col p-5 overflow-y-auto h-60">
-      <input type="file" class="file-input file-input-bordered w-full max-w-xs shadow-md" />
+    <div class="divider my-5"></div>
+    <div class="flex-col p-5 h-auto">
+      <!-- 开发环境下 action 前面加/api-->
+      <el-upload
+          action='/api/user/upload/img'
+          list-type="picture-card"
+          :auto-upload="true"
+          :on-success="handleUploadSuccess"
+          :on-remove="handleRemove"
+          :file-list="fileList"
+          :limit="1"
+          :on-exceed="handleExceed"
+          :before-upload="beforeUpload"
+          name="img"
+      >
+        <el-icon ><Plus /></el-icon>
+
+        <template #file="{ file }">
+          <div>
+            <img class="el-upload-list__item-thumbnail" :src="file.url"  />
+            <span class="el-upload-list__item-actions">
+          <span
+              class="el-upload-list__item-preview"
+              @click="handlePictureCardPreview(<UploadFile>file)"
+          >
+            <el-icon><ZoomIn /></el-icon>
+          </span>
+          <span
+              v-if="!disabled"
+              class="el-upload-list__item-delete"
+              @click="handleRemove(<UploadFile>file)"
+          >
+            <el-icon><Delete /></el-icon>
+          </span>
+        </span>
+          </div>
+        </template>
+      </el-upload>
+
+      <el-dialog v-model="dialogVisible">
+        <img w-full :src="dialogImageUrl" alt="Preview Image" />
+      </el-dialog>
+
     </div>
-    <div class="divider"></div>
   </div>
-
 </template>
 
 <script setup lang="ts">
-import {defineEmits, ref, watch} from "vue";
-
-const props = defineProps<{
-  serial_num: number,
-  title?: string,
-  optionChoose:boolean
-  describe: string,
-  unique:boolean
-}>()
-const emits = defineEmits(['update:content']);
-
-const localTitle = ref<string>(props.title || '');
-const localOptionChoose = ref<boolean>(props.optionChoose);
-const localDescribe = ref<string>(props.describe || '');
-const localUnique = ref<boolean>(props.unique);
-watch(() => props.title, (newTitle) => {
-  localTitle.value = newTitle || '';
-});
+import { ref, watch, defineProps, defineEmits } from 'vue';
+import type { UploadFile, UploadRequestOptions } from 'element-plus'
+import {ElMessage} from "element-plus";
+import { Delete, Download, Plus, ZoomIn } from '@element-plus/icons-vue'
 
-watch(() => props.optionChoose, (newOptionChoose) => {
-  localOptionChoose.value = newOptionChoose;
-});
+const dialogImageUrl = ref('')
+const dialogVisible = ref(false)
+const disabled = ref(false)
+const fileList = ref<UploadFile[]>([])
+
+const handlePictureCardPreview = (file: UploadFile) => {
+  dialogImageUrl.value = file.url!
+  dialogVisible.value = true
+}
+
+// 处理删除
+const handleRemove = (file: UploadFile) => {
+  fileList.value = [] // 清空列表，确保只显示一张图片
+}
 
-watch(() => props.unique, (newUnique) => {
-  localUnique.value = newUnique;
-});
 
-watch(() => props.describe, (newLocalDescribe) => {
-  localDescribe.value = newLocalDescribe
+
+// 上传成功回调
+const handleUploadSuccess = (response: any, file: UploadFile) => {
+  if(response.code == 200) {
+    ElMessage.success('上传成功！')
+    fileList.value = [{ ...file, url: response.data }]
+    localAnswer.value = response.data
+  } else {
+    ElMessage.error(response.msg)
+  }
+
+}
+
+
+const props = defineProps({
+  serial_num: Number,
+  title: String,
+  required: Boolean,
+  unique: Boolean,
+  describe: String,
+  answer: String,
 });
 
-watch(localTitle, (newTitle) => {
-  emits('update:title', newTitle);
+const handleExceed = () => {
+  ElMessage.warning('最多只能上传一张图片！');
+}
+
+  const beforeUpload = (file: UploadFile) => {
+    const isImage = file.type.startsWith('image/');
+    if (!isImage) {
+      ElMessage.error('上传的文件必须是图片!');
+    }
+    return isImage; // 如果返回 false，则会取消上传
+  };
+
+const emits = defineEmits(['update:answer']);
+
+const localAnswer = ref(props.answer);
+
+watch(localAnswer, (newAnswer) => {
+  console.log(newAnswer)
+  emits('update:answer', newAnswer);
 });
 
 </script>
 
+<style scoped>
+</style>
+
+
 
 <style scoped>
 

src/pages/View/fill.vue

@@ -12,7 +12,7 @@
           </span>
         </div>
         <div class="flex items-center mt-15 ml-10">
-          <pre class="text-sm text-gray-500 ">{{ describe }}</pre>
+          <pre class="text-sm text-gray-500 break-all">{{ describe }}</pre>
         </div>
       </div>
       <div class="flex-col justify-center items-center"></div>
@@ -72,10 +72,4 @@ const pal = computed(() => {
 </script>
 
 <style scoped>
-pre {
-  white-space: pre-wrap; /* css-3 */
-  word-wrap: break-word; /* InternetExplorer5.5+ */
-  white-space: -moz-pre-wrap; /* Mozilla,since1999 */
-  white-space: -o-pre-wrap; /* Opera7 */
-}
 </style>

vite.config.ts

@@ -1,26 +1,18 @@
 import { fileURLToPath, URL } from 'node:url'
+
 import { defineConfig } from 'vite'
-import AutoImport from 'unplugin-auto-import/vite'
 import vue from '@vitejs/plugin-vue'
-import Components from 'unplugin-vue-components/vite'
-import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
 
 export default defineConfig({
   plugins: [
     vue(),
-    AutoImport({
-      resolvers: [ElementPlusResolver()],
-    }),
-    Components({
-      resolvers: [ElementPlusResolver()],
-    }),
   ],
-  server: {
-    proxy: {
-      '/api': {
-        target: "https://qa.qianqianzyk.top",
+  server:{
+    proxy:{
+      '/api':{
+        target:"https://qa.qianqianzyk.top",
         changeOrigin: true,
-        rewrite: (path) => path.replace(/^\/api/, '')
+        rewrite:(path) => path.replace(/^\/api/,'')
       }
     }
   },