From 8f8ac3dda031b7aa0510d6ed6cfc9a3dfc745bb8 Mon Sep 17 00:00:00 2001
From: zchengo <1933757688@qq.com>
Date: Wed, 25 Jan 2023 18:31:18 +0800
Subject: [PATCH] refactor: define setup in script label

---
 web/src/views/Contract.vue  | 900 +++++++++++++++++-------------------
 web/src/views/Customer.vue  | 601 +++++++++++-------------
 web/src/views/Dashboard.vue | 217 ++++-----
 web/src/views/Error.vue     |  13 +-
 web/src/views/Home.vue      | 618 ++++++++++++-------------
 web/src/views/Index.vue     |   4 +-
 web/src/views/Login.vue     | 125 +++--
 web/src/views/Pass.vue      | 152 +++---
 web/src/views/Product.vue   | 443 ++++++++----------
 web/src/views/Register.vue  | 170 +++----
 web/src/views/Result.vue    |  20 +-
 web/src/views/Subscribe.vue | 121 ++---
 12 files changed, 1562 insertions(+), 1822 deletions(-)

diff --git a/web/src/views/Contract.vue b/web/src/views/Contract.vue
index 5b89308..53d2956 100644
--- a/web/src/views/Contract.vue
+++ b/web/src/views/Contract.vue
@@ -170,7 +170,7 @@
     </div>
 </template>
 
-<script>
+<script setup>
 import { ref, reactive, onMounted, createVNode } from 'vue';
 import { SearchOutlined, ExclamationCircleOutlined, ExportOutlined } from '@ant-design/icons-vue';
 import moment from 'moment'
@@ -179,507 +179,461 @@ import { queryProductList } from "../api/product";
 import { queryCustomerOption } from "../api/customer";
 import { message, Modal } from 'ant-design-vue';
 
-export default {
-    components: {
-        SearchOutlined,
-        ExportOutlined
-    },
-    setup() {
+// 合同表格字段
+const columns = [{
+    title: '合同编号',
+    dataIndex: 'id',
+    width: 100,
+    fixed: 'left',
+    ellipsis: true,
+}, {
+    title: '合同名称',
+    dataIndex: 'name',
+    width: 100,
+    fixed: 'left',
+    ellipsis: true,
+}, {
+    title: '客户名称',
+    dataIndex: 'cname',
+    width: 240,
+}, {
+    title: '合同金额',
+    dataIndex: 'amount',
+    width: 100,
+}, {
+    title: '合同开始时间',
+    dataIndex: 'beginTime',
+    width: 150,
+}, {
+    title: '合同结束时间',
+    dataIndex: 'overTime',
+    width: 150,
+}, {
+    title: '备注',
+    dataIndex: 'remarks',
+    width: 240,
+    ellipsis: true,
+}, {
+    title: '签约状态',
+    dataIndex: 'status',
+    width: 100,
+    ellipsis: true,
+}, {
+    title: '创建时间',
+    dataIndex: 'created',
+    width: 185,
+    customRender: text => {
+        return text.value == 0 ? '' : moment(text.value * 1000).format('YYYY-MM-DD HH:mm:ss')
+    }
+}, {
+    title: '更新时间',
+    dataIndex: 'updated',
+    width: 185,
+    customRender: text => {
+        return text.value == 0 ? '' : moment(text.value * 1000).format('YYYY-MM-DD HH:mm:ss')
+    }
+}];
 
-        // 合同表格字段
-        const columns = [{
-            title: '合同编号',
-            dataIndex: 'id',
-            width: 100,
-            fixed: 'left',
-            ellipsis: true,
-        }, {
-            title: '合同名称',
-            dataIndex: 'name',
-            width: 100,
-            fixed: 'left',
-            ellipsis: true,
-        }, {
-            title: '客户名称',
-            dataIndex: 'cname',
-            width: 240,
-        }, {
-            title: '合同金额',
-            dataIndex: 'amount',
-            width: 100,
-        }, {
-            title: '合同开始时间',
-            dataIndex: 'beginTime',
-            width: 150,
-        }, {
-            title: '合同结束时间',
-            dataIndex: 'overTime',
-            width: 150,
-        }, {
-            title: '备注',
-            dataIndex: 'remarks',
-            width: 240,
-            ellipsis: true,
-        }, {
-            title: '签约状态',
-            dataIndex: 'status',
-            width: 100,
-            ellipsis: true,
-        }, {
-            title: '创建时间',
-            dataIndex: 'created',
-            width: 185,
-            customRender: text => {
-                return text.value == 0 ? '' : moment(text.value * 1000).format('YYYY-MM-DD HH:mm:ss')
-            }
-        }, {
-            title: '更新时间',
-            dataIndex: 'updated',
-            width: 185,
-            customRender: text => {
-                return text.value == 0 ? '' : moment(text.value * 1000).format('YYYY-MM-DD HH:mm:ss')
-            }
-        }];
+// 新建或编辑合同，已添加产品表格字段
+const productColumns = [{
+    title: '产品名称',
+    dataIndex: 'name',
+    width: 100,
+}, {
+    title: '产品类别',
+    dataIndex: 'type',
+    width: 90,
+}, {
+    title: '单位',
+    dataIndex: 'unit',
+    width: 80,
+}, {
+    title: '价格',
+    dataIndex: 'price',
+    width: 100,
+}, {
+    title: '数量',
+    dataIndex: 'count',
+    width: 120,
+}, {
+    title: '合计',
+    dataIndex: 'total',
+    width: 100,
+}, {
+    title: '操作',
+    dataIndex: 'operation',
+    width: 100,
+}]
 
-        // 新建或编辑合同，已添加产品表格字段
-        const productColumns = [{
-            title: '产品名称',
-            dataIndex: 'name',
-            width: 100,
-        }, {
-            title: '产品类别',
-            dataIndex: 'type',
-            width: 90,
-        }, {
-            title: '单位',
-            dataIndex: 'unit',
-            width: 80,
-        }, {
-            title: '价格',
-            dataIndex: 'price',
-            width: 100,
-        }, {
-            title: '数量',
-            dataIndex: 'count',
-            width: 120,
-        }, {
-            title: '合计',
-            dataIndex: 'total',
-            width: 100,
-        }, {
-            title: '操作',
-            dataIndex: 'operation',
-            width: 100,
-        }]
+// 产品表格字段
+const productListColumns = [{
+    title: '产品名称',
+    dataIndex: 'name',
+    width: 100,
+    fixed: 'left',
+    ellipsis: true,
+}, {
+    title: '是否上下架',
+    dataIndex: 'status',
+    width: 120,
+}, {
+    title: '产品类型',
+    dataIndex: 'type',
+    width: 100,
+}, {
+    title: '产品单位',
+    dataIndex: 'unit',
+    width: 100,
+}, {
+    title: '产品编码',
+    dataIndex: 'code',
+    width: 150,
+}, {
+    title: '价格',
+    dataIndex: 'price',
+    width: 150,
+}, {
+    title: '产品描述',
+    dataIndex: 'description',
+    width: 240,
+    ellipsis: true,
+}, {
+    title: '创建时间',
+    dataIndex: 'created',
+    width: 185,
+    customRender: text => {
+        let m = moment(text.value * 1000).format('YYYY-MM-DD HH:mm:ss')
+        return m == 'Invalid date' ? '' : m
+    }
+}, {
+    title: '更新时间',
+    dataIndex: 'updated',
+    width: 185,
+    customRender: text => {
+        let m = moment(text.value * 1000).format('YYYY-MM-DD HH:mm:ss')
+        return m == 'Invalid date' ? '' : m
+    }
+}, {
+    title: '创建人',
+    dataIndex: 'creator',
+    width: 150,
+}];
 
-        // 产品表格字段
-        const productListColumns = [{
-            title: '产品名称',
-            dataIndex: 'name',
-            width: 100,
-            fixed: 'left',
-            ellipsis: true,
-        }, {
-            title: '是否上下架',
-            dataIndex: 'status',
-            width: 120,
-        }, {
-            title: '产品类型',
-            dataIndex: 'type',
-            width: 100,
-        }, {
-            title: '产品单位',
-            dataIndex: 'unit',
-            width: 100,
-        }, {
-            title: '产品编码',
-            dataIndex: 'code',
-            width: 150,
-        }, {
-            title: '价格',
-            dataIndex: 'price',
-            width: 150,
-        }, {
-            title: '产品描述',
-            dataIndex: 'description',
-            width: 240,
-            ellipsis: true,
-        }, {
-            title: '创建时间',
-            dataIndex: 'created',
-            width: 185,
-            customRender: text => {
-                let m = moment(text.value * 1000).format('YYYY-MM-DD HH:mm:ss')
-                return m == 'Invalid date' ? '' : m
-            }
-        }, {
-            title: '更新时间',
-            dataIndex: 'updated',
-            width: 185,
-            customRender: text => {
-                let m = moment(text.value * 1000).format('YYYY-MM-DD HH:mm:ss')
-                return m == 'Invalid date' ? '' : m
-            }
-        }, {
-            title: '创建人',
-            dataIndex: 'creator',
-            width: 150,
-        }];
+// 表单校验
+const rules = {
+    name: [{ required: true, message: '请输入合同名称', trigger: 'blur' }],
+    cid: [{ required: true, message: '请选择客户', trigger: 'blur' }],
+    status: [{ required: true, message: '请选择合同状态' }]
+};
 
-        // 表单校验
-        const rules = {
-            name: [{ required: true, message: '请输入合同名称', trigger: 'blur' }],
-            cid: [{ required: true, message: '请选择客户', trigger: 'blur' }],
-            status: [{ required: true, message: '请选择合同状态' }]
-        };
+// 合同属性
+let contract = reactive({
+    id: undefined,
+    name: undefined,
+    amount: undefined,
+    beginTime: '',
+    overTime: '',
+    cid: undefined,
+    remarks: undefined,
+    status: undefined,
+    productlist: [],
+});
 
-        // 合同属性
-        let contract = reactive({
-            id: undefined,
-            name: undefined,
-            amount: undefined,
-            beginTime: '',
-            overTime: '',
-            cid: undefined,
-            remarks: undefined,
-            status: undefined,
-            productlist: [],
-        });
+const data = reactive({
+    contractId: 0,
+    contractList: [],
+    contractIds: [],
+    productList: [],
+    productIds: [],
+    addedProductList: [],
+    customerOption: [],
+    defaultSelectedIds: []
+})
 
-        const data = reactive({
-            contractId: 0,
-            contractList: [],
-            contractIds: [],
-            productList: [],
-            productIds: [],
-            addedProductList: [],
-            customerOption: [],
-            defaultSelectedIds: []
-        })
+// 表格分页
+let pagination = reactive({
+    current: 1,
+    pageSize: 10,
+    total: undefined,
+})
 
-        // 表格分页
-        let pagination = reactive({
-            current: 1,
-            pageSize: 10,
-            total: undefined,
-        })
+// 点击搜索
+const onSearch = () => { getContractList() };
 
-        // 点击搜索
-        const onSearch = () => { getContractList() };
+const title = ref('');
+const visible = ref(false);
+const disabled = ref(true)
+const operation = ref(0);
+const contractFormRef = ref();
+const keyWord = ref('')
+const productListVisible = ref(false);
 
-        const title = ref('');
-        const visible = ref(false);
-        const disabled = ref(true)
-        const operation = ref(0);
-        const contractFormRef = ref();
-        const keyWord = ref('')
-        const productListVisible = ref(false);
+// 点击新建合同
+const onCreate = () => {
+    title.value = '新建合同'
+    operation.value = 1
+    visible.value = true
+}
 
-        // 点击新建合同
-        const onCreate = () => {
-            title.value = '新建合同'
-            operation.value = 1
-            visible.value = true
+// 点击编辑合同
+const onEdit = (row) => {
+    title.value = '编辑合同'
+    operation.value = 2
+    getCustomerOption()
+    let param = { id: row.id }
+    queryContractInfo(param).then((res) => {
+        if (res.data.code == 0) {
+            let p = res.data.data
+            contract.id = p.id
+            contract.name = p.name
+            contract.cid = p.cid
+            contract.amount = p.amount
+            contract.beginTime = p.beginTime
+            contract.overTime = p.overTime
+            contract.remarks = p.remarks
+            contract.status = p.status
+            contract.productlist = p.productlist
+            data.addedProductList = p.productlist
         }
+    })
+    data.contractId = row.id
+    visible.value = true
+}
 
-        // 点击编辑合同
-        const onEdit = (row) => {
-            title.value = '编辑合同'
-            operation.value = 2
-            getCustomerOption()
-            let param = { id: row.id }
-            queryContractInfo(param).then((res) => {
-                if (res.data.code == 0) {
-                    let p = res.data.data
-                    contract.id = p.id
-                    contract.name = p.name
-                    contract.cid = p.cid
-                    contract.amount = p.amount
-                    contract.beginTime = p.beginTime
-                    contract.overTime = p.overTime
-                    contract.remarks = p.remarks
-                    contract.status = p.status
-                    contract.productlist = p.productlist
-                    data.addedProductList = p.productlist
-                }
-            })
-            data.contractId = row.id
-            visible.value = true
-        }
-
-        // 点击保存合同
-        const onSave = () => {
-            contractFormRef.value.validateFields().then(() => {
-                if (operation.value == 1) {
-                    let param = {
-                        name: contract.name,
-                        cid: contract.cid,
-                        amount: contract.amount,
-                        beginTime: contract.beginTime,
-                        overTime: contract.overTime,
-                        remarks: contract.remarks,
-                        status: contract.status,
-                        productlist: data.addedProductList,
-                    }
-                    createContract(param).then((res) => {
-                        if (res.data.code == 0) {
-                            message.success('保存成功')
-                            data.defaultSelectedIds = []
-                            getContractList()
-                        }
-                    })
-                }
-                if (operation.value == 2) {
-                    let param = {
-                        id: contract.id,
-                        name: contract.name,
-                        cid: contract.cid,
-                        amount: contract.amount,
-                        beginTime: contract.beginTime,
-                        overTime: contract.overTime,
-                        remarks: contract.remarks,
-                        status: contract.status,
-                        productlist: data.addedProductList,
-                    }
-                    updateContract(param).then((res) => {
-                        if (res.data.code == 0) {
-                            message.success('保存成功')
-                            data.defaultSelectedIds = []
-                            getContractList()
-                        }
-                    })
-                }
-                contractFormRef.value.resetFields()
-                visible.value = false;
-            });
-        };
-
-        // 点击删除合同
-        const onDelete = () => {
+// 点击保存合同
+const onSave = () => {
+    contractFormRef.value.validateFields().then(() => {
+        if (operation.value == 1) {
             let param = {
-                ids: data.contractIds
+                name: contract.name,
+                cid: contract.cid,
+                amount: contract.amount,
+                beginTime: contract.beginTime,
+                overTime: contract.overTime,
+                remarks: contract.remarks,
+                status: contract.status,
+                productlist: data.addedProductList,
             }
-            Modal.confirm({
-                title: '确定删除选中的' + data.contractIds.length + '项吗?',
-                icon: createVNode(ExclamationCircleOutlined),
-                centered: true,
-                cancelText: '取消',
-                okText: '确定',
-                onOk() {
-                    deleteContract(param).then((res) => {
-                        if (res.data.code == 0) {
-                            getContractList()
-                            disabled.value = true
-                            message.success('删除成功')
-                        }
-                    })
-                },
-                onCancel() {
-                    console.log('Cancel');
-                },
-            });
+            createContract(param).then((res) => {
+                if (res.data.code == 0) {
+                    message.success('保存成功')
+                    data.defaultSelectedIds = []
+                    getContractList()
+                }
+            })
         }
-
-        // 初始化数据
-        onMounted(() => { getContractList() })
-
-        // 点击全部合同
-        const onContracts = () => {
-            keyWord.value = ''
-            getContractList()
-        }
-
-        // 分页查询合同列表
-        const onPagination = (page) => {
-            pagination.current = page
-            getContractList()
-        }
-        const getContractList = () => {
+        if (operation.value == 2) {
             let param = {
-                id: parseInt(keyWord.value == '' ? '0' : keyWord.value),
-                pageNum: pagination.current,
-                pageSize: pagination.pageSize
+                id: contract.id,
+                name: contract.name,
+                cid: contract.cid,
+                amount: contract.amount,
+                beginTime: contract.beginTime,
+                overTime: contract.overTime,
+                remarks: contract.remarks,
+                status: contract.status,
+                productlist: data.addedProductList,
             }
-            queryContractList(param).then((res) => {
+            updateContract(param).then((res) => {
                 if (res.data.code == 0) {
-                    pagination.total = res.data.data.total
-                    data.contractList = res.data.data.list
+                    message.success('保存成功')
+                    data.defaultSelectedIds = []
+                    getContractList()
                 }
             })
         }
+        contractFormRef.value.resetFields()
+        visible.value = false;
+    });
+};
 
-        // 点击添加产品
-        const onAddProduct = () => {
-            let param = {
-                pageNum: pagination.current,
-                pageSize: pagination.pageSize
-            }
-            queryProductList(param).then((res) => {
+// 点击删除合同
+const onDelete = () => {
+    let param = {
+        ids: data.contractIds
+    }
+    Modal.confirm({
+        title: '确定删除选中的' + data.contractIds.length + '项吗?',
+        icon: createVNode(ExclamationCircleOutlined),
+        centered: true,
+        cancelText: '取消',
+        okText: '确定',
+        onOk() {
+            deleteContract(param).then((res) => {
                 if (res.data.code == 0) {
-                    pagination.total = res.data.data.total
-                    data.productList = res.data.data.list
+                    getContractList()
+                    disabled.value = true
+                    message.success('删除成功')
                 }
             })
-            data.defaultSelectedIds = []
-            if (data.addedProductList.length > 0) {
-                for (let i = 0; i < data.addedProductList.length; i++) {
-                    data.defaultSelectedIds[i] = data.addedProductList[i].id
-                }
-            }
-            productListVisible.value = true
-        }
+        },
+        onCancel() {
+            console.log('Cancel');
+        },
+    });
+}
 
-        // 分页查询产品列表
-        const onPaginationProduct = (page) => {
-            pagination.current = page
-            let param = {
-                pageNum: pagination.current,
-                pageSize: pagination.pageSize
-            }
-            queryProductList(param).then((res) => {
-                if (res.data.code == 0) {
-                    pagination.total = res.data.data.total
-                    data.productList = res.data.data.list
-                }
+// 初始化数据
+onMounted(() => { getContractList() })
+
+// 点击全部合同
+const onContracts = () => {
+    keyWord.value = ''
+    getContractList()
+}
+
+// 分页查询合同列表
+const onPagination = (page) => {
+    pagination.current = page
+    getContractList()
+}
+const getContractList = () => {
+    let param = {
+        id: parseInt(keyWord.value == '' ? '0' : keyWord.value),
+        pageNum: pagination.current,
+        pageSize: pagination.pageSize
+    }
+    queryContractList(param).then((res) => {
+        if (res.data.code == 0) {
+            pagination.total = res.data.data.total
+            data.contractList = res.data.data.list
+        }
+    })
+}
+
+// 点击添加产品
+const onAddProduct = () => {
+    let param = {
+        pageNum: pagination.current,
+        pageSize: pagination.pageSize
+    }
+    queryProductList(param).then((res) => {
+        if (res.data.code == 0) {
+            pagination.total = res.data.data.total
+            data.productList = res.data.data.list
+        }
+    })
+    data.defaultSelectedIds = []
+    if (data.addedProductList.length > 0) {
+        for (let i = 0; i < data.addedProductList.length; i++) {
+            data.defaultSelectedIds[i] = data.addedProductList[i].id
+        }
+    }
+    productListVisible.value = true
+}
+
+// 分页查询产品列表
+const onPaginationProduct = (page) => {
+    pagination.current = page
+    let param = {
+        pageNum: pagination.current,
+        pageSize: pagination.pageSize
+    }
+    queryProductList(param).then((res) => {
+        if (res.data.code == 0) {
+            pagination.total = res.data.data.total
+            data.productList = res.data.data.list
+        }
+    })
+}
+
+// 已选中的合同ID
+const onSelectedConteactIds = selectedRowKeys => {
+    data.contractIds = selectedRowKeys
+    if (data.contractIds.length !== 0) {
+        disabled.value = false
+    } else {
+        disabled.value = true
+    }
+};
+
+// 已选中的产品ID
+const onSelectedProductIds = selectedRowKeys => {
+    data.productIds = selectedRowKeys
+    data.defaultSelectedIds = selectedRowKeys
+};
+
+// 删除选中的产品
+const delProduct = (row) => {
+    for (let i = 0; i < data.addedProductList.length; i++) {
+        if (data.addedProductList[i].id == row.id) {
+            data.addedProductList.splice(i, 1);
+        }
+    }
+    calculatedAmount()
+}
+
+// 点击确定选中的产品ID
+const onConfirm = () => {
+    console.log("xzx", data.productIds)
+    let param = {
+        id: data.contractId,
+        pids: data.productIds
+    }
+    queryContractPlist(param).then((res) => {
+        if (res.data.code == 0) {
+            data.addedProductList = res.data.data
+        }
+    })
+    productListVisible.value = false
+}
+
+// 查询客户选项
+const getCustomerOption = () => {
+    queryCustomerOption().then((res) => {
+        if (res.data.code == 0) {
+            data.customerOption = res.data.data
+            console.log("zxxzc", data.customerOption)
+        }
+    })
+}
+
+const changeCustomerOption = (value) => {
+    contract.cid.value = value
+}
+
+// 计算金额
+const calculatedAmount = () => {
+    contract.amount = 0
+    let totalAmount = 0
+    for (let i = 0; i < data.addedProductList.length; i++) {
+        totalAmount = totalAmount + (data.addedProductList[i].price * data.addedProductList[i].count)
+    }
+    contract.amount = totalAmount
+}
+
+// 点击合同取消按钮
+const onCancel = () => {
+    contractFormRef.value.resetFields()
+    data.addedProductList = []
+    data.contractId = undefined
+    visible.value = false
+};
+
+// 导出表格
+const onExport = () => {
+    contractExport().then((res) => {
+        if (res.data.type == 'application/json') {
+            message.error('导出错误！')
+        } else {
+            let blob = new Blob([res.data], {
+                type: "application/vnd.ms-excel"
             })
+            let a = document.createElement('a')
+            a.setAttribute("download", "合同信息.xlsx");
+            a.href = window.URL.createObjectURL(blob)
+            a.click()
+            window.URL.revokeObjectURL(a.href)
         }
+    })
+}
 
-        // 已选中的合同ID
-        const onSelectedConteactIds = selectedRowKeys => {
-            data.contractIds = selectedRowKeys
-            if (data.contractIds.length !== 0) {
-                disabled.value = false
-            } else {
-                disabled.value = true
-            }
-        };
-
-        // 已选中的产品ID
-        const onSelectedProductIds = selectedRowKeys => {
-            data.productIds = selectedRowKeys
-            data.defaultSelectedIds = selectedRowKeys
-        };
-
-        // 删除选中的产品
-        const delProduct = (row) => {
-            for (let i = 0; i < data.addedProductList.length; i++) {
-                if (data.addedProductList[i].id == row.id) {
-                    data.addedProductList.splice(i, 1);
-                }
-            }
-            calculatedAmount()
-        }
-
-        // 点击确定选中的产品ID
-        const onConfirm = () => {
-            console.log("xzx", data.productIds)
-            let param = {
-                id: data.contractId,
-                pids: data.productIds
-            }
-            queryContractPlist(param).then((res) => {
-                if (res.data.code == 0) {
-                    data.addedProductList = res.data.data
-                }
-            })
-            productListVisible.value = false
-        }
-
-        // 查询客户选项
-        const getCustomerOption = () => {
-            queryCustomerOption().then((res) => {
-                if (res.data.code == 0) {
-                    data.customerOption = res.data.data
-                    console.log("zxxzc", data.customerOption)
-                }
-            })
-        }
-
-        const changeCustomerOption = (value) => {
-            contract.cid.value = value
-        }
-
-        // 计算金额
-        const calculatedAmount = () => {
-            contract.amount = 0
-            let totalAmount = 0
-            for (let i = 0; i < data.addedProductList.length; i++) {
-                totalAmount = totalAmount + (data.addedProductList[i].price * data.addedProductList[i].count)
-            }
-            contract.amount = totalAmount
-        }
-
-        // 点击合同取消按钮
-        const onCancel = () => {
-            contractFormRef.value.resetFields()
-            data.addedProductList = []
-            data.contractId = undefined
-            visible.value = false
-        };
-
-        // 导出表格
-        const onExport = () => {
-            contractExport().then((res) => {
-                if (res.data.type == 'application/json'){
-                    message.error('导出错误！')
-                } else {
-                    let blob = new Blob([res.data], {
-                        type: "application/vnd.ms-excel"
-                    })
-                    let a = document.createElement('a')
-                    a.setAttribute("download", "合同信息.xlsx");
-                    a.href = window.URL.createObjectURL(blob)
-                    a.click()
-                    window.URL.revokeObjectURL(a.href)
-                }
-            })
-        }
-
-        // 点击取消产品列表
-        const onCancelProductList = () => {
-            productListVisible.value = false
-            data.contractId = undefined
-            pagination.current = 1,
-            pagination.total = undefined
-        }
-
-        return {
-            columns,
-            productColumns,
-            productListColumns,
-            rules,
-            data,
-            onSelectedConteactIds,
-            onSelectedProductIds,
-            onSearch,
-            contract,
-            title,
-            visible,
-            disabled,
-            productListVisible,
-            operation,
-            onCreate,
-            onEdit,
-            contractFormRef,
-            onSave,
-            onCancel,
-            onDelete,
-            onCancelProductList,
-            getContractList,
-            keyWord,
-            onConfirm,
-            onAddProduct,
-            getCustomerOption,
-            changeCustomerOption,
-            calculatedAmount,
-            delProduct,
-            pagination,
-            onPagination,
-            onExport,
-            onContracts,
-            onPaginationProduct,
-        };
-    },
+// 点击取消产品列表
+const onCancelProductList = () => {
+    productListVisible.value = false
+    data.contractId = undefined
+    pagination.current = 1,
+        pagination.total = undefined
 }
 </script>
 
diff --git a/web/src/views/Customer.vue b/web/src/views/Customer.vue
index c75fed4..423d810 100644
--- a/web/src/views/Customer.vue
+++ b/web/src/views/Customer.vue
@@ -160,7 +160,7 @@
     </div>
 </template>
 
-<script>
+<script setup>
 import { ref, reactive, onMounted, createVNode } from 'vue';
 import { SearchOutlined, ExclamationCircleOutlined, ExportOutlined, MailTwoTone } from '@ant-design/icons-vue';
 import moment from 'moment'
@@ -168,351 +168,310 @@ import { createCustomer, updateCustomer, sendMailToCustomer, queryCustomerList,
 import { message, Modal } from 'ant-design-vue';
 import regionData from '../assets/region';
 
-export default {
-    components: {
-        SearchOutlined,
-        ExportOutlined,
-        MailTwoTone
-    },
-    setup() {
-        const columns = [{
-            title: '客户名称',
-            dataIndex: 'name',
-            width: 200,
-            fixed: 'left',
-            ellipsis: true,
-        }, {
-            title: '客户来源',
-            dataIndex: 'source',
-            width: 150,
-        }, {
-            title: '手机号',
-            dataIndex: 'phone',
-            width: 150,
-        }, {
-            title: '邮箱',
-            dataIndex: 'email',
-            width: 200,
-        }, {
-            title: '客户行业',
-            dataIndex: 'industry',
-            width: 150,
-        }, {
-            title: '客户级别',
-            dataIndex: 'level',
-            width: 150,
-        }, {
-            title: '备注',
-            dataIndex: 'remarks',
-            width: 150,
-            ellipsis: true,
-        }, {
-            title: '成交状态',
-            dataIndex: 'status',
-            width: 150,
-        }, {
-            title: '详细地址',
-            dataIndex: 'address',
-            width: 240,
-            ellipsis: true,
-        }, {
-            title: '创建时间',
-            dataIndex: 'created',
-            width: 185,
-            customRender: text => {
-                return text == 0 ? '' : moment(text.value * 1000).format('YYYY-MM-DD HH:mm:ss')
-            }
-        }, {
-            title: '更新时间',
-            dataIndex: 'updated',
-            width: 185,
-            customRender: text => {
-                return text.value == 0 ? '' : moment(text.value * 1000).format('YYYY-MM-DD HH:mm:ss')
-            }
-        }, {
-            title: '操作',
-            dataIndex: 'operation',
-            width: 65,
-            fixed: 'right',
-            ellipsis: true,
-        }];
+// 表格字段
+const columns = [{
+    title: '客户名称',
+    dataIndex: 'name',
+    width: 200,
+    fixed: 'left',
+    ellipsis: true,
+}, {
+    title: '客户来源',
+    dataIndex: 'source',
+    width: 150,
+}, {
+    title: '手机号',
+    dataIndex: 'phone',
+    width: 150,
+}, {
+    title: '邮箱',
+    dataIndex: 'email',
+    width: 200,
+}, {
+    title: '客户行业',
+    dataIndex: 'industry',
+    width: 150,
+}, {
+    title: '客户级别',
+    dataIndex: 'level',
+    width: 150,
+}, {
+    title: '备注',
+    dataIndex: 'remarks',
+    width: 150,
+    ellipsis: true,
+}, {
+    title: '成交状态',
+    dataIndex: 'status',
+    width: 150,
+}, {
+    title: '详细地址',
+    dataIndex: 'address',
+    width: 240,
+    ellipsis: true,
+}, {
+    title: '创建时间',
+    dataIndex: 'created',
+    width: 185,
+    customRender: text => {
+        return text == 0 ? '' : moment(text.value * 1000).format('YYYY-MM-DD HH:mm:ss')
+    }
+}, {
+    title: '更新时间',
+    dataIndex: 'updated',
+    width: 185,
+    customRender: text => {
+        return text.value == 0 ? '' : moment(text.value * 1000).format('YYYY-MM-DD HH:mm:ss')
+    }
+}, {
+    title: '操作',
+    dataIndex: 'operation',
+    width: 65,
+    fixed: 'right',
+    ellipsis: true,
+}];
 
-        // 表单校验
-        const rules = {
-            name: [{ required: true, message: '请输入客户名称', trigger: 'blur' }],
-            phone: [{
-                pattern: /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/,
-                message: '手机格式不正确',
-                trigger: 'blur',
-            }],
-            email: [{
-                pattern: /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/,
-                message: '邮箱格式不正确',
-                trigger: 'blur',
-            }],
-        };
+// 表单校验
+const rules = {
+    name: [{ required: true, message: '请输入客户名称', trigger: 'blur' }],
+    phone: [{
+        pattern: /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/,
+        message: '手机格式不正确',
+        trigger: 'blur',
+    }],
+    email: [{
+        pattern: /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/,
+        message: '邮箱格式不正确',
+        trigger: 'blur',
+    }],
+};
 
-        const data = reactive({
-            customerList: [],
-            selectedIds: []
-        })
+const data = reactive({
+    customerList: [],
+    selectedIds: []
+})
 
 
-        const onSelectChange = selectedRowKeys => {
-            data.selectedIds = selectedRowKeys
-            if (data.selectedIds.length !== 0) {
-                disabled.value = false
-            } else {
-                disabled.value = true
-            }
-        };
+const onSelectChange = selectedRowKeys => {
+    data.selectedIds = selectedRowKeys
+    if (data.selectedIds.length !== 0) {
+        disabled.value = false
+    } else {
+        disabled.value = true
+    }
+};
 
-        // 点击搜索
-        const onSearch = () => {
-            getCustomerList()
-        };
+// 点击搜索
+const onSearch = () => {
+    getCustomerList()
+};
 
-        // 点击全部客户
-        const onCustomers = () => {
-            keyWord.value = ''
-            getCustomerList()
+// 点击全部客户
+const onCustomers = () => {
+    keyWord.value = ''
+    getCustomerList()
+}
+
+// 客户属性
+let customer = reactive({
+    id: undefined,
+    name: undefined,
+    source: undefined,
+    phone: undefined,
+    email: undefined,
+    industry: undefined,
+    level: undefined,
+    remarks: undefined,
+    region: undefined,
+    address: undefined,
+    status: undefined,
+});
+
+// 表格分页
+let pagination = reactive({
+    current: 1,
+    pageSize: 10,
+    total: undefined,
+})
+
+const title = ref('');
+const visible = ref(false);
+const disabled = ref(true)
+const operation = ref(0);
+const customerFormRef = ref();
+const keyWord = ref('')
+const visibleMail = ref(false)
+
+// 点击新建客户
+const onCreate = () => {
+    title.value = '新建客户'
+    operation.value = 1
+    visible.value = true
+}
+
+// 点击客户名称
+const onEdit = (row) => {
+    title.value = '编辑客户'
+    operation.value = 2
+    let param = { id: row.id }
+    queryCustomerInfo(param).then((res) => {
+        if (res.data.code == 0) {
+            let p = res.data.data
+            customer.id = p.id
+            customer.name = p.name
+            customer.source = p.source
+            customer.phone = p.phone
+            customer.email = p.email
+            customer.industry = p.industry
+            customer.level = p.level
+            customer.remarks = p.remarks
+            customer.region = p.region
+            customer.region = p.region.split(',')
+            customer.address = p.address
+            customer.status = p.status
         }
+    })
+    visible.value = true
+}
 
-        // 客户属性
-        let customer = reactive({
-            id: undefined,
-            name: undefined,
-            source: undefined,
-            phone: undefined,
-            email: undefined,
-            industry: undefined,
-            level: undefined,
-            remarks: undefined,
-            region: undefined,
-            address: undefined,
-            status: undefined,
-        });
-
-        // 表格分页
-        let pagination = reactive({
-            current: 1,
-            pageSize: 10,
-            total: undefined,
-        })
-
-        const title = ref('');
-        const visible = ref(false);
-        const disabled = ref(true)
-        const operation = ref(0);
-        const customerFormRef = ref();
-        const keyWord = ref('')
-        const visibleMail = ref(false)
-
-        // 点击新建客户
-        const onCreate = () => {
-            title.value = '新建客户'
-            operation.value = 1
-            visible.value = true
+// 点击保存客户
+const onSave = () => {
+    customerFormRef.value.validateFields().then(() => {
+        if (customer.region !== undefined) {
+            customer.region = customer.region.toString()
         }
-
-        // 点击客户名称
-        const onEdit = (row) => {
-            title.value = '编辑客户'
-            operation.value = 2
-            let param = { id: row.id }
-            queryCustomerInfo(param).then((res) => {
+        if (operation.value == 1) {
+            createCustomer(customer).then((res) => {
                 if (res.data.code == 0) {
-                    let p = res.data.data
-                    customer.id = p.id
-                    customer.name = p.name
-                    customer.source = p.source
-                    customer.phone = p.phone
-                    customer.email = p.email
-                    customer.industry = p.industry
-                    customer.level = p.level
-                    customer.remarks = p.remarks
-                    customer.region = p.region
-                    customer.region = p.region.split(',')
-                    customer.address = p.address
-                    customer.status = p.status
+                    message.success('保存成功')
+                    getCustomerList()
                 }
             })
-            visible.value = true
         }
-
-        // 点击保存客户
-        const onSave = () => {
-            customerFormRef.value.validateFields().then(() => {
-                if (customer.region !== undefined) {
-                    customer.region = customer.region.toString()
-                }
-                if (operation.value == 1) {
-                    createCustomer(customer).then((res) => {
-                        if (res.data.code == 0) {
-                            message.success('保存成功')
-                            getCustomerList()
-                        }
-                    })
-                }
-                if (operation.value == 2) {
-                    updateCustomer(customer).then((res) => {
-                        if (res.data.code == 0) {
-                            message.success('保存成功')
-                            getCustomerList()
-                        }
-                    })
-                }
-                customerFormRef.value.resetFields()
-                visible.value = false;
-            });
-        };
-
-        // 点击删除客户
-        const onDelete = () => {
-            let param = {
-                ids: data.selectedIds
-            }
-            Modal.confirm({
-                title: '确定删除选中的' + data.selectedIds.length + '项吗?',
-                icon: createVNode(ExclamationCircleOutlined),
-                centered: true,
-                cancelText: '取消',
-                okText: '确定',
-                onOk() {
-                    deleteCustomer(param).then((res) => {
-                        if (res.data.code == 0) {
-                            getCustomerList()
-                            disabled.value = true
-                            message.success('删除成功')
-                        }
-                    })
-                },
-                onCancel() {
-                    console.log('Cancel');
-                },
-            });
-        }
-
-        // 分页查询客户列表
-        const onPagination = (page) => {
-            pagination.current = page
-            getCustomerList()
-        }
-
-        // 初始化数据
-        onMounted(() => { getCustomerList() })
-
-        const getCustomerList = () => {
-            let param = {
-                name: keyWord.value,
-                pageNum: pagination.current,
-                pageSize: pagination.pageSize,
-            }
-            queryCustomerList(param).then((res) => {
+        if (operation.value == 2) {
+            updateCustomer(customer).then((res) => {
                 if (res.data.code == 0) {
-                    pagination.total = res.data.data.total
-                    data.customerList = res.data.data.list
+                    message.success('保存成功')
+                    getCustomerList()
                 }
             })
         }
+        customerFormRef.value.resetFields()
+        visible.value = false;
+    });
+};
 
-        // 导出表格
-        const onExport = () => {
-            customerExport().then((res) => {
-                if (res.data.type == 'application/json') {
-                    message.error('导出错误！')
-                } else {
-                    let blob = new Blob([res.data], {
-                        type: "application/vnd.ms-excel"
-                    })
-                    let a = document.createElement('a')
-                    a.setAttribute("download", "客户信息.xlsx");
-                    a.href = window.URL.createObjectURL(blob)
-                    a.click()
-                    window.URL.revokeObjectURL(a.href)
-                }
-            })
-        }
-
-        const mail = reactive({
-            customerName: '',
-            receiver: '',
-            subject: '',
-            content: ''
-        })
-
-        // 点击邮件
-        const onMail = (cname, email) => {
-            mail.customerName = cname
-            mail.receiver = email
-            visibleMail.value = true
-        }
-
-        // 点击发送邮件
-        const onSend = () => {
-            let param = {
-                receiver: mail.receiver,
-                subject: mail.subject,
-                content: mail.content
-            }
-            sendMailToCustomer(param).then((res) => {
+// 点击删除客户
+const onDelete = () => {
+    let param = {
+        ids: data.selectedIds
+    }
+    Modal.confirm({
+        title: '确定删除选中的' + data.selectedIds.length + '项吗?',
+        icon: createVNode(ExclamationCircleOutlined),
+        centered: true,
+        cancelText: '取消',
+        okText: '确定',
+        onOk() {
+            deleteCustomer(param).then((res) => {
                 if (res.data.code == 0) {
-                    message.success("邮件已发送")
-                }
-                if (res.data.code == 50002) {
-                    message.error("邮件发送失败")
-                }
-                if (res.data.code == 50003) {
-                    message.warn("邮件服务未开启")
+                    getCustomerList()
+                    disabled.value = true
+                    message.success('删除成功')
                 }
             })
+        },
+        onCancel() {
+            console.log('Cancel');
+        },
+    });
+}
+
+// 分页查询客户列表
+const onPagination = (page) => {
+    pagination.current = page
+    getCustomerList()
+}
+
+// 初始化数据
+onMounted(() => { getCustomerList() })
+
+const getCustomerList = () => {
+    let param = {
+        name: keyWord.value,
+        pageNum: pagination.current,
+        pageSize: pagination.pageSize,
+    }
+    queryCustomerList(param).then((res) => {
+        if (res.data.code == 0) {
+            pagination.total = res.data.data.total
+            data.customerList = res.data.data.list
         }
+    })
+}
 
-        // 点击取消按钮
-        const onCancel = () => {
-            customerFormRef.value.resetFields()
-            visible.value = false
-        };
-
-        const options = regionData
-
-        const selectedOptions = (value) => {
-            customer.region = value
+// 导出表格
+const onExport = () => {
+    customerExport().then((res) => {
+        if (res.data.type == 'application/json') {
+            message.error('导出错误！')
+        } else {
+            let blob = new Blob([res.data], {
+                type: "application/vnd.ms-excel"
+            })
+            let a = document.createElement('a')
+            a.setAttribute("download", "客户信息.xlsx");
+            a.href = window.URL.createObjectURL(blob)
+            a.click()
+            window.URL.revokeObjectURL(a.href)
         }
+    })
+}
 
-        return {
-            data,
-            columns,
-            rules,
-            onSearch,
-            visible,
-            disabled,
-            onSelectChange,
-            onSearch,
-            customer,
-            title,
-            visible,
-            operation,
-            onCustomers,
-            onCreate,
-            onEdit,
-            customerFormRef,
-            onSave,
-            onCancel,
-            onDelete,
-            getCustomerList,
-            onExport,
-            keyWord,
-            options,
-            onPagination,
-            pagination,
-            selectedOptions,
-            mail,
-            visibleMail,
-            onMail,
-            onSend
-        };
-    },
+const mail = reactive({
+    customerName: '',
+    receiver: '',
+    subject: '',
+    content: ''
+})
+
+// 点击邮件
+const onMail = (cname, email) => {
+    mail.customerName = cname
+    mail.receiver = email
+    visibleMail.value = true
+}
+
+// 点击发送邮件
+const onSend = () => {
+    let param = {
+        receiver: mail.receiver,
+        subject: mail.subject,
+        content: mail.content
+    }
+    sendMailToCustomer(param).then((res) => {
+        if (res.data.code == 0) {
+            message.success("邮件已发送")
+        }
+        if (res.data.code == 50002) {
+            message.error("邮件发送失败")
+        }
+        if (res.data.code == 50003) {
+            message.warn("邮件服务未开启")
+        }
+    })
+}
+
+// 点击取消按钮
+const onCancel = () => {
+    customerFormRef.value.resetFields()
+    visible.value = false
+};
+
+const options = regionData
+
+const selectedOptions = (value) => {
+    customer.region = value
 }
 </script>
 
diff --git a/web/src/views/Dashboard.vue b/web/src/views/Dashboard.vue
index 5c709dd..edc888f 100644
--- a/web/src/views/Dashboard.vue
+++ b/web/src/views/Dashboard.vue
@@ -102,7 +102,7 @@
     </div>
 </template>
 
-<script>
+<script setup>
 import { QuestionCircleTwoTone } from '@ant-design/icons-vue'
 import * as echarts from "echarts";
 import { reactive, ref, onBeforeMount } from 'vue';
@@ -110,126 +110,111 @@ import { getSummary } from "../api/dashboard";
 import { getSubscribeInfo } from '../api/subscribe';
 import { useRouter } from 'vue-router'
 
-export default {
-    components: {
-        QuestionCircleTwoTone
-    },
-    setup() {
+const daysRange = ref(7);
 
-        const daysRange = ref(7);
+const router = useRouter()
 
-        const router = useRouter()
+const data = reactive({
+    customers: 0,
+    contracts: 0,
+    contractAmount: 0.00,
+    products: 0,
+})
 
-        const data = reactive({
-            customers: 0,
-            contracts: 0,
-            contractAmount: 0.00,
-            products: 0,
-        })
+onBeforeMount(() => {
+    subscribeInfo();
+    initChart();
+});
 
-        onBeforeMount(() => {
-            subscribeInfo();
-            initChart();
-        });
-
-        const initChart = () => {
-            let param = {
-                daysRange: daysRange.value
-            }
-            getSummary(param).then((res) => {
-                if (res.data.code == 0) {
-                    data.customers = res.data.data.customers
-                    data.contracts = res.data.data.contracts
-                    data.contractAmount = res.data.data.contractAmount
-                    data.products = res.data.data.products
-                    echarts.init(document.getElementById("contract")).setOption({
-                        xAxis: {
-                            type: 'category',
-                            data: res.data.data.date,
-                        },
-                        tooltip: {
-                            trigger: 'axis',
-                            axisPointer: {
-                                type: 'shadow'
-                            }
-                        },
-                        legend: {
-                            data: ['实际完成金额'],
-                            orient: 'vertical',
-                            bottom: 10,
-                        },
-                        yAxis: {
-                            type: 'value',
-                        },
-                        series: [
-                            {
-                                name: '实际完成金额',
-                                data: res.data.data.amount,
-                                type: 'line',
-                                smooth: true,
-                                lineStyle: {
-                                    width: 3
-                                }
-                            }
-                        ]
-                    });
-                    echarts.init(document.getElementById("customer")).setOption({
-                        tooltip: {
-                            trigger: 'item'
-                        },
-                        legend: {
-                            top: 'bottom',
-                            left: 'center',
-                        },
-                        series: [
-                            {
-                                type: 'pie',
-                                bottom: '15%',
-                                radius: ['40%', '70%'],
-                                avoidLabelOverlap: false,
-                                itemStyle: {
-                                    borderRadius: 10,
-                                    borderColor: '#fff',
-                                    borderWidth: 2,
-                                },
-                                label: {
-                                    show: false,
-                                    position: 'center'
-                                },
-                                emphasis: {
-                                    label: {
-                                        show: true,
-                                        fontSize: 25,
-                                        fontWeight: 'bold'
-                                    }
-                                },
-                                labelLine: {
-                                    show: false
-                                },
-                                data: res.data.data.customerIndustry,
-                            }
-                        ]
-                    })
-                }
-            })
-        }
-
-        // 获取用户订阅信息
-        const subscribeInfo = () => {
-            getSubscribeInfo().then((res) => {
-                if (res.data.code == 0 && res.data.data.version == 1) {
-                    router.push('/result')
-                }
-            })
-        }
-
-        return {
-            data,
-            daysRange,
-            initChart,
-            subscribeInfo,
-        }
+const initChart = () => {
+    let param = {
+        daysRange: daysRange.value
     }
+    getSummary(param).then((res) => {
+        if (res.data.code == 0) {
+            data.customers = res.data.data.customers
+            data.contracts = res.data.data.contracts
+            data.contractAmount = res.data.data.contractAmount
+            data.products = res.data.data.products
+            echarts.init(document.getElementById("contract")).setOption({
+                xAxis: {
+                    type: 'category',
+                    data: res.data.data.date,
+                },
+                tooltip: {
+                    trigger: 'axis',
+                    axisPointer: {
+                        type: 'shadow'
+                    }
+                },
+                legend: {
+                    data: ['实际完成金额'],
+                    orient: 'vertical',
+                    bottom: 10,
+                },
+                yAxis: {
+                    type: 'value',
+                },
+                series: [
+                    {
+                        name: '实际完成金额',
+                        data: res.data.data.amount,
+                        type: 'line',
+                        smooth: true,
+                        lineStyle: {
+                            width: 3
+                        }
+                    }
+                ]
+            });
+            echarts.init(document.getElementById("customer")).setOption({
+                tooltip: {
+                    trigger: 'item'
+                },
+                legend: {
+                    top: 'bottom',
+                    left: 'center',
+                },
+                series: [
+                    {
+                        type: 'pie',
+                        bottom: '15%',
+                        radius: ['40%', '70%'],
+                        avoidLabelOverlap: false,
+                        itemStyle: {
+                            borderRadius: 10,
+                            borderColor: '#fff',
+                            borderWidth: 2,
+                        },
+                        label: {
+                            show: false,
+                            position: 'center'
+                        },
+                        emphasis: {
+                            label: {
+                                show: true,
+                                fontSize: 25,
+                                fontWeight: 'bold'
+                            }
+                        },
+                        labelLine: {
+                            show: false
+                        },
+                        data: res.data.data.customerIndustry,
+                    }
+                ]
+            })
+        }
+    })
+}
+
+// 获取用户订阅信息
+const subscribeInfo = () => {
+    getSubscribeInfo().then((res) => {
+        if (res.data.code == 0 && res.data.data.version == 1) {
+            router.push('/result')
+        }
+    })
 }
 </script>
 
diff --git a/web/src/views/Error.vue b/web/src/views/Error.vue
index 7f37cd2..4b37b94 100644
--- a/web/src/views/Error.vue
+++ b/web/src/views/Error.vue
@@ -8,18 +8,11 @@
     </div>
 </template>
 
-<script>
+<script setup>
 import router from '../router/index';
 
-export default {
-    setup() {
-        const refresh = () => {
-            router.push('/')
-        }
-        return {
-            refresh
-        }
-    }
+const refresh = () => {
+    router.push('/')
 }
 </script>
 
diff --git a/web/src/views/Home.vue b/web/src/views/Home.vue
index 0c1f10e..e9b151b 100644
--- a/web/src/views/Home.vue
+++ b/web/src/views/Home.vue
@@ -1,105 +1,109 @@
 <template>
-  <a-layout has-sider>
-    <a-layout-sider class="layout-sider" width="150">
-      <div class="logo">
-        <div><img src="../assets/logo.svg" style="width: 32px;height: 32px;filter: drop-shadow(2px 2px 6px #79bbff);" />
-        </div>
-        <div v-if="collapsed == false" class="title"><b>Z</b>O<b style="color: #1283FF;">C</b>RM</div>
-      </div>
-      <a-menu style="border-right: none;width: 149px;" v-model:selectedKeys="selectedKeys" mode="inline">
-        <a-menu-item :key="item.key" v-for="item in menuItem">
-          <router-link :to="item.to" @click="store.selectedKeys = item.key" replace>
-            <component :is="item.icon" />
-            <span>{{ item.name }}</span>
-          </router-link>
-        </a-menu-item>
-      </a-menu>
-    </a-layout-sider>
-    <a-layout :style="{ marginLeft: '150px', background: '#FAFAFA' }">
-      <a-layout-header class="header">
-        <div style="display: flex;align-items: center;justify-items: center;margin-right: 10px;">
-          <QuestionCircleFilled @click="toDocs"
-            style="color: #909399;font-size: 18px;margin: 2px 15px 0 0;cursor: pointer;" />
-          <a-popover placement="bottomRight" :overlayStyle="{ width: '320px' }" trigger="click">
-            <template #content>
-              <div style="max-height: 250px;overflow-y: scroll;">
-                <a-list item-layout="horizontal" :data-source="data.noticeList" size="small">
-                  <template #renderItem="{ item }">
-                    <a-list-item style="cursor: pointer;" @click="onReadNotice(item.id)">
-                      <div style="display: inline-flex;align-items: center;">
-                        <a-avatar shape="square" :size="20" v-if="item.status == 1">
-                          <template #icon>
-                            <BellFilled style="font-size: 18px;" />
-                          </template>
-                        </a-avatar>
-                        <a-avatar shape="square" style="color: #476FFF; background-color: #ccd6fa" :size="20" v-else>
-                          <template #icon>
-                            <BellFilled style="font-size: 18px;" />
-                          </template>
-                        </a-avatar>
-                        <div v-if="item.status == 1" style="color: #717171;">&nbsp;&nbsp;&nbsp;{{ item.content }}</div>
-                        <div v-else>&nbsp;&nbsp;&nbsp;{{ item.content }}</div>
-                      </div>
-                      <template #actions>
-                        <span v-if="item.status == 2" style="color: black;">{{ formatDate(item.created) }}</span>
-                        <span v-else>{{ formatDate(item.created) }}</span>
-                      </template>
-                    </a-list-item>
-                  </template>
-                </a-list>
-              </div>
-              <div style="margin-top: 10px;display: flex;align-items: center;justify-content: center;">
-                <a-button v-if="data.noticeList.length != 0" @click="onDeleteNotice" type="primary" style="width: 92%;"
-                  shape="round">清空全部 {{ data.noticeList.length }} 条通知</a-button>
-              </div>
-            </template>
-            <a-badge :count="data.noticeCount">
-              <BellFilled style="color: #909399; font-size: 20px;cursor: pointer;" @click="onNotice" />
-            </a-badge>
-          </a-popover>
-          <a-dropdown :trigger="['click']">
-            <a-avatar @click="onUserAvatar" class="avatar" :size="28">U</a-avatar>
-            <template #overlay>
-              <a-menu style="width: 120px;">
-                <a-menu-item @click="visible = true">
-                  <ExclamationCircleOutlined /> 注销账号
+    <a-layout has-sider>
+        <a-layout-sider class="layout-sider" width="150">
+            <div class="logo">
+                <div><img src="../assets/logo.svg"
+                        style="width: 32px;height: 32px;filter: drop-shadow(2px 2px 6px #79bbff);" /></div>
+                <div v-if="collapsed == false" class="title"><b>Z</b>O<b style="color: #1283FF;">C</b>RM</div>
+            </div>
+            <a-menu style="border-right: none;width: 149px;" v-model:selectedKeys="selectedKeys" mode="inline">
+                <a-menu-item :key="item.key" v-for="item in menuItem">
+                    <router-link :to="item.to" @click="store.selectedKeys = item.key" replace>
+                        <component :is="item.icon" />
+                        <span>{{ item.name }}</span>
+                    </router-link>
                 </a-menu-item>
-                <a-menu-item @click="onLogout">
-                  <LogoutOutlined /> 退出登录
-                </a-menu-item>
-              </a-menu>
-            </template>
-          </a-dropdown>
-        </div>
-        <!-- 注销账号弹出框 -->
-        <a-modal v-model:visible="visible" title="注销账号" @ok="onConfirm" @cancel="onCancel" cancelText="取消" okText="注销"
-          width="400px" :centered="true">
-          <a-alert message="账号注销后，会清空账号相关的所有数据。" type="warning" show-icon /><br />
-          <a-form :model="user" layout="vertical" @finish="onSubmit" :rules="rules">
-            <a-form-item name="email">
-              <a-input v-model:value="user.email" placeholder="邮箱" disabled />
-            </a-form-item>
-            <a-form-item name="code">
-              <a-input v-model:value="user.code" style="width: 55%;" placeholder="验证码" />
-              <a-button @click="onGetCode" style="width: 40%;float: right;" :loading="loading" :disabled="disabled">
-                {{ buttonText }}</a-button>
-            </a-form-item>
-          </a-form>
-        </a-modal>
-      </a-layout-header>
-      <a-layout-content
-        :style="{ margin: '10px', background: '#fff', overflow: 'initial', borderRadius: '5px' }">
-        <transition name="fade">
-          <router-view v-slot="{ Component }">
-            <component :is="Component" />
-          </router-view>
-        </transition>
-      </a-layout-content>
+            </a-menu>
+        </a-layout-sider>
+        <a-layout :style="{ marginLeft: '150px', background: '#FAFAFA' }">
+            <a-layout-header class="header">
+                <div style="display: flex;align-items: center;justify-items: center;margin-right: 10px;">
+                    <QuestionCircleFilled @click="toDocs"
+                        style="color: #909399;font-size: 18px;margin: 2px 15px 0 0;cursor: pointer;" />
+                    <a-popover placement="bottomRight" :overlayStyle="{ width: '320px' }" trigger="click">
+                        <template #content>
+                            <div style="max-height: 250px;overflow-y: scroll;">
+                                <a-list item-layout="horizontal" :data-source="data.noticeList" size="small">
+                                    <template #renderItem="{ item }">
+                                        <a-list-item style="cursor: pointer;" @click="onReadNotice(item.id)">
+                                            <div style="display: inline-flex;align-items: center;">
+                                                <a-avatar shape="square" :size="20" v-if="item.status == 1">
+                                                    <template #icon>
+                                                        <BellFilled style="font-size: 18px;" />
+                                                    </template>
+                                                </a-avatar>
+                                                <a-avatar shape="square"
+                                                    style="color: #476FFF; background-color: #ccd6fa" :size="20" v-else>
+                                                    <template #icon>
+                                                        <BellFilled style="font-size: 18px;" />
+                                                    </template>
+                                                </a-avatar>
+                                                <div v-if="item.status == 1" style="color: #717171;">
+                                                    &nbsp;&nbsp;&nbsp;{{ item.content }}</div>
+                                                <div v-else>&nbsp;&nbsp;&nbsp;{{ item.content }}</div>
+                                            </div>
+                                            <template #actions>
+                                                <span v-if="item.status == 2" style="color: black;">{{
+                                                    formatDate(item.created)
+                                                }}</span>
+                                                <span v-else>{{ formatDate(item.created) }}</span>
+                                            </template>
+                                        </a-list-item>
+                                    </template>
+                                </a-list>
+                            </div>
+                            <div style="margin-top: 10px;display: flex;align-items: center;justify-content: center;">
+                                <a-button v-if="data.noticeList.length != 0" @click="onDeleteNotice" type="primary"
+                                    style="width: 92%;" shape="round">清空全部 {{ data.noticeList.length }} 条通知</a-button>
+                            </div>
+                        </template>
+                        <a-badge :count="data.noticeCount">
+                            <BellFilled style="color: #909399; font-size: 20px;cursor: pointer;" @click="onNotice" />
+                        </a-badge>
+                    </a-popover>
+                    <a-dropdown :trigger="['click']">
+                        <a-avatar @click="onUserAvatar" class="avatar" :size="28">U</a-avatar>
+                        <template #overlay>
+                            <a-menu style="width: 120px;">
+                                <a-menu-item @click="visible = true">
+                                    <ExclamationCircleOutlined /> 注销账号
+                                </a-menu-item>
+                                <a-menu-item @click="onLogout">
+                                    <LogoutOutlined /> 退出登录
+                                </a-menu-item>
+                            </a-menu>
+                        </template>
+                    </a-dropdown>
+                </div>
+                <!-- 注销账号弹出框 -->
+                <a-modal v-model:visible="visible" title="注销账号" @ok="onConfirm" @cancel="onCancel" cancelText="取消"
+                    okText="注销" width="400px" :centered="true">
+                    <a-alert message="账号注销后，会清空账号相关的所有数据。" type="warning" show-icon /><br />
+                    <a-form :model="user" layout="vertical" @finish="onSubmit" :rules="rules">
+                        <a-form-item name="email">
+                            <a-input v-model:value="user.email" placeholder="邮箱" disabled />
+                        </a-form-item>
+                        <a-form-item name="code">
+                            <a-input v-model:value="user.code" style="width: 55%;" placeholder="验证码" />
+                            <a-button @click="onGetCode" style="width: 40%;float: right;" :loading="loading"
+                                :disabled="disabled">
+                                {{ buttonText }}</a-button>
+                        </a-form-item>
+                    </a-form>
+                </a-modal>
+            </a-layout-header>
+            <a-layout-content :style="{ margin: '10px', background: '#fff', overflow: 'initial', borderRadius: '5px' }">
+                <transition name="fade">
+                    <router-view v-slot="{ Component }">
+                        <component :is="Component" />
+                    </router-view>
+                </transition>
+            </a-layout-content>
+        </a-layout>
     </a-layout>
-  </a-layout>
 </template>
 
-<script>
+<script setup>
 import { reactive, ref, onBeforeMount } from 'vue';
 import { useRouter } from 'vue-router'
 import { useStore } from '../store/index';
@@ -110,312 +114,270 @@ import { DashboardOutlined, SmileOutlined, MehOutlined, ShoppingOutlined, Profil
 import { QuestionCircleFilled, BellFilled, ExclamationCircleOutlined, LogoutOutlined } from '@ant-design/icons-vue';
 import moment from 'moment'
 
-export default {
-  components: {
-    DashboardOutlined,
-    SmileOutlined,
-    MehOutlined,
-    ShoppingOutlined,
-    ProfileOutlined,
-    CrownOutlined,
-    QuestionCircleFilled,
-    BellFilled,
-    ExclamationCircleOutlined,
-    LogoutOutlined
-  },
-  setup() {
-    // 菜单选项
-    const menuItem = reactive([{
-      key: "dashboard",
-      to: "/dashboard",
-      icon: "dashboard-outlined",
-      name: "仪表盘"
-    }, {
-      key: "customer",
-      to: "/customer",
-      icon: "smile-outlined",
-      name: "客户"
-    }, {
-      key: "contract",
-      to: "/contract",
-      icon: "meh-outlined",
-      name: "合同"
-    }, {
-      key: "product",
-      to: "/product",
-      icon: "shopping-outlined",
-      name: "产品"
-    }, {
-      key: "config",
-      to: "/config",
-      icon: "profile-outlined",
-      name: "配置"
-    }, {
-      key: "subscribe",
-      to: "/subscribe",
-      icon: "crown-outlined",
-      name: "订阅"
-    }])
+// 菜单选项
+const menuItem = reactive([{
+    key: "dashboard",
+    to: "/dashboard",
+    icon: DashboardOutlined,
+    name: "仪表盘"
+}, {
+    key: "customer",
+    to: "/customer",
+    icon: SmileOutlined,
+    name: "客户"
+}, {
+    key: "contract",
+    to: "/contract",
+    icon: MehOutlined,
+    name: "合同"
+}, {
+    key: "product",
+    to: "/product",
+    icon: ShoppingOutlined,
+    name: "产品"
+}, {
+    key: "config",
+    to: "/config",
+    icon: ProfileOutlined,
+    name: "配置"
+}, {
+    key: "subscribe",
+    to: "/subscribe",
+    icon: CrownOutlined,
+    name: "订阅"
+}])
 
-    // 表单校验
-    const rules = {
-      email: [{
+// 表单校验
+const rules = {
+    email: [{
         required: true,
         message: '请输入邮箱!',
         trigger: 'blur',
-      }, {
+    }, {
         pattern: /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/,
         message: '邮箱格式不正确',
         trigger: 'blur',
-      }],
-      code: [{ required: true, message: '请输入验证码!' }],
-    };
+    }],
+    code: [{ required: true, message: '请输入验证码!' }],
+};
 
-    const store = useStore();
+const store = useStore();
 
-    const selectedKeys = ref([store.selectedKeys])
-    const collapsed = ref(false)
+const selectedKeys = ref([store.selectedKeys])
+const collapsed = ref(false)
 
-    const data = reactive({
-      noticeCount: 0,
-      noticeList: []
-    })
+const data = reactive({
+    noticeCount: 0,
+    noticeList: []
+})
 
-    store.$subscribe((mutation, state) => {
-      selectedKeys.value = [state.selectedKeys]
-    })
+store.$subscribe((mutation, state) => {
+    selectedKeys.value = [state.selectedKeys]
+})
 
-    const router = useRouter()
+const router = useRouter()
 
-    const user = reactive({
-      name: undefined,
-      email: undefined,
-      verison: undefined,
-      code: undefined,
-      versionText: undefined
-    })
+const user = reactive({
+    name: undefined,
+    email: undefined,
+    verison: undefined,
+    code: undefined,
+    versionText: undefined
+})
 
-    const visible = ref(false)
-    const visibleLogo = ref(false)
-    const loading = ref(false)
-    const disabled = ref(false)
-    const buttonText = ref('获取验证码')
+const visible = ref(false)
+const visibleLogo = ref(false)
+const loading = ref(false)
+const disabled = ref(false)
+const buttonText = ref('获取验证码')
 
-    // 初始化数据
-    onBeforeMount(() => {
-      store.selectedKeys = 'dashboard'
-      router.push('dashboard')
-      noticeCount()
-    })
+// 初始化数据
+onBeforeMount(() => {
+    store.selectedKeys = 'dashboard'
+    router.push('dashboard')
+    noticeCount()
+})
 
-    // 点击用户头像
-    const onUserAvatar = () => {
-      getUserInfo().then((res) => {
+// 点击用户头像
+const onUserAvatar = () => {
+    getUserInfo().then((res) => {
         if (res.data.code == 0) {
-          user.name = res.data.data.name
-          user.email = res.data.data.email
-          user.version = res.data.data.version
+            user.name = res.data.data.name
+            user.email = res.data.data.email
+            user.version = res.data.data.version
         }
-      })
-    }
+    })
+}
 
-    // 跳转到项目文档
-    const toDocs = () => {
-      window.open("https://docs.zocrm.cloud")
-    }
+// 跳转到项目文档
+const toDocs = () => {
+    window.open("https://docs.zocrm.cloud")
+}
 
-    // 点击获取验证码
-    const onGetCode = () => {
-      if (user.email == '') {
+// 点击获取验证码
+const onGetCode = () => {
+    if (user.email == '') {
         message.warn('邮箱不能为空')
         return
-      }
-      loading.value = true
-      let param = {
+    }
+    loading.value = true
+    let param = {
         email: user.email
-      }
-      getVerifyCode(param).then((res) => {
+    }
+    getVerifyCode(param).then((res) => {
         if (res.data.code == 0) {
-          loading.value = false
-          disabled.value = true
-          buttonText.value = '验证码已发送'
+            loading.value = false
+            disabled.value = true
+            buttonText.value = '验证码已发送'
         }
         if (res.data.code == 10004) {
-          loading.value = false
-          message.error('验证码发送失败')
+            loading.value = false
+            message.error('验证码发送失败')
         }
-      })
-    }
+    })
+}
 
-    // 点击确认注销账号
-    const onConfirm = () => {
-      let param = {
+// 点击确认注销账号
+const onConfirm = () => {
+    let param = {
         email: user.email,
         code: user.code
-      }
-      userDelete(param).then((res) => {
-        if (res.data.code == 0) {
-          router.push('/')
-          message.success('账号已注销')
-        }
-      })
     }
+    userDelete(param).then((res) => {
+        if (res.data.code == 0) {
+            router.push('/')
+            message.success('账号已注销')
+        }
+    })
+}
 
-    // 日期格式化
-    const formatDate = (timeStamp) => {
-      let now = (Date.parse(new Date())) / 1000
-      if (now - timeStamp < 60) {
+// 日期格式化
+const formatDate = (timeStamp) => {
+    let now = (Date.parse(new Date())) / 1000
+    if (now - timeStamp < 60) {
         return "刚刚"
-      }
-      if ((new Date().getDate()) == (new Date(timeStamp * 1000).getDate())) {
+    }
+    if ((new Date().getDate()) == (new Date(timeStamp * 1000).getDate())) {
         return "今天 " + moment(timeStamp * 1000).format('HH:mm')
-      }
-      return moment(timeStamp * 1000).format('YYYY-MM-DD')
     }
+    return moment(timeStamp * 1000).format('YYYY-MM-DD')
+}
 
-    // 点击读取通知
-    const onReadNotice = (id) => {
-      updateNotice({ id: id }).then((res) => {
+// 点击读取通知
+const onReadNotice = (id) => {
+    updateNotice({ id: id }).then((res) => {
         if (res.data.code == 0) {
-          onNotice()
-          noticeCount()
+            onNotice()
+            noticeCount()
         }
-      })
-    }
+    })
+}
 
-    // 获取通知数量
-    const noticeCount = () => {
-      getNoticeCount().then((res) => {
+// 获取通知数量
+const noticeCount = () => {
+    getNoticeCount().then((res) => {
         if (res.data.code == 0) {
-          data.noticeCount = res.data.data.count
+            data.noticeCount = res.data.data.count
         }
-      })
-    }
+    })
+}
 
-    // 获取通知列表
-    const onNotice = () => {
-      getNoticeList().then((res) => {
+// 获取通知列表
+const onNotice = () => {
+    getNoticeList().then((res) => {
         if (res.data.code == 0) {
-          data.noticeList = res.data.data
+            data.noticeList = res.data.data
         }
-      })
-    }
+    })
+}
 
-    // 删除通知
-    const onDeleteNotice = () => {
-      let ids = []
-      for (let index = 0; index < data.noticeList.length; index++) {
+// 删除通知
+const onDeleteNotice = () => {
+    let ids = []
+    for (let index = 0; index < data.noticeList.length; index++) {
         ids[index] = data.noticeList[index].id
-      }
-      deleteNotice({ ids: ids }).then((res) => {
+    }
+    deleteNotice({ ids: ids }).then((res) => {
         if (res.data.code == 0) {
-          data.noticeList = res.data.data
-          onNotice()
+            data.noticeList = res.data.data
+            onNotice()
         }
-      })
-    }
+    })
+}
 
-    // 点击退出账号
-    const onLogout = () => {
-      localStorage.removeItem("uid")
-      localStorage.removeItem("token")
-      router.push('/')
-    }
+// 点击退出账号
+const onLogout = () => {
+    localStorage.removeItem("uid")
+    localStorage.removeItem("token")
+    router.push('/')
+}
 
-    // 点击取消按钮
-    const onCancel = () => {
-      disabled.value = false
-      modalFormRef.value.resetFields()
-      visible.value = false
-    };
-
-    return {
-      menuItem,
-      rules,
-      selectedKeys,
-      collapsed,
-      user,
-      visible,
-      visibleLogo,
-      loading,
-      disabled,
-      buttonText,
-      onUserAvatar,
-      onLogout,
-      onGetCode,
-      onConfirm,
-      onNotice,
-      onReadNotice,
-      noticeCount,
-      onDeleteNotice,
-      onCancel,
-      store,
-      formatDate,
-      data,
-      toDocs
-    };
-  },
+// 点击取消按钮
+const onCancel = () => {
+    disabled.value = false
+    modalFormRef.value.resetFields()
+    visible.value = false
 }
 </script>
 
 <style scoped>
 .layout-sider {
-  left: 0;
-  top: 0;
-  bottom: 0;
-  overflow: auto;
-  height: 100vh;
-  position: fixed;
-  background: #fff;
-  border-right: 0.5px solid #F0F2F5;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    overflow: auto;
+    height: 100vh;
+    position: fixed;
+    background: #fff;
+    border-right: 0.5px solid #F0F2F5;
 }
 
 .header {
-  padding: 0 12px;
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  background: #fff;
+    padding: 0 12px;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    background: #fff;
 }
 
 .trigger {
-  font-size: 18px;
-  padding: 0 8px;
-  cursor: pointer;
-  transition: color 0.3s;
+    font-size: 18px;
+    padding: 0 8px;
+    cursor: pointer;
+    transition: color 0.3s;
 }
 
 .trigger:hover {
-  color: #476FFF;
+    color: #476FFF;
 }
 
 .logo {
-  height: 32px;
-  margin: 16px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+    height: 32px;
+    margin: 16px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
 
 .avatar {
-  color: #f56a00;
-  background-color: #fde3cf;
-  cursor: pointer;
-  margin-left: 20px;
+    color: #f56a00;
+    background-color: #fde3cf;
+    cursor: pointer;
+    margin-left: 20px;
 }
 
 .popover {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 10px 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 10px 0;
 }
 
 .title {
-  font-size: 20px;
-  color: rgba(31, 31, 31, 0.85);
-  font-weight: 620;
-  margin-left: 10px;
-  overflow: hidden;
+    font-size: 20px;
+    color: rgba(31, 31, 31, 0.85);
+    font-weight: 620;
+    margin-left: 10px;
+    overflow: hidden;
 }
 </style>
\ No newline at end of file
diff --git a/web/src/views/Index.vue b/web/src/views/Index.vue
index edd98f6..30a8131 100644
--- a/web/src/views/Index.vue
+++ b/web/src/views/Index.vue
@@ -24,10 +24,8 @@
     </div>
 </template>
 
-<script>
-export default {
+<script setup>
 
-}
 </script>
 
 <style scoped>
diff --git a/web/src/views/Login.vue b/web/src/views/Login.vue
index 6aae42b..ce87a99 100644
--- a/web/src/views/Login.vue
+++ b/web/src/views/Login.vue
@@ -31,7 +31,7 @@
     </a-form>
 </template>
 
-<script>
+<script setup>
 import { reactive } from 'vue';
 import { UserOutlined, LockOutlined } from '@ant-design/icons-vue';
 import { useRouter } from 'vue-router'
@@ -39,79 +39,62 @@ import { userLogin } from '../api/user';
 import { message } from 'ant-design-vue';
 import { initData } from '../api/common';
 
-export default {
-    components: {
-        UserOutlined,
-        LockOutlined,
-    },
-    setup() {
-        const router = useRouter()
+const router = useRouter()
 
-        // 用户登录
-        const formData = reactive({
-            email: '1655064994@qq.com',
-            password: '1655064994',
-            remember: true,
-        });
-        const onLogin = () => {
-            let param = {
-                email: formData.email,
-                password: formData.password
-            }
-            // 初始化数据
-            if (formData.email == '1655064994@qq.com') {
-                initSysData()
-            }
-            userLogin(param).then((res) => {
-                if (res.data.code == 0) {
-                    localStorage.setItem('uid', res.data.data.uid)
-                    localStorage.setItem('token', res.data.data.token)
-                    router.push("/home")
-                }
-                if (res.data.code == 10002) {
-                    message.error('用户不存在');
-                }
-                if (res.data.code == 10003) {
-                    message.error('用户名或密码错误');
-                }
-            })
-        };
-        const onLoginFailed = errorInfo => {
-            console.log('Failed:', errorInfo);
-        };
-
-        // 忘记密码
-        const forgotPass = () => {
-            router.push("/pass")
-        }
-
-        // 用户注册
-        const toRegister = () => {
-            router.push("/register")
-        }
-
-        // 初始化数据（只会在生产环境中初始化）
-        const initSysData = () => {
-            initData().then((res) => {
-                if (res.data.code == 10) {
-                    message.success('初始化数据成功！')
-                }
-                if (res.data.code == 11) {
-                    message.error('初始化数据失败！')
-                }
-            })
-        }
-
-        return {
-            formData,
-            onLogin,
-            onLoginFailed,
-            forgotPass,
-            toRegister,
-            initSysData,
-        };
+// 用户登录
+const formData = reactive({
+    email: '1655064994@qq.com',
+    password: '1655064994',
+    remember: true,
+});
+const onLogin = () => {
+    let param = {
+        email: formData.email,
+        password: formData.password
     }
+    // 初始化数据
+    if (formData.email == '1655064994@qq.com') {
+        initSysData()
+    }
+    userLogin(param).then((res) => {
+        if (res.data.code == 0) {
+            localStorage.setItem('uid', res.data.data.uid)
+            localStorage.setItem('token', res.data.data.token)
+            router.push("/home")
+        }
+        if (res.data.code == 10002) {
+            message.error('用户不存在');
+        }
+        if (res.data.code == 10003) {
+            message.error('用户名或密码错误');
+        }
+    })
 };
+const onLoginFailed = errorInfo => {
+    console.log('Failed:', errorInfo);
+};
+
+// 忘记密码
+const forgotPass = () => {
+    router.push("/pass")
+}
+
+// 用户注册
+const toRegister = () => {
+    router.push("/register")
+}
+
+// 初始化数据（只会在生产环境中初始化）
+const initSysData = () => {
+    initData().then((res) => {
+        if (res.data.code == 10) {
+            message.success('初始化数据成功！')
+        }
+        if (res.data.code == 11) {
+            message.error('初始化数据失败！')
+        }
+    })
+}
 </script>
 
 <style scoped>
diff --git a/web/src/views/Pass.vue b/web/src/views/Pass.vue
index 69c2766..17591b7 100644
--- a/web/src/views/Pass.vue
+++ b/web/src/views/Pass.vue
@@ -22,103 +22,87 @@
     </a-form>
 </template>
 
-<script>
+<script setup>
 import { ref, reactive } from 'vue';
 import { useRouter } from 'vue-router';
 import { userForgotPass, getVerifyCode } from '../api/user'
 import { message } from 'ant-design-vue';
 
-export default {
-    setup() {
-        const router = useRouter()
+const router = useRouter()
 
-        // 重置密码
-        const formData = reactive({
-            email: '',
-            code: '',
-            password1: '',
-            password2: '',
-        });
+// 重置密码
+const formData = reactive({
+    email: '',
+    code: '',
+    password1: '',
+    password2: '',
+});
 
-        // 表单校验
-        const rules = {
-            email: [{
-                required: true,
-                message: '请输入邮箱!'
-            }, {
-                pattern: /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/,
-                message: '邮箱格式不正确',
-                trigger: 'blur',
-            }],
-            code: [{ required: true, message: '请输入验证码!' }],
-            password1: [{ required: true, message: '请输入密码!' }],
-            password2: [{ required: true, message: '请输入密码!' }],
-        };
+// 表单校验
+const rules = {
+    email: [{
+        required: true,
+        message: '请输入邮箱!'
+    }, {
+        pattern: /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/,
+        message: '邮箱格式不正确',
+        trigger: 'blur',
+    }],
+    code: [{ required: true, message: '请输入验证码!' }],
+    password1: [{ required: true, message: '请输入密码!' }],
+    password2: [{ required: true, message: '请输入密码!' }],
+};
 
-        const loading = ref(false)
-        const disabled = ref(false)
-        const passFormRef = ref()
-        const buttonText = ref('获取验证码')
+const loading = ref(false)
+const disabled = ref(false)
+const passFormRef = ref()
+const buttonText = ref('获取验证码')
 
-        const onSubmit = () => {
-            passFormRef.value.validateFields().then(() => {
-                let param = {
-                    email: formData.email,
-                    code: formData.code,
-                    password: formData.password2,
-                }
-                userForgotPass(param).then((res) => {
-                    if (res.data.code == 0) {
-                        message.success('密码已重置')
-                        router.push("/login")
-                    }
-                    if (res.data.code == 10005) {
-                        message.error('验证码错误');
-                    }
-                })
-            })
-        };
-
-        // 获取验证码
-        const onGetCode = () => {
-            if (formData.email == '') {
-                message.warn('邮箱不能为空')
-                return
-            }
-            loading.value = true
-            let param = {
-                email: formData.email
-            }
-            getVerifyCode(param).then((res) => {
-                if (res.data.code == 0) {
-                    loading.value = false
-                    disabled.value = true
-                    buttonText.value = '验证码已发送'
-                }
-                if (res.data.code == 10004) {
-                    loading.value = false
-                    message.error('验证码发送失败')
-                }
-            })
+const onSubmit = () => {
+    passFormRef.value.validateFields().then(() => {
+        let param = {
+            email: formData.email,
+            code: formData.code,
+            password: formData.password2,
         }
+        userForgotPass(param).then((res) => {
+            if (res.data.code == 0) {
+                message.success('密码已重置')
+                router.push("/login")
+            }
+            if (res.data.code == 10005) {
+                message.error('验证码错误');
+            }
+        })
+    })
+};
 
-        // 跳转到登录页面
-        const onLogin = () => {
-            router.push("/login")
+// 获取验证码
+const onGetCode = () => {
+    if (formData.email == '') {
+        message.warn('邮箱不能为空')
+        return
+    }
+    loading.value = true
+    let param = {
+        email: formData.email
+    }
+    getVerifyCode(param).then((res) => {
+        if (res.data.code == 0) {
+            loading.value = false
+            disabled.value = true
+            buttonText.value = '验证码已发送'
         }
+        if (res.data.code == 10004) {
+            loading.value = false
+            message.error('验证码发送失败')
+        }
+    })
+}
 
-        return {
-            formData,
-            rules,
-            passFormRef,
-            loading,
-            disabled,
-            buttonText,
-            onSubmit,
-            onGetCode,
-            onLogin,
-        };
-    },
+// 跳转到登录页面
+const onLogin = () => {
+    router.push("/login")
 }
 </script>
 
diff --git a/web/src/views/Product.vue b/web/src/views/Product.vue
index 4cc7f06..8f1e443 100644
--- a/web/src/views/Product.vue
+++ b/web/src/views/Product.vue
@@ -107,275 +107,242 @@
     </div>
 </template>
 
-<script>
+<script setup>
 import { ref, reactive, onMounted, createVNode } from 'vue';
 import { SearchOutlined, ExclamationCircleOutlined, ExportOutlined } from '@ant-design/icons-vue';
 import moment from 'moment'
 import { createProduct, updateProduct, queryProductList, deleteProduct, queryProductInfo, productExport } from '../api/product';
 import { message, Modal } from 'ant-design-vue';
 
-export default {
-    components: {
-        SearchOutlined,
-        ExportOutlined
-    },
-    setup() {
-        // 表格字段
-        const columns = [{
-            title: '产品名称',
-            dataIndex: 'name',
-            width: 100,
-            fixed: 'left',
-            ellipsis: true,
-        }, {
-            title: '是否上下架',
-            dataIndex: 'status',
-            width: 120,
-        }, {
-            title: '产品类型',
-            dataIndex: 'type',
-            width: 100,
-        }, {
-            title: '产品单位',
-            dataIndex: 'unit',
-            width: 100,
-        }, {
-            title: '产品编码',
-            dataIndex: 'code',
-            width: 150,
-        }, {
-            title: '价格',
-            dataIndex: 'price',
-            width: 150,
-        }, {
-            title: '产品描述',
-            dataIndex: 'description',
-            width: 240,
-            ellipsis: true,
-        }, {
-            title: '创建时间',
-            dataIndex: 'created',
-            width: 185,
-            customRender: text => {
-                return text.value == 0 ? '' : moment(text.value * 1000).format('YYYY-MM-DD HH:mm:ss')
-            }
-        }, {
-            title: '更新时间',
-            dataIndex: 'updated',
-            width: 185,
-            customRender: text => {
-                return text.value == 0 ? '' : moment(text.value * 1000).format('YYYY-MM-DD HH:mm:ss')
-            }
-        }];
+// 表格字段
+const columns = [{
+    title: '产品名称',
+    dataIndex: 'name',
+    width: 100,
+    fixed: 'left',
+    ellipsis: true,
+}, {
+    title: '是否上下架',
+    dataIndex: 'status',
+    width: 120,
+}, {
+    title: '产品类型',
+    dataIndex: 'type',
+    width: 100,
+}, {
+    title: '产品单位',
+    dataIndex: 'unit',
+    width: 100,
+}, {
+    title: '产品编码',
+    dataIndex: 'code',
+    width: 150,
+}, {
+    title: '价格',
+    dataIndex: 'price',
+    width: 150,
+}, {
+    title: '产品描述',
+    dataIndex: 'description',
+    width: 240,
+    ellipsis: true,
+}, {
+    title: '创建时间',
+    dataIndex: 'created',
+    width: 185,
+    customRender: text => {
+        return text.value == 0 ? '' : moment(text.value * 1000).format('YYYY-MM-DD HH:mm:ss')
+    }
+}, {
+    title: '更新时间',
+    dataIndex: 'updated',
+    width: 185,
+    customRender: text => {
+        return text.value == 0 ? '' : moment(text.value * 1000).format('YYYY-MM-DD HH:mm:ss')
+    }
+}];
 
-        // 表单校验
-        const rules = {
-            name: [{ required: true, message: '请输入产品名称', trigger: 'blur' }],
-            type: [{ required: true, message: '请选择产品类型' }],
-            code: [{ pattern: /^\d+$/, message: '产品编码格式不正确', trigger: 'blur' }],
-            price: [{ required: true, message: '请输入产品价格' }],
-            status: [{ required: true, message: '请选择是否上下架' }]
-        };
+// 表单校验
+const rules = {
+    name: [{ required: true, message: '请输入产品名称', trigger: 'blur' }],
+    type: [{ required: true, message: '请选择产品类型' }],
+    code: [{ pattern: /^\d+$/, message: '产品编码格式不正确', trigger: 'blur' }],
+    price: [{ required: true, message: '请输入产品价格' }],
+    status: [{ required: true, message: '请选择是否上下架' }]
+};
 
-        // 产品属性
-        let product = reactive({
-            id: undefined,
-            name: undefined,
-            type: undefined,
-            unit: undefined,
-            code: undefined,
-            price: undefined,
-            status: undefined,
-            description: undefined,
-        });
+// 产品属性
+let product = reactive({
+    id: undefined,
+    name: undefined,
+    type: undefined,
+    unit: undefined,
+    code: undefined,
+    price: undefined,
+    status: undefined,
+    description: undefined,
+});
 
-        // 产品列表
-        const data = reactive({
-            productList: [],
-            selectedIds: []
-        })
+// 产品列表
+const data = reactive({
+    productList: [],
+    selectedIds: []
+})
 
-        // 表格分页
-        let pagination = reactive({
-            current: 1,
-            pageSize: 10,
-            total: undefined,
-        })
+// 表格分页
+let pagination = reactive({
+    current: 1,
+    pageSize: 10,
+    total: undefined,
+})
 
-        const title = ref('');
-        const visible = ref(false);
-        const disabled = ref(true)
-        const operation = ref(0);
-        const productFormRef = ref();
-        const keyWord = ref('')
+const title = ref('');
+const visible = ref(false);
+const disabled = ref(true)
+const operation = ref(0);
+const productFormRef = ref();
+const keyWord = ref('')
 
-        // 初始化数据
-        onMounted(() => { getProductList() })
+// 初始化数据
+onMounted(() => { getProductList() })
 
-        // 表格记录多选
-        const onSelectChange = selectedRowKeys => {
-            data.selectedIds = selectedRowKeys
-            if (data.selectedIds.length !== 0) {
-                disabled.value = false
-            } else {
-                disabled.value = true
-            }
-        };
+// 表格记录多选
+const onSelectChange = selectedRowKeys => {
+    data.selectedIds = selectedRowKeys
+    if (data.selectedIds.length !== 0) {
+        disabled.value = false
+    } else {
+        disabled.value = true
+    }
+};
 
-        // 点击搜索
-        const onSearch = () => { getProductList() };
+// 点击搜索
+const onSearch = () => { getProductList() };
 
-        // 点击全部产品
-        const onProducts = () => {
-            keyWord.value = ''
-            getProductList()
+// 点击全部产品
+const onProducts = () => {
+    keyWord.value = ''
+    getProductList()
+}
+
+// 点击新建产品
+const onCreate = () => {
+    title.value = '新建产品'
+    operation.value = 1
+    visible.value = true
+}
+
+// 点击产品名称
+const onEdit = (row) => {
+    title.value = '编辑产品'
+    operation.value = 2
+    let param = { id: row.id }
+    queryProductInfo(param).then((res) => {
+        if (res.data.code == 0) {
+            let p = res.data.data
+            product.id = p.id
+            product.name = p.name
+            product.type = p.type
+            product.unit = p.unit
+            product.code = p.code
+            product.price = p.price
+            product.status = p.status
+            product.description = p.description
         }
+    })
+    visible.value = true
+}
 
-        // 点击新建产品
-        const onCreate = () => {
-            title.value = '新建产品'
-            operation.value = 1
-            visible.value = true
-        }
-
-        // 点击产品名称
-        const onEdit = (row) => {
-            title.value = '编辑产品'
-            operation.value = 2
-            let param = { id: row.id }
-            queryProductInfo(param).then((res) => {
+// 点击保存产品
+const onSave = () => {
+    productFormRef.value.validateFields().then(() => {
+        if (operation.value == 1) {
+            createProduct(product).then((res) => {
                 if (res.data.code == 0) {
-                    let p = res.data.data
-                    product.id = p.id
-                    product.name = p.name
-                    product.type = p.type
-                    product.unit = p.unit
-                    product.code = p.code
-                    product.price = p.price
-                    product.status = p.status
-                    product.description = p.description
+                    message.success('保存成功')
+                    getProductList()
                 }
             })
-            visible.value = true
         }
-
-        // 点击保存产品
-        const onSave = () => {
-            productFormRef.value.validateFields().then(() => {
-                if (operation.value == 1) {
-                    createProduct(product).then((res) => {
-                        if (res.data.code == 0) {
-                            message.success('保存成功')
-                            getProductList()
-                        }
-                    })
-                }
-                if (operation.value == 2) {
-                    updateProduct(product).then((res) => {
-                        if (res.data.code == 0) {
-                            message.success('保存成功')
-                            getProductList()
-                        }
-                    })
-                }
-                productFormRef.value.resetFields()
-                visible.value = false;
-            });
-        };
-
-        // 点击删除产品
-        const onDelete = () => {
-            Modal.confirm({
-                title: '确定删除选中的' + data.selectedIds.length + '项吗?',
-                icon: createVNode(ExclamationCircleOutlined),
-                centered: true,
-                cancelText: '取消',
-                okText: '确定',
-                onOk() {
-                    deleteProduct({ ids: data.selectedIds }).then((res) => {
-                        if (res.data.code == 0) {
-                            getProductList()
-                            disabled.value = true
-                            message.success('删除成功')
-                        }
-                    })
-                },
-                onCancel() {
-                    console.log('Cancel');
-                },
-            });
-        }
-
-        // 分页查询产品列表
-        const onPagination = (page) => {
-            pagination.current = page
-            getProductList()
-        }
-
-        // 查询产列表
-        const getProductList = () => {
-            let param = {
-                name: keyWord.value,
-                pageNum: pagination.current,
-                pageSize: pagination.pageSize,
-            }
-            queryProductList(param).then((res) => {
+        if (operation.value == 2) {
+            updateProduct(product).then((res) => {
                 if (res.data.code == 0) {
-                    pagination.total = res.data.data.total
-                    data.productList = res.data.data.list
+                    message.success('保存成功')
+                    getProductList()
                 }
             })
         }
+        productFormRef.value.resetFields()
+        visible.value = false;
+    });
+};
 
-        // 导出表格
-        const onExport = () => {
-            productExport().then((res) => {
-                if (res.data.type == 'application/json'){
-                    message.error('导出错误！')
-                } else {
-                    let blob = new Blob([res.data], {
-                        type: "application/vnd.ms-excel"
-                    })
-                    let a = document.createElement('a')
-                    a.setAttribute("download", "产品信息.xlsx");
-                    a.href = window.URL.createObjectURL(blob)
-                    a.click()
-                    window.URL.revokeObjectURL(a.href)
+// 点击删除产品
+const onDelete = () => {
+    Modal.confirm({
+        title: '确定删除选中的' + data.selectedIds.length + '项吗?',
+        icon: createVNode(ExclamationCircleOutlined),
+        centered: true,
+        cancelText: '取消',
+        okText: '确定',
+        onOk() {
+            deleteProduct({ ids: data.selectedIds }).then((res) => {
+                if (res.data.code == 0) {
+                    getProductList()
+                    disabled.value = true
+                    message.success('删除成功')
                 }
             })
+        },
+        onCancel() {
+            console.log('Cancel');
+        },
+    });
+}
+
+// 分页查询产品列表
+const onPagination = (page) => {
+    pagination.current = page
+    getProductList()
+}
+
+// 查询产列表
+const getProductList = () => {
+    let param = {
+        name: keyWord.value,
+        pageNum: pagination.current,
+        pageSize: pagination.pageSize,
+    }
+    queryProductList(param).then((res) => {
+        if (res.data.code == 0) {
+            pagination.total = res.data.data.total
+            data.productList = res.data.data.list
         }
+    })
+}
 
-        // 点击取消按钮
-        const onCancel = () => {
-            productFormRef.value.resetFields()
-            visible.value = false
-        };
+// 导出表格
+const onExport = () => {
+    productExport().then((res) => {
+        if (res.data.type == 'application/json') {
+            message.error('导出错误！')
+        } else {
+            let blob = new Blob([res.data], {
+                type: "application/vnd.ms-excel"
+            })
+            let a = document.createElement('a')
+            a.setAttribute("download", "产品信息.xlsx");
+            a.href = window.URL.createObjectURL(blob)
+            a.click()
+            window.URL.revokeObjectURL(a.href)
+        }
+    })
+}
 
-        return {
-            columns,
-            rules,
-            data,
-            onSelectChange,
-            onSearch,
-            product,
-            title,
-            visible,
-            disabled,
-            operation,
-            onProducts,
-            onCreate,
-            onEdit,
-            productFormRef,
-            onSave,
-            onCancel,
-            onDelete,
-            getProductList,
-            onExport,
-            keyWord,
-            pagination,
-            onPagination,
-        };
-    },
+// 点击取消按钮
+const onCancel = () => {
+    productFormRef.value.resetFields()
+    visible.value = false
 }
 </script>
 
diff --git a/web/src/views/Register.vue b/web/src/views/Register.vue
index 9002559..ba04ea6 100644
--- a/web/src/views/Register.vue
+++ b/web/src/views/Register.vue
@@ -22,111 +22,95 @@
     </a-form>
 </template>
 
-<script>
+<script setup>
 import { ref, reactive } from 'vue';
 import { useRouter } from 'vue-router';
 import { userRegister, getVerifyCode } from '../api/user';
 import { message } from 'ant-design-vue';
 
-export default {
-    setup() {
-        const router = useRouter()
+const router = useRouter()
 
-        // 用户注册
-        const formData = reactive({
-            email: '',
-            code: '',
-            password1: '',
-            password2: '',
-        });
+// 用户注册
+const formData = reactive({
+    email: '',
+    code: '',
+    password1: '',
+    password2: '',
+});
 
-        // 表单校验
-        const rules = {
-            email: [{
-                required: true,
-                message: '请输入邮箱!',
-                trigger: 'blur',
-            }, {
-                pattern: /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/,
-                message: '邮箱格式不正确',
-                trigger: 'blur',
-            }],
-            code: [{ required: true, message: '请输入验证码!' }],
-            password1: [{ required: true, message: '请输入密码!' }],
-            password2: [{ required: true, message: '请输入密码!' }],
-        };
+// 表单校验
+const rules = {
+    email: [{
+        required: true,
+        message: '请输入邮箱!',
+        trigger: 'blur',
+    }, {
+        pattern: /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/,
+        message: '邮箱格式不正确',
+        trigger: 'blur',
+    }],
+    code: [{ required: true, message: '请输入验证码!' }],
+    password1: [{ required: true, message: '请输入密码!' }],
+    password2: [{ required: true, message: '请输入密码!' }],
+};
 
-        const loading = ref(false)
-        const disabled = ref(false)
-        const registerFormRef = ref()
-        const buttonText = ref('获取验证码')
+const loading = ref(false)
+const disabled = ref(false)
+const registerFormRef = ref()
+const buttonText = ref('获取验证码')
 
-        const onRegister = () => {
-            registerFormRef.value.validateFields().then(() => {
-                if (formData.password1 != formData.password2) {
-                    message.warn('密码不一致');
-                    return
-                }
-                let param = {
-                    email: formData.email,
-                    code: formData.code,
-                    password: formData.password2,
-                }
-                userRegister(param).then((res) => {
-                    if (res.data.code == 0) {
-                        message.success('注册成功');
-                        onLogin()
-                    }
-                    if (res.data.code == 10001) {
-                        message.warn('该用户已经存在');
-                    }
-                    if (res.data.code == 10005) {
-                        message.error('验证码错误');
-                    }
-                })
-            })
-        };
-
-        // 获取验证码
-        const onGetCode = () => {
-            if (formData.email == '') {
-                message.warn('邮箱不能为空')
-                return
-            }
-            loading.value = true
-            let param = {
-                email: formData.email
-            }
-            getVerifyCode(param).then((res) => {
-                if (res.data.code == 0) {
-                    loading.value = false
-                    disabled.value = true
-                    buttonText.value = '验证码已发送'
-                }
-                if (res.data.code == 10004) {
-                    loading.value = false
-                    message.error('验证码发送失败')
-                }
-            })
+const onRegister = () => {
+    registerFormRef.value.validateFields().then(() => {
+        if (formData.password1 != formData.password2) {
+            message.warn('密码不一致');
+            return
         }
-
-        // 跳转到登录页面
-        const onLogin = () => {
-            router.push("/login")
+        let param = {
+            email: formData.email,
+            code: formData.code,
+            password: formData.password2,
         }
+        userRegister(param).then((res) => {
+            if (res.data.code == 0) {
+                message.success('注册成功');
+                onLogin()
+            }
+            if (res.data.code == 10001) {
+                message.warn('该用户已经存在');
+            }
+            if (res.data.code == 10005) {
+                message.error('验证码错误');
+            }
+        })
+    })
+};
 
-        return {
-            formData,
-            rules,
-            registerFormRef,
-            loading,
-            disabled,
-            buttonText,
-            onRegister,
-            onLogin,
-            onGetCode,
-        };
-    },
+// 获取验证码
+const onGetCode = () => {
+    if (formData.email == '') {
+        message.warn('邮箱不能为空')
+        return
+    }
+    loading.value = true
+    let param = {
+        email: formData.email
+    }
+    getVerifyCode(param).then((res) => {
+        if (res.data.code == 0) {
+            loading.value = false
+            disabled.value = true
+            buttonText.value = '验证码已发送'
+        }
+        if (res.data.code == 10004) {
+            loading.value = false
+            message.error('验证码发送失败')
+        }
+    })
+}
+
+// 跳转到登录页面
+const onLogin = () => {
+    router.push("/login")
 }
 </script>
 
diff --git a/web/src/views/Result.vue b/web/src/views/Result.vue
index 943744d..f2e5c35 100644
--- a/web/src/views/Result.vue
+++ b/web/src/views/Result.vue
@@ -8,24 +8,16 @@
     </div>
 </template>
 
-<script>
+<script setup>
 import { useRouter } from 'vue-router'
 import { useStore } from '../store/index';
 
-export default {
-    setup() {
+const router = useRouter()
+const store = useStore()
 
-        const router = useRouter()
-        const store = useStore()
-        
-        const onBuy = () => {
-            store.selectedKeys = 'subscribe'
-            router.push('/subscribe')
-        }
-        return {
-            onBuy
-        }
-    }
+const onBuy = () => {
+    store.selectedKeys = 'subscribe'
+    router.push('/subscribe')
 }
 </script>
 
diff --git a/web/src/views/Subscribe.vue b/web/src/views/Subscribe.vue
index d2b1363..0fb2cf4 100644
--- a/web/src/views/Subscribe.vue
+++ b/web/src/views/Subscribe.vue
@@ -25,7 +25,8 @@
                     <div class="content">能力不设限，新功能优先体验</div><br />
                     <a-button v-if="version == 1 || version == 3" type="primary" size="large" class="btn-buy"
                         @click="onPay(2)" shape="round" :disabled="disabled">立即购买</a-button>
-                    <a-button v-if="version == 2" type="primary" size="large" class="btn-buy" shape="round">{{ expired
+                    <a-button v-if="version == 2" type="primary" size="large" class="btn-buy" shape="round">{{
+                        expired
                     }} 到期</a-button>
                     <br />
                     <div class="subscribe-list" v-for="item in ['客户管理', '合同管理', '产品管理', '仪表盘可体验30天']">
@@ -41,7 +42,8 @@
                     <div class="content">能力不设限，新功能优先体验</div><br />
                     <a-button v-if="version == 1 || version == 2" type="primary" size="large" class="btn-buy"
                         @click="onPay(3)" shape="round" :disabled="disabled">立即购买</a-button>
-                    <a-button v-if="version == 3" type="primary" size="large" class="btn-buy" shape="round">{{ expired
+                    <a-button v-if="version == 3" type="primary" size="large" class="btn-buy" shape="round">{{
+                        expired
                     }} 到期</a-button>
                     <br />
                     <div class="subscribe-list" v-for="item in ['客户管理', '合同管理', '产品管理', '仪表盘可体验365天']">
@@ -54,87 +56,64 @@
     </div>
 </template>
 
-<script>
+<script setup>
 import { ref, reactive, onBeforeMount } from 'vue';
 import { CheckCircleFilled } from '@ant-design/icons-vue';
 import { subscribePay, getSubscribeInfo } from '../api/subscribe';
 import { useRouter } from 'vue-router'
 import moment from 'moment'
 
-export default {
-    components: {
-        CheckCircleFilled
-    },
-    setup() {
+const router = useRouter()
 
-        const router = useRouter()
+const version = ref(0)
+const expired = ref(undefined)
+const payUrl = ref()
+const visible = ref(false)
+const disabled = ref(false)
+const activedClass = reactive(['card', 'card', 'card'])
 
-        const version = ref(0)
-        const expired = ref(undefined)
-        const payUrl = ref()
-        const visible = ref(false)
-        const disabled = ref(false)
-        const activedClass = reactive(['card', 'card', 'card'])
+const payResult = ref(false)
+const title = ref('')
+const buttonText = ref(undefined)
 
-        const payResult = ref(false)
-        const title = ref('')
-        const buttonText = ref(undefined)
+const isClick = (index) => {
+    active.value = index
+}
 
-        const isClick = (index) => {
-            active.value = index
-        }
+// 初始化数据
+onBeforeMount(() => { subscribeInfo() })
 
-        // 初始化数据
-        onBeforeMount(() => { subscribeInfo() })
-
-        // 点击支付
-        const onPay = (ver) => {
-            let param = {
-                version: ver
-            }
-            subscribePay(param).then((res) => {
-                if (res.data.code == 0) {
-                    visible.value = false
-                    payResult.value = true
-                    window.open(res.data.data.payUrl, '_self')
-                }
-            })
-        }
-
-        // 获取用户订阅信息
-        const subscribeInfo = () => {
-            getSubscribeInfo().then((res) => {
-                if (res.data.code == 0) {
-                    version.value = res.data.data.version
-                    expired.value = moment(res.data.data.expired * 1000).format('YYYY-MM-DD')
-                    if (res.data.data.version !== 1) {
-                        disabled.value = true
-                    }
-                    if (res.data.data.version == 1) {
-                        activedClass[0] = 'selected-free-card'
-                    }
-                    if (res.data.data.version == 2 || res.data.data.version == 3) {
-                        activedClass[res.data.data.version-1] = 'selected-card'
-                    }
-                }
-            })
-        }
-
-        return {
-            version,
-            expired,
-            onPay,
-            payUrl,
-            visible,
-            disabled,
-            payResult,
-            title,
-            activedClass,
-            buttonText,
-            isClick,
-            subscribeInfo,
-        }
+// 点击支付
+const onPay = (ver) => {
+    let param = {
+        version: ver
     }
+    subscribePay(param).then((res) => {
+        if (res.data.code == 0) {
+            visible.value = false
+            payResult.value = true
+            window.open(res.data.data.payUrl, '_self')
+        }
+    })
+}
+
+// 获取用户订阅信息
+const subscribeInfo = () => {
+    getSubscribeInfo().then((res) => {
+        if (res.data.code == 0) {
+            version.value = res.data.data.version
+            expired.value = moment(res.data.data.expired * 1000).format('YYYY-MM-DD')
+            if (res.data.data.version !== 1) {
+                disabled.value = true
+            }
+            if (res.data.data.version == 1) {
+                activedClass[0] = 'selected-free-card'
+            }
+            if (res.data.data.version == 2 || res.data.data.version == 3) {
+                activedClass[res.data.data.version - 1] = 'selected-card'
+            }
+        }
+    })
 }
 </script>