"实现主题配置和作品集上传功能的优化"

package.json

@@ -24,6 +24,7 @@
     "postcss-pxtorem": "^6.1.0",
     "postcss-responsive-type": "^1.0.0",
     "vant": "^4.9.4",
+    "vconsole": "^3.15.1",
     "vue": "^3.4.31",
     "vue-router": "^4.2.5"
   },

pnpm-lock.yaml

@@ -44,6 +44,9 @@ importers:
       vant:
         specifier: ^4.9.4
         version: 4.9.4(vue@3.4.35)
+      vconsole:
+        specifier: ^3.15.1
+        version: 3.15.1
       vue:
         specifier: ^3.4.31
         version: 3.4.35
@@ -1563,6 +1566,10 @@ packages:
   convert-source-map@2.0.0:
     resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==}
 
+  copy-text-to-clipboard@3.2.0:
+    resolution: {integrity: sha512-RnJFp1XR/LOBDckxTib5Qjr/PMfkatD0MUCQgdpqS8MdKiNUzBjAQBEN6oUy+jW7LI93BBG3DtMB2KOOKpGs2Q==}
+    engines: {node: '>=12'}
+
   core-js-compat@3.38.0:
     resolution: {integrity: sha512-75LAicdLa4OJVwFxFbQR3NdnZjNgX6ILpVcVzcC4T2smerB5lELMrJQQQoWV6TiuC/vlaFqgU2tKQx9w5s0e0A==}
 
@@ -1943,6 +1950,9 @@ packages:
   ms@2.1.2:
     resolution: {integrity: sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==}
 
+  mutation-observer@1.0.3:
+    resolution: {integrity: sha512-M/O/4rF2h776hV7qGMZUH3utZLO/jK7p8rnNgGkjKUw8zCGjRQPxB8z6+5l8+VjRUQ3dNYu4vjqXYLr+U8ZVNA==}
+
   naive-ui@2.39.0:
     resolution: {integrity: sha512-5oUJzRG+rtLSH8eRU+fJvVYiQids2BxF9jp+fwGoAqHOptEINrBlgBu9uy+95RHE5FLJ7Q/z41o+qkoGnUrKxQ==}
     peerDependencies:
@@ -2477,6 +2487,9 @@ packages:
     peerDependencies:
       vue: ^3.0.0
 
+  vconsole@3.15.1:
+    resolution: {integrity: sha512-KH8XLdrq9T5YHJO/ixrjivHfmF2PC2CdVoK6RWZB4yftMykYIaXY1mxZYAic70vADM54kpMQF+dYmvl5NRNy1g==}
+
   vdirs@0.1.8:
     resolution: {integrity: sha512-H9V1zGRLQZg9b+GdMk8MXDN2Lva0zx72MPahDKc30v+DtwKjfyOSXWRIX4t2mhDubM1H09gPhWeth/BJWPHGUw==}
     peerDependencies:
@@ -4286,6 +4299,8 @@ snapshots:
 
   convert-source-map@2.0.0: {}
 
+  copy-text-to-clipboard@3.2.0: {}
+
   core-js-compat@3.38.0:
     dependencies:
       browserslist: 4.23.3
@@ -4653,6 +4668,8 @@ snapshots:
 
   ms@2.1.2: {}
 
+  mutation-observer@1.0.3: {}
+
   naive-ui@2.39.0(vue@3.4.35):
     dependencies:
       '@css-render/plugin-bem': 0.15.14(css-render@0.15.14)
@@ -5297,6 +5314,13 @@ snapshots:
       '@vue/shared': 3.4.35
       vue: 3.4.35
 
+  vconsole@3.15.1:
+    dependencies:
+      '@babel/runtime': 7.25.0
+      copy-text-to-clipboard: 3.2.0
+      core-js: 3.38.0
+      mutation-observer: 1.0.3
+
   vdirs@0.1.8(vue@3.4.35):
     dependencies:
       evtd: 0.2.4

src/components/imgModal/index.vue

@@ -1,3 +1,54 @@
+<script setup>
+import { ref } from 'vue';
+
+const show = ref(false);
+const imgUrl = ref('');
+const scale = ref(1);
+const translateX = ref(0);
+const translateY = ref(0);
+const isDragging = ref(false);
+const startX = ref(0);
+const startY = ref(0);
+const imgElement = ref(null);
+const imgContainer = ref(null);
+
+const startDrag = (event) => {
+  isDragging.value = true;
+  const e = event.type.includes('touch') ? event.touches[0] : event;
+  startX.value = e.clientX - translateX.value;
+  startY.value = e.clientY - translateY.value;
+};
+
+const onDrag = (event) => {
+  if (!isDragging.value) return;
+  const e = event.type.includes('touch') ? event.touches[0] : event;
+  translateX.value = e.clientX - startX.value;
+  translateY.value = e.clientY - startY.value;
+};
+
+const endDrag = () => {
+  isDragging.value = false;
+};
+
+const onWheel = (event) => {
+  event.preventDefault();
+  const scaleAmount = event.deltaY * -0.001;
+  scale.value = Math.min(Math.max(0.5, scale.value + scaleAmount), 3);
+};
+
+const closeModal = () => {
+  show.value = false;
+};
+
+const showImgModal = ({ url }) => {
+  imgUrl.value = url;
+  show.value = true;
+};
+
+defineExpose({
+  showImgModal,
+});
+</script>
 <template>
   <teleport to="body">
     <div v-if="show" class="modal-overlay flex flex-col">
@@ -5,31 +56,36 @@
         <img class="w-525px h-87px" src="@/assets/image/cddfdf.png" alt="">
       </div>
       <div class="bg-[url('@/assets/image/zu3327@2x.png')] w-1173px h-1489px bg-cover mt-90px flex flex-col items-center pt-75px">
-        <div class="h-1210px flex justify-center">
+        <div
-          <img :src="imgUrl" alt="" class="max-h-100% max-w-90% object-contain">
+            class="h-1210px flex justify-center overflow-hidden w-1110px"
+            ref="imgContainer"
+            @mousedown="startDrag"
+            @mousemove="onDrag"
+            @mouseup="endDrag"
+            @mouseleave="endDrag"
+            @wheel="onWheel"
+            @touchstart="startDrag"
+            @touchmove="onDrag"
+            @touchend="endDrag"
+        >
+          <img
+              :src="imgUrl"
+              alt=""
+              class="object-contain"
+              :style="{ transform: `scale(${scale}) translate(${translateX}px, ${translateY}px)` }"
+              ref="imgElement"
+          />
+        </div>
+        <div
+            class="bg-[url('@/assets/image/z3255@2x.png')] w-600px h-98px bg-cover text-#fff text-40px flex justify-center items-center mt-48px"
+            @click="closeModal"
+        >
+          关闭
         </div>
-        <div class="bg-[url('@/assets/image/z3255@2x.png')] w-600px h-98px bg-cover text-#fff text-40px flex justify-center items-center mt-48px" @click="closeModal">关闭</div>
       </div>
     </div>
   </teleport>
 </template>
-<script setup>
-import { ref,defineEmits} from 'vue';
-const show=ref(false)
-const imgUrl=ref('')
-const emit = defineEmits(['close']);
-const closeModal=()=>{
-  show.value=false
-  emit('close')
-}
-const showImgModal=({url})=>{
-  imgUrl.value=url
-  show.value=true
-}
-defineExpose({
-  showImgModal
-});
-</script>
 
 <style scoped>
 .modal-overlay {
@@ -45,15 +101,7 @@ defineExpose({
   z-index: 1000;
 }
 
-
+.object-contain {
-
+  transition: transform 0.1s ease-out;
-.modal-close {
-  position: absolute;
-  top: 10px;
-  right: 10px;
-  border: none;
-  background: none;
-  font-size: 24px;
-  cursor: pointer;
 }
 </style>

src/dict/index.js

@@ -1 +1 @@
-export const sizes = [ {minWidth:'0px',maxWidth:'768px'},    {minWidth:'768px',maxWidth:'1440px'},    {minWidth:'1440px',maxWidth: '1920px'},    {minWidth:'1920px'}]
+export const sizes = [ {minWidth:'0px',maxWidth:'768px'}, {minWidth:'0px',maxWidth:'768px'},    {minWidth:'768px',maxWidth:'1440px'},    {minWidth:'1440px',maxWidth: '1920px'},    {minWidth:'1920px'}]

src/main.js

@@ -6,7 +6,8 @@ import '@unocss/reset/sanitize/assets.css'
 import 'virtual:uno.css'
 import "vant/es/image-preview/style";
 import { ImagePreview } from 'vant';
-
+import Vconsole from 'vconsole'
+new Vconsole()
 import router from "./router/index.js";
 const app = createApp(App);
 app.use(router);
@@ -24,4 +25,18 @@ app.directive('no-space', {
         });
     }
 })
+app.directive('number-only', {
+    mounted(el) {
+        el.addEventListener('input', (event) => {
+            const { value } = event.target;
+            // 使用正则表达式限制输入格式
+            event.target.value = value.replace(/[^0-9.]/g, ''); // 只保留数字和小数点
+            if (event.target.value.indexOf('.') !== -1) {
+                // 如果已经包含小数点
+                const parts = event.target.value.split('.');
+                event.target.value = `${parts[0]}.${parts[1].slice(0, 1)}`; // 只保留一位小数
+            }
+        });
+    },
+});
 app.mount('#app');

src/store/auth/index.js

@@ -128,13 +128,14 @@ export const useAuth=createGlobalState(()=>{
         }
        const res=await loginRegister(data)
         if(res.status===0){
+            token.value=res.data.token
                 if (res.data.status===1){
                     message.warning('您已经报名')
                     await getDetail()
                     router.push('/details')
                 }else {
                     message.success('登录成功')
-                    token.value=res.data.token
+
                     router.push('/signup')
                 }
 

src/views/login/index.vue

@@ -1,42 +1,30 @@
 <script setup>
-import {useAuth} from "@/store/auth/index.js";
+import { computed } from 'vue';
-
+import { useWindowSize } from '@vueuse/core';
-import {useAdaptation} from "@/utils/self-adaption.js";
+import { useAuth } from '@/store/auth/index.js';
-import {sizes} from "@/dict/index.js";
+import size375 from '@/views/login/size375/index.vue';
-import size375 from '@/views/login/size375/index.vue'
+import size768 from '@/views/login/size768/index.vue';
-import size768 from '@/views/login/size768/index.vue'
+import size1440 from '@/views/login/size1440/index.vue';
-import size1440 from '@/views/login/size1440/index.vue'
+import size1920 from '@/views/login/size1920/index.vue';
-import size1920 from '@/views/login/size1920/index.vue'
+const { clickSendCode } = useAuth();
-import {computed} from "vue";
+const { width } = useWindowSize();
-import {useWindowSize } from '@vueuse/core';
+const viewComponent = computed(() => {
-const {clickSendCode}= useAuth()
+  const viewWidth = width.value;
-const { width, height } = useWindowSize()
+  if (viewWidth <= 450) {
-const isLandscape = computed(() => width.value > height.value)
+    return size375;
-const {currentRange }= useAdaptation(sizes)
+  } else if (viewWidth <= 1100) {
-localStorage.clear()
+    return size768;
-console.log('执行1111')
+  } else if (viewWidth <= 1500) {
-const viewComponent = computed(()=>{
+    return size1440;
-switch (currentRange.value?.minWidth){
+  } else if (viewWidth <= 1920) {
-  case '0px':
+    return size1920;
-    return size375
+  }
-  case '768px':
-    // 如果是ipad 横屏
-    if (isLandscape.value){
-      return size1440
-    }
-    return size768
-  case '1440px':
-    return size1440
-  case '1920px':
-    return size1920
-}
 })
 </script>
 
 <template>
-<component @sendCode="clickSendCode" :is="viewComponent"></component>
+  <component @sendCode="clickSendCode" :is="viewComponent" />
 </template>
 
 <style scoped lang="scss">
-
 </style>

src/views/login/size768/index.vue

@@ -15,14 +15,14 @@ const {clickSendCode,telNum,code,showTextCode ,clickLogin }= useAuth()
         <div class="flex items-center">
           <div class="text-primary text-[35px] font-bold w-[166px]">手机号</div>
           <div>
-            <input v-model="telNum" v-no-space class="pl-[61px] w-[853px] h-[85px] focus:outline-none placeholder-text-primary placeholder-text-[35px] focus: bg-[#DCE5E9] text-35px  border-none" placeholder="请输入手机号" type="text">
+            <input v-model="telNum" v-no-space class="pr-[30px] pl-[30px] w-[853px] h-[85px] focus:outline-none placeholder-text-primary placeholder-text-[35px] focus: bg-[#DCE5E9] text-35px  border-none" placeholder="请输入手机号" type="text">
           </div>
         </div>
         <div class="flex items-center mt-[45px]">
           <div class="text-primary text-[35px] font-bold w-[166px] shrink-0">验证码</div>
           <div class="flex items-center justify-between w-[853px] grow-1">
-            <input v-model="code" v-no-space class="pl-[61px] w-[528px] h-[85px] focus:outline-none placeholder-text-primary placeholder-text-[35px] focus: bg-[#DCE5E9] text-35px   border-none " placeholder="请输入验证码" type="text">
+            <input v-model="code" v-no-space class="pr-[30px] pl-[30px] w-[528px] h-[85px] focus:outline-none placeholder-text-primary placeholder-text-[35px] focus: bg-[#DCE5E9] text-35px   border-none " placeholder="请输入验证码" type="text">
-            <div class="w-[300px] h-[85px] bg-primary text-#fff flex items-center justify-center">{{showTextCode}}</div>
+            <div class="w-[300px] text-35px h-[85px] bg-primary text-#fff flex items-center justify-center">{{showTextCode}}</div>
           </div>
         </div>
         <div class="bg-[url('@/assets/image/z3255@2x.png')] w-[600px] h-[98px] bg-center bg-no-repeat bg-contain flex items-center justify-center text-#fff text-[40px] mt-[183px]" @click="clickLogin">登录/注册</div>

src/views/signup/index.vue

@@ -1,6 +1,4 @@
 <script setup>
-import {useAdaptation} from "@/utils/self-adaption.js";
-import {sizes} from "@/dict/index.js";
 import size375 from '@/views/signup/size375/index.vue'
 import size768 from '@/views/signup/size768/index.vue'
 import size1440 from '@/views/signup/size1440/index.vue'
@@ -8,23 +6,17 @@ import size1920 from '@/views/signup/size1920/index.vue'
 import {computed} from "vue";
 import {useWindowSize  } from '@vueuse/core';
 const { width, height } = useWindowSize()
-const isLandscape = computed(() => width.value > height.value)
-const {currentRange }= useAdaptation(sizes)
 
-const viewComponent = computed(()=>{
+const viewComponent = computed(() => {
-  switch (currentRange.value?.minWidth){
+  const viewWidth = width.value;
-    case '0px':
+  if (viewWidth <= 450) {
-      return size375
+    return size375;
-    case '768px':
+  } else if (viewWidth <= 1100) {
-      // 如果是ipad 横屏
+    return size768;
-      if (isLandscape.value){
+  } else if (viewWidth <= 1500) {
-        return size1440
+    return size1440;
-      }
+  } else if (viewWidth <= 1920) {
-      return size768
+    return size1920;
-    case '1440px':
-      return size1440
-    case '1920px':
-      return size1920
   }
 })
 </script>

src/views/signup/size768/index.vue

@@ -2,6 +2,7 @@
 import {useAuth} from "@/store/auth/index.js";
 import {NSelect} from "naive-ui";
 const {formData,genderOptions,clickAddWorks,removeWorks,goConfirm,deleteImg,afterRead} =useAuth()
+
 </script>
 
 <template>
@@ -9,7 +10,7 @@ const {formData,genderOptions,clickAddWorks,removeWorks,goConfirm,deleteImg,afte
       <div class="absolute top-0 left-[70px]">
         <img src="@/assets/image/gdz47@2x.png" class="w-[610px] h-[668px]" alt="">
       </div>
-    <div class="absolute bottom-[75px] left-[50%] transform translate-x-[-50%]">
+    <div class="absolute bottom-[75px] left-[50%]  translate-x-[-50%]">
       <img class="w-[620px] h-[71px]" src="@/assets/image/zu733@2x.png" alt="">
     </div>
     <div class="">
@@ -66,14 +67,14 @@ const {formData,genderOptions,clickAddWorks,removeWorks,goConfirm,deleteImg,afte
               <div class="flex flex-col">
                 <div class="text-30px text-[#2B69A1]">长度</div>
                 <div class="flex items-center mt-[10px]">
-                  <input v-no-space v-model="item.length" class="text-35px w-330px h-85px bg-[#DCE5E9] pl-30px pr-[30px] border-none placeholder-[#2B69A1] placeholder-text-35px focus:outline-none" placeholder="请输入" type="text">
+                  <input v-number-only v-no-space v-model="item.length" class="text-35px w-330px h-85px bg-[#DCE5E9] pl-30px pr-[30px] border-none placeholder-[#2B69A1] placeholder-text-35px focus:outline-none" placeholder="请输入" type="number">
                   <div class="ml-25px text-[#2B69A1] text-35px">cm</div>
                 </div>
               </div>
               <div class="flex flex-col">
                 <div class="text-30px text-[#2B69A1]">宽度</div>
                 <div class="flex items-center mt-[10px]">
-                  <input  v-no-space v-model="item.wide" class="w-330px h-85px bg-[#DCE5E9] pl-30px pr-[30px] border-none placeholder-[#2B69A1] placeholder-text-35px text-35px focus:outline-none" placeholder="请输入" type="text">
+                  <input v-number-only  v-no-space v-model="item.wide" class="w-330px h-85px bg-[#DCE5E9] pl-30px pr-[30px] border-none placeholder-[#2B69A1] placeholder-text-35px text-35px focus:outline-none" placeholder="请输入" type="number">
                   <div class="ml-25px text-[#2B69A1] text-35px">cm</div>
                 </div>
               </div>
@@ -94,8 +95,10 @@ const {formData,genderOptions,clickAddWorks,removeWorks,goConfirm,deleteImg,afte
     </div>
   </div>
 </template>
-
 <style scoped lang="scss">
+:deep(.n-base-selection-input__content){
+  color:#2B69A1 ;
+}
 :deep(.van-uploader__preview){
   margin: 0;
 }