feat: 函数式弹框组件添加全屏、退出全屏操作按钮 (#546)

feat: 函数式弹框组件添加全屏、退出全屏操作按钮

src/views/able/timeline.vue

@@ -70,7 +70,7 @@ const activities = [
           placement="bottom"
         >
           <div class="message">
-            vue-pure-admin是基于Vue3.0+TypeScript+Vite2.0+Element-Plus编写的一套后台管理系统
+            vue-pure-admin是基于Vue3.0+TypeScript+Vite+Element-Plus编写的一套后台管理系统
           </div>
         </el-timeline-item>
       </el-timeline>

src/views/about/index.vue

@@ -28,19 +28,19 @@ Object.keys(devDependencies).forEach(key => {
 
 <template>
   <div>
-    <el-card class="box-card mb-4" shadow="never">
+    <el-card class="mb-4 box-card" shadow="never">
       <template #header>
         <div class="card-header">
           <span class="font-medium">关于</span>
         </div>
       </template>
       <span style="font-size: 15px">
-        Pure-Admin 是一个基于Vue3、Vite2、TypeScript、Element-Plus
+        Pure-Admin 是一个基于Vue3、Vite、TypeScript、Element-Plus
         的中后台解决方案，它可以帮助您快速搭建企业级中后台，提供现成的开箱解决方案及丰富的示例。原则上不收取任何费用及版权，可以放心使用，不过如需二次开源（比如用此平台二次开发并开源）请联系作者获取许可！
       </span>
     </el-card>
 
-    <el-card class="box-card m-4" shadow="never">
+    <el-card class="m-4 box-card" shadow="never">
       <template #header>
         <div class="card-header">
           <span class="font-medium">项目信息</span>
@@ -49,7 +49,7 @@ Object.keys(devDependencies).forEach(key => {
       <PureDescriptions :columns="columns" border :column="3" align="left" />
     </el-card>
 
-    <el-card class="box-card m-4" shadow="never">
+    <el-card class="m-4 box-card" shadow="never">
       <template #header>
         <div class="card-header">
           <span class="font-medium">生产环境依赖</span>
@@ -73,7 +73,7 @@ Object.keys(devDependencies).forEach(key => {
       </el-descriptions>
     </el-card>
 
-    <el-card class="box-card m-4" shadow="never">
+    <el-card class="m-4 box-card" shadow="never">
       <template #header>
         <div class="card-header">
           <span class="font-medium">开发环境依赖</span>

src/views/components/dialog/index.vue

@@ -35,6 +35,14 @@ function onFullscreenClick() {
   });
 }
 
+function onFullscreenIconClick() {
+  addDialog({
+    title: "全屏按钮",
+    fullscreenIcon: true,
+    contentRenderer: () => <p>弹框内容-全屏按钮</p>
+  });
+}
+
 function onModalClick() {
   addDialog({
     title: "无背景遮罩层",
@@ -394,6 +402,7 @@ function onBeforeSureClick() {
       <el-button @click="onBaseClick"> 基本使用 </el-button>
       <el-button @click="onDraggableClick"> 可拖拽 </el-button>
       <el-button @click="onFullscreenClick"> 全屏 </el-button>
+      <el-button @click="onFullscreenIconClick"> 全屏按钮 </el-button>
       <el-button @click="onModalClick"> 无背景遮罩层 </el-button>
       <el-button @click="onStyleClick"> 自定义弹出位置 </el-button>
       <el-button @click="onoOpenDelayClick"> 延时2秒打开弹框 </el-button>

src/views/system/dept/hook.tsx

@@ -120,6 +120,7 @@ export function useDept() {
       },
       width: "40%",
       draggable: true,
+      fullscreenIcon: true,
       closeOnClickModal: false,
       contentRenderer: () => h(editForm, { ref: formRef }),
       beforeSure: (done, { options }) => {