From fdff786c073a9f34a1703d2c93b0b4fd3d372be8 Mon Sep 17 00:00:00 2001
From: Gavin <gavin.zhou@w-group.com.cn>
Date: Fri, 19 Nov 2021 18:47:31 +0800
Subject: [PATCH] =?UTF-8?q?=E7=96=91=E9=9A=BE=E6=9D=82=E7=97=87=E8=A7=A3?=
 =?UTF-8?q?=E5=86=B3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                                     |  7 +-
 mock/Dao/User.ts                              | 35 ++++---
 mock/user.ts                                  | 12 ++-
 .../transition/router-transition.vue          |  2 +-
 src/hooks/router/index.ts                     |  4 +-
 src/layout/components/Navbar/Navbar.vue       |  2 +-
 .../components/Navbar/components/TagsView.vue |  6 +-
 src/layout/components/Settings/Settings.vue   |  6 +-
 .../Sidebar/components/MenuList.vue           |  6 +-
 src/layout/components/TagsView/TagsView.vue   |  6 +-
 src/layout/index.vue                          | 14 +--
 src/router/permission.ts                      |  4 +-
 src/store/getters.ts                          |  5 +-
 src/store/index.ts                            | 17 ++--
 src/store/modules/user/state.ts               |  6 +-
 src/utils/axios/index.ts                      |  2 +-
 src/views/Login.vue                           |  2 +-
 .../account/center/Hooks/useUpLoadByAvatar.ts | 87 +++++++++++++++++
 src/views/account/center/index.vue            | 93 +++++++++++++++++--
 .../account/settings/hooks/useDialogTree.ts   |  4 +-
 src/views/account/settings/index.vue          | 42 ++++++---
 .../dashboard/components/MessageBoard.vue     |  2 +-
 src/views/dashboard/index.vue                 |  2 +-
 23 files changed, 280 insertions(+), 86 deletions(-)
 create mode 100644 src/views/account/center/Hooks/useUpLoadByAvatar.ts

diff --git a/README.md b/README.md
index fbcc108..48f2b11 100644
--- a/README.md
+++ b/README.md
@@ -2,7 +2,7 @@
  * @Description: 请输入....
  * @Author: Gavin
  * @Date: 2021-05-01 00:48:47
- * @LastEditTime: 2021-11-18 14:28:21
+ * @LastEditTime: 2021-11-19 18:46:28
  * @LastEditors: Gavin
 -->
 
@@ -24,9 +24,14 @@ Artemis Admin英文不太好先写中文了。本项目基于vue3.2+ts+antd-vue+
 - 单点登录功能
 - 动态路由加载
 - 主题色替换
+- 个人主页已经权限配置
 
 
 
+## 疑难杂症日记
+* 热更新白页内存移除=>store配置初始化
+* 热更新还是无法使用内容白页=>keep-alive和router-view 需要加key保证他的唯一性
+
 ## Project setup
 
 ```
diff --git a/mock/Dao/User.ts b/mock/Dao/User.ts
index bc01d89..0353447 100644
--- a/mock/Dao/User.ts
+++ b/mock/Dao/User.ts
@@ -4,7 +4,7 @@ import { Interface } from "readline"
  * @Description: User Tao声明
  * @Author: Gavin
  * @Date: 2021-08-04 16:55:59
- * @LastEditTime: 2021-10-26 16:53:50
+ * @LastEditTime: 2021-11-19 15:27:08
  * @LastEditors: Gavin
  */
 export interface UserInfo {
@@ -16,12 +16,13 @@ export interface UserInfo {
   avatar?: string
   gender?: string
   token?: string,
+  catchPhrase?:string,
   roles?: Array<string>,
-  content?: string,
-  unlike?: number | string,
-  like?: number | string,
-  action?:number,
-  action1?:number,
+  // content?: string,
+  // unlike?: number | string,
+  // like?: number | string,
+  // action?:number,
+  // action1?:number,
   setName?(name: string | number)
 }
 // const userData:userInfo={
@@ -40,10 +41,11 @@ class User implements UserInfo {
   roles
   content
   level
+  catchPhrase
   setName(name: string | number) {
     this.name = name
   }
-  constructor({ age, jobType, avatar, name, token, roles, content,level }: UserInfo) {
+  constructor({ age, jobType, avatar, name, token, roles, content,level,catchPhrase }: UserInfo) {
     this.age = age
     this.jobType = jobType
     this.level=level
@@ -52,23 +54,30 @@ class User implements UserInfo {
     this.setName(name)
     this.roles = roles
     this.content = content
+    this.catchPhrase=catchPhrase
   }
 }
 export default User
 
+interface Comment extends UserInfo {
+  content?: string,
+  unlike?: number | string,
+  like?: number | string,
+  action?:number,
+  action1?:number,
+}
 
-
-export class CommentItem extends User {
+export class CommentItem extends User implements Comment {
   like
   unlike
   content
   action
   action1
-  constructor(obj: UserInfo) {
+  constructor({like,unlike,content,...obj}:Comment) {
     super(obj)
-    this.unlike = obj.like
-    this.like = obj.unlike
-    this.content=obj.content
+    this.unlike = like
+    this.like = unlike
+    this.content=content
     this.action=0
     this.action1=0
   }
diff --git a/mock/user.ts b/mock/user.ts
index 1446f9d..750e1b7 100644
--- a/mock/user.ts
+++ b/mock/user.ts
@@ -2,7 +2,7 @@
  * @Description: 请输入....
  * @Author: Gavin
  * @Date: 2021-08-04 11:34:38
- * @LastEditTime: 2021-10-26 16:50:38
+ * @LastEditTime: 2021-11-19 15:41:05
  * @LastEditors: Gavin
  */
 import { MockMethod } from 'vite-plugin-mock'
@@ -27,12 +27,13 @@ export const userInfo: AccountList = {
         token: faker.datatype.uuid(),
         getUserInfo() {
             return new User({
-                name: faker.name.findName(),
+                name: faker.name.lastName() + faker.name.firstName(),
                 age: faker.random.number(),
                 jobType: faker.name.jobType(),
                 avatar: faker.image.avatar(),
                 level: "admin",
-                roles: ['admin']
+                roles: ['admin'],
+                catchPhrase: faker.company.catchPhrase()
 
             })
 
@@ -43,14 +44,15 @@ export const userInfo: AccountList = {
         token: faker.datatype.uuid(),
         getUserInfo() {
             return new User({
-                name: faker.name.findName(),
+                name: faker.name.lastName() + faker.name.firstName(),
                 age: faker.random.number(),
                 jobType: faker.name.jobType(),
                 avatar: faker.image.avatar(),
                 level: "user",
                 roles: ['user', "/account"
                     , "/account/center"
-                    , "/account/settings"]
+                    , "/account/settings"],
+                catchPhrase: faker.company.catchPhrase()
 
             })
 
diff --git a/src/components/transition/router-transition.vue b/src/components/transition/router-transition.vue
index f3d1ff4..e44e9a3 100644
--- a/src/components/transition/router-transition.vue
+++ b/src/components/transition/router-transition.vue
@@ -19,7 +19,7 @@
 
 <script lang="ts">
 import { defineComponent, computed } from 'vue'
-import { useStore } from '@/store'
+import { useStore } from 'vuex'
 
 export default defineComponent({
   name: 'RouterTransition',
diff --git a/src/hooks/router/index.ts b/src/hooks/router/index.ts
index acd00ef..16e476a 100644
--- a/src/hooks/router/index.ts
+++ b/src/hooks/router/index.ts
@@ -2,7 +2,7 @@
  * @Description: 请输入....
  * @Author: Gavin
  * @Date: 2021-08-06 10:00:31
- * @LastEditTime: 2021-10-27 11:03:02
+ * @LastEditTime: 2021-11-19 17:40:12
  * @LastEditors: Gavin
  */
 
@@ -95,7 +95,7 @@ export function filterAsyncRoutes(routes: Array<RouteRecordRaw>=asyncRoutes, rol
                 tmp.children = filterAsyncRoutes(tmp.children, roles,key);
             }
             // 如果有权限当前路由加入数组
-            console.error(tmp);
+            // console.error(tmp);
 
             res.push(tmp);
         }
diff --git a/src/layout/components/Navbar/Navbar.vue b/src/layout/components/Navbar/Navbar.vue
index c3f20c0..bceeabb 100644
--- a/src/layout/components/Navbar/Navbar.vue
+++ b/src/layout/components/Navbar/Navbar.vue
@@ -65,7 +65,7 @@
   </div>
 </template>
 <script lang='ts' setup>
-import { useStore } from '@/store'
+import { useStore } from 'vuex'
 import { useRoute } from 'vue-router'
 import {
   GithubOutlined,
diff --git a/src/layout/components/Navbar/components/TagsView.vue b/src/layout/components/Navbar/components/TagsView.vue
index 4dd33e5..0c93413 100644
--- a/src/layout/components/Navbar/components/TagsView.vue
+++ b/src/layout/components/Navbar/components/TagsView.vue
@@ -2,7 +2,7 @@
  * @Description: 标签层机翻勿6^Gavin^
  * @Author: Gavin
  * @Date: 2021-09-01 14:05:34
- * @LastEditTime: 2021-09-03 19:01:30
+ * @LastEditTime: 2021-11-19 17:40:21
  * @LastEditors: Gavin
 -->
 <template>
@@ -35,7 +35,7 @@
 
 import { watch, watchEffect, onMounted, computed } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
-import { useStore } from '@/store'
+import { useStore } from 'vuex'
 import { filterChildren as filterAffixTags } from "@/hooks/router"
 
 import {
@@ -85,7 +85,7 @@ const closeOtherLabels = (tag) => {
 
 }
 watch(() => visitedViews.value, () => {
-  console.error(visitedViews.value, "watchEffect");
+  // console.error(visitedViews.value, "watchEffect");
 
   if (visitedViews.value.some(item => {
     return item.name === $route.name
diff --git a/src/layout/components/Settings/Settings.vue b/src/layout/components/Settings/Settings.vue
index b23fce6..05d7fcb 100644
--- a/src/layout/components/Settings/Settings.vue
+++ b/src/layout/components/Settings/Settings.vue
@@ -2,7 +2,7 @@
  * @Description: 配置选项
  * @Author: Gavin
  * @Date: 2021-09-08 17:29:16
- * @LastEditTime: 2021-11-18 14:11:13
+ * @LastEditTime: 2021-11-19 17:40:25
  * @LastEditors: Gavin
 -->
 <template>
@@ -45,7 +45,7 @@ import { useDark, useToggle } from '@vueuse/core'
 import { ref, reactive, watch } from 'vue'
 import type { UnwrapRef } from 'vue'
 import type { FormProp } from '@/components/Form/interface'
-import { useStore } from '@/store'
+import { useStore } from 'vuex'
 import { SettingFilled} from '@ant-design/icons-vue'
 
 const visible = ref<boolean>(false)
@@ -57,7 +57,7 @@ const afterVisibleChange = (bool: boolean) => {
 const showDrawer = () => {
   visible.value = true
 }
-console.error($store.state.tagsView.isShow)
+// console.error($store.state.tagsView.isShow)
 interface FormState {
   tabViews: boolean
   color: string
diff --git a/src/layout/components/Sidebar/components/MenuList.vue b/src/layout/components/Sidebar/components/MenuList.vue
index e7b86aa..5b19527 100644
--- a/src/layout/components/Sidebar/components/MenuList.vue
+++ b/src/layout/components/Sidebar/components/MenuList.vue
@@ -2,7 +2,7 @@
  * @Description: 请输入....
  * @Author: Gavin
  * @Date: 2021-08-08 22:07:59
- * @LastEditTime: 2021-11-17 17:13:04
+ * @LastEditTime: 2021-11-19 17:40:28
  * @LastEditors: Gavin
 -->
 
@@ -28,7 +28,7 @@ import { reactive, computed, watch, onMounted} from 'vue'
 
 
 
-import { useStore } from '@/store'
+import { useStore } from 'vuex'
 import { useRouter, useRoute } from 'vue-router'
 import { filterAsyncRoutes as isHidden } from '@/hooks/router'
 import MenuItem from '../components/MenuItem.vue'
@@ -82,7 +82,7 @@ watch(
   () => $route.fullPath,
   () => {
     if ($route.name == 'Login' || props.collapsed) return
-    console.error("OpenKey", getOpenKeys(), $route);
+    // console.error("OpenKey", getOpenKeys(), $route);
     state.openKeys = getOpenKeys()
     state.selectedKeys = [$route.name]
   }
diff --git a/src/layout/components/TagsView/TagsView.vue b/src/layout/components/TagsView/TagsView.vue
index 0102332..9b83310 100644
--- a/src/layout/components/TagsView/TagsView.vue
+++ b/src/layout/components/TagsView/TagsView.vue
@@ -2,7 +2,7 @@
  * @Description: 标签层机翻勿6^Gavin^
  * @Author: Gavin
  * @Date: 2021-09-01 14:05:34
- * @LastEditTime: 2021-10-22 15:32:41
+ * @LastEditTime: 2021-11-19 17:40:32
  * @LastEditors: Gavin
 -->
 <template>
@@ -37,7 +37,7 @@
 
 import { watch, watchEffect, onMounted, computed, unref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
-import { useStore } from '@/store'
+import { useStore } from 'vuex'
 import { filterChildren as filterAffixTags, filterAsyncRoutes as filterHidden } from "@/hooks/router"
 
 import {
@@ -90,7 +90,7 @@ const closeOtherLabels = (tag) => {
 
 }
 watch(() => visitedViews.value, () => {
-  console.error(visitedViews.value, "watchEffect");
+  // console.error(visitedViews.value, "watchEffect");
 
   if (visitedViews.value.some(item => {
     return item.name === $route.name
diff --git a/src/layout/index.vue b/src/layout/index.vue
index 883c3a2..370dffc 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -2,7 +2,7 @@
  * @Description: 主页框架布局
  * @Author: Gavin
  * @Date: 2021-07-31 17:06:32
- * @LastEditTime: 2021-11-04 14:07:43
+ * @LastEditTime: 2021-11-19 18:34:13
  * @LastEditors: Gavin
 -->
 <template>
@@ -50,9 +50,9 @@
         >
           <router-view v-slot="{ Component, route }">
             <transition name="fade" mode="out-in">
-            <keep-alive>
-              <component :is="Component" :key="route.full" />
-            </keep-alive>
+              <keep-alive :key="$route.full">
+                <component :is="Component" :key="$route.full" />
+              </keep-alive>
             </transition>
           </router-view>
         </section>
@@ -74,12 +74,12 @@ import {
 } from '@/layout/components/index'
 import { useRoute } from 'vue-router'
 import { ref, computed, provide, watch } from 'vue'
-import { useStore } from '@/store'
+import { useStore } from 'vuex'
 //hook
 import { getPointerLocationByElement } from '@/hooks/global/common/index'
 import { useStorage } from '@vueuse/core'
 const collapsed = ref<boolean>(false)
-// const $route = useRoute()
+const $route = useRoute()
 const $store = useStore()
 const pointerLocation = getPointerLocationByElement()
 const offsetWidth = document.body.offsetWidth
@@ -88,6 +88,8 @@ const op = computed(() => {
   return offsetWidth - pointerLocation.x > offsetWidth * 0.08 ? 0 : 1
 })
 const storage = useStorage<boolean>('storg', true, sessionStorage)
+ 
+ 
 
 </script>
 <style lang="scss" scope>
diff --git a/src/router/permission.ts b/src/router/permission.ts
index 2ef1cf0..0c64b79 100644
--- a/src/router/permission.ts
+++ b/src/router/permission.ts
@@ -2,7 +2,7 @@
  * @Description: 路由守卫
  * @Author: Gavin
  * @Date: 2021-07-21 09:53:05
- * @LastEditTime: 2021-11-10 15:35:50
+ * @LastEditTime: 2021-11-19 17:40:36
  * @LastEditors: Gavin
  */
 import { isNavigationFailure, Router, RouteRecordRaw, RouteLocationNormalized, NavigationGuardNext } from 'vue-router'
@@ -90,7 +90,7 @@ export function createGuardHook(router: Router): void {
   router.afterEach((to: RouteLocationNormalized, from: RouteLocationNormalized) => {
     const htmlTitle = useTitle()
     htmlTitle.value = to.meta.title as string
-    console.error("导航完成", to);
+    // console.error("导航完成", to);
 
     NProgress.done()
   })
diff --git a/src/store/getters.ts b/src/store/getters.ts
index 27c5663..d04267c 100644
--- a/src/store/getters.ts
+++ b/src/store/getters.ts
@@ -2,18 +2,17 @@
  * @Description: 请输入....
  * @Author: Gavin
  * @Date: 2021-07-20 16:33:10
- * @LastEditTime: 2021-09-17 18:42:56
+ * @LastEditTime: 2021-11-19 15:59:46
  * @LastEditors: Gavin
  */
 
 
+
 const getters = {
   sidebar: (state:any)=> state.app.name,
   userInfo:(state:any)=> state.user,
   visitedViews:(state:any)=>state.tagsView.visitedViews,
   themeBackgroundColor:(state:any)=>state.theme.themeBackgroundColor,
   isNavShow:(state:any)=>state.tagsView.isShow,
-  
-
 }
 export default getters
diff --git a/src/store/index.ts b/src/store/index.ts
index 5f3558a..432620a 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -2,7 +2,7 @@
  * @Description: 状态管理工具
  * @Author: Gavin
  * @Date: 2021-07-20 13:39:08
- * @LastEditTime: 2021-11-03 17:39:50
+ * @LastEditTime: 2021-11-18 16:06:42
  * @LastEditors: Gavin
  */
 
@@ -20,18 +20,19 @@ const store = createStore<IStore>({
 })
 
 
-export const key: InjectionKey<Store<IStore>> = Symbol()
+// export const key: InjectionKey<Store<IStore>> = Symbol()
 
 
 
 
-// 定义你自己的“useStore”组合函数
-export function useStore() {
-  return baseUseStore(key)
-}
+// // 定义你自己的“useStore”组合函数
+// export function useStore() {
+//   return baseUseStore(key)
+// }
 export function setupStore(app: App) {
-  app.use(store, key)
-  console.log(store, 'vuex')
+  // app.use(store, key)
+  // console.log(store, 'vuex')
+  app.use(store)
 }
 
 export default store
\ No newline at end of file
diff --git a/src/store/modules/user/state.ts b/src/store/modules/user/state.ts
index 0d4bfb1..4780f08 100644
--- a/src/store/modules/user/state.ts
+++ b/src/store/modules/user/state.ts
@@ -2,7 +2,7 @@
  * @Description: state定义
  * @Author: Gavin
  * @Date: 2021-07-20 14:51:12
- * @LastEditTime: 2021-10-26 16:51:21
+ * @LastEditTime: 2021-11-19 15:37:41
  * @LastEditors: Gavin
  */
 import { createStorage } from '@/utils/storage'
@@ -20,6 +20,7 @@ export type IUserState = {
   avatar: string
   roles: any[]
   info?: any
+  catchPhrase:string
 }
 
 export const state: IUserState = {
@@ -31,7 +32,8 @@ export const state: IUserState = {
   level:"",
   username:Storage.get(CACHE_USERNAME, ''),
   age:0,
-  jobType:''
+  jobType:'',
+  catchPhrase:''
 
   // info: Storage.get(CURRENT_USER, {})
 }
diff --git a/src/utils/axios/index.ts b/src/utils/axios/index.ts
index c3f23b6..5616c39 100644
--- a/src/utils/axios/index.ts
+++ b/src/utils/axios/index.ts
@@ -219,7 +219,7 @@ const transform: AxiosTransform = {
     // 请求是否被取消
     const isCancel = axios.isCancel(error)
     if (!isCancel) {
-      console.error(error);
+      // console.error(error);
       
       checkStatus(error.response && error.response.status, msg)
     } else {
diff --git a/src/views/Login.vue b/src/views/Login.vue
index d1f0e73..02b40df 100644
--- a/src/views/Login.vue
+++ b/src/views/Login.vue
@@ -59,7 +59,7 @@ import type { LoginFrom } from '@/components/Form/base'//深坑一定要用type
 import type { RuleObject, ValidateErrorEntity } from 'ant-design-vue/es/form/interface'
 import { UserOutlined, LockOutlined } from '@ant-design/icons-vue'
 
-import { useStore } from '@/store'
+import { useStore } from 'vuex'
 import { useRouter } from 'vue-router'
 
 
diff --git a/src/views/account/center/Hooks/useUpLoadByAvatar.ts b/src/views/account/center/Hooks/useUpLoadByAvatar.ts
new file mode 100644
index 0000000..8ac09f8
--- /dev/null
+++ b/src/views/account/center/Hooks/useUpLoadByAvatar.ts
@@ -0,0 +1,87 @@
+/*
+ * @Description: 请输入....
+ * @Author: Gavin
+ * @Date: 2021-11-18 18:38:28
+ * @LastEditTime: 2021-11-19 11:56:15
+ * @LastEditors: Gavin
+ */
+
+interface FileItem {
+  uid: string;
+  name?: string;
+  status?: string;
+  response?: string;
+  url?: string;
+  type?: string;
+  size: number;
+  originFileObj: any;
+}
+
+interface FileInfo {
+  file: FileItem;
+  fileList: FileItem[];
+}
+
+function getBase64(img: Blob, callback: (base64Url: string) => void) {
+  const reader = new FileReader();
+  reader.addEventListener('load', () => callback(reader.result as string));
+  reader.readAsDataURL(img);
+}
+interface UploadEvent{
+  handleCancel?:()=>void
+  handlePreview?:(file:FileItem)=>void
+  handleChange:(file:FileInfo)=>void
+  beforeUpload:(file:FileItem)=>void
+}
+
+interface UploadByAvatar extends UploadEvent{
+  previewImage?:string
+  previewVisible?:boolean
+  fileList:Ref<[]>
+  loading:Ref<boolean>
+  imageUrl:Ref<string>
+}
+import {Ref,ref} from 'vue'
+import { message } from 'ant-design-vue';
+export default function ():UploadByAvatar {
+  const fileList=ref<[]>([]),
+  loading=ref<boolean>(false),
+  imageUrl = ref<string>(''),
+  handleChange = (info: FileInfo) => {
+    if (info.file.status === 'uploading') {
+      loading.value = true;
+      return;
+    }
+    if (info.file.status === 'done') {
+      // Get this url from response in real world.
+      getBase64(info.file.originFileObj, (base64Url: string) => {
+        imageUrl.value = base64Url;
+        loading.value = false;
+      });
+    }
+    if (info.file.status === 'error') {
+      loading.value = false;
+      message.error('upload error');
+    }
+  },
+  beforeUpload = (file: FileItem) => {
+    const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
+    if (!isJpgOrPng) {
+      message.error('You can only upload JPG file!');
+    }
+    const isLt2M = file.size / 1024 / 1024 < 2;
+    if (!isLt2M) {
+      message.error('Image must smaller than 2MB!');
+    }
+    return isJpgOrPng && isLt2M;
+  };
+  return {
+    fileList,
+    loading,
+    imageUrl,
+    handleChange,
+    beforeUpload
+  }
+ 
+  
+}
\ No newline at end of file
diff --git a/src/views/account/center/index.vue b/src/views/account/center/index.vue
index c4dc11c..bb12560 100644
--- a/src/views/account/center/index.vue
+++ b/src/views/account/center/index.vue
@@ -2,25 +2,98 @@
  * @Description: 请输入....
  * @Author: Gavin
  * @Date: 2021-10-02 09:35:40
- * @LastEditTime: 2021-10-02 09:39:30
+ * @LastEditTime: 2021-11-19 17:20:57
  * @LastEditors: Gavin
 -->
 <template>
- <div>
-   
- </div>
+  <a-form :model="form" :label-col="labelCol" :wrapper-col="wrapperCol">
+    <a-row :gutter="16" class="card">
+      <a-col :span="12" class="card-info">
+        <a-card title="个人资料" style="width:100%">
+          <a-form-item label="用户名">
+            <a-input v-model:value="form.name" />
+          </a-form-item>
+          <a-divider />
+          <a-form-item label="职位">
+            <a-input v-model:value="form.jobType" />
+          </a-form-item>
+          <a-divider />
+          <a-form-item label="公司">
+            <a-input v-model:value="form.companyName" />
+          </a-form-item>
+          <a-divider />
+          <a-form-item label="个人简介">
+            <a-textarea v-model:value="form.catchPhrase" show-count :maxlength="100" />
+          </a-form-item>
+          <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
+            <a-button type="primary" @click="onSubmit">Save</a-button>
+            <a-button style="margin-left: 10px">Cancel</a-button>
+          </a-form-item>
+        </a-card>
+      </a-col>
+      <a-col :span="5" class="card-avatar">
+        <section class="avatar-uploader">
+          <a-upload
+            v-model:file-list="fileList"
+            name="avatar"
+            list-type="picture-card"
+            :show-upload-list="false"
+            action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
+            :before-upload="beforeUpload"
+            @change="handleChange"
+          >
+            <img v-if="form.avatar" :src="form.avatar" alt="avatar" />
+            <div v-else>
+              <loading-outlined v-if="loading"></loading-outlined>
+              <plus-outlined v-else></plus-outlined>
+              <div class="ant-upload-text">Upload</div>
+            </div>
+          </a-upload>
+        </section>
+      </a-col>
+    </a-row>
+  </a-form>
 </template>
 
 <script lang='ts' setup>
+import { useStore } from 'vuex'
+import { onMounted, computed, toRaw, reactive } from 'vue'
+import useUpLoadByAvatar from './Hooks/useUpLoadByAvatar'
 
-//expects props options
-/*const props = defineProps({
-foo: String
-})*/
-//expects emits options
-//const emit = defineEmits(['update', 'delete'])
+import type { IUserState } from '@/store/modules/user/state'
+const $store = useStore()
+
+//坑早知道用interface了, type的继承真的丑
+type UserInfo = IUserState & {
+  companyName: string
+
+}
+const form = reactive<UserInfo>({ companyName: "Arvato", ...toRaw($store.getters.userInfo) })
+const labelCol = { span: 4 },
+  wrapperCol = { span: 20 },
+  onSubmit = (): void => {
+    console.log("芯片短缺");
+
+  }
+const { fileList, loading, imageUrl, handleChange, beforeUpload } = useUpLoadByAvatar()
+
+//
 </script>
 
 <style scoped lang='scss'>
+.card {
+  .card-info {
+  }
+  .card-avatar {
+    position: relative;
 
+    .avatar-uploader {
+      width: auto;
+      position: absolute;
+      top: 0;
+      left: 50%;
+      transform: translateX(-50%);
+    }
+  }
+}
 </style>
\ No newline at end of file
diff --git a/src/views/account/settings/hooks/useDialogTree.ts b/src/views/account/settings/hooks/useDialogTree.ts
index e88db42..6f362fa 100644
--- a/src/views/account/settings/hooks/useDialogTree.ts
+++ b/src/views/account/settings/hooks/useDialogTree.ts
@@ -2,12 +2,12 @@
  * @Description: 使用dialog的hooks
  * @Author: Gavin
  * @Date: 2021-10-28 14:50:58
- * @LastEditTime: 2021-10-28 16:06:08
+ * @LastEditTime: 2021-11-18 16:05:45
  * @LastEditors: Gavin
  */
 
 import { ref, computed, watch, Ref } from 'vue'
-import { useStore } from '@/store'
+import { useStore } from 'vuex'
 import { SelectEvent } from 'ant-design-vue/es/tree/Tree';
 interface UseDialogTree {
   expandedKeys: Ref<string[]>
diff --git a/src/views/account/settings/index.vue b/src/views/account/settings/index.vue
index 640806f..ccceecb 100644
--- a/src/views/account/settings/index.vue
+++ b/src/views/account/settings/index.vue
@@ -2,18 +2,20 @@
  * @Description: 请输入....
  * @Author: Gavin
  * @Date: 2021-10-02 09:35:40
- * @LastEditTime: 2021-11-03 11:08:10
+ * @LastEditTime: 2021-11-19 18:31:14
  * @LastEditors: Gavin
 -->
 <template>
   <div>
     <a-table :columns="columns" :data-source="data">
-      <template #operation="{ record }">
-        <a @click="openDialog">setting</a>
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.key === 'operation'">
+          <a @click="openDialog(record)">setting</a>
+        </template>
       </template>
     </a-table>
 
-    <a-modal v-model:visible="visible" title="Basic" @ok="visible=false">
+    <a-modal v-model:visible="visible" title="Basic" @ok="visible = false">
       <a-tree
         :show-line="showLine"
         :show-icon="showIcon"
@@ -56,14 +58,14 @@
 
 <script lang='ts' setup>
 import { ref, computed, watch } from 'vue'
-import { useStore } from '@/store'
+import { useStore } from 'vuex'
 import { filterAsyncRoutes } from '@/hooks/router'
 import { NodeIndexOutlined } from '@ant-design/icons-vue';
 import { SelectEvent } from 'ant-design-vue/es/tree/Tree';
 import { getPermissionList } from '@/api/account/index'
 import useDialogTree from './hooks/useDialogTree'
-
 import _ from 'lodash'
+
 const $store = useStore()
 interface DataItem {
   key: string | number;
@@ -73,17 +75,20 @@ interface DataItem {
 //api来自antdv
 const columns = [
   {
-    title: 'name',
-    dataIndex: 'name',
+    title: '#',
+    dataIndex: 'key',
   },
   {
     title: 'level',
     dataIndex: 'level',
   },
+  {
+    title: 'des',
+    dataIndex: 'des',
+  },
   {
     title: 'operation',
-    dataIndex: 'operation',
-    slots: { customRender: 'operation' },
+    key:"operation"
   },
 ];
 
@@ -91,8 +96,14 @@ const data = ref<DataItem[]>([
 
   {
     key: 0,
-    name: $store.getters['userInfo'].name,
-    level: $store.getters['userInfo'].level,
+    des: "用户权限",
+    level: "user",
+
+  },
+  {
+    key: 1,
+    des: "管理员",
+    level: "admin",
 
   }
 ])
@@ -109,14 +120,17 @@ const { expandedKeys, selectedKeys, checkedKeys, showLine, showIcon, onSelect }
 // const expandedKeys = ref<string[]>([]);
 // const selectedKeys = ref<string[]>([]);
 // const checkedKeys = ref<string[]>([]);
-const openDialog = async () => {
+const openDialog = async (raw) => {
+
   checkedKeys.value = _.cloneDeep($store.getters['userInfo'].roles)
   let per = await getPermissionList({
-    level: $store.getters['userInfo'].level
+    level: raw.level
   })
   per = filterAsyncRoutes(undefined, per)
   perMeuns.value = per
   visible.value = true
+
+
 }
 
 //加载菜单
diff --git a/src/views/dashboard/components/MessageBoard.vue b/src/views/dashboard/components/MessageBoard.vue
index 361005b..21e140c 100644
--- a/src/views/dashboard/components/MessageBoard.vue
+++ b/src/views/dashboard/components/MessageBoard.vue
@@ -56,7 +56,7 @@ import moment from 'moment';
 import { LikeFilled, LikeOutlined, DislikeFilled, DislikeOutlined } from '@ant-design/icons-vue';
 import { ref, onMounted, reactive } from 'vue';
 import { getComments } from "@/api/dashboard/index"
-import { useStore } from '@/store'
+import { useStore } from 'vuex'
 import type {UserInfo} from '@/utils/interface/index'
 
 const $store = useStore();
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index 1cd037d..4476322 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -52,7 +52,7 @@
 <script  lang='ts' setup >
 import DataPane from './components/DataPane.vue'
 import MessageBoard from './components/MessageBoard.vue'
-import { useStore } from '@/store'
+import { useStore } from 'vuex'
 import { computed } from 'vue'
 import {
   UserOutlined