灵感？

pnpm-lock.yaml

@@ -529,55 +529,46 @@ packages:
     resolution: {integrity: sha512-C/zbRYRXFjWvz9Z4haRxcTdnkPt1BtCkz+7RtBSuNmKzMzp3ZxdM28Mpccn6pt28/UWUCTXa+b0Mx1k3g6NOMA==}
     cpu: [arm]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-arm-musleabihf@4.18.0':
     resolution: {integrity: sha512-l3m9ewPgjQSXrUMHg93vt0hYCGnrMOcUpTz6FLtbwljo2HluS4zTXFy2571YQbisTnfTKPZ01u/ukJdQTLGh9A==}
     cpu: [arm]
     os: [linux]
-    libc: [musl]
 
   '@rollup/rollup-linux-arm64-gnu@4.18.0':
     resolution: {integrity: sha512-rJ5D47d8WD7J+7STKdCUAgmQk49xuFrRi9pZkWoRD1UeSMakbcepWXPF8ycChBoAqs1pb2wzvbY6Q33WmN2ftw==}
     cpu: [arm64]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-arm64-musl@4.18.0':
     resolution: {integrity: sha512-be6Yx37b24ZwxQ+wOQXXLZqpq4jTckJhtGlWGZs68TgdKXJgw54lUUoFYrg6Zs/kjzAQwEwYbp8JxZVzZLRepQ==}
     cpu: [arm64]
     os: [linux]
-    libc: [musl]
 
   '@rollup/rollup-linux-powerpc64le-gnu@4.18.0':
     resolution: {integrity: sha512-hNVMQK+qrA9Todu9+wqrXOHxFiD5YmdEi3paj6vP02Kx1hjd2LLYR2eaN7DsEshg09+9uzWi2W18MJDlG0cxJA==}
     cpu: [ppc64]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-riscv64-gnu@4.18.0':
     resolution: {integrity: sha512-ROCM7i+m1NfdrsmvwSzoxp9HFtmKGHEqu5NNDiZWQtXLA8S5HBCkVvKAxJ8U+CVctHwV2Gb5VUaK7UAkzhDjlg==}
     cpu: [riscv64]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-s390x-gnu@4.18.0':
     resolution: {integrity: sha512-0UyyRHyDN42QL+NbqevXIIUnKA47A+45WyasO+y2bGJ1mhQrfrtXUpTxCOrfxCR4esV3/RLYyucGVPiUsO8xjg==}
     cpu: [s390x]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-x64-gnu@4.18.0':
     resolution: {integrity: sha512-xuglR2rBVHA5UsI8h8UbX4VJ470PtGCf5Vpswh7p2ukaqBGFTnsfzxUBetoWBWymHMxbIG0Cmx7Y9qDZzr648w==}
     cpu: [x64]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-x64-musl@4.18.0':
     resolution: {integrity: sha512-LKaqQL9osY/ir2geuLVvRRs+utWUNilzdE90TpyoX0eNqPzWjRm14oMEE+YLve4k/NAqCdPkGYDaDF5Sw+xBfg==}
     cpu: [x64]
     os: [linux]
-    libc: [musl]
 
   '@rollup/rollup-win32-arm64-msvc@4.18.0':
     resolution: {integrity: sha512-7J6TkZQFGo9qBKH0pk2cEVSRhJbL6MtfWxth7Y5YmZs57Pi+4x6c2dStAUvaQkHQLnEQv1jzBUW43GvZW8OFqA==}

src/assets/custom.css

@@ -6,3 +6,34 @@
         text-align: center;
     }
 }
+
+
+
+/* Antd Custom */
+/* 模态框 */
+.ant-modal{
+    position: relative;
+    max-height: 75vh;
+    height: 900px;
+    overflow: hidden;
+    .ant-modal-content{
+        position: relative;
+        box-sizing: border-box;
+        max-height: 100%;
+        height: 100%;
+        overflow: hidden;
+        display: flex;
+        flex-direction: column;
+        .ant-modal-body{
+            height: 100%;
+            overflow: hidden;
+            & > *{
+                position: relative;
+                height: 100%;
+                overflow: auto;
+                padding: 0 5px ;
+
+            }
+        }
+    }
+}

src/components/AntDesignVue/CustomAntDesignVue/Button/AckCreateAntdButton.vue

@@ -0,0 +1,20 @@
+<script setup name="AckCreateAntdButton">
+import { h, ref } from 'vue';
+import { PlusOutlined } from '@ant-design/icons-vue';
+
+const canClick = ref(true);
+const handleClick = () => {
+    if (canClick.value) {
+        canClick.value = false;
+        setTimeout(() => {
+            canClick.value = true;
+        }, 750);
+    }
+};
+</script>
+
+<template>
+    <AButton type="primary" :disabled="!canClick" @click="handleClick" :icon="h(PlusOutlined)">确认创建</AButton>
+</template>
+
+<style scoped></style>

src/components/AntDesignVue/CustomAntDesignVue/index.js

@@ -12,11 +12,13 @@
 // | ------------------------------------------------------------
 
 import CreateAntdButton from './Button/CreateAntdButton.vue';
+import AckCreateAntdButton from './Button/AckCreateAntdButton.vue';
 
 // ! 全局导出自定义的Antd组件
 export default function setupCustomAntdComponents(app) {
     const customComponentList = [
         CreateAntdButton, // ! 主要添加按钮
+        AckCreateAntdButton
     ];
     for (let component of customComponentList) {
         app.component(component.__name, component);

src/components/AntDesignVue/index.js

@@ -24,7 +24,12 @@ import {
     Space,
     Flex,
     Select,
-    SelectOption, Textarea, Input, Radio, RadioGroup, InputNumber,
+    SelectOption,
+    Textarea,
+    Input,
+    Radio,
+    RadioGroup,
+    InputNumber, Affix,
 } from 'ant-design-vue';
 import 'ant-design-vue/dist/reset.css';
 
@@ -56,6 +61,7 @@ export function setupCustomAntDesignVueComponents(app) {
         RadioGroup, // ! 单选组
         Radio, // ! 单选
         InputNumber, // ! 数字输入框
+        Affix, // ! 固钉
     ];
     for (let component of componentList) {
         app.component(component.name, component);

src/views/Auth/Dict/DictForm.vue

@@ -1,10 +1,13 @@
 <script setup name="DictForm">
-import { onMounted, h, watch, reactive } from 'vue';
+import { onMounted, h, watch, reactive, ref } from 'vue';
 import { useBaseDataStore } from '@/stores/baseData.js';
 import { ReloadOutlined, SettingOutlined } from '@ant-design/icons-vue';
 const baseDataStore = useBaseDataStore();
 
 const props = defineProps({
+    status: {
+        type: Boolean,
+    },
     form: {
         type: Object,
         default: () => ({
@@ -46,6 +49,9 @@ const props = defineProps({
 const form = reactive({
     ...props.form,
 });
+// ! ref
+const bodyRef = ref(null);
+const offsetBottom = ref(null);
 // ! pid
 watch(form, (newVal, oldVal) => {
     if (form.pid != '') {
@@ -58,6 +64,8 @@ watch(form, (newVal, oldVal) => {
     }
 });
 onMounted(() => {
+    window.pino.info('DictForm Mounted');
+    offsetBottom.value = 0;
     // ! 检测获取字典列表
     if (baseDataStore.state.dictList?.length == 0) {
         baseDataStore.getDictList();
@@ -66,10 +74,15 @@ onMounted(() => {
     if (baseDataStore.state.serviceList?.length == 0) {
         baseDataStore.getServiceList();
     }
+    console.log(props);
 });
+function change(affixed) {
+    console.log(affixed);
+}
 </script>
 
 <template>
+    <div ref="bodyRef" v-if="props.status">
         <AForm :model="form" name="DictForm" :label-col="{ span: 8 }" layout="vertical">
             <AFormItem label="上级字典" name="pid">
                 <AFlex gap="small">
@@ -117,6 +130,10 @@ onMounted(() => {
                 </AInputNumber>
             </AFormItem>
         </AForm>
+        <AAffix :target="() => bodyRef" :offset-bottom="0">
+            <AckCreateAntdButton @click="props.handleAck" />
+        </AAffix>
+    </div>
 </template>
 
 <style scoped></style>

src/views/Auth/Dict/index.vue

@@ -5,7 +5,7 @@ import DictForm from './DictForm.vue';
 // ! 关于新增修改的表单
 const form = reactive({
     // 弹窗状态
-    status: true,
+    status: false,
     // 表单数据
     formData: {
         pid: 0,
@@ -14,7 +14,7 @@ const form = reactive({
         // 字典描述
         dictDesc: '',
         // 字典名
-        dictName: '',
+        dictName: 'AAAAAAA',
         // 图标
         dictIcon: '',
         // 字典的数据类型
@@ -27,7 +27,9 @@ const form = reactive({
         orderNum: 0,
     },
     // 确认
-    handleAck: () => {},
+    handleAck: () => {
+        console.log('确认');
+    },
     // 取消
     handleCancel: () => {},
 });
@@ -40,8 +42,9 @@ const form = reactive({
             <CreateAntdButton name="字典" @click="form.status = true"/>
         </template>
         <template #modal>
-            <AModal v-model:open="form.status" title="添加字典" :centered="true">
+            <AModal v-model:open="form.status" title="添加字典" :centered="true" :maskClosable="false">
-                <DictForm :form="form.formData" :handleAck="form.handleAck" :handleCancel="form.handleCancel"></DictForm>
+                <DictForm v-if="form.status" :form="form.formData" :handleAck="form.handleAck" :handleCancel="form.handleCancel" :status:="form.status"></DictForm>
+                <template #footer></template>
             </AModal>
         </template>
     </WorkContainer>