From 6ff9269fa8eee19f1b66715a1bbcbc7594653b4b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=83=9D=E5=85=88=E7=91=9E?= <1490493387@qq.com>
Date: Sun, 20 Feb 2022 23:56:31 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20element-plus=E5=8D=87=E7=BA=A7?=
 =?UTF-8?q?=E6=AD=A3=E5=BC=8F=E7=89=88=E6=9C=AC=E7=A7=BB=E9=99=A4size?=
 =?UTF-8?q?=E4=B8=BAmini=E7=9A=84=E5=80=BC=E5=90=8C=E6=AD=A5=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Pagination/index.vue           |   9 +-
 src/components/RightPanel/index.vue           | 150 ++++++++++++++++++
 src/components/SizeSelect/index.vue           |   4 +-
 src/layout/components/Settings/index.vue      |   2 -
 src/layout/index.vue                          |  12 +-
 src/utils/index.ts                            |  30 ++++
 src/views/dashboard/components/Team/index.vue |   2 +-
 src/views/dashboard/index.vue                 |  47 ++++--
 src/views/ums/member/index.vue                |   7 +-
 9 files changed, 228 insertions(+), 35 deletions(-)
 create mode 100644 src/components/RightPanel/index.vue
 create mode 100644 src/utils/index.ts

diff --git a/src/components/Pagination/index.vue b/src/components/Pagination/index.vue
index c1bd8d17..e0f85f21 100644
--- a/src/components/Pagination/index.vue
+++ b/src/components/Pagination/index.vue
@@ -17,7 +17,7 @@
 import {computed} from "vue";
 import {scrollTo} from '@/utils/scroll-to'
 
-const props=defineProps({
+const props = defineProps({
   total: {
     required: true,
     type: Number,
@@ -70,18 +70,19 @@ const pageSize = computed({
   get() {
     return props.limit
   },
-  set(val){
+  set(val) {
     emit('update:limit', val)
   }
 })
 
-function handleSizeChange(val){
+function handleSizeChange(val) {
   emit('pagination', {page: currentPage, limit: val})
   if (props.autoScroll) {
     scrollTo(0, 800)
   }
 }
-function handleCurrentChange(val){
+
+function handleCurrentChange(val) {
   emit('pagination', {page: val, limit: props.pageSizes})
   if (props.autoScroll) {
     scrollTo(0, 800)
diff --git a/src/components/RightPanel/index.vue b/src/components/RightPanel/index.vue
new file mode 100644
index 00000000..a90dece0
--- /dev/null
+++ b/src/components/RightPanel/index.vue
@@ -0,0 +1,150 @@
+<template>
+  <div ref="rightPanel" :class="{show:show}" class="rightPanel-container">
+    <div class="rightPanel-background"/>
+    <div class="rightPanel">
+      <!--      <div class="handle-button" :style="{'top':buttonTop+'px','background-color:blue'}" @click="show=!show">-->
+        <div class="handle-button" @click="show=!show">
+          <Close v-show="show"/>
+          <Setting v-show="!show"/>
+        </div>
+        <div class="rightPanel-items">
+          <slot/>
+        </div>
+      </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import {addClass, removeClass} from '@/utils/index'
+import {computed, onBeforeUnmount, onMounted, ref, watchEffect} from "vue";
+import {useSettingStoreHook} from "@/store/modules/settings";
+import {Close, Setting} from '@element-plus/icons'
+
+const props = defineProps({
+  clickNotClose: {
+    default: false,
+    type: Boolean
+  },
+  buttonTop: {
+    default: 250,
+    type: Number
+  }
+})
+
+const theme = computed(() => {
+  useSettingStoreHook().theme
+})
+
+const show = ref(false)
+
+watchEffect(() => {
+  if (show.value && !props.clickNotClose) {
+    addEventClick()
+  }
+  if (show.value) {
+    addClass(document.body, 'showRightPanel')
+  } else {
+    removeClass(document.body, 'showRightPanel')
+  }
+})
+
+function addEventClick() {
+  window.addEventListener('click', closeSidebar)
+}
+
+function closeSidebar(evt: any) {
+  const parent = evt.target.closest('.rightPanel')
+  if (!parent) {
+    show.value = false
+    window.removeEventListener('click', closeSidebar)
+  }
+}
+
+const rightPanel = ref(null)
+
+function insertToBody() {
+  console.log('insertToBody', rightPanel)
+  const elx = rightPanel.value as any
+  const body = document.querySelector('body') as any
+  body.insertBefore(elx, body.firstChild)
+}
+
+onMounted(() => {
+  console.log('theme', useSettingStoreHook().theme)
+  insertToBody()
+})
+
+onBeforeUnmount(() => {
+  const elx = rightPanel.value as any
+  elx.remove()
+})
+</script>
+
+<style>
+.showRightPanel {
+  overflow: hidden;
+  position: relative;
+  width: calc(100% - 15px);
+}
+</style>
+
+<style lang="scss" scoped>
+.rightPanel-background {
+  position: fixed;
+  top: 0;
+  left: 0;
+  opacity: 0;
+  transition: opacity .3s cubic-bezier(.7, .3, .1, 1);
+  background: rgba(0, 0, 0, .2);
+  z-index: -1;
+}
+
+.rightPanel {
+  width: 100%;
+  max-width: 260px;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  right: 0;
+  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, .05);
+  transition: all .25s cubic-bezier(.7, .3, .1, 1);
+  transform: translate(100%);
+  background: #fff;
+  z-index: 40000;
+}
+
+.show {
+  transition: all .3s cubic-bezier(.7, .3, .1, 1);
+
+  .rightPanel-background {
+    z-index: 20000;
+    opacity: 1;
+    width: 100%;
+    height: 100%;
+  }
+
+  .rightPanel {
+    transform: translate(0);
+  }
+}
+
+.handle-button {
+  width: 48px;
+  height: 48px;
+  position: absolute;
+  left: -48px;
+  text-align: center;
+  font-size: 24px;
+  border-radius: 6px 0 0 6px !important;
+  z-index: 0;
+  pointer-events: auto;
+  cursor: pointer;
+  color: #fff;
+  line-height: 48px;
+
+  i {
+    font-size: 24px;
+    line-height: 48px;
+  }
+}
+</style>
diff --git a/src/components/SizeSelect/index.vue b/src/components/SizeSelect/index.vue
index aaa643b0..91212f38 100644
--- a/src/components/SizeSelect/index.vue
+++ b/src/components/SizeSelect/index.vue
@@ -27,8 +27,6 @@ import {ElMessage} from 'element-plus'
 import {useAppStoreHook} from '@/store/modules/app'
 import SvgIcon from '@/components/SvgIcon/index.vue'
 
-const route = useRoute()
-const router = useRouter()
 const size = computed(() => useAppStoreHook().size)
 
 const sizeOptions = ref([
@@ -40,7 +38,7 @@ const sizeOptions = ref([
 function handleSetSize(size: string) {
   useAppStoreHook().setSize(size)
   window.location.reload()
-  ElMessage.success('切换全局大小成功')
+  ElMessage.success('切换布局大小成功')
 }
 
 </script>
diff --git a/src/layout/components/Settings/index.vue b/src/layout/components/Settings/index.vue
index 1b0575f2..2cc3539b 100644
--- a/src/layout/components/Settings/index.vue
+++ b/src/layout/components/Settings/index.vue
@@ -29,12 +29,10 @@
 <script>
 import ThemePicker from '@/components/ThemePicker/index.vue'
 import {defineComponent, reactive, toRefs, watch} from "vue"
-// import {useStore} from '@/store'
 import { useSettingStoreHook } from "@/store/modules/settings";
 export default defineComponent({
   components: {ThemePicker},
   setup() {
-    // const store = useStore()
     const state = reactive({
       fixedHeader:useSettingStoreHook().fixedHeader,
       tagsView:useSettingStoreHook().tagsView,
diff --git a/src/layout/index.vue b/src/layout/index.vue
index 6d6ede65..480b35e5 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -8,18 +8,19 @@
         <tags-view v-if="needTagsView"/>
       </div>
       <app-main/>
-<!--      <right-panel v-if="showSettings">
+      <right-panel v-if="showSettings">
         <settings/>
-      </right-panel>-->
+      </right-panel>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import {computed, watchEffect } from "vue"
+import {computed, watchEffect} from "vue"
 import {useWindowSize} from '@vueuse/core'
-import {AppMain, Navbar, Settings,TagsView} from './components/index'
+import {AppMain, Navbar, Settings, TagsView} from './components/index'
 import Sidebar from './components/Sidebar/index.vue'
+import RightPanel from '@/components/RightPanel/index.vue'
 
 import {useAppStoreHook} from "@/store/modules/app"
 import {useSettingStoreHook} from "@/store/modules/settings"
@@ -31,6 +32,7 @@ const sidebar = computed(() => useAppStoreHook().sidebar);
 const device = computed(() => useAppStoreHook().device);
 const needTagsView = computed(() => useSettingStoreHook().tagsView);
 const fixedHeader = computed(() => useSettingStoreHook().fixedHeader);
+const showSettings = computed(() => useSettingStoreHook().showSettings);
 
 const classObj = computed(() => ({
   hideSidebar: !sidebar.value.opened,
@@ -39,9 +41,7 @@ const classObj = computed(() => ({
   mobile: device.value === 'mobile'
 }))
 
-
 watchEffect(() => {
-
   if (width.value < WIDTH) {
     useAppStoreHook().toggleDevice("mobile")
     useAppStoreHook().closeSideBar(true)
diff --git a/src/utils/index.ts b/src/utils/index.ts
new file mode 100644
index 00000000..f38ef432
--- /dev/null
+++ b/src/utils/index.ts
@@ -0,0 +1,30 @@
+/**
+ * Check if an element has a class
+ * @param {HTMLElement} elm
+ * @param {string} cls
+ * @returns {boolean}
+ */
+export function hasClass(ele: HTMLElement, cls: string) {
+    return !!ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'))
+}
+
+/**
+ * Add class to element
+ * @param {HTMLElement} elm
+ * @param {string} cls
+ */
+export function addClass(ele: HTMLElement, cls: string) {
+    if (!hasClass(ele, cls)) ele.className += ' ' + cls
+}
+
+/**
+ * Remove class from element
+ * @param {HTMLElement} elm
+ * @param {string} cls
+ */
+export function removeClass(ele: HTMLElement, cls: string) {
+    if (hasClass(ele, cls)) {
+        const reg = new RegExp('(\\s|^)' + cls + '(\\s|$)')
+        ele.className = ele.className.replace(reg, ' ')
+    }
+}
\ No newline at end of file
diff --git a/src/views/dashboard/components/Team/index.vue b/src/views/dashboard/components/Team/index.vue
index d6b190e7..5e01ba29 100644
--- a/src/views/dashboard/components/Team/index.vue
+++ b/src/views/dashboard/components/Team/index.vue
@@ -22,7 +22,7 @@
                       <el-tag v-for="(position,i) in item.positions"
                               :type="colors[i%colors.length]"
                               :class="i!==0?'f-ml':''"
-                              size="mini">
+                              size="small">
                         {{ position }}
                       </el-tag>
                     </div>
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index 4e2c6fc0..5d922b0a 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -4,7 +4,7 @@
 
     <!-- 数据 -->
     <el-row :gutter="40" class="card-panel-col">
-      <el-col :xs="24" :lg="6" class="card-panel-col">
+<!--      <el-col :xs="24" :lg="6" class="card-panel-col">
         <div class="card-panel">
           <div class="card-panel-icon-wrapper" style="margin-top: -10px">
             <el-image style="width:200px; height: 100px"
@@ -20,7 +20,7 @@
             </div>
           </div>
         </div>
-      </el-col>
+      </el-col>-->
 
       <el-col :xs="24"  :lg="6" class="card-panel-col">
         <div class="card-panel">
@@ -29,9 +29,23 @@
           </div>
           <div class="card-panel-description">
             <div class="card-panel-text">
-              总访问量
+             访问数
             </div>
-            <div class="card-panel-num">123456</div>
+            <div class="card-panel-num">1000</div>
+          </div>
+        </div>
+      </el-col>
+
+      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
+        <div class="card-panel">
+          <div class="card-panel-icon-wrapper icon-message">
+            <svg-icon icon-class="message" class-name="card-panel-icon" />
+          </div>
+          <div class="card-panel-description">
+            <div class="card-panel-text">
+              消息数
+            </div>
+            <div class="card-panel-num">1000</div>
           </div>
         </div>
       </el-col>
@@ -45,7 +59,7 @@
             <div class="card-panel-text">
               支付金额
             </div>
-            <div class="card-panel-num">123456</div>
+            <div class="card-panel-num">1000</div>
           </div>
         </div>
       </el-col>
@@ -58,7 +72,7 @@
             <div class="card-panel-text">
               订单数
             </div>
-            <div class="card-panel-num">123456</div>
+            <div class="card-panel-num">1000</div>
           </div>
         </div>
       </el-col>
@@ -202,6 +216,9 @@ const nickname = computed(() => useUserStoreHook().nickname);
         background: #40c9c6;
       }
 
+      .icon-message {
+        background: #36a3f7;
+      }
 
       .icon-money {
         background: #f4516c;
@@ -216,8 +233,8 @@ const nickname = computed(() => useUserStoreHook().nickname);
       color: #40c9c6;
 
       .svg-icon {
-        width: 3em !important;
-        height: 3em !important;
+        width: 4em !important;
+        height: 4em !important;
       }
     }
 
@@ -225,8 +242,8 @@ const nickname = computed(() => useUserStoreHook().nickname);
       color: #36a3f7;
 
       .svg-icon {
-        width: 3.2em !important;
-        height: 3.2em !important;
+        width: 4em !important;
+        height: 4em !important;
       }
     }
 
@@ -234,8 +251,8 @@ const nickname = computed(() => useUserStoreHook().nickname);
       color: #f4516c;
 
       .svg-icon {
-        width: 3.2em !important;
-        height: 3.2em !important;
+        width: 4em !important;
+        height: 4em !important;
       }
     }
 
@@ -243,14 +260,14 @@ const nickname = computed(() => useUserStoreHook().nickname);
       color: #34bfa3;
 
       .svg-icon {
-        width: 3.2em !important;
-        height: 3.2em !important;
+        width: 4em !important;
+        height: 4em !important;
       }
     }
 
     .card-panel-icon-wrapper {
       float: left;
-      margin: 14px 0 0 6px;
+      margin: 14px 0 0 14px;
       padding: 16px;
       transition: all 0.38s ease-out;
       border-radius: 6px;
diff --git a/src/views/ums/member/index.vue b/src/views/ums/member/index.vue
index 76dd6d7b..c0b1a867 100644
--- a/src/views/ums/member/index.vue
+++ b/src/views/ums/member/index.vue
@@ -1,7 +1,6 @@
 <template>
-  <div class="app-container">
+  <div class="component-container">
     <el-form
-        size="mini"
         ref="queryForm"
         :model="queryParams"
         :inline="true"
@@ -75,8 +74,8 @@
       <el-table-column prop="birthday" label="出生日期"/>
       <el-table-column prop="status" width="80" label="状态">
         <template #default="scope">
-          <el-tag v-if="scope.row.status===1" type="success" size="mini">正常</el-tag>
-          <el-tag v-else type="info" size="mini">禁用</el-tag>
+          <el-tag v-if="scope.row.status===1" type="success" >正常</el-tag>
+          <el-tag v-else type="info" >禁用</el-tag>
         </template>
       </el-table-column>