前端页面改造基本完成 待优化

web/src/components/customPic/index.vue

@@ -15,54 +15,56 @@
 </template>
 
 <script>
-import noAvatar from '@/assets/noBody.png'
-import { mapGetters } from 'vuex'
-const path = import.meta.env.VITE_BASE_API
 export default {
-  name: 'CustomPic',
-  props: {
-    picType: {
-      type: String,
-      required: false,
-      default: 'avatar'
-    },
-    picSrc: {
-      type: String,
-      required: false,
-      default: ''
-    }
-  },
-  data() {
-    return {
-      noAvatar: noAvatar,
-      path: path + '/'
-    }
-  },
-  computed: {
-    ...mapGetters('user', ['userInfo']),
-    avatar() {
-      if (this.picSrc === '') {
-        if (this.userInfo.headerImg !== '' && this.userInfo.headerImg.slice(0, 4) === 'http') {
-          return this.userInfo.headerImg
-        }
-        return this.path + this.userInfo.headerImg
-      } else {
-        if (this.picSrc !== '' && this.picSrc.slice(0, 4) === 'http') {
-          return this.picSrc
-        }
-        return this.path + this.picSrc
-      }
-    },
-    file() {
-      if (this.picSrc && this.picSrc.slice(0, 4) !== 'http') {
-        return this.path + this.picSrc
-      }
-      return this.picSrc
-    }
-  }
+  name: 'CustomPic'
 }
 </script>
 
+<script setup>
+import noAvatarPng from '@/assets/noBody.png'
+import { useStore } from 'vuex'
+import { computed, ref, defineProps } from 'vue-demi'
+const store = useStore()
+
+const props = defineProps({
+  picType: {
+    type: String,
+    required: false,
+    default: 'avatar'
+  },
+  picSrc: {
+    type: String,
+    required: false,
+    default: ''
+  }
+})
+
+const path = ref(import.meta.env.VITE_BASE_API + '/')
+const noAvatar = ref(noAvatarPng)
+const userInfo = computed(() => store.getters['user/userInfo'])
+
+const avatar = computed(() => {
+  if (props.picSrc === '') {
+    if (userInfo.value.headerImg !== '' && userInfo.value.headerImg.slice(0, 4) === 'http') {
+      return userInfo.value.headerImg
+    }
+    return path.value + userInfo.value.headerImg
+  } else {
+    if (props.picSrc !== '' && props.picSrc.slice(0, 4) === 'http') {
+      return props.picSrc
+    }
+    return path.value + props.picSrc
+  }
+})
+const file = computed(() => {
+  if (props.picSrc && props.picSrc.slice(0, 4) !== 'http') {
+    return path.value + props.picSrc
+  }
+  return props.picSrc
+})
+
+</script>
+
 <style scoped>
 .headerAvatar{
     display: flex;

web/src/components/upload/image.vue

@@ -14,17 +14,15 @@
   </div>
 </template>
 
-<script>
-const path = import.meta.env.VITE_BASE_API
-import { mapGetters } from 'vuex'
+<script setup>
 import ImageCompress from '@/utils/image'
-export default {
-  name: 'UploadImage',
-  model: {
-    prop: 'imageUrl',
-    event: 'change'
-  },
-  props: {
+import { computed, ref } from 'vue'
+import { useStore } from 'vuex'
+import { ElMessage } from 'element-plus'
+const store = useStore()
+
+const emit = defineEmits(['on-success'])
+const props = defineProps({
     imageUrl: {
       type: String,
       default: ''
@@ -37,43 +35,45 @@ export default {
       type: Number,
       default: 1920 // 图片长宽上限
     }
-  },
-  data() {
-    return {
-      path: path
-    }
-  },
-  computed: {
-    ...mapGetters('user', ['userInfo', 'token']),
-    showImageUrl() {
-      return (this.imageUrl && this.imageUrl.slice(0, 4) !== 'http') ? path + this.imageUrl : this.imageUrl
-    }
-  },
-  methods: {
-    beforeImageUpload(file) {
+  })
+
+
+const path = ref(import.meta.env.VITE_BASE_API)
+const token = computed(()=>store.getters['user/token'])
+const showImageUrl = computed(()=>(props.imageUrl && props.imageUrl.slice(0, 4) !== 'http') ? path.value + props.imageUrl : props.imageUrl)
+
+const beforeImageUpload = (file) => {
       const isJPG = file.type === 'image/jpeg'
       const isPng = file.type === 'image/png'
       if (!isJPG && !isPng) {
-        this.$message.error('上传头像图片只能是 jpg或png 格式!')
+        ElMessage.error('上传头像图片只能是 jpg或png 格式!')
         return false
       }
 
-      const isRightSize = file.size / 1024 < this.fileSize
+      const isRightSize = file.size / 1024 < props.fileSize
       if (!isRightSize) {
         // 压缩
-        const compress = new ImageCompress(file, this.fileSize, this.maxWH)
+        const compress = new ImageCompress(file, props.fileSize, props.maxWH)
         return compress.compress()
       }
       return isRightSize
-    },
-    handleImageSuccess(res) {
-      // this.imageUrl = URL.createObjectURL(file.raw);
+    }
+
+    const handleImageSuccess = (res) => {
       const { data } = res
       if (data.file) {
-        this.$emit('change', data.file.url)
-        this.$emit('on-success')
+        emit('on-success',data.file.url)
       }
     }
+
+</script>
+
+<script>
+
+export default {
+  name: 'UploadImage',
+  methods: {
+    
   }
 }
 </script>

web/src/components/warningBar/warningBar.vue

@@ -10,20 +10,15 @@
     </span>
   </div>
 </template>
-<script>
+<script setup>
 import { WarningFilled } from '@element-plus/icons'
-
-export default {
-  components: {
-    [WarningFilled.name]: WarningFilled
+import { defineProps } from 'vue'
+defineProps({
+  title: {
+    type: String,
+    default: ''
   },
-  props: {
-    title: {
-      type: String,
-      default: ''
-    },
-  }
-}
+})
 </script>
 <style lang="scss" scoped>
 .warning-bar{