update

README.md

@@ -28,8 +28,8 @@
 
 #### 这里是element-plus版本，如果你更倾向于使用antd，请[点击这里](https://github.com/1esse/vue-clownfish-admin)。
 
-## ✨ 最新版本 v1.0.9
-1. 废弃使用tsx形式定义menu组件，使用template定义
+## ✨ 最新版本 v1.0.10
+1. 优化模态框展示
 
 ## 🐬 简介
 [vue-clownfish-admin-elem](https://github.com/1esse/vue-clownfish-admin-elem) 是一个由Vue最新技术栈开发的后台管理前端简易框架。基于vue3，集成vue3最新生态系统的核心库实现。主要的技术栈有

package.json

@@ -5,7 +5,7 @@
     "email": "572116385@qq.com",
     "url": "https://1esse.github.io/vue-clownfish-admin/"
   },
-  "version": "1.0.9",
+  "version": "1.0.10",
   "private": "true",
   "scripts": {
     "dev": "vite",

src/app.d.ts

@@ -11,8 +11,3 @@ type SwitchType = 'on' | 'off'
  * production：生产环境；
  */
 type envType = 'development' | 'staging' | 'production'
-
-/**
- * 动画类型
- */
-type transitionType = 'fade' | 'fade-scale' | 'slide-left' | 'slide-right' | 'slide-up' | 'slide-down'

src/appConfig.ts

@@ -1,7 +1,7 @@
 /**
  * app标题
  */
-export const appTitle = 'ClownFish Admin'
+export const appTitle = '红坚果CPC'
 
 /**
  * 使用mock代理api请求：on开，off关  
@@ -15,7 +15,18 @@ export const mockNamespace: boolean = true
 
 /**
  * mock代理指定环境
- * 只在开发环境且appConfig的mock字段为‘on’的情况启动mock，
- * 由于线上预览需要，这里不限制环境
+ * 只在开发环境且appConfig的mock字段为‘on’的情况启动mock
  */
-export const mockEnv: envType[] = ['development', 'staging', 'production']
+export const mockEnv: envType[] = ['development', 'staging', 'production']
+
+/**
+ * 过渡动画类型
+ */
+export enum transitions {
+  fade = 'fade',
+  fadeScale = 'fade-scale',
+  slideLeft = 'slide-left',
+  slideRight = 'slide-right',
+  slideUp = 'slide-up',
+  slideDown = 'slide-down',
+}

src/components/Dialog.vue

@@ -1,33 +1,31 @@
 <script lang="ts" setup>
-import Shadow from './Shadow.vue'
 import { CloseBold } from '@element-plus/icons-vue'
 import isMobile from '@/composables/isMobile'
-import Loading from './Loading.vue'
+import { transitions } from '@/appConfig'
 
 const props = withDefaults(defineProps<{
   show: boolean
   width?: string
   height?: string
   maxWidth?: string
-  minHeight?: string
   maxHeight?: string
   loading?: boolean
   preventShadowEvent?: boolean
   showClose?: boolean
-  transition?: transitionType
+  transition?: transitions
 }>(), {
   width: '40rem',
-  height: 'auto',
+  height: '50vh',
   maxWidth: '90vw',
-  minHeight: '25rem',
   maxHeight: '90vh',
   loading: false,
   preventShadowEvent: true,
   showClose: true,
-  transition: 'fade-scale'
+  transition: transitions.fade
 })
 
 const _isMobile = isMobile()
+
 const emit = defineEmits<{
   (e: 'update:show', value: boolean): void
 }>()
@@ -46,21 +44,25 @@ function shadowClick() {
   <Teleport to="body">
     <Transition :name="props.transition" mode="out-in" appear>
       <Shadow v-if="props.show" contentCenter @shadowClick="shadowClick">
-        <div :style="{ position: 'relative', maxHeight: props.maxHeight }">
+        <div :style="{ position: 'relative', maxHeight: _isMobile ? '80vh' : props.maxHeight }">
           <div class="block shadow modal"
-            :style="{ width: props.width, height: props.height, maxWidth: props.maxWidth, minHeight: props.minHeight, maxHeight: props.maxHeight }">
+            :style="{ padding: 0, width: props.loading ? '30rem' : props.width, height: props.loading ? '20rem' : props.height, maxWidth: props.maxWidth, maxHeight: _isMobile ? '80vh' : props.maxHeight }">
             <Loading v-if="props.loading"></Loading>
             <template v-else>
-              <slot name="modalHeader"></slot>
+              <header class="modal-header">
+                <slot name="modalHeader"></slot>
+              </header>
               <main class="modal-main">
                 <slot></slot>
               </main>
-              <slot name="modalFooter"></slot>
+              <footer class="modal-footer">
+                <slot name="modalFooter"></slot>
+              </footer>
             </template>
           </div>
-          <el-icon v-if="!_isMobile && props.showClose" class="icon-close" @click="emit('update:show', false)">
+          <ElIcon v-if="!_isMobile && props.showClose" class="icon-close" @click="emit('update:show', false)">
             <CloseBold />
-          </el-icon>
+          </ElIcon>
         </div>
       </Shadow>
     </Transition>
@@ -72,13 +74,35 @@ function shadowClick() {
   display: flex;
   flex-direction: column;
   background-color: white;
+  transition: ease .3s;
+  transition-property: width, height;
+}
+
+.modal-header,
+.modal-footer {
+  padding: 0 1rem;
+  min-height: 3rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.modal-header {
+  font-size: 1.1rem;
+  border-bottom: 5px solid var(--light-gray);
+}
+
+.modal-footer {
+  border-top: 5px solid var(--light-gray);
 }
 
 .modal-main {
   flex: 1;
   overflow: auto;
   width: 100%;
   height: 100%;
+  font-size: 0.9rem;
+  padding: 1rem;
 }
 
 .icon-close {

src/layout/index.vue

@@ -5,7 +5,6 @@ import HeadBar from './HeadBar.vue'
 import SideBar from './SideBar.vue'
 import TabsBar from './TabsBar.vue'
 import isMobile from '@/composables/isMobile'
-import Shadow from '@/components/Shadow.vue'
 import Logo from '@/assets/logo.png'
 
 const _isMobile = isMobile()
@@ -66,7 +65,7 @@ provide('loading', loading)
     </ElContainer>
   </ElContainer>
   <Teleport to="body">
-    <Transition name="slide-left" mode="out-in" appear>
+    <Transition name="slide-right" mode="out-in" appear>
       <Shadow v-if="_isMobile && !sidebarRelated.collapsed" @shadowClick="sidebarRelated.collapsed = true">
         <div class="block sidebar-mobile">
           <RouterLink to="/">

src/styles/_variables.postcss

@@ -1,8 +1,8 @@
 :root {
     --theme-color: transparent;
-    --bg-color: #fafafa;
     --light-blue: #e6f7ff;
     --blue: #1890ff;
+    --light-gray: #f6f6f6;
     --gray: #999999;
     --black: #000000;
     --white: #ffffff;

src/utils/index.ts

@@ -38,4 +38,13 @@ export function sleep(ms: number) {
       resolve('wake up')
     }, ms)
   })
+}
+
+/**
+ * 
+ * @param arr Array<any>
+ * @returns 数组随机项
+ */
+export function randomPick(arr: Array<any>) {
+  return arr[Math.floor(Math.random() * arr.length)]
 }

src/views/modal.vue

@@ -1,16 +1,18 @@
 <script setup lang="ts">
-import Dialog from '@/components/Dialog.vue'
+import { transitions } from '@/appConfig'
 import { reactive } from 'vue'
+import { randomPick } from '@/utils'
+
 const dialogs = reactive({
   dialog1: {
     show: false,
     loading: false,
     timeout: <NodeJS.Timeout | null>null,
-    transition: <transitionType>'slide-down'
+    transition: <transitions>transitions.fade
   }
 })
 
-function showDialog(transition: transitionType) {
+function showDialog(transition: transitions) {
   dialogs.dialog1.timeout && clearTimeout(dialogs.dialog1.timeout)
   dialogs.dialog1.loading = true
   dialogs.dialog1.transition = transition
@@ -24,23 +26,39 @@ function showDialog(transition: transitionType) {
 <template>
   <div>
     <Dialog v-model:show="dialogs.dialog1.show" :loading="dialogs.dialog1.loading"
-      :transition="dialogs.dialog1.transition">
+      :transition="dialogs.dialog1.transition" height="63vh">
       <template #modalHeader>
-        <div style="height: 3rem; background-color: aquamarine;">模态框头部</div>
+        <span>Hello :)</span>
       </template>
-      <div style="width: 100%; height: 50rem;  background-color: lightblue;">
-        模态框内容
+      <div>
+        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Perferendis laborum aut deleniti in distinctio
+          accusamus, qui at labore, enim iure officia quis nobis odio aliquam perspiciatis fugit ratione. Voluptatibus,
+          repudiandae.</p>
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti, ut necessitatibus? Autem deserunt eos
+          dolorum quaerat atque, magnam accusantium, vitae inventore repellat doloremque officiis numquam voluptates in,
+          unde ad minus.</p>
+        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quam, sunt similique quasi delectus culpa, ex quo
+          eveniet libero quibusdam animi rerum, repellat veritatis nemo? Deleniti possimus incidunt iusto placeat
+          consequatur.</p>
+        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aut accusamus possimus, incidunt, nostrum est ipsum
+          fugit eveniet voluptatum facere porro facilis id perferendis a dicta voluptates soluta doloribus voluptas
+          consectetur!</p>
+        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Reiciendis quam quisquam nisi nihil autem
+          reprehenderit nesciunt natus molestias ipsum perferendis iste cupiditate atque veritatis quidem beatae
+          adipisci, maxime inventore quia.</p>
       </div>
       <template #modalFooter>
-        <div style="height: 3rem; background-color: bisque;">模态框底部</div>
+        <ElButton @click="dialogs.dialog1.show = false">取消</ElButton>
+        <ElButton type="primary" @click="dialogs.dialog1.show = false">确定</ElButton>
       </template>
     </Dialog>
-    <ElButton @click="showDialog('fade')">fade模态框</ElButton>
-    <ElButton @click="showDialog('fade-scale')">fade-scale模态框</ElButton>
-    <ElButton @click="showDialog('slide-up')">slide-up模态框</ElButton>
-    <ElButton @click="showDialog('slide-down')">slide-down模态框</ElButton>
-    <ElButton @click="showDialog('slide-left')">slide-left模态框</ElButton>
-    <ElButton @click="showDialog('slide-right')">slide-right模态框</ElButton>
+    <ElButton @click="showDialog(randomPick(Object.values(transitions)))">随机模态框</ElButton>
+    <ElButton @click="showDialog(transitions.fade)">fade模态框</ElButton>
+    <ElButton @click="showDialog(transitions.fadeScale)">fade-scale模态框</ElButton>
+    <ElButton @click="showDialog(transitions.slideUp)">slide-up模态框</ElButton>
+    <ElButton @click="showDialog(transitions.slideDown)">slide-down模态框</ElButton>
+    <ElButton @click="showDialog(transitions.slideLeft)">slide-left模态框</ElButton>
+    <ElButton @click="showDialog(transitions.slideRight)">slide-right模态框</ElButton>
   </div>
 </template>