diff --git a/src/components/AbsoluteContainer/index.vue b/src/components/AbsoluteContainer/index.vue
index 846d5535..d978f043 100644
--- a/src/components/AbsoluteContainer/index.vue
+++ b/src/components/AbsoluteContainer/index.vue
@@ -4,18 +4,6 @@
     </div>
 </template>
 
-<script>
-export default {
-    name: 'AbsoluteContainer',
-    props: {},
-    data() {
-        return {}
-    },
-    mounted() {},
-    methods: {}
-}
-</script>
-
 <style lang="scss" scoped>
 .absolute-container {
     position: absolute;
diff --git a/src/components/Auth/index.vue b/src/components/Auth/index.vue
index b508ea19..72e8652f 100644
--- a/src/components/Auth/index.vue
+++ b/src/components/Auth/index.vue
@@ -5,21 +5,18 @@
     </div>
 </template>
 
-<script>
+<script setup>
 import { auth } from '@/util'
+import { defineProps } from 'vue'
 
-export default {
-    name: 'Auth',
-    props: {
-        value: {
-            type: [String, Array],
-            default: ''
-        }
-    },
-    methods: {
-        check() {
-            return auth(this.value)
-        }
+const props = defineProps({
+    value: {
+        type: [String, Array],
+        default: ''
     }
+})
+
+function check() {
+    return auth(props.value)
 }
 </script>
diff --git a/src/components/AuthAll/index.vue b/src/components/AuthAll/index.vue
index 2aa834eb..cea3395a 100644
--- a/src/components/AuthAll/index.vue
+++ b/src/components/AuthAll/index.vue
@@ -5,21 +5,18 @@
     </div>
 </template>
 
-<script>
+<script setup>
 import { authAll } from '@/util'
+import { defineProps } from 'vue'
 
-export default {
-    name: 'AuthAll',
-    props: {
-        value: {
-            type: Array,
-            default: () => []
-        }
-    },
-    methods: {
-        check() {
-            return authAll(this.value)
-        }
+const props = defineProps({
+    value: {
+        type: Array,
+        default: () => []
     }
+})
+
+function check() {
+    return authAll(props.value)
 }
 </script>
diff --git a/src/components/BatchActionBar/index.vue b/src/components/BatchActionBar/index.vue
index d580a5d7..92371205 100644
--- a/src/components/BatchActionBar/index.vue
+++ b/src/components/BatchActionBar/index.vue
@@ -8,48 +8,42 @@
     </div>
 </template>
 
-<script>
-export default {
-    name: 'BatchActionBar',
-    props: {
-        data: {
-            type: Array,
-            default: () => []
-        },
-        selectionData: {
-            type: Array,
-            default: () => []
+<script setup>
+import { defineProps, defineEmits, computed } from 'vue'
+
+const props = defineProps({
+    data: {
+        type: Array,
+        default: () => []
+    },
+    selectionData: {
+        type: Array,
+        default: () => []
+    }
+})
+
+const emit = defineEmits(['check-all', 'check-null'])
+
+const checkAll = computed({
+    get: function() {
+        let flag = false
+        if (props.data.length != 0 && props.data.length == props.selectionData.length) {
+            flag = true
         }
+        return flag
     },
-    emits: ['check-all', 'check-null'],
-    data() {
-        return {}
-    },
-    computed: {
-        checkAll: {
-            get: function() {
-                let flag = false
-                if (this.data.length != 0 && this.data.length == this.selectionData.length) {
-                    flag = true
-                }
-                return flag
-            },
-            set: function(newVal) {
-                newVal ? this.$emit('check-all') : this.$emit('check-null')
-            }
-        },
-        isIndeterminate() {
-            let flag = false
-            if (this.selectionData.length > 0 && this.selectionData.length < this.data.length) {
-                flag = true
-            }
-            return flag
-        }
-    },
-    created() {},
-    mounted() {},
-    methods: {}
-}
+    set: function(newVal) {
+        newVal ? emit('check-all') : emit('check-null')
+    }
+})
+
+const isIndeterminate = computed(() => {
+    let flag = false
+    if (props.selectionData.length > 0 && props.selectionData.length < props.data.length) {
+        flag = true
+    }
+    return flag
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/CascaderArea/index.vue b/src/components/CascaderArea/index.vue
index 6722d236..f1cc6728 100644
--- a/src/components/CascaderArea/index.vue
+++ b/src/components/CascaderArea/index.vue
@@ -1,91 +1,88 @@
 <template>
     <div>
-        <el-cascader v-model="myValue" :options="options" :props="props" :size="size" :disabled="disabled" clearable filterable />
+        <el-cascader v-model="myValue" :options="data.options" :props="data.props" :size="size" :disabled="disabled" clearable filterable />
     </div>
 </template>
 
-<script>
+<script setup>
 import area from '@/util/area'
+import { defineProps, defineEmits, ref, computed } from 'vue'
 
-export default {
-    name: 'CascaderArea',
+const props = defineProps({
+    // 传入数据为中文数组，例如：['河北省', '唐山市', '市辖区']
+    modelValue: {
+        type: Array,
+        default: () => []
+    },
+    size: {
+        type: String,
+        default: ''
+    },
+    disabled: {
+        type: Boolean,
+        default: false
+    }
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const data = ref({
+    options: area,
     props: {
-        // 传入数据为中文数组，例如：['河北省', '唐山市', '市辖区']
-        modelValue: {
-            type: Array,
-            default: () => []
-        },
-        size: {
-            type: String,
-            default: ''
-        },
-        disabled: {
-            type: Boolean,
-            default: false
-        }
-    },
-    emits: ['update:modelValue'],
-    data() {
-        return {
-            options: area,
-            props: {
-                value: 'code',
-                label: 'name'
-            }
-        }
-    },
-    computed: {
-        myValue: {
-            // 将中文转成 code 码
-            get: function() {
-                const myValue = []
-                if (this.modelValue.length === 3) {
-                    const [pName, cName, aName] = this.modelValue
-                    area.map(p => {
-                        if (p.name === pName) {
-                            myValue.push(p.code)
-                            p.children.map(c => {
-                                if (c.name === cName) {
-                                    myValue.push(c.code)
-                                    c.children.map(a => {
-                                        if (a.name === aName) {
-                                            myValue.push(a.code)
-                                        }
-                                    })
+        value: 'code',
+        label: 'name'
+    }
+})
+
+const myValue = computed({
+    // 将中文转成 code 码
+    get: () => {
+        const myValue = []
+        if (props.modelValue.length === 3) {
+            const [pName, cName, aName] = props.modelValue
+            area.map(p => {
+                if (p.name === pName) {
+                    myValue.push(p.code)
+                    p.children.map(c => {
+                        if (c.name === cName) {
+                            myValue.push(c.code)
+                            c.children.map(a => {
+                                if (a.name === aName) {
+                                    myValue.push(a.code)
                                 }
                             })
                         }
                     })
                 }
-                return myValue
-            },
-            // 将 code 码转成中文
-            set: function(value) {
-                if (value) {
-                    let [pCode, cCode, aCode] = value
-                    area.map(p => {
-                        if (p.code === pCode) {
-                            pCode = p.name
-                            p.children.map(c => {
-                                if (c.code === cCode) {
-                                    cCode = c.name
-                                    c.children.map(a => {
-                                        if (a.code === aCode) {
-                                            aCode = a.name
-                                        }
-                                    })
+            })
+        }
+        return myValue
+    },
+    // 将 code 码转成中文
+    set: value => {
+        if (value) {
+            let [pCode, cCode, aCode] = value
+            area.map(p => {
+                if (p.code === pCode) {
+                    pCode = p.name
+                    p.children.map(c => {
+                        if (c.code === cCode) {
+                            cCode = c.name
+                            c.children.map(a => {
+                                if (a.code === aCode) {
+                                    aCode = a.name
                                 }
                             })
                         }
                     })
-                    this.$emit('update:modelValue', [pCode, cCode, aCode])
-                } else {
-                    this.$emit('update:modelValue', [])
                 }
-            }
+            })
+            emit('update:modelValue', [pCode, cCode, aCode])
+        } else {
+            emit('update:modelValue', [])
         }
     }
-}
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/Copyright/index.vue b/src/components/Copyright/index.vue
index 6fcb8709..5c57d03b 100644
--- a/src/components/Copyright/index.vue
+++ b/src/components/Copyright/index.vue
@@ -7,12 +7,6 @@
     </footer>
 </template>
 
-<script>
-export default {
-    name: 'Copyright'
-}
-</script>
-
 <style lang="scss" scoped>
 footer {
     margin: 40px 0 20px 0;
diff --git a/src/components/Editor/index.vue b/src/components/Editor/index.vue
index a9fc9043..e11942d8 100644
--- a/src/components/Editor/index.vue
+++ b/src/components/Editor/index.vue
@@ -4,7 +4,7 @@
     </div>
 </template>
 
-<script>
+<script setup>
 import tinymce from 'tinymce/tinymce'
 import TinymceEditor from '@tinymce/tinymce-vue'
 import 'tinymce/themes/silver/theme'
@@ -28,71 +28,66 @@ import 'tinymce/plugins/wordcount'
 import 'tinymce/plugins/code'
 import 'tinymce/plugins/searchreplace'
 
-export default {
-    name: 'Editor',
-    components: {
-        TinymceEditor
+import { defineProps, defineEmits, ref, computed, watch, onMounted } from 'vue'
+
+const props = defineProps({
+    modelValue: {
+        type: String,
+        default: ''
     },
-    props: {
-        modelValue: {
-            type: String,
-            default: ''
-        },
-        setting: {
-            type: Object,
-            default: () => {}
-        },
-        disabled: {
-            type: Boolean,
-            default: false
-        }
+    setting: {
+        type: Object,
+        default: () => {}
     },
-    emits: ['update:modelValue'],
-    data() {
-        return {
-            defaultSetting: {
-                language_url: 'tinymce/langs/zh_CN.js',
-                language: 'zh_CN',
-                skin_url: 'tinymce/skins/ui/oxide',
-                min_height: 250,
-                max_height: 600,
-                selector: 'textarea',
-                plugins: 'autolink autoresize contextmenu fullscreen hr image imagetools insertdatetime link lists media preview table textcolor wordcount code searchreplace',
-                toolbar: 'undo redo | formatselect | bold italic strikethrough forecolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | hr link image media table insertdatetime searchreplace removeformat | preview code fullscreen',
-                branding: false,
-                menubar: false,
-                toolbar_mode: 'sliding',
-                insertdatetime_formats: [
-                    '%Y年%m月%d日',
-                    '%H点%M分%S秒',
-                    '%Y-%m-%d',
-                    '%H:%M:%S'
-                ],
-                images_upload_handler: (blobInfo, success) => {
-                    const img = 'data:image/jpeg;base64,' + blobInfo.base64()
-                    success(img)
-                }
-            },
-            myValue: this.modelValue
-        }
-    },
-    computed: {
-        completeSetting() {
-            return Object.assign(this.defaultSetting, this.setting)
-        }
-    },
-    watch: {
-        myValue(newValue) {
-            this.$emit('update:modelValue', newValue)
-        },
-        value(newValue) {
-            this.myValue = newValue
-        }
-    },
-    mounted() {
-        tinymce.init({})
+    disabled: {
+        type: Boolean,
+        default: false
     }
-}
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const defaultSetting = ref({
+    language_url: 'tinymce/langs/zh_CN.js',
+    language: 'zh_CN',
+    skin_url: 'tinymce/skins/ui/oxide',
+    min_height: 250,
+    max_height: 600,
+    selector: 'textarea',
+    plugins: 'autolink autoresize contextmenu fullscreen hr image imagetools insertdatetime link lists media preview table textcolor wordcount code searchreplace',
+    toolbar: 'undo redo | formatselect | bold italic strikethrough forecolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | hr link image media table insertdatetime searchreplace removeformat | preview code fullscreen',
+    branding: false,
+    menubar: false,
+    toolbar_mode: 'sliding',
+    insertdatetime_formats: [
+        '%Y年%m月%d日',
+        '%H点%M分%S秒',
+        '%Y-%m-%d',
+        '%H:%M:%S'
+    ],
+    images_upload_handler: (blobInfo, success) => {
+        const img = 'data:image/jpeg;base64,' + blobInfo.base64()
+        success(img)
+    }
+})
+
+const myValue = ref(props.modelValue)
+
+const completeSetting = computed(() => {
+    return Object.assign(defaultSetting.value, props.setting)
+})
+
+watch(() => myValue.value, newValue => {
+    emit('update:modelValue', newValue)
+})
+
+watch(() => props.modelValue, newValue => {
+    myValue.value = newValue
+})
+
+onMounted(() => {
+    tinymce.init({})
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/FileUpload/index.vue b/src/components/FileUpload/index.vue
index c1af6114..d775c62d 100644
--- a/src/components/FileUpload/index.vue
+++ b/src/components/FileUpload/index.vue
@@ -24,69 +24,70 @@
     </el-upload>
 </template>
 
-<script>
-export default {
-    name: 'FileUpload',
-    props: {
-        action: {
-            type: String,
-            required: true
-        },
-        headers: {
-            type: Object,
-            default: () => {}
-        },
-        data: {
-            type: Object,
-            default: () => {}
-        },
-        name: {
-            type: String,
-            default: 'file'
-        },
-        size: {
-            type: Number,
-            default: 2
-        },
-        max: {
-            type: Number,
-            default: 3
-        },
-        files: {
-            type: Array,
-            default: () => []
-        },
-        notip: {
-            type: Boolean,
-            default: false
-        },
-        ext: {
-            type: Array,
-            default: () => ['zip', 'rar']
-        }
+<script setup>
+import { defineProps, defineEmits, getCurrentInstance } from 'vue'
+
+const { proxy } = getCurrentInstance()
+
+const props = defineProps({
+    action: {
+        type: String,
+        required: true
     },
-    emits: ['on-success'],
-    methods: {
-        beforeUpload(file) {
-            const fileName = file.name.split('.')
-            const fileExt = fileName[fileName.length - 1]
-            const isTypeOk = this.ext.indexOf(fileExt) >= 0
-            const isSizeOk = file.size / 1024 / 1024 < this.size
-            if (!isTypeOk) {
-                this.$message.error(`上传文件只支持 ${ this.ext.join(' / ') } 格式！`)
-            }
-            if (!isSizeOk) {
-                this.$message.error(`上传文件大小不能超过 ${this.size}MB！`)
-            }
-            return isTypeOk && isSizeOk
-        },
-        onExceed() {
-            this.$message.warning('文件上传超过限制')
-        },
-        onSuccess(res, file) {
-            this.$emit('on-success', res, file)
-        }
+    headers: {
+        type: Object,
+        default: () => {}
+    },
+    data: {
+        type: Object,
+        default: () => {}
+    },
+    name: {
+        type: String,
+        default: 'file'
+    },
+    size: {
+        type: Number,
+        default: 2
+    },
+    max: {
+        type: Number,
+        default: 3
+    },
+    files: {
+        type: Array,
+        default: () => []
+    },
+    notip: {
+        type: Boolean,
+        default: false
+    },
+    ext: {
+        type: Array,
+        default: () => ['zip', 'rar']
     }
+})
+
+const emit = defineEmits(['on-success'])
+
+function beforeUpload(file) {
+    const fileName = file.name.split('.')
+    const fileExt = fileName[fileName.length - 1]
+    const isTypeOk = props.ext.indexOf(fileExt) >= 0
+    const isSizeOk = file.size / 1024 / 1024 < props.size
+    if (!isTypeOk) {
+        proxy.$message.error(`上传文件只支持 ${ props.ext.join(' / ') } 格式！`)
+    }
+    if (!isSizeOk) {
+        proxy.$message.error(`上传文件大小不能超过 ${props.size}MB！`)
+    }
+    return isTypeOk && isSizeOk
+}
+function onExceed() {
+    proxy.$message.warning('文件上传超过限制')
+}
+function onSuccess(res, file) {
+    emit('on-success', res, file)
 }
 </script>
 
diff --git a/src/components/FixedActionBar/index.vue b/src/components/FixedActionBar/index.vue
index f9df51fc..6c16fcf6 100644
--- a/src/components/FixedActionBar/index.vue
+++ b/src/components/FixedActionBar/index.vue
@@ -1,43 +1,37 @@
 <template>
-    <div :class="{
-        'actionbar': true,
-        'shadow': !isBottom
-    }" data-fixed-calc-width
-    >
+    <div class="actionbar" :class="{'shadow': !data.isBottom}" data-fixed-calc-width>
         <slot />
     </div>
 </template>
 
-<script>
-export default {
-    name: 'FixedActionBar',
-    data() {
-        return {
-            isBottom: true
-        }
-    },
-    mounted() {
-        this.onScroll()
-        window.addEventListener('scroll', this.onScroll)
-    },
-    unmounted() {
-        window.removeEventListener('scroll', this.onScroll)
-    },
-    methods: {
-        onScroll() {
-            // 变量scrollTop是滚动条滚动时，滚动条上端距离顶部的距离
-            var scrollTop = document.documentElement.scrollTop || document.body.scrollTop
-            // 变量windowHeight是可视区的高度
-            var windowHeight = document.documentElement.clientHeight || document.body.clientHeight
-            // 变量scrollHeight是滚动条的总高度（当前可滚动的页面的总高度）
-            var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight
-            // 滚动条到底部
-            if (Math.ceil(scrollTop + windowHeight) >= scrollHeight) {
-                this.isBottom = true
-            } else {
-                this.isBottom = false
-            }
-        }
+<script setup>
+import { ref, onMounted, onUnmounted } from 'vue'
+
+const data = ref({
+    isBottom: true
+})
+
+onMounted(() => {
+    onScroll()
+    window.addEventListener('scroll', onScroll)
+})
+
+onUnmounted(() => {
+    window.removeEventListener('scroll', onScroll)
+})
+
+function onScroll() {
+    // 变量scrollTop是滚动条滚动时，滚动条上端距离顶部的距离
+    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop
+    // 变量windowHeight是可视区的高度
+    var windowHeight = document.documentElement.clientHeight || document.body.clientHeight
+    // 变量scrollHeight是滚动条的总高度（当前可滚动的页面的总高度）
+    var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight
+    // 滚动条到底部
+    if (Math.ceil(scrollTop + windowHeight) >= scrollHeight) {
+        data.value.isBottom = true
+    } else {
+        data.value.isBottom = false
     }
 }
 </script>
diff --git a/src/components/ImagePreview/index.vue b/src/components/ImagePreview/index.vue
index b8bb04b8..6fb255f6 100644
--- a/src/components/ImagePreview/index.vue
+++ b/src/components/ImagePreview/index.vue
@@ -8,40 +8,31 @@
     </el-image>
 </template>
 
-<script>
-export default {
-    name: 'ImagePreview',
-    props: {
-        src: {
-            type: String,
-            required: true
-        },
-        width: {
-            type: [Number, String],
-            default: ''
-        },
-        height: {
-            type: [Number, String],
-            default: ''
-        }
+<script setup>
+import { defineProps, computed } from 'vue'
+
+const props = defineProps({
+    src: {
+        type: String,
+        required: true
     },
-    data() {
-        return {
-            dialogVisible: false
-        }
+    width: {
+        type: [Number, String],
+        default: ''
     },
-    computed: {
-        realWidth() {
-            return typeof this.width == 'string' ? this.width : `${this.width}px`
-        },
-        realHeight() {
-            return typeof this.height == 'string' ? this.height : `${this.height}px`
-        }
-    },
-    created() {},
-    mounted() {},
-    methods: {}
-}
+    height: {
+        type: [Number, String],
+        default: ''
+    }
+})
+
+const realWidth = computed(() => {
+    return typeof props.width == 'string' ? props.width : `${props.width}px`
+})
+
+const realHeight = computed(() => {
+    return typeof props.height == 'string' ? props.height : `${props.height}px`
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/ImageUpload/index.vue b/src/components/ImageUpload/index.vue
index 0365aa0a..944c2868 100644
--- a/src/components/ImageUpload/index.vue
+++ b/src/components/ImageUpload/index.vue
@@ -31,9 +31,9 @@
                     </div>
                 </div>
             </div>
-            <div v-show="progress.percent" class="progress" :style="`width:${width}px;height:${height}px;`">
-                <el-image :src="progress.preview" :style="`width:${width}px;height:${height}px;`" fit="fill" />
-                <el-progress type="circle" :width="Math.min(width, height) * 0.8" :percentage="progress.percent" />
+            <div v-show="data.progress.percent" class="progress" :style="`width:${width}px;height:${height}px;`">
+                <el-image :src="data.progress.preview" :style="`width:${width}px;height:${height}px;`" fit="fill" />
+                <el-progress type="circle" :width="Math.min(width, height) * 0.8" :percentage="data.progress.percent" />
             </div>
         </el-upload>
         <div v-if="!notip" class="el-upload__tip">
@@ -41,103 +41,107 @@
                 <el-alert :title="`上传图片支持 ${ ext.join(' / ') } 格式，且图片大小不超过 ${ size }MB，建议图片尺寸为 ${width}*${height}`" type="info" show-icon :closable="false" />
             </div>
         </div>
-        <el-image-viewer v-if="imageViewerVisible" :url-list="[url]" @close="() => {imageViewerVisible = false}" />
+        <el-image-viewer v-if="data.imageViewerVisible" :url-list="[url]" @close="previewClose" />
     </div>
 </template>
 
-<script>
-export default {
-    name: 'ImageUpload',
-    props: {
-        action: {
-            type: String,
-            required: true
-        },
-        headers: {
-            type: Object,
-            default: () => {}
-        },
-        data: {
-            type: Object,
-            default: () => {}
-        },
-        name: {
-            type: String,
-            default: 'file'
-        },
-        url: {
-            type: String,
-            default: ''
-        },
-        size: {
-            type: Number,
-            default: 2
-        },
-        width: {
-            type: Number,
-            default: 150
-        },
-        height: {
-            type: Number,
-            default: 150
-        },
-        placeholder: {
-            type: String,
-            default: ''
-        },
-        notip: {
-            type: Boolean,
-            default: false
-        },
-        ext: {
-            type: Array,
-            default: () => ['jpg', 'png', 'gif', 'bmp']
-        }
+<script setup>
+import { defineProps, defineEmits, ref, getCurrentInstance } from 'vue'
+
+const { proxy } = getCurrentInstance()
+
+const props = defineProps({
+    action: {
+        type: String,
+        required: true
     },
-    emits: ['update:url', 'on-success'],
-    data() {
-        return {
-            imageViewerVisible: false,
-            progress: {
-                preview: '',
-                percent: 0
-            }
-        }
+    headers: {
+        type: Object,
+        default: () => {}
     },
-    methods: {
-        // 移除
-        remove() {
-            this.$emit('update:url', '')
-        },
-        beforeUpload(file) {
-            const fileName = file.name.split('.')
-            const fileExt = fileName[fileName.length - 1]
-            const isTypeOk = this.ext.indexOf(fileExt) >= 0
-            const isSizeOk = file.size / 1024 / 1024 < this.size
-            if (!isTypeOk) {
-                this.$message.error(`上传图片只支持 ${ this.ext.join(' / ') } 格式！`)
-            }
-            if (!isSizeOk) {
-                this.$message.error(`上传图片大小不能超过 ${this.size}MB！`)
-            }
-            if (isTypeOk && isSizeOk) {
-                this.progress.preview = URL.createObjectURL(file)
-            }
-            return isTypeOk && isSizeOk
-        },
-        onProgress(file) {
-            this.progress.percent = ~~file.percent
-            if (this.progress.percent == 100) {
-                setTimeout(() => {
-                    this.progress.preview = ''
-                    this.progress.percent = 0
-                }, 1000)
-            }
-        },
-        onSuccess(res) {
-            this.$emit('on-success', res)
-        }
+    data: {
+        type: Object,
+        default: () => {}
+    },
+    name: {
+        type: String,
+        default: 'file'
+    },
+    url: {
+        type: String,
+        default: ''
+    },
+    size: {
+        type: Number,
+        default: 2
+    },
+    width: {
+        type: Number,
+        default: 150
+    },
+    height: {
+        type: Number,
+        default: 150
+    },
+    placeholder: {
+        type: String,
+        default: ''
+    },
+    notip: {
+        type: Boolean,
+        default: false
+    },
+    ext: {
+        type: Array,
+        default: () => ['jpg', 'png', 'gif', 'bmp']
     }
+})
+
+const emit = defineEmits(['update:url', 'on-success'])
+
+const data = ref({
+    imageViewerVisible: false,
+    progress: {
+        preview: '',
+        percent: 0
+    }
+})
+
+// 关闭预览
+function previewClose() {
+    data.value.imageViewerVisible = false
+}
+// 移除
+function remove() {
+    emit('update:url', '')
+}
+function beforeUpload(file) {
+    const fileName = file.name.split('.')
+    const fileExt = fileName[fileName.length - 1]
+    const isTypeOk = props.ext.indexOf(fileExt) >= 0
+    const isSizeOk = file.size / 1024 / 1024 < props.size
+    if (!isTypeOk) {
+        proxy.$message.error(`上传图片只支持 ${ props.ext.join(' / ') } 格式！`)
+    }
+    if (!isSizeOk) {
+        proxy.$message.error(`上传图片大小不能超过 ${props.size}MB！`)
+    }
+    if (isTypeOk && isSizeOk) {
+        data.value.progress.preview = URL.createObjectURL(file)
+    }
+    return isTypeOk && isSizeOk
+}
+function onProgress(file) {
+    data.value.progress.percent = ~~file.percent
+    if (data.value.progress.percent == 100) {
+        setTimeout(() => {
+            data.value.progress.preview = ''
+            data.value.progress.percent = 0
+        }, 1000)
+    }
+}
+function onSuccess(res) {
+    emit('on-success', res)
 }
 </script>
 
diff --git a/src/components/ImagesUpload/index.vue b/src/components/ImagesUpload/index.vue
index 0d614ceb..08693d11 100644
--- a/src/components/ImagesUpload/index.vue
+++ b/src/components/ImagesUpload/index.vue
@@ -35,9 +35,9 @@
             <div class="image-slot" :style="`width:${width}px;height:${height}px;`">
                 <i class="el-icon-plus" />
             </div>
-            <div v-show="progress.percent" class="progress" :style="`width:${width}px;height:${height}px;`">
-                <el-image :src="progress.preview" :style="`width:${width}px;height:${height}px;`" fit="fill" />
-                <el-progress type="circle" :width="Math.min(width, height) * 0.8" :percentage="progress.percent" />
+            <div v-show="data.progress.percent" class="progress" :style="`width:${width}px;height:${height}px;`">
+                <el-image :src="data.progress.preview" :style="`width:${width}px;height:${height}px;`" fit="fill" />
+                <el-progress type="circle" :width="Math.min(width, height) * 0.8" :percentage="data.progress.percent" />
             </div>
         </el-upload>
         <div v-if="!notip" class="el-upload__tip">
@@ -45,124 +45,128 @@
                 <el-alert :title="`上传图片支持 ${ ext.join(' / ') } 格式，单张图片大小不超过 ${ size }MB，建议图片尺寸为 ${width}*${height}，且图片数量不超过 ${ max } 张`" type="info" show-icon :closable="false" />
             </div>
         </div>
-        <el-image-viewer v-if="imageViewerVisible" :url-list="url" :initial-index="dialogImageIndex" @close="() => {imageViewerVisible = false}" />
+        <el-image-viewer v-if="data.imageViewerVisible" :url-list="url" :initial-index="data.dialogImageIndex" @close="previewClose" />
     </div>
 </template>
 
-<script>
-export default {
-    name: 'ImagesUpload',
-    props: {
-        action: {
-            type: String,
-            required: true
-        },
-        headers: {
-            type: Object,
-            default: () => {}
-        },
-        data: {
-            type: Object,
-            default: () => {}
-        },
-        name: {
-            type: String,
-            default: 'file'
-        },
-        url: {
-            type: Array,
-            default: () => []
-        },
-        max: {
-            type: Number,
-            default: 3
-        },
-        size: {
-            type: Number,
-            default: 2
-        },
-        width: {
-            type: Number,
-            default: 150
-        },
-        height: {
-            type: Number,
-            default: 150
-        },
-        placeholder: {
-            type: String,
-            default: ''
-        },
-        notip: {
-            type: Boolean,
-            default: false
-        },
-        ext: {
-            type: Array,
-            default: () => ['jpg', 'png', 'gif', 'bmp']
-        }
+<script setup>
+import { defineProps, defineEmits, ref, getCurrentInstance } from 'vue'
+
+const { proxy } = getCurrentInstance()
+
+const props = defineProps({
+    action: {
+        type: String,
+        required: true
     },
-    emits: ['update:url', 'on-success'],
-    data() {
-        return {
-            dialogImageIndex: 0,
-            imageViewerVisible: false,
-            progress: {
-                preview: '',
-                percent: 0
-            }
-        }
+    headers: {
+        type: Object,
+        default: () => {}
     },
-    methods: {
-        // 预览
-        preview(index) {
-            this.dialogImageIndex = index
-            this.imageViewerVisible = true
-        },
-        // 移除
-        remove(index) {
-            let url = this.url
-            url.splice(index, 1)
-            this.$emit('update:url', url)
-        },
-        // 移动
-        move(index, type) {
-            let url = this.url
-            if (type == 'left' && index != 0) {
-                url[index] = url.splice(index - 1, 1, url[index])[0]
-            }
-            if (type == 'right' && index != url.length - 1) {
-                url[index] = url.splice(index + 1, 1, url[index])[0]
-            }
-            this.$emit('update:url', url)
-        },
-        beforeUpload(file) {
-            const fileName = file.name.split('.')
-            const fileExt = fileName[fileName.length - 1]
-            const isTypeOk = this.ext.indexOf(fileExt) >= 0
-            const isSizeOk = file.size / 1024 / 1024 < this.size
-            if (!isTypeOk) {
-                this.$message.error(`上传图片只支持 ${ this.ext.join(' / ') } 格式！`)
-            }
-            if (!isSizeOk) {
-                this.$message.error(`上传图片大小不能超过 ${this.size}MB！`)
-            }
-            if (isTypeOk && isSizeOk) {
-                this.progress.preview = URL.createObjectURL(file)
-            }
-            return isTypeOk && isSizeOk
-        },
-        onProgress(file) {
-            this.progress.percent = ~~file.percent
-            if (this.progress.percent == 100) {
-                this.progress.preview = ''
-                this.progress.percent = 0
-            }
-        },
-        onSuccess(res) {
-            this.$emit('on-success', res)
-        }
+    data: {
+        type: Object,
+        default: () => {}
+    },
+    name: {
+        type: String,
+        default: 'file'
+    },
+    url: {
+        type: Array,
+        default: () => []
+    },
+    max: {
+        type: Number,
+        default: 3
+    },
+    size: {
+        type: Number,
+        default: 2
+    },
+    width: {
+        type: Number,
+        default: 150
+    },
+    height: {
+        type: Number,
+        default: 150
+    },
+    placeholder: {
+        type: String,
+        default: ''
+    },
+    notip: {
+        type: Boolean,
+        default: false
+    },
+    ext: {
+        type: Array,
+        default: () => ['jpg', 'png', 'gif', 'bmp']
     }
+})
+
+const emit = defineEmits(['update:url', 'on-success'])
+
+const data = ref({
+    dialogImageIndex: 0,
+    imageViewerVisible: false,
+    progress: {
+        preview: '',
+        percent: 0
+    }
+})
+
+// 预览
+function preview(index) {
+    data.value.dialogImageIndex = index
+    data.value.imageViewerVisible = true
+}
+// 关闭预览
+function previewClose() {
+    data.value.imageViewerVisible = false
+}
+// 移除
+function remove(index) {
+    let url = props.url
+    url.splice(index, 1)
+    emit('update:url', url)
+}
+// 移动
+function move(index, type) {
+    let url = props.url
+    if (type == 'left' && index != 0) {
+        url[index] = url.splice(index - 1, 1, url[index])[0]
+    }
+    if (type == 'right' && index != url.length - 1) {
+        url[index] = url.splice(index + 1, 1, url[index])[0]
+    }
+    emit('update:url', url)
+}
+function beforeUpload(file) {
+    const fileName = file.name.split('.')
+    const fileExt = fileName[fileName.length - 1]
+    const isTypeOk = props.ext.indexOf(fileExt) >= 0
+    const isSizeOk = file.size / 1024 / 1024 < props.size
+    if (!isTypeOk) {
+        proxy.$message.error(`上传图片只支持 ${ props.ext.join(' / ') } 格式！`)
+    }
+    if (!isSizeOk) {
+        proxy.$message.error(`上传图片大小不能超过 ${props.size}MB！`)
+    }
+    if (isTypeOk && isSizeOk) {
+        data.value.progress.preview = URL.createObjectURL(file)
+    }
+    return isTypeOk && isSizeOk
+}
+function onProgress(file) {
+    data.value.progress.percent = ~~file.percent
+    if (data.value.progress.percent == 100) {
+        data.value.progress.preview = ''
+        data.value.progress.percent = 0
+    }
+}
+function onSuccess(res) {
+    emit('on-success', res)
 }
 </script>
 
diff --git a/src/components/PageHeader/index.vue b/src/components/PageHeader/index.vue
index a26df720..1f6fd3e0 100644
--- a/src/components/PageHeader/index.vue
+++ b/src/components/PageHeader/index.vue
@@ -12,20 +12,19 @@
     </div>
 </template>
 
-<script>
-export default {
-    name: 'PageHeader',
-    props: {
-        title: {
-            type: String,
-            required: true
-        },
-        content: {
-            type: String,
-            default: ''
-        }
+<script setup>
+import { defineProps } from 'vue'
+
+defineProps({
+    title: {
+        type: String,
+        required: true
+    },
+    content: {
+        type: String,
+        default: ''
     }
-}
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/PageMain/index.vue b/src/components/PageMain/index.vue
index ce814615..bd4fbca3 100644
--- a/src/components/PageMain/index.vue
+++ b/src/components/PageMain/index.vue
@@ -8,39 +8,34 @@
     >
         <div v-if="title" class="title-container">{{ title }}</div>
         <slot />
-        <div v-if="collaspeData" class="collaspe" title="展开" @click="uncollaspe">
+        <div v-if="collaspeData" class="collaspe" title="展开" @click="unCollaspe">
             <i class="el-icon-arrow-down" />
         </div>
     </div>
 </template>
 
-<script>
-export default {
-    name: 'PageMain',
-    props: {
-        title: {
-            type: String,
-            default: ''
-        },
-        collaspe: {
-            type: Boolean,
-            default: false
-        },
-        height: {
-            type: String,
-            default: ''
-        }
+<script setup>
+import { defineProps, ref } from 'vue'
+
+const props = defineProps({
+    title: {
+        type: String,
+        default: ''
     },
-    data() {
-        return {
-            collaspeData: this.collaspe
-        }
+    collaspe: {
+        type: Boolean,
+        default: false
     },
-    methods: {
-        uncollaspe() {
-            this.collaspeData = false
-        }
+    height: {
+        type: String,
+        default: ''
     }
+})
+
+const collaspeData = ref(props.collaspe)
+
+function unCollaspe() {
+    collaspeData.value = false
 }
 </script>
 
@@ -61,7 +56,7 @@ export default {
             text-align: center;
             font-size: 24px;
             color: #ccc;
-            text-shadow: 0 0 1px #000;
+            text-shadow: 0 0 1px #fff;
             background: linear-gradient(to bottom, transparent, #fff);
             cursor: pointer;
             transition: 0.3s;
diff --git a/src/components/Result/index.vue b/src/components/Result/index.vue
index bff30e1f..7cbd3474 100644
--- a/src/components/Result/index.vue
+++ b/src/components/Result/index.vue
@@ -20,25 +20,24 @@
     </div>
 </template>
 
-<script>
-export default {
-    name: 'Result',
-    props: {
-        type: {
-            type: String,
-            validator: val => ['success', 'warning', 'error'].includes(val),
-            required: true
-        },
-        title: {
-            type: String,
-            required: true
-        },
-        desc: {
-            type: String,
-            default: ''
-        }
+<script setup>
+import { defineProps } from 'vue'
+
+defineProps({
+    type: {
+        type: String,
+        validator: val => ['success', 'warning', 'error'].includes(val),
+        required: true
+    },
+    title: {
+        type: String,
+        required: true
+    },
+    desc: {
+        type: String,
+        default: ''
     }
-}
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/SearchBar/index.vue b/src/components/SearchBar/index.vue
index bcef5624..f20a7b43 100644
--- a/src/components/SearchBar/index.vue
+++ b/src/components/SearchBar/index.vue
@@ -7,39 +7,31 @@
     </div>
 </template>
 
-<script>
-export default {
-    name: 'SearchBar',
-    props: {
-        showMore: {
-            type: Boolean,
-            default: false
-        },
-        unfold: {
-            type: Boolean,
-            default: false
-        }
+<script setup>
+import { defineProps, defineEmits, ref, watch } from 'vue'
+
+const props = defineProps({
+    showMore: {
+        type: Boolean,
+        default: false
     },
-    emits: ['toggle'],
-    data() {
-        return {
-            isUnfold: !this.unfold
-        }
-    },
-    watch: {
-        unfold: {
-            handler() {
-                this.toggle()
-            },
-            immediate: true
-        }
-    },
-    methods: {
-        toggle() {
-            this.isUnfold = !this.isUnfold
-            this.$emit('toggle', this.isUnfold)
-        }
+    unfold: {
+        type: Boolean,
+        default: false
     }
+})
+
+const emit = defineEmits(['toggle'])
+
+const isUnfold = ref(!props.unfold)
+
+watch(() => props.unfold, () => toggle(), {
+    immediate: true
+})
+
+function toggle() {
+    isUnfold.value = !isUnfold.value
+    emit('toggle', isUnfold.value)
 }
 </script>
 
diff --git a/src/components/SvgIcon/index.vue b/src/components/SvgIcon/index.vue
index d459e750..3ac5de93 100644
--- a/src/components/SvgIcon/index.vue
+++ b/src/components/SvgIcon/index.vue
@@ -1,57 +1,55 @@
 <template>
-    <i v-if="name.indexOf('el-icon-') === 0" :class="name" />
+    <i v-if="name.indexOf('el-icon-') === 0 || name.indexOf('ri-') === 0" class="svg-icon" :style="transformStyle" :class="name" />
     <svg v-else class="svg-icon" :style="transformStyle" aria-hidden="true">
         <use :xlink:href="`#icon-${name}`" />
     </svg>
 </template>
 
-<script>
-export default {
-    name: 'SvgIcon',
-    props: {
-        name: {
-            type: String,
-            required: true
-        },
-        flip: {
-            type: String,
-            validator(value) {
-                return ['', 'horizontal', 'vertical', 'both'].includes(value)
-            },
-            default: ''
-        },
-        rotate: {
-            type: Number,
-            validator(value) {
-                return value >= 0 && value <= 360
-            },
-            default: 0
-        }
+<script setup>
+import { defineProps, computed } from 'vue'
+
+const props = defineProps({
+    name: {
+        type: String,
+        required: true
     },
-    computed: {
-        transformStyle() {
-            let style = []
-            if (this.flip != '') {
-                switch (this.flip) {
-                    case 'horizontal':
-                        style.push('rotateY(180deg)')
-                        break
-                    case 'vertical':
-                        style.push('rotateX(180deg)')
-                        break
-                    case 'both':
-                        style.push('rotateX(180deg)')
-                        style.push('rotateY(180deg)')
-                        break
-                }
-            }
-            if (this.rotate != 0) {
-                style.push(`rotate(${this.rotate}deg)`)
-            }
-            return `transform: ${style.join(' ')};`
+    flip: {
+        type: String,
+        validator(value) {
+            return ['', 'horizontal', 'vertical', 'both'].includes(value)
+        },
+        default: ''
+    },
+    rotate: {
+        type: Number,
+        validator(value) {
+            return value >= 0 && value <= 360
+        },
+        default: 0
+    }
+})
+
+const transformStyle = computed(() => {
+    let style = []
+    if (props.flip != '') {
+        switch (props.flip) {
+            case 'horizontal':
+                style.push('rotateY(180deg)')
+                break
+            case 'vertical':
+                style.push('rotateX(180deg)')
+                break
+            case 'both':
+                style.push('rotateX(180deg)')
+                style.push('rotateY(180deg)')
+                break
         }
     }
-}
+    if (props.rotate != 0) {
+        style.push(`rotate(${props.rotate}deg)`)
+    }
+    return `transform: ${style.join(' ')};`
+})
 </script>
 
 <style scoped>
diff --git a/src/components/Trend/index.vue b/src/components/Trend/index.vue
index 8f7727bc..3bfbd952 100644
--- a/src/components/Trend/index.vue
+++ b/src/components/Trend/index.vue
@@ -7,42 +7,40 @@
     </div>
 </template>
 
-<script>
-export default {
-    name: 'Trend',
-    props: {
-        value: {
-            type: String,
-            required: true
-        },
-        type: {
-            type: String,
-            validator: val => ['up', 'down'].includes(val),
-            default: 'up'
-        },
-        prefix: {
-            type: String,
-            default: ''
-        },
-        suffix: {
-            type: String,
-            default: ''
-        },
-        reverse: {
-            type: Boolean,
-            default: false
-        }
+<script setup>
+import { defineProps, computed } from 'vue'
+
+const props = defineProps({
+    value: {
+        type: String,
+        required: true
     },
-    computed: {
-        isUp() {
-            let isUp = this.type === 'up'
-            if (this.reverse) {
-                isUp = !isUp
-            }
-            return isUp
-        }
+    type: {
+        type: String,
+        validator: val => ['up', 'down'].includes(val),
+        default: 'up'
+    },
+    prefix: {
+        type: String,
+        default: ''
+    },
+    suffix: {
+        type: String,
+        default: ''
+    },
+    reverse: {
+        type: Boolean,
+        default: false
     }
-}
+})
+
+const isUp = computed(() => {
+    let isUp = props.type === 'up'
+    if (props.reverse) {
+        isUp = !isUp
+    }
+    return isUp
+})
 </script>
 
 <style lang="scss" scoped>