refactor(design): add windicss

vben

2021-02-17 4d7001bbcf3ff6e62deb967cb1c15b443b8aaff4

 src/views/demo/feat/msg/index.vue

@@ -1,6 +1,6 @@
<template>
  <div class="p-4">
    <CollapseContainer class="px-20 bg-white w-full h-32 rounded-md" title="Message">
  <PageWrapper title="消息示例">
    <CollapseContainer class="w-full h-32 bg-white rounded-md" title="Message">
      <a-button @click="infoMsg('Info message')" class="mr-2"> Info </a-button>
      <a-button @click="successMsg('Success message')" class="mr-2" color="success">
        Success
@@ -12,34 +12,36 @@
      <a-button @click="handleLoading" class="mr-2" type="primary"> Loading </a-button>
    </CollapseContainer>

    <CollapseContainer class="px-20 bg-white w-full h-32 rounded-md mt-5" title="Comfirm">
      <a-button @click="handleConfirm('info')" class="mr-2">Info</a-button>
      <a-button @click="handleConfirm('warning')" color="warning" class="mr-2">Warning</a-button>
      <a-button @click="handleConfirm('success')" color="success" class="mr-2">Success</a-button>
      <a-button @click="handleConfirm('error')" color="error" class="mr-2">Error</a-button>
    <CollapseContainer class="w-full h-32 mt-5 bg-white rounded-md" title="Comfirm">
      <a-button @click="handleConfirm('info')" class="mr-2"> Info </a-button>
      <a-button @click="handleConfirm('warning')" color="warning" class="mr-2"> Warning </a-button>
      <a-button @click="handleConfirm('success')" color="success" class="mr-2"> Success </a-button>
      <a-button @click="handleConfirm('error')" color="error" class="mr-2"> Error </a-button>
    </CollapseContainer>

    <CollapseContainer class="px-20 bg-white w-full h-32 rounded-md mt-5" title="Modal">
      <a-button @click="handleInfoModal" class="mr-2">Info</a-button>
      <a-button @click="handleSuccessModal" color="success" class="mr-2">Success</a-button>
      <a-button @click="handleErrorModal" color="error" class="mr-2">Error</a-button>
      <a-button @click="handleWarningModal" color="warning" class="mr-2">Warning</a-button>
    <CollapseContainer class="w-full h-32 mt-5 bg-white rounded-md" title="Modal">
      <a-button @click="handleInfoModal" class="mr-2"> Info </a-button>
      <a-button @click="handleSuccessModal" color="success" class="mr-2"> Success </a-button>
      <a-button @click="handleErrorModal" color="error" class="mr-2"> Error </a-button>
      <a-button @click="handleWarningModal" color="warning" class="mr-2"> Warning </a-button>
    </CollapseContainer>

    <CollapseContainer
      class="px-20 bg-white w-full h-32 rounded-md mt-5"
      class="w-full h-32 mt-5 bg-white rounded-md"
      title="Notification 用法与上面一致"
    >
      <a-button @click="handleNotify" color="success" class="mr-2">Success</a-button>
      <a-button @click="handleNotify" color="success" class="mr-2"> Success </a-button>
    </CollapseContainer>
  </div>
  </PageWrapper>
</template>
<script lang="ts">
  import { defineComponent } from 'vue';
  import { CollapseContainer } from '/@/components/Container/index';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { PageWrapper } from '/@/components/Page';

  export default defineComponent({
    components: { CollapseContainer },
    components: { CollapseContainer, PageWrapper },
    setup() {
      const {
        createMessage,