fuse-code/src/layout/pwd.vue

<template>
  <Modal width="400px" title="访问密码" :visible="visible" centered  class="model-table" :closable="false">
    <template #footer>
      <Button key="submit" type="primary" @click="okHandler">确定</Button>
    </template>
    <FormItem label="访问密码" name="password">
      <InputPassword v-model:value="password" placeholder="请输入" />
    </FormItem>
  </Modal>
</template>

<script lang="ts" setup>
import { Modal, FormItem, InputPassword, Button } from 'ant-design-vue'
import { createLoadPack } from '@/utils'
import { ref } from 'vue';
import { authSharePassword } from '@/api';
import { Message } from 'bill/index'

const visible = ref(true)
const password = ref('')

const emit = defineEmits<{ (e: 'close'): void }>()

const okHandler = createLoadPack(async () => {
  if (!password.value) {
    Message.error("请输入密码！")
    return;
  }

  const pass = await authSharePassword(password.value)
  if (pass) {
    emit('close')
  } else {
    Message.error("密码错误，请重新输入。")
  }
})
</script>