refactor(demo): transition and account use setup (#3298)

Co-authored-by: jackhoo_98 <jackhoo_98@foxmail.com>

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

@@ -9,15 +9,15 @@
       />
       <a-button type="primary" class="ml-4" @click="start"> start </a-button>
     </div>
-    <component :is="`${value}Transition`">
+    <component :is="TransitionItem[value]">
       <div class="box" v-show="show"></div>
     </component>
   </PageWrapper>
 </template>
-<script lang="ts">
-  import { defineComponent, ref } from 'vue';
+<script lang="ts" setup>
+  import { ref } from 'vue';
   import { Select } from 'ant-design-vue';
-  import { PageWrapper } from '/@/components/Page';
+  import { PageWrapper } from '@/components/Page';
   import {
     FadeTransition,
     ScaleTransition,
@@ -32,59 +32,41 @@
     ScaleRotateTransition,
     ExpandXTransition,
     ExpandTransition,
-  } from '/@/components/Transition';
+  } from '@/components/Transition';
 
-  const transitionList = [
-    'Fade',
-    'Scale',
-    'SlideY',
-    'ScrollY',
-    'SlideYReverse',
-    'ScrollYReverse',
-    'SlideX',
-    'ScrollX',
-    'SlideXReverse',
-    'ScrollXReverse',
-    'ScaleRotate',
-    'ExpandX',
-    'Expand',
-  ];
-  const options = transitionList.map((item) => ({
-    label: item,
-    value: item,
-    key: item,
-  }));
+  const TransitionItem = {
+    FadeTransition,
+    ScaleTransition,
+    SlideYTransition,
+    ScrollYTransition,
+    SlideYReverseTransition,
+    ScrollYReverseTransition,
+    SlideXTransition,
+    ScrollXTransition,
+    SlideXReverseTransition,
+    ScrollXReverseTransition,
+    ScaleRotateTransition,
+    ExpandXTransition,
+    ExpandTransition,
+  };
 
-  export default defineComponent({
-    components: {
-      Select,
-      PageWrapper,
-      FadeTransition,
-      ScaleTransition,
-      SlideYTransition,
-      ScrollYTransition,
-      SlideYReverseTransition,
-      ScrollYReverseTransition,
-      SlideXTransition,
-      ScrollXTransition,
-      SlideXReverseTransition,
-      ScrollXReverseTransition,
-      ScaleRotateTransition,
-      ExpandXTransition,
-      ExpandTransition,
-    },
-    setup() {
-      const value = ref('Fade');
-      const show = ref(true);
-      function start() {
-        show.value = false;
-        setTimeout(() => {
-          show.value = true;
-        }, 300);
-      }
-      return { options, value, start, show };
-    },
+  const options = Object.keys(TransitionItem).map((item) => {
+    const label = item.replace('Transition', '');
+    return {
+      label,
+      value: item,
+      key: item,
+    };
   });
+
+  const value = ref('FadeTransition');
+  const show = ref(true);
+  function start() {
+    show.value = false;
+    setTimeout(() => {
+      show.value = true;
+    }, 300);
+  }
 </script>
 <style lang="less" scoped>
   .box {

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

@@ -1,16 +1,16 @@
 <template>
   <div :class="prefixCls">
-    <a-row :class="`${prefixCls}-top`">
-      <a-col :span="9" :class="`${prefixCls}-col`">
-        <a-row>
-          <a-col :span="8">
+    <Row :class="`${prefixCls}-top`">
+      <Col :span="9" :class="`${prefixCls}-col`">
+        <Row>
+          <Col :span="8">
             <div :class="`${prefixCls}-top__avatar`">
               <img width="70" :src="avatar" />
               <span>Vben</span>
               <div>海纳百川，有容乃大</div>
             </div>
-          </a-col>
-          <a-col :span="16">
+          </Col>
+          <Col :span="16">
             <div :class="`${prefixCls}-top__detail`">
               <template v-for="detail in details" :key="detail.title">
                 <p>
@@ -19,10 +19,10 @@
                 </p>
               </template>
             </div>
-          </a-col>
-        </a-row>
-      </a-col>
-      <a-col :span="7" :class="`${prefixCls}-col`">
+          </Col>
+        </Row>
+      </Col>
+      <Col :span="7" :class="`${prefixCls}-col`">
         <CollapseContainer title="标签" :canExpan="false">
           <template v-for="tag in tags" :key="tag">
             <Tag class="mb-2">
@@ -30,21 +30,21 @@
             </Tag>
           </template>
         </CollapseContainer>
-      </a-col>
-      <a-col :span="8" :class="`${prefixCls}-col`">
+      </Col>
+      <Col :span="8" :class="`${prefixCls}-col`">
         <CollapseContainer :class="`${prefixCls}-top__team`" title="团队" :canExpan="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>
           </div>
         </CollapseContainer>
-      </a-col>
-    </a-row>
+      </Col>
+    </Row>
     <div :class="`${prefixCls}-bottom`">
       <Tabs>
         <template v-for="item in achieveList" :key="item.key">
           <TabPane :tab="item.name">
-            <component :is="item.component" />
+            <component :is="tabs[item.component]" />
           </TabPane>
         </template>
       </Tabs>
@@ -52,9 +52,9 @@
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
   import { Tag, Tabs, Row, Col } from 'ant-design-vue';
-  import { defineComponent, computed } from 'vue';
+  import { computed } from 'vue';
   import { CollapseContainer } from '@/components/Container';
   import Icon from '@/components/Icon/Icon.vue';
   import Article from './Article.vue';
@@ -65,32 +65,15 @@
   import { tags, teams, details, achieveList } from './data';
   import { useUserStore } from '@/store/modules/user';
 
-  export default defineComponent({
-    components: {
-      CollapseContainer,
-      Icon,
-      Tag,
-      Tabs,
-      TabPane: Tabs.TabPane,
-      Article,
-      Application,
-      Project,
-      [Row.name]: Row,
-      [Col.name]: Col,
-    },
-    setup() {
-      const userStore = useUserStore();
-      const avatar = computed(() => userStore.getUserInfo.avatar || headerImg);
-      return {
-        prefixCls: 'account-center',
-        avatar,
-        tags,
-        teams,
-        details,
-        achieveList,
-      };
-    },
-  });
+  const userStore = useUserStore();
+  const TabPane = Tabs.TabPane;
+  const tabs = {
+    Article,
+    Application,
+    Project,
+  };
+  const prefixCls = 'account-center';
+  const avatar = computed(() => userStore.getUserInfo.avatar || headerImg);
 </script>
 <style lang="less" scoped>
   .account-center {

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

@@ -4,7 +4,7 @@
       <Tabs tab-position="left" :tabBarStyle="tabBarStyle">
         <template v-for="item in settingList" :key="item.key">
           <TabPane :tab="item.name">
-            <component :is="item.component" />
+            <component :is="tabs[item.component]" />
           </TabPane>
         </template>
       </Tabs>
@@ -12,38 +12,27 @@
   </ScrollContainer>
 </template>
 
-<script lang="ts">
-  import { defineComponent } from 'vue';
+<script lang="ts" setup>
   import { Tabs } from 'ant-design-vue';
-
   import { ScrollContainer } from '@/components/Container';
   import { settingList } from './data';
-
   import BaseSetting from './BaseSetting.vue';
   import SecureSetting from './SecureSetting.vue';
   import AccountBind from './AccountBind.vue';
   import MsgNotify from './MsgNotify.vue';
 
-  export default defineComponent({
-    components: {
-      ScrollContainer,
-      Tabs,
-      TabPane: Tabs.TabPane,
-      BaseSetting,
-      SecureSetting,
-      AccountBind,
-      MsgNotify,
-    },
-    setup() {
-      return {
-        prefixCls: 'account-setting',
-        settingList,
-        tabBarStyle: {
-          width: '220px',
-        },
-      };
-    },
-  });
+  const TabPane = Tabs.TabPane;
+  const tabs = {
+    BaseSetting,
+    SecureSetting,
+    AccountBind,
+    MsgNotify,
+  };
+
+  const prefixCls = 'account-setting';
+  const tabBarStyle = {
+    width: '220px',
+  };
 </script>
 <style lang="less">
   .account-setting {