chore: typo in Container (#3669)

src/components/Container/src/collapse/CollapseContainer.vue

@@ -1,12 +1,12 @@
 <script lang="tsx">
-  import { ref, unref, defineComponent, type PropType, type ExtractPropTypes } from 'vue';
-  import { isNil } from 'lodash-es';
-  import { Skeleton } from 'ant-design-vue';
-  import { useTimeoutFn } from '@vben/hooks';
   import { CollapseTransition } from '@/components/Transition';
-  import CollapseHeader from './CollapseHeader.vue';
-  import { triggerWindowResize } from '@/utils/event';
   import { useDesign } from '@/hooks/web/useDesign';
+  import { triggerWindowResize } from '@/utils/event';
+  import { useTimeoutFn } from '@vben/hooks';
+  import { Skeleton } from 'ant-design-vue';
+  import { isNil } from 'lodash-es';
+  import { defineComponent, ref, unref, type ExtractPropTypes, type PropType } from 'vue';
+  import CollapseHeader from './CollapseHeader.vue';
 
   const collapseContainerProps = {
     title: { type: String, default: '' },
@@ -14,7 +14,7 @@
     /**
      *  Can it be expanded
      */
-    canExpan: { type: Boolean, default: true },
+    canExpand: { type: Boolean, default: true },
     /**
      * Warm reminder on the right side of the title
      */
@@ -69,7 +69,7 @@
           />
 
           <div class="p-2">
-            <CollapseTransition enable={props.canExpan}>
+            <CollapseTransition enable={props.canExpand}>
               {props.loading ? (
                 <Skeleton active={props.loading} />
               ) : (

src/components/Container/src/collapse/CollapseHeader.vue

@@ -1,13 +1,13 @@
 <script lang="tsx">
-  import { defineComponent, computed, unref, type ExtractPropTypes, PropType } from 'vue';
-  import { useDesign } from '@/hooks/web/useDesign';
   import { BasicArrow, BasicTitle } from '@/components/Basic';
+  import { useDesign } from '@/hooks/web/useDesign';
+  import { PropType, computed, defineComponent, unref, type ExtractPropTypes } from 'vue';
 
   const collapseHeaderProps = {
     prefixCls: String,
     title: String,
     show: Boolean,
-    canExpan: Boolean,
+    canExpand: Boolean,
     helpMessage: {
       type: [Array, String] as PropType<string[] | string>,
       default: '',
@@ -33,7 +33,7 @@
           <div class={`${unref(_prefixCls)}__action`}>
             {slots.action
               ? slots.action({ expand: props.show, onClick: () => emit('expand') })
-              : props.canExpan && (
+              : props.canExpand && (
                   <BasicArrow up expand={props.show} onClick={() => emit('expand')} />
                 )}
           </div>

src/components/Description/src/Description.vue

@@ -1,23 +1,23 @@
 <script lang="tsx">
-  import type { DescriptionProps, DescInstance, DescItem } from './typing';
-  import type { DescriptionsProps } from 'ant-design-vue/es/descriptions';
   import type { CollapseContainerOptions } from '@/components/Container';
-  import {
-    type CSSProperties,
-    type PropType,
-    defineComponent,
-    computed,
-    ref,
-    unref,
-    toRefs,
-  } from 'vue';
-  import { get } from 'lodash-es';
-  import { Descriptions } from 'ant-design-vue';
   import { CollapseContainer } from '@/components/Container';
   import { useDesign } from '@/hooks/web/useDesign';
-  import { isFunction } from '@/utils/is';
   import { getSlot } from '@/utils/helper/tsxHelper';
+  import { isFunction } from '@/utils/is';
   import { useAttrs } from '@vben/hooks';
+  import { Descriptions } from 'ant-design-vue';
+  import type { DescriptionsProps } from 'ant-design-vue/es/descriptions';
+  import { get } from 'lodash-es';
+  import {
+    computed,
+    defineComponent,
+    ref,
+    toRefs,
+    unref,
+    type CSSProperties,
+    type PropType,
+  } from 'vue';
+  import type { DescInstance, DescItem, DescriptionProps } from './typing';
 
   const props = {
     useCollapse: { type: Boolean, default: true },
@@ -175,7 +175,7 @@
         const { title } = unref(getMergeProps);
 
         return (
-          <CollapseContainer title={title} canExpan={canExpand} helpMessage={helpMessage}>
+          <CollapseContainer title={title} canExpand={canExpand} helpMessage={helpMessage}>
             {{
               default: () => content,
               action: () => getSlot(slots, 'action'),

src/views/demo/comp/qrcode/index.vue

@@ -1,7 +1,7 @@
 <template>
   <PageWrapper title="二维码组件使用示例">
     <div class="flex flex-wrap">
-      <CollapseContainer title="基础示例" :canExpan="true" class="text-center mb-6 w-1/5 mr-6">
+      <CollapseContainer title="基础示例" :canExpand="true" class="text-center mb-6 w-1/5 mr-6">
         <QrCode :value="qrCodeUrl" />
       </CollapseContainer>
 
@@ -79,13 +79,13 @@
   </PageWrapper>
 </template>
 <script lang="ts" setup>
-  import { ref, unref } from 'vue';
-  import { QrCode, QrCodeActionType } from '@/components/Qrcode';
   import LogoImg from '@/assets/images/logo.png';
   import { CollapseContainer } from '@/components/Container';
   import { PageWrapper } from '@/components/Page';
+  import { QrCode, QrCodeActionType } from '@/components/Qrcode';
   import { type Nullable } from '@vben/types';
   import { QRCode } from 'ant-design-vue';
+  import { ref, unref } from 'vue';
 
   const qrCodeUrl = 'https://www.vvbin.cn';
   const qrRef = ref<Nullable<QrCodeActionType>>(null);

src/views/demo/page/account/center/index.vue

@@ -23,7 +23,7 @@
         </Row>
       </Col>
       <Col :span="7" :class="`${prefixCls}-col`">
-        <CollapseContainer title="标签" :canExpan="false">
+        <CollapseContainer title="标签" :canExpand="false">
           <template v-for="tag in tags" :key="tag">
             <Tag class="mb-2">
               {{ tag }}
@@ -32,7 +32,7 @@
         </CollapseContainer>
       </Col>
       <Col :span="8" :class="`${prefixCls}-col`">
-        <CollapseContainer :class="`${prefixCls}-top__team`" title="团队" :canExpan="false">
+        <CollapseContainer :class="`${prefixCls}-top__team`" title="团队" :canExpand="false">
           <div v-for="(team, index) in teams" :key="index" :class="`${prefixCls}-top__team-item`">
             <Icon :icon="team.icon" :color="team.color" />
             <span>{{ team.title }}</span>
@@ -53,17 +53,17 @@
 </template>
 
 <script lang="ts" setup>
-  import { Tag, Tabs, Row, Col } from 'ant-design-vue';
-  import { computed } from 'vue';
   import { CollapseContainer } from '@/components/Container';
   import Icon from '@/components/Icon/Icon.vue';
-  import Article from './Article.vue';
+  import { Col, Row, Tabs, Tag } from 'ant-design-vue';
+  import { computed } from 'vue';
   import Application from './Application.vue';
+  import Article from './Article.vue';
   import Project from './Project.vue';
 
   import headerImg from '@/assets/images/header.jpg';
-  import { tags, teams, details, achieveList } from './data';
   import { useUserStore } from '@/store/modules/user';
+  import { achieveList, details, tags, teams } from './data';
 
   const userStore = useUserStore();
   const TabPane = Tabs.TabPane;

src/views/demo/page/account/setting/AccountBind.vue

@@ -1,5 +1,5 @@
 <template>
-  <CollapseContainer title="账号绑定" :canExpan="false">
+  <CollapseContainer title="账号绑定" :canExpand="false">
     <List>
       <template v-for="item in accountBindList" :key="item.key">
         <ListItem>
@@ -23,9 +23,9 @@
   </CollapseContainer>
 </template>
 <script lang="ts" setup>
-  import { List } from 'ant-design-vue';
   import { CollapseContainer } from '@/components/Container';
   import Icon from '@/components/Icon/Icon.vue';
+  import { List } from 'ant-design-vue';
 
   import { accountBindList } from './data';
 

src/views/demo/page/account/setting/BaseSetting.vue

@@ -1,5 +1,5 @@
 <template>
-  <CollapseContainer title="基本设置" :canExpan="false">
+  <CollapseContainer title="基本设置" :canExpand="false">
     <Row :gutter="24">
       <Col :span="14">
         <BasicForm @register="register" />
@@ -22,19 +22,19 @@
   </CollapseContainer>
 </template>
 <script lang="ts" setup>
-  import { Row, Col } from 'ant-design-vue';
-  import { computed, onMounted } from 'vue';
-  import { BasicForm, useForm } from '@/components/Form';
   import { CollapseContainer } from '@/components/Container';
   import { CropperAvatar } from '@/components/Cropper';
+  import { BasicForm, useForm } from '@/components/Form';
+  import { Col, Row } from 'ant-design-vue';
+  import { computed, onMounted } from 'vue';
 
   import { useMessage } from '@/hooks/web/useMessage';
 
-  import headerImg from '@/assets/images/header.jpg';
   import { accountInfoApi } from '@/api/demo/account';
-  import { baseSetschemas } from './data';
-  import { useUserStore } from '@/store/modules/user';
   import { uploadApi } from '@/api/sys/upload';
+  import headerImg from '@/assets/images/header.jpg';
+  import { useUserStore } from '@/store/modules/user';
+  import { baseSetschemas } from './data';
 
   const { createMessage } = useMessage();
   const userStore = useUserStore();

src/views/demo/page/account/setting/MsgNotify.vue

@@ -1,5 +1,5 @@
 <template>
-  <CollapseContainer title="新消息通知" :canExpan="false">
+  <CollapseContainer title="新消息通知" :canExpand="false">
     <List>
       <template v-for="item in msgNotifyList" :key="item.key">
         <ListItem>
@@ -23,8 +23,8 @@
   </CollapseContainer>
 </template>
 <script lang="ts" setup>
-  import { List, Switch } from 'ant-design-vue';
   import { CollapseContainer } from '@/components/Container';
+  import { List, Switch } from 'ant-design-vue';
   import { msgNotifyList } from './data';
 
   const ListItem = List.Item;

src/views/demo/page/account/setting/SecureSetting.vue

@@ -1,5 +1,5 @@
 <template>
-  <CollapseContainer title="安全设置" :canExpan="false">
+  <CollapseContainer title="安全设置" :canExpand="false">
     <List>
       <template v-for="item in secureSettingList" :key="item.key">
         <ListItem>
@@ -23,8 +23,8 @@
   </CollapseContainer>
 </template>
 <script lang="ts" setup>
-  import { List } from 'ant-design-vue';
   import { CollapseContainer } from '@/components/Container';
+  import { List } from 'ant-design-vue';
   import { secureSettingList } from './data';
 
   const ListItem = List.Item;