From 1f9236ab566f1ef133218100a63df3521b58c0dd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A9=99=E5=AD=90?= <454313500@qq.com>
Date: Mon, 1 Nov 2021 21:26:01 +0800
Subject: [PATCH] =?UTF-8?q?=E5=89=8D=E7=AB=AF=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 Yi.Vue/src/api/fileApi.js                     |  11 +-
 Yi.Vue/src/layouts/default/Drawer.vue         |  44 ++++--
 Yi.Vue/src/layouts/default/Settings.vue       |  89 +++++++----
 .../src/layouts/default/widgets/Account.vue   |  18 ++-
 Yi.Vue/src/store/modules/home.js              |   3 +
 Yi.Vue/src/store/modules/user.js              |  14 +-
 Yi.Vue/src/views/userInfo.vue                 | 146 +++++++++++-------
 7 files changed, 214 insertions(+), 111 deletions(-)

diff --git a/Yi.Vue/src/api/fileApi.js b/Yi.Vue/src/api/fileApi.js
index 4162c042..6a999fbb 100644
--- a/Yi.Vue/src/api/fileApi.js
+++ b/Yi.Vue/src/api/fileApi.js
@@ -1,16 +1,11 @@
 import myaxios from '@/util/myaxios'
 export default {
-    OnPostUploadImage(file) {
+    Upload(file) {
         return myaxios({
-            url: '/File/OnPostUploadImage',
+            url: '/File/Upload',
             method: 'post',
+            headers: { "Content-Type": "multipart/form-data" },
             data: file
         })
-    },
-    getLogs() {
-        return myaxios({
-            url: '/File/GetLogs',
-            method: 'get'
-        })
     }
 }
\ No newline at end of file
diff --git a/Yi.Vue/src/layouts/default/Drawer.vue b/Yi.Vue/src/layouts/default/Drawer.vue
index c5370793..5d080a8b 100644
--- a/Yi.Vue/src/layouts/default/Drawer.vue
+++ b/Yi.Vue/src/layouts/default/Drawer.vue
@@ -4,13 +4,13 @@
     v-model="$store.state.home.drawer"
     :dark="dark"
     :right="$vuetify.rtl"
-    :src="$store.state.home.drawerImage ? image : ''"
+    :src="drawerImage ? image : ''"
     :mini-variant.sync="$store.state.home.mini"
     mini-variant-width="80"
     app
     width="260"
   >
-    <template v-if="$store.state.home.drawerImage" #img="props">
+    <template v-if="drawerImage" #img="props">
       <v-img :key="image" :gradient="gradient" v-bind="props" />
     </template>
 
@@ -49,28 +49,41 @@
 <script>
 // Utilities
 // import { get, sync } from 'vuex-pathify'
-import userApi from '@/api/userApi'
+import userApi from "@/api/userApi";
 export default {
   methods: {
-    init(){
-  userApi.GetMenuByHttpUser().then((resp)=>{
-    this.items=resp.data.children;
-  })
-},
+    init() {
+      userApi.GetMenuByHttpUser().then((resp) => {
+        this.items = resp.data.children;
+      });
+    },
     logout() {
       this.$store.dispatch("Logout").then((resp) => {
         this.$router.push({ path: "/login" });
       });
     },
   },
-  created(){this.init()},
+  created() {
+    this.init();
+  },
+  computed: {
+    image() {
+      return this.$store.getters.image;
+    },
+        gradient() {
+      return this.$store.getters.gradient;
+    },
+              drawerImage()
+    {
+     return  this.$store.state.home.drawerImage;
+    },
+                  dark()
+    {
+     return  this.$store.state.user.dark;
+    }
+  },
+
   data: () => ({
-    image:
-      "https://demos.creative-tim.com/material-dashboard-pro/assets/img/sidebar-1.jpg",
-
-    gradient: "rgba(228, 226, 226, 1), rgba(255, 255, 255, 0.7)",
-
-    dark: null,
 
     items: [],
   }),
@@ -88,7 +101,6 @@ export default {
         "./List"
       ),
   },
-
   // computed: {
   //   ...get('user', [
   //     'dark',
diff --git a/Yi.Vue/src/layouts/default/Settings.vue b/Yi.Vue/src/layouts/default/Settings.vue
index 968ce580..ef0a3bde 100644
--- a/Yi.Vue/src/layouts/default/Settings.vue
+++ b/Yi.Vue/src/layouts/default/Settings.vue
@@ -33,7 +33,7 @@
     >
       <v-card class="text-center mb-0" width="300">
         <v-card-text>
-          <strong class="mb-3 d-inline-block">SIDEBAR FILTERS</strong>
+          <strong class="mb-3 d-inline-block">主题颜色</strong>
 
           <v-item-group v-model="color" mandatory>
             <v-item v-for="color in colors" :key="color" :value="color">
@@ -51,7 +51,7 @@
 
           <v-divider class="my-4 secondary" />
 
-          <strong class="mb-3 d-inline-block">SIDEBAR BACKGROUND</strong>
+          <strong class="mb-3 d-inline-block">图层颜色</strong>
 
           <v-item-group v-model="gradient" mandatory>
             <v-item
@@ -75,7 +75,7 @@
           <v-divider class="my-4 secondary" />
 
           <v-row align="center" no-gutters>
-            <v-col cols="auto"> Dark Mode </v-col>
+            <v-col cols="auto"> 主题模式 </v-col>
 
             <v-spacer />
 
@@ -92,7 +92,7 @@
           <v-divider class="my-4 secondary" />
 
           <v-row align="center" no-gutters>
-            <v-col cols="auto"> Sidebar Mini </v-col>
+            <v-col cols="auto"> 迷你菜单 </v-col>
 
             <v-spacer />
 
@@ -109,7 +109,7 @@
           <v-divider class="my-4 secondary" />
 
           <v-row align="center" no-gutters>
-            <v-col cols="auto"> Sidebar Image </v-col>
+            <v-col cols="auto"> 图片菜单 </v-col>
 
             <v-spacer />
 
@@ -125,7 +125,7 @@
 
           <v-divider class="my-4 secondary" />
 
-          <strong class="mb-3 d-inline-block">IMAGES</strong>
+          <strong class="mb-3 d-inline-block">图片</strong>
 
           <v-card :disabled="!drawerImage" flat>
             <v-item-group
@@ -156,27 +156,27 @@
             class="mb-3"
             color="grey darken-1"
             dark
-            href="https://vuetifyjs.com/components/api-explorer"
+            href="https://github.com/ccnetcore/yi"
             rel="noopener"
             target="_blank"
           >
-            Vuetify Documentation
+            Github 地址
           </v-btn>
 
           <v-btn
             block
             color="info"
-            href="https://store.vuetifyjs.com/products/vuetify-material-dashboard-free"
+            href="https://ccnetcore.com"
             rel="noopener"
             target="_blank"
           >
-            Get Free Demo
+            加入我们
           </v-btn>
 
           <div class="my-12" />
 
           <div>
-            <strong class="mb-3 d-inline-block">THANK YOU FOR SHARING!</strong>
+            <strong class="mb-3 d-inline-block">感谢你的支持！</strong>
           </div>
 
           <v-btn class="ma-1" color="#55acee" dark rounded>
@@ -205,28 +205,56 @@ export default {
   name: "DashboardCoreSettings",
 
   mixins: [Proxyable],
+computed: {
+
+
+gradients(){
+  return this.$store.state.user.gradients},
+    image:{
+      get(){
+              return this.$store.state.user.drawer.image;
+            },
+            set(value){
+                this.$store.commit('SetImage',value)
+            }
+    },
+  gradient:{
+            get(){
+                 return this.$store.state.user.drawer.gradient;
+            },
+            set(value){
+                this.$store.commit('SetGradient',value)
+            }
+    },
+    images()
+    {
+     return  this.$store.state.user.images;
+    },
+        drawerImage:
+    {
+               get(){
+                      return  this.$store.state.home.drawerImage;
+            },
+            set(value){
+                this.$store.commit('SetDrawerImage',value)
+            },
+
+
+
+    },
+                      dark()
+    {
+     return  this.$store.state.user.dark;
+    },
+                          drawer()
+    {
+     return  this.$store.state.home.drawer;
+    }
+},
 
 
 
   data: () => ({
-    image:
-      "https://demos.creative-tim.com/material-dashboard-pro/assets/img/sidebar-1.jpg",
-    drawer: null,
-    drawerImage: true,
-    gradient: "rgba(228, 226, 226, 1), rgba(255, 255, 255, 0.7)",
-    images: [
-      "https://demos.creative-tim.com/material-dashboard-pro/assets/img/sidebar-1.jpg",
-      "https://demos.creative-tim.com/material-dashboard-pro/assets/img/sidebar-2.jpg",
-      "https://demos.creative-tim.com/material-dashboard-pro/assets/img/sidebar-3.jpg",
-      "https://demos.creative-tim.com/material-dashboard-pro/assets/img/sidebar-4.jpg",
-    ],
-    gradients: [
-      "rgba(0, 0, 0, .7), rgba(0, 0, 0, .7)",
-      "rgba(228, 226, 226, 1), rgba(255, 255, 255, 0.7)",
-      "rgba(244, 67, 54, .8), rgba(244, 67, 54, .8)",
-    ],
-    dark: null,
-
     color: "#E91E63",
     colors: ["#9C27b0", "#00CAE3", "#4CAF50", "#ff9800", "#E91E63", "#FF5252"],
     menu: false,
@@ -251,7 +279,10 @@ export default {
 
   watch: {
     color(val) {
+
       this.$vuetify.theme.themes[this.isDark ? "dark" : "light"].primary = val;
+                  this.$vuetify.theme.dark=true;
+      this.$vuetify.theme.dark=false;
     },
   },
 };
diff --git a/Yi.Vue/src/layouts/default/widgets/Account.vue b/Yi.Vue/src/layouts/default/widgets/Account.vue
index 6ee7ec91..c51c2d2d 100644
--- a/Yi.Vue/src/layouts/default/widgets/Account.vue
+++ b/Yi.Vue/src/layouts/default/widgets/Account.vue
@@ -15,7 +15,17 @@
         v-bind="attrs"
         v-on="on"
       >
-        <v-icon>mdi-account</v-icon>
+        <!-- <v-icon>mdi-account</v-icon> -->
+        <v-avatar size="36" class="elevation-2">
+              <!-- <img src="https://z3.ax1x.com/2021/05/09/gJadhD.jpg" /> -->
+              <img
+                :src="
+                  baseurl +
+                  '/File/ShowNoticeImg?filePath=' +
+                  $store.state.user.user.icon
+                "
+              />
+            </v-avatar>
       </v-btn>
     </template>
 
@@ -24,6 +34,12 @@
       flat
       nav
     >
+
+  <app-bar-item to="/"><v-list-item-title v-text="'用户名：橙子'" /></app-bar-item>
+  <app-bar-item to="/"><v-list-item-title v-text="'称号：橙子'" /></app-bar-item>
+
+        <v-divider class="mb-2 mt-2"/>
+
       <template v-for="(p, i) in profile">
         <v-divider
           v-if="p.divider"
diff --git a/Yi.Vue/src/store/modules/home.js b/Yi.Vue/src/store/modules/home.js
index d295be6f..debfaa81 100644
--- a/Yi.Vue/src/store/modules/home.js
+++ b/Yi.Vue/src/store/modules/home.js
@@ -41,6 +41,9 @@ const state = {
 }
 
 const mutations = { //变化//载荷
+    SetDrawerImage(state, drawerImage) {
+        state.drawerImage = drawerImage
+    }
 }
 
 //在action中可以配合axios进行权限判断
diff --git a/Yi.Vue/src/store/modules/user.js b/Yi.Vue/src/store/modules/user.js
index 84a08794..353add9d 100644
--- a/Yi.Vue/src/store/modules/user.js
+++ b/Yi.Vue/src/store/modules/user.js
@@ -17,10 +17,10 @@ const state = { //状态
         'rgba(244, 67, 54, .8), rgba(244, 67, 54, .8)',
     ],
     images: [
-        'https://demos.creative-tim.com/material-dashboard-pro/assets/img/sidebar-1.jpg',
-        'https://demos.creative-tim.com/material-dashboard-pro/assets/img/sidebar-2.jpg',
-        'https://demos.creative-tim.com/material-dashboard-pro/assets/img/sidebar-3.jpg',
-        'https://demos.creative-tim.com/material-dashboard-pro/assets/img/sidebar-4.jpg',
+        'https://z3.ax1x.com/2021/05/09/gJadhD.jpg',
+        'https://z3.ax1x.com/2021/05/09/gJadhD2.jpg',
+        'https://z3.ax1x.com/2021/05/09/gJadhD3.jpg',
+        'https://z3.ax1x.com/2021/05/09/gJadhD4.jpg',
     ],
     notifications: [],
     rtl: false
@@ -34,6 +34,12 @@ const mutations = { //变化//载荷
     SET_USER(state, user) {
         state.user = user
         setUser(user)
+    },
+    SetGradient(state, gradient) {
+        state.drawer.gradient = gradient
+    },
+    SetImage(state, image) {
+        state.drawer.image = image
     }
 }
 
diff --git a/Yi.Vue/src/views/userInfo.vue b/Yi.Vue/src/views/userInfo.vue
index 3eff24fe..dfb67f98 100644
--- a/Yi.Vue/src/views/userInfo.vue
+++ b/Yi.Vue/src/views/userInfo.vue
@@ -17,8 +17,13 @@
             <h4 class="text-h4 mb-3 text--primary">{{ userInfo.nick }}</h4>
 
             <p class="text--secondary">{{ userInfo.introduction }}</p>
-
-            <v-btn class="mr-4" color="primary" min-width="100" rounded>
+                  <input
+                    type="file"
+                    ref="imgFile"
+                    @change="uploadImage()"
+                    class="d-none"
+                  />
+            <v-btn class="mr-4" @click="choiceImg" color="primary" min-width="100" rounded>
               编辑头像
             </v-btn>
             <v-btn color="primary" min-width="100" rounded> 绑定QQ </v-btn>
@@ -57,17 +62,34 @@
                     <div>Account Information</div>
                     <v-row>
                       <v-col cols="12" md="4">
-                        <v-text-field color="purple" label="用户名" v-model="editInfo.username" disabled />
+                        <v-text-field
+                          color="purple"
+                          label="用户名"
+                          v-model="editInfo.username"
+                          disabled
+                        />
                       </v-col>
                       <v-col cols="12" md="4">
-                        <v-text-field color="purple" label="昵称" v-model="editInfo.nick" />
+                        <v-text-field
+                          color="purple"
+                          label="昵称"
+                          v-model="editInfo.nick"
+                        />
                       </v-col>
                       <v-col cols="12" md="4">
-                        <v-text-field color="purple" label="邮箱"  v-model="editInfo.email"/>
+                        <v-text-field
+                          color="purple"
+                          label="邮箱"
+                          v-model="editInfo.email"
+                        />
                       </v-col>
 
                       <v-col cols="12" md="6">
-                        <v-text-field color="purple" label="住址" v-model="editInfo.address" />
+                        <v-text-field
+                          color="purple"
+                          label="住址"
+                          v-model="editInfo.address"
+                        />
                       </v-col>
                       <v-col cols="12" md="6">
                         <v-text-field
@@ -79,7 +101,7 @@
                       </v-col>
                       <v-col cols="12">
                         <v-textarea
-                        v-model="editInfo.introduction"
+                          v-model="editInfo.introduction"
                           color="purple"
                           label="简介"
                           value="空空如也，Ta什么也没有留下"
@@ -135,10 +157,14 @@
                               <v-list-item-title>拥有角色：</v-list-item-title>
                               <v-list-item-subtitle>
                                 <v-row>
-                                  <v-col 
-                                  v-for="item in editInfo.roles"
-                                  :key="item.id"
-                                  cols="6" sm="3" md="1">{{item.role_name}}</v-col>
+                                  <v-col
+                                    v-for="item in editInfo.roles"
+                                    :key="item.id"
+                                    cols="6"
+                                    sm="3"
+                                    md="1"
+                                    >{{ item.role_name }}</v-col
+                                  >
                                 </v-row>
                               </v-list-item-subtitle>
                             </v-list-item-content>
@@ -150,10 +176,14 @@
                               <v-list-item-title>拥有菜单：</v-list-item-title>
                               <v-list-item-subtitle>
                                 <v-row>
-                                  <v-col 
-                                  v-for="item in menuInfo"
-                                  :key="item.id"
-                                  cols="6" sm="3" md="1">{{item.menu_name}}</v-col>
+                                  <v-col
+                                    v-for="item in menuInfo"
+                                    :key="item.id"
+                                    cols="6"
+                                    sm="3"
+                                    md="1"
+                                    >{{ item.menu_name }}</v-col
+                                  >
                                 </v-row>
                               </v-list-item-subtitle>
                             </v-list-item-content>
@@ -224,7 +254,9 @@
 
             <v-col cols="12" class="text-right">
               <v-btn color="primary" class="ma-4" min-width="100"> 清空 </v-btn>
-              <v-btn color="secondary" @click="save()" min-width="100"> 保存 </v-btn>
+              <v-btn color="secondary" @click="save()" min-width="100">
+                保存
+              </v-btn>
             </v-col>
           </v-form>
         </material-card>
@@ -234,71 +266,79 @@
 </template>
 
 <script>
+import fileApi from "../api/fileApi";
 import userApi from "../api/userApi";
 import menuApi from "../api/menuApi";
-import accountApi from "../api/accountApi"
+import accountApi from "../api/accountApi";
 export default {
   name: "UserProfileView",
   data: () => ({
     tab: "tab-1",
     userInfo: {},
     editInfo: {},
-    newPassword:"",
-    dis_newPassword:true,
-    menuInfo:[]
+    newPassword: "",
+    dis_newPassword: true,
+    menuInfo: [],
   }),
   created() {
     this.init();
   },
- watch:{
-    editInfo:{
-         handler(val, oldVal){
-             if(val.password.length>0 )
-             {
-               this.dis_newPassword=false;
-             }
-             else
-             {
-               this.dis_newPassword=true;
-             }
-         },
-         deep:true //true 深度监听
-     }
- },
+  watch: {
+    editInfo: {
+      handler(val, oldVal) {
+        if (val.password.length > 0) {
+          this.dis_newPassword = false;
+        } else {
+          this.dis_newPassword = true;
+        }
+      },
+      deep: true, //true 深度监听
+    },
+  },
 
   methods: {
-    save()
-    {
-      accountApi.changePassword(this.editInfo,this.newPassword).then(resp=>{
-        if(resp.status)
-        {
+    save() {
+      accountApi
+        .changePassword(this.editInfo, this.newPassword)
+        .then((resp) => {
+          if (resp.status) {
             this.$dialog.notify.error(resp.msg, {
               position: "top-right",
               timeout: 5000,
             });
-        }
-        else
-        {
- this.$dialog.notify.success(resp.msg, {
+          } else {
+            this.$dialog.notify.success(resp.msg, {
               position: "top-right",
               timeout: 5000,
             });
-        }
-        this.init();
-      })
+          }
+          this.init();
+        });
     },
     init() {
-      this.newPassword="";
+      this.newPassword = "";
       userApi.GetUserInRolesByHttpUser().then((resp) => {
         this.userInfo = resp.data;
-        this.userInfo.password="";
-      this.editInfo= Object.assign({}, this.userInfo);
+        this.userInfo.password = "";
+        this.editInfo = Object.assign({}, this.userInfo);
       });
 
-      menuApi.GetTopMenusByHttpUser().then(resp=>{
-this.menuInfo=resp.data;
-      })
+      menuApi.GetTopMenusByHttpUser().then((resp) => {
+        this.menuInfo = resp.data;
+      });
     },
+choiceImg() {
+      this.$refs.imgFile.dispatchEvent(new MouseEvent("click"));
+    },
+    uploadImage() {
+      const file = this.$refs.imgFile.files[0];
+      let formData = new FormData();
+      formData.append("img", file);
+      fileApi.Upload(formData).then(resp=>{
+        this.init();
+     })
+    },
+
   },
 };
 </script>