refactor: element-plus升级正式版本移除size为mini的值同步修改

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)

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>

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>