From 9ecfa2ae5c410697ef5d680d8802554744df3c42 Mon Sep 17 00:00:00 2001
From: qiangyanwen <508737091@qq.com>
Date: Sun, 19 Jun 2022 15:52:40 +0800
Subject: [PATCH] testcasee

---
 web/monit_web/src/components/Sidebar.vue |  17 --
 web/monit_web/src/router/index.js        |  47 ------
 web/monit_web/src/store/index.js         |  24 +--
 web/monit_web/src/views/BaseCharts.vue   | 158 -------------------
 web/monit_web/src/views/Dashboard.vue    | 167 +-------------------
 web/monit_web/src/views/Donate.vue       |  26 ---
 web/monit_web/src/views/Editor.vue       |  58 -------
 web/monit_web/src/views/Tabs.vue         | 137 ----------------
 web/monit_web/src/views/User.vue         | 192 -----------------------
 9 files changed, 8 insertions(+), 818 deletions(-)
 delete mode 100644 web/monit_web/src/views/BaseCharts.vue
 delete mode 100644 web/monit_web/src/views/Donate.vue
 delete mode 100644 web/monit_web/src/views/Editor.vue
 delete mode 100644 web/monit_web/src/views/Tabs.vue
 delete mode 100644 web/monit_web/src/views/User.vue

diff --git a/web/monit_web/src/components/Sidebar.vue b/web/monit_web/src/components/Sidebar.vue
index 0af649b..42149c1 100644
--- a/web/monit_web/src/components/Sidebar.vue
+++ b/web/monit_web/src/components/Sidebar.vue
@@ -43,23 +43,6 @@ export default {
                 index: "/dashboard",
                 title: "系统首页",
             },
-            {
-                icon: "el-icon-lx-cascades",
-                index: "/table",
-                title: "基础表格",
-            },
-
-            {
-                icon: "el-icon-lx-warn",
-                index: "7",
-                title: "错误处理",
-                subs: [
-                    {
-                        index: "/404",
-                        title: "404页面",
-                    },
-                ],
-            },
 
         ];
 
diff --git a/web/monit_web/src/router/index.js b/web/monit_web/src/router/index.js
index cb78cb7..848fd8f 100644
--- a/web/monit_web/src/router/index.js
+++ b/web/monit_web/src/router/index.js
@@ -13,48 +13,6 @@ const routes = [{
                     title: '系统首页'
                 },
                 component: () => import ( /* webpackChunkName: "dashboard" */ "../views/Dashboard.vue")
-            }, {
-                path: "/table",
-                name: "basetable",
-                meta: {
-                    title: '表格'
-                },
-                component: () => import ( /* webpackChunkName: "table" */ "../views/BaseTable.vue")
-            }, {
-                path: "/charts",
-                name: "basecharts",
-                meta: {
-                    title: '图表'
-                },
-                component: () => import ( /* webpackChunkName: "charts" */ "../views/BaseCharts.vue")
-            }, {
-                path: "/form",
-                name: "baseform",
-                meta: {
-                    title: '表单'
-                },
-                component: () => import ( /* webpackChunkName: "form" */ "../views/BaseForm.vue")
-            }, {
-                path: "/tabs",
-                name: "tabs",
-                meta: {
-                    title: 'tab标签'
-                },
-                component: () => import ( /* webpackChunkName: "tabs" */ "../views/Tabs.vue")
-            },   {
-                path: '/404',
-                name: '404',
-                meta: {
-                    title: '找不到页面'
-                },
-                component: () => import (/* webpackChunkName: "404" */ '../views/404.vue')
-            }, {
-                path: '/editor',
-                name: 'editor',
-                meta: {
-                    title: '富文本编辑器'
-                },
-                component: () => import (/* webpackChunkName: "editor" */ '../views/Editor.vue')
             }
         ]
     }, {
@@ -77,11 +35,6 @@ router.beforeEach((to, from, next) => {
     const role = localStorage.getItem('ms_username');
     if (!role && to.path !== '/login') {
         next('/login');
-    } else if (to.meta.permission) {
-        // 如果是管理员权限则可进入，这里只是简单的模拟管理员权限而已
-        role === 'admin'
-            ? next()
-            : next('/403');
     } else {
         next();
     }
diff --git a/web/monit_web/src/store/index.js b/web/monit_web/src/store/index.js
index 36c801c..519c57f 100644
--- a/web/monit_web/src/store/index.js
+++ b/web/monit_web/src/store/index.js
@@ -7,14 +7,10 @@ export default createStore({
     },
     mutations: {
         delTagsItem(state, data) {
-            state
-                .tagsList
-                .splice(data.index, 1);
+            state.tagsList.splice(data.index, 1);
         },
         setTagsItem(state, data) {
-            state
-                .tagsList
-                .push(data)
+            state.tagsList.push(data)
         },
         clearTags(state) {
             state.tagsList = []
@@ -27,21 +23,13 @@ export default createStore({
                 const item = state.tagsList[i];
                 if (item.path === data.$route.fullPath) {
                     if (i < len - 1) {
-                        data
-                            .$router
-                            .push(state.tagsList[i + 1].path);
+                        data.$router.push(state.tagsList[i + 1].path);
                     } else if (i > 0) {
-                        data
-                            .$router
-                            .push(state.tagsList[i - 1].path);
+                        data.$router.push(state.tagsList[i - 1].path);
                     } else {
-                        data
-                            .$router
-                            .push("/");
+                        data.$router.push("/");
                     }
-                    state
-                        .tagsList
-                        .splice(i, 1);
+                    state.tagsList.splice(i, 1);
                     break;
                 }
             }
diff --git a/web/monit_web/src/views/BaseCharts.vue b/web/monit_web/src/views/BaseCharts.vue
deleted file mode 100644
index f016ead..0000000
--- a/web/monit_web/src/views/BaseCharts.vue
+++ /dev/null
@@ -1,158 +0,0 @@
-<template>
-    <div>
-        <div class="crumbs">
-            <el-breadcrumb separator="/">
-                <el-breadcrumb-item>
-                    <i class="el-icon-pie-chart"></i> schart图表
-                </el-breadcrumb-item>
-            </el-breadcrumb>
-        </div>
-        <div class="container">
-            <div class="plugins-tips">
-                vue-schart：vue.js封装sChart.js的图表组件。
-                访问地址：
-                <a href="https://github.com/lin-xin/vue-schart" target="_blank">vue-schart</a>
-            </div>
-            <div class="schart-box">
-                <div class="content-title">柱状图</div>
-                <schart class="schart" canvasId="bar" :options="options1"></schart>
-            </div>
-            <div class="schart-box">
-                <div class="content-title">折线图</div>
-                <schart class="schart" canvasId="line" :options="options2"></schart>
-            </div>
-            <div class="schart-box">
-                <div class="content-title">饼状图</div>
-                <schart class="schart" canvasId="pie" :options="options3"></schart>
-            </div>
-            <div class="schart-box">
-                <div class="content-title">环形图</div>
-                <schart class="schart" canvasId="ring" :options="options4"></schart>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script>
-import Schart from "vue-schart";
-export default {
-    name: "basecharts",
-    components: {
-        Schart,
-    },
-    setup() {
-        const options1 = {
-            type: "bar",
-            title: {
-                text: "最近一周各品类销售图",
-            },
-            bgColor: "#fbfbfb",
-            labels: ["周一", "周二", "周三", "周四", "周五"],
-            datasets: [
-                {
-                    label: "家电",
-                    fillColor: "rgba(241, 49, 74, 0.5)",
-                    data: [234, 278, 270, 190, 230],
-                },
-                {
-                    label: "百货",
-                    data: [164, 178, 190, 135, 160],
-                },
-                {
-                    label: "食品",
-                    data: [144, 198, 150, 235, 120],
-                },
-            ],
-        };
-        const options2 = {
-            type: "line",
-            title: {
-                text: "最近几个月各品类销售趋势图",
-            },
-            bgColor: "#fbfbfb",
-            labels: ["6月", "7月", "8月", "9月", "10月"],
-            datasets: [
-                {
-                    label: "家电",
-                    data: [234, 278, 270, 190, 230],
-                },
-                {
-                    label: "百货",
-                    data: [164, 178, 150, 135, 160],
-                },
-                {
-                    label: "食品",
-                    data: [114, 138, 200, 235, 190],
-                },
-            ],
-        };
-        const options3 = {
-            type: "pie",
-            title: {
-                text: "服装品类销售饼状图",
-            },
-            legend: {
-                position: "left",
-            },
-            bgColor: "#fbfbfb",
-            labels: [
-                "T恤",
-                "牛仔裤",
-                "连衣裙",
-                "毛衣",
-                "七分裤",
-                "短裙",
-                "羽绒服",
-            ],
-            datasets: [
-                {
-                    data: [334, 278, 190, 235, 260, 200, 141],
-                },
-            ],
-        };
-        const options4 = {
-            type: "ring",
-            title: {
-                text: "环形三等分",
-            },
-            showValue: false,
-            legend: {
-                position: "bottom",
-                bottom: 40,
-            },
-            bgColor: "#fbfbfb",
-            labels: ["vue", "react", "angular"],
-            datasets: [
-                {
-                    data: [500, 500, 500],
-                },
-            ],
-        };
-        return {
-            options1,
-            options2,
-            options3,
-            options4,
-        };
-    },
-};
-</script>
-
-<style scoped>
-.schart-box {
-    display: inline-block;
-    margin: 20px;
-}
-.schart {
-    width: 600px;
-    height: 400px;
-}
-.content-title {
-    clear: both;
-    font-weight: 400;
-    line-height: 50px;
-    margin: 10px 0;
-    font-size: 22px;
-    color: #1f2f3d;
-}
-</style>
\ No newline at end of file
diff --git a/web/monit_web/src/views/Dashboard.vue b/web/monit_web/src/views/Dashboard.vue
index 9268684..35cf528 100644
--- a/web/monit_web/src/views/Dashboard.vue
+++ b/web/monit_web/src/views/Dashboard.vue
@@ -2,23 +2,6 @@
     <div>
         <el-row :gutter="20">
             <el-col :span="8">
-                <el-card shadow="hover" class="mgb20" style="height:252px;">
-                    <div class="user-info">
-                        <img src="../assets/img/img.jpg" class="user-avator" alt />
-                        <div class="user-info-cont">
-                            <div class="user-info-name">{{ name }}</div>
-                            <div>{{ role }}</div>
-                        </div>
-                    </div>
-                    <div class="user-info-list">
-                        上次登录时间：
-                        <span>2019-11-01</span>
-                    </div>
-                    <div class="user-info-list">
-                        上次登录地点：
-                        <span>东莞</span>
-                    </div>
-                </el-card>
                 <el-card shadow="hover" style="height:252px;">
                     <template #header>
                         <div class="clearfix">
@@ -28,8 +11,6 @@
                     Vue
                     <el-progress :percentage="71.3" color="#42b983"></el-progress>JavaScript
                     <el-progress :percentage="24.1" color="#f1e05a"></el-progress>CSS
-                    <el-progress :percentage="13.7"></el-progress>HTML
-                    <el-progress :percentage="5.9" color="#f56c6c"></el-progress>
                 </el-card>
             </el-col>
             <el-col :span="16">
@@ -68,47 +49,6 @@
                         </el-card>
                     </el-col>
                 </el-row>
-                <el-card shadow="hover" style="height:403px;">
-                    <template #header>
-                        <div class="clearfix">
-                            <span>待办事项</span>
-                            <el-button style="float: right; padding: 3px 0" type="text">添加</el-button>
-                        </div>
-                    </template>
-
-                    <el-table :show-header="false" :data="todoList" style="width:100%;">
-                        <el-table-column width="40">
-                            <template #default="scope">
-                                <el-checkbox v-model="scope.row.status"></el-checkbox>
-                            </template>
-                        </el-table-column>
-                        <el-table-column>
-                            <template #default="scope">
-                                <div class="todo-item" :class="{
-                                        'todo-item-del': scope.row.status,
-                                    }">{{ scope.row.title }}</div>
-                            </template>
-                        </el-table-column>
-                        <el-table-column width="60">
-                            <template>
-                                <i class="el-icon-edit"></i>
-                                <i class="el-icon-delete"></i>
-                            </template>
-                        </el-table-column>
-                    </el-table>
-                </el-card>
-            </el-col>
-        </el-row>
-        <el-row :gutter="20">
-            <el-col :span="12">
-                <el-card shadow="hover">
-                    <schart ref="bar" class="schart" canvasId="bar" :options="options"></schart>
-                </el-card>
-            </el-col>
-            <el-col :span="12">
-                <el-card shadow="hover">
-                    <schart ref="line" class="schart" canvasId="line" :options="options2"></schart>
-                </el-card>
             </el-col>
         </el-row>
     </div>
@@ -116,120 +56,17 @@
 
 <script>
 import Schart from "vue-schart";
-import { reactive } from "vue";
 export default {
     name: "dashboard",
     components: { Schart },
     setup() {
-        const name = localStorage.getItem("ms_username");
+        const name = localStorage.getItem("ms_,username");
         const role = name === "admin" ? "超级管理员" : "普通用户";
 
-        const data = reactive([
-            {
-                name: "2018/09/04",
-                value: 1083,
-            },
-            {
-                name: "2018/09/05",
-                value: 941,
-            },
-            {
-                name: "2018/09/06",
-                value: 1139,
-            },
-            {
-                name: "2018/09/07",
-                value: 816,
-            },
-            {
-                name: "2018/09/08",
-                value: 327,
-            },
-            {
-                name: "2018/09/09",
-                value: 228,
-            },
-            {
-                name: "2018/09/10",
-                value: 1065,
-            },
-        ]);
-        const options = {
-            type: "bar",
-            title: {
-                text: "最近一周各品类销售图",
-            },
-            xRorate: 25,
-            labels: ["周一", "周二", "周三", "周四", "周五"],
-            datasets: [
-                {
-                    label: "家电",
-                    data: [234, 278, 270, 190, 230],
-                },
-                {
-                    label: "百货",
-                    data: [164, 178, 190, 135, 160],
-                },
-                {
-                    label: "食品",
-                    data: [144, 198, 150, 235, 120],
-                },
-            ],
-        };
-        const options2 = {
-            type: "line",
-            title: {
-                text: "最近几个月各品类销售趋势图",
-            },
-            labels: ["6月", "7月", "8月", "9月", "10月"],
-            datasets: [
-                {
-                    label: "家电",
-                    data: [234, 278, 270, 190, 230],
-                },
-                {
-                    label: "百货",
-                    data: [164, 178, 150, 135, 160],
-                },
-                {
-                    label: "食品",
-                    data: [74, 118, 200, 235, 90],
-                },
-            ],
-        };
-        const todoList = reactive([
-            {
-                title: "今天要修复100个bug",
-                status: false,
-            },
-            {
-                title: "今天要修复100个bug",
-                status: false,
-            },
-            {
-                title: "今天要写100行代码加几个bug吧",
-                status: false,
-            },
-            {
-                title: "今天要修复100个bug",
-                status: false,
-            },
-            {
-                title: "今天要修复100个bug",
-                status: true,
-            },
-            {
-                title: "今天要写100行代码加几个bug吧",
-                status: true,
-            },
-        ]);
+
 
         return {
             name,
-            data,
-            options,
-            options2,
-            todoList,
             role,
         };
     },
diff --git a/web/monit_web/src/views/Donate.vue b/web/monit_web/src/views/Donate.vue
deleted file mode 100644
index 1b04b84..0000000
--- a/web/monit_web/src/views/Donate.vue
+++ /dev/null
@@ -1,26 +0,0 @@
-<template>
-    <div>
-        <div class="crumbs">
-            <el-breadcrumb separator="/">
-                <el-breadcrumb-item>
-                    <i class="el-icon-lx-redpacket_fill"></i> 支持作者
-                </el-breadcrumb-item>
-            </el-breadcrumb>
-        </div>
-        <div class="container">
-            <div class="plugins-tips">如果该框架对你有帮助，那就请作者喝杯饮料吧！加微信号linxin_20探讨问题。</div>
-            <div>
-                <img src="https://lin-xin.gitee.io/images/weixin.jpg" />
-            </div>
-        </div>
-    </div>
-</template>
-
-<script>
-export default {
-    name: "donate"
-};
-</script>
-
-<style>
-</style>
\ No newline at end of file
diff --git a/web/monit_web/src/views/Editor.vue b/web/monit_web/src/views/Editor.vue
deleted file mode 100644
index d26ae2b..0000000
--- a/web/monit_web/src/views/Editor.vue
+++ /dev/null
@@ -1,58 +0,0 @@
-<template>
-    <div>
-        <div class="crumbs">
-            <el-breadcrumb separator="/">
-                <el-breadcrumb-item>
-                    <i class="el-icon-lx-calendar"></i> 表单
-                </el-breadcrumb-item>
-                <el-breadcrumb-item>富文本编辑器</el-breadcrumb-item>
-            </el-breadcrumb>
-        </div>
-        <div class="container">
-            <div class="plugins-tips">
-                wangEditor：轻量级 web 富文本编辑器，配置方便，使用简单。
-                访问地址：
-                <a href="https://www.wangeditor.com/doc/" target="_blank">wangEditor</a>
-            </div>
-            <div class="mgb20" ref='editor'></div>
-            <el-button type="primary" @click="syncHTML">提交</el-button>
-        </div>
-    </div>
-</template>
-
-<script>
-import WangEditor from "wangeditor";
-import { ref, reactive, onMounted, onBeforeUnmount } from "vue";
-export default {
-    name: "editor",
-    setup() {
-        const editor = ref(null);
-        const content = reactive({
-            html: "",
-            text: "",
-        });
-        let instance;
-        onMounted(() => {
-            instance = new WangEditor(editor.value);
-            instance.config.zIndex = 1;
-            instance.create();
-        });
-        onBeforeUnmount(() => {
-            instance.destroy();
-            instance = null;
-        });
-        const syncHTML = () => {
-            content.html = instance.txt.html();
-            console.log(content.html);
-        };
-        return {
-            syncHTML,
-            editor,
-            content,
-        };
-    },
-};
-</script>
-
-<style>
-</style>
diff --git a/web/monit_web/src/views/Tabs.vue b/web/monit_web/src/views/Tabs.vue
deleted file mode 100644
index cfe1161..0000000
--- a/web/monit_web/src/views/Tabs.vue
+++ /dev/null
@@ -1,137 +0,0 @@
-<template>
-    <div class="">
-        <div class="crumbs">
-            <el-breadcrumb separator="/">
-                <el-breadcrumb-item><i class="el-icon-lx-copy"></i> tab选项卡</el-breadcrumb-item>
-            </el-breadcrumb>
-        </div>
-        <div class="container">
-            <el-tabs v-model="message">
-                <el-tab-pane :label="`未读消息(${state.unread.length})`" name="first">
-                    <el-table :data="state.unread" :show-header="false" style="width: 100%">
-                        <el-table-column>
-                            <template #default="scope">
-                                <span class="message-title">{{scope.row.title}}</span>
-                            </template>
-                        </el-table-column>
-                        <el-table-column prop="date" width="180"></el-table-column>
-                        <el-table-column width="120">
-                            <template #default="scope">
-                                <el-button size="small" @click="handleRead(scope.$index)">标为已读</el-button>
-                            </template>
-                        </el-table-column>
-                    </el-table>
-                    <div class="handle-row">
-                        <el-button type="primary">全部标为已读</el-button>
-                    </div>
-                </el-tab-pane>
-                <el-tab-pane :label="`已读消息(${state.read.length})`" name="second">
-                    <template v-if="message === 'second'">
-                        <el-table :data="state.read" :show-header="false" style="width: 100%">
-                            <el-table-column>
-                                <template #default="scope">
-                                    <span class="message-title">{{scope.row.title}}</span>
-                                </template>
-                            </el-table-column>
-                            <el-table-column prop="date" width="150"></el-table-column>
-                            <el-table-column width="120">
-                                <template #default="scope">
-                                    <el-button type="danger" @click="handleDel(scope.$index)">删除</el-button>
-                                </template>
-                            </el-table-column>
-                        </el-table>
-                        <div class="handle-row">
-                            <el-button type="danger">删除全部</el-button>
-                        </div>
-                    </template>
-                </el-tab-pane>
-                <el-tab-pane :label="`回收站(${state.recycle.length})`" name="third">
-                    <template v-if="message === 'third'">
-                        <el-table :data="state.recycle" :show-header="false" style="width: 100%">
-                            <el-table-column>
-                                <template #default="scope">
-                                    <span class="message-title">{{scope.row.title}}</span>
-                                </template>
-                            </el-table-column>
-                            <el-table-column prop="date" width="150"></el-table-column>
-                            <el-table-column width="120">
-                                <template #default="scope">
-                                    <el-button @click="handleRestore(scope.$index)">还原</el-button>
-                                </template>
-                            </el-table-column>
-                        </el-table>
-                        <div class="handle-row">
-                            <el-button type="danger">清空回收站</el-button>
-                        </div>
-                    </template>
-                </el-tab-pane>
-            </el-tabs>
-        </div>
-    </div>
-</template>
-
-<script>
-import { ref, reactive } from "vue";
-export default {
-    name: "tabs",
-    setup() {
-        const message = ref("first");
-        const state = reactive({
-            unread: [
-                {
-                    date: "2018-04-19 20:00:00",
-                    title: "【系统通知】该系统将于今晚凌晨2点到5点进行升级维护",
-                },
-                {
-                    date: "2018-04-19 21:00:00",
-                    title: "今晚12点整发大红包，先到先得",
-                },
-            ],
-            read: [
-                {
-                    date: "2018-04-19 20:00:00",
-                    title: "【系统通知】该系统将于今晚凌晨2点到5点进行升级维护",
-                },
-            ],
-            recycle: [
-                {
-                    date: "2018-04-19 20:00:00",
-                    title: "【系统通知】该系统将于今晚凌晨2点到5点进行升级维护",
-                },
-            ],
-        });
-
-        const handleRead = (index) => {
-            const item = state.unread.splice(index, 1);
-            console.log(item);
-            state.read = item.concat(state.read);
-        };
-        const handleDel = (index) => {
-            const item = state.read.splice(index, 1);
-            state.recycle = item.concat(state.recycle);
-        };
-        const handleRestore = (index) => {
-            const item = state.recycle.splice(index, 1);
-            state.read = item.concat(state.read);
-        };
-
-        return {
-            message,
-            state,
-            handleRead,
-            handleDel,
-            handleRestore,
-        };
-    },
-};
-</script>
-
-<style>
-.message-title {
-    cursor: pointer;
-}
-.handle-row {
-    margin-top: 30px;
-}
-</style>
-
diff --git a/web/monit_web/src/views/User.vue b/web/monit_web/src/views/User.vue
deleted file mode 100644
index 365abc3..0000000
--- a/web/monit_web/src/views/User.vue
+++ /dev/null
@@ -1,192 +0,0 @@
-<template>
-    <div>
-        <el-row :gutter="20">
-            <el-col :span="12">
-                <el-card shadow="hover">
-                    <template #header>
-                        <div class="clearfix">
-                            <span>基础信息</span>
-                        </div>
-                    </template>
-                    <div class="info">
-                        <div class="info-image" @click="showDialog">
-                            <img :src="avatarImg" />
-                            <span class="info-edit">
-                                <i class="el-icon-lx-camerafill"></i>
-                            </span>
-                        </div>
-                        <div class="info-name">{{ name }}</div>
-                        <div class="info-desc">不可能！我的代码怎么可能会有bug！</div>
-                    </div>
-                </el-card>
-            </el-col>
-            <el-col :span="12">
-                <el-card shadow="hover">
-                    <template #header>
-                        <div class="clearfix">
-                            <span>账户编辑</span>
-                        </div>
-                    </template>
-                    <el-form label-width="90px">
-                        <el-form-item label="用户名："> {{ name }} </el-form-item>
-                        <el-form-item label="旧密码：">
-                            <el-input type="password" v-model="form.old"></el-input>
-                        </el-form-item>
-                        <el-form-item label="新密码：">
-                            <el-input type="password" v-model="form.new"></el-input>
-                        </el-form-item>
-                        <el-form-item label="个人简介：">
-                            <el-input v-model="form.desc"></el-input>
-                        </el-form-item>
-                        <el-form-item>
-                            <el-button type="primary" @click="onSubmit">保存</el-button>
-                        </el-form-item>
-                    </el-form>
-                </el-card>
-            </el-col>
-        </el-row>
-        <el-dialog title="裁剪图片" v-model="dialogVisible" width="600px">
-            <vue-cropper ref="cropper" :src="imgSrc" :ready="cropImage" :zoom="cropImage" :cropmove="cropImage"
-                style="width: 100%; height: 400px"></vue-cropper>
-
-            <template #footer>
-                <span class="dialog-footer">
-                    <el-button class="crop-demo-btn" type="primary">选择图片
-                        <input class="crop-input" type="file" name="image" accept="image/*" @change="setImage" />
-                    </el-button>
-                    <el-button type="primary" @click="saveAvatar">上传并保存</el-button>
-                </span>
-            </template>
-        </el-dialog>
-    </div>
-</template>
-
-<script>
-import { reactive, ref } from "vue";
-import VueCropper from "vue-cropperjs";
-import "cropperjs/dist/cropper.css";
-import avatar from "../assets/img/img.jpg";
-export default {
-    name: "user",
-    components: {
-        VueCropper,
-    },
-    setup() {
-        const name = localStorage.getItem("ms_username");
-        const form = reactive({
-            old: "",
-            new: "",
-            desc: "不可能！我的代码怎么可能会有bug！",
-        });
-        const onSubmit = () => {};
-
-        const avatarImg = ref(avatar);
-        const imgSrc = ref("");
-        const cropImg = ref("");
-        const dialogVisible = ref(false);
-        const cropper = ref(null);
-
-        const showDialog = () => {
-            dialogVisible.value = true;
-            imgSrc.value = avatarImg.value;
-        };
-
-        const setImage = (e) => {
-            const file = e.target.files[0];
-            if (!file.type.includes("image/")) {
-                return;
-            }
-            const reader = new FileReader();
-            reader.onload = (event) => {
-                dialogVisible.value = true;
-                imgSrc.value = event.target.result;
-                cropper.value && cropper.value.replace(event.target.result);
-            };
-            reader.readAsDataURL(file);
-        };
-
-        const cropImage = () => {
-            cropImg.value = cropper.value.getCroppedCanvas().toDataURL();
-        };
-
-        const saveAvatar = () => {
-            avatarImg.value = cropImg.value;
-            dialogVisible.value = false;
-        };
-
-        return {
-            name,
-            form,
-            onSubmit,
-            cropper,
-            avatarImg,
-            imgSrc,
-            cropImg,
-            showDialog,
-            dialogVisible,
-            setImage,
-            cropImage,
-            saveAvatar,
-        };
-    },
-};
-</script>
-
-<style scoped>
-.info {
-    text-align: center;
-    padding: 35px 0;
-}
-.info-image {
-    position: relative;
-    margin: auto;
-    width: 100px;
-    height: 100px;
-    background: #f8f8f8;
-    border: 1px solid #eee;
-    border-radius: 50px;
-    overflow: hidden;
-}
-.info-image img {
-    width: 100%;
-    height: 100%;
-}
-.info-edit {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    background: rgba(0, 0, 0, 0.5);
-    opacity: 0;
-    transition: opacity 0.3s ease;
-}
-.info-edit i {
-    color: #eee;
-    font-size: 25px;
-}
-.info-image:hover .info-edit {
-    opacity: 1;
-}
-.info-name {
-    margin: 15px 0 10px;
-    font-size: 24px;
-    font-weight: 500;
-    color: #262626;
-}
-.crop-demo-btn {
-    position: relative;
-}
-.crop-input {
-    position: absolute;
-    width: 100px;
-    height: 40px;
-    left: 0;
-    top: 0;
-    opacity: 0;
-    cursor: pointer;
-}
-</style>
\ No newline at end of file