feat: add page components

src/components/icon/CustomIcon.vue

@@ -1,8 +1,7 @@
 <script setup>
-import { renderCustomIcon } from '@/utils/icon'
-
+/** 自定义图标 */
 const props = defineProps({
-  /** 图标名称(图片的文件名) */
+  /** 图标名称(assets/svg下的文件名) */
   icon: {
     type: String,
     required: true,
@@ -16,10 +15,8 @@ const props = defineProps({
     default: undefined,
   },
 })
-
-const iconCom = computed(() => renderCustomIcon(props.icon, props))
 </script>
 
 <template>
-  <component :is="iconCom" />
+  <TheIcon type="custom" v-bind="props" />
 </template>

src/components/icon/SvgIcon.vue

@@ -1,4 +1,4 @@
-<script setup name="SvgIcon">
+<script setup>
 const props = defineProps({
   icon: {
     type: String,

src/components/icon/TheIcon.vue

@@ -0,0 +1,33 @@
+<script setup>
+import { renderIcon, renderCustomIcon } from '@/utils/icon'
+
+const props = defineProps({
+  icon: {
+    type: String,
+    required: true,
+  },
+  size: {
+    type: Number,
+    default: 14,
+  },
+  color: {
+    type: String,
+    default: undefined,
+  },
+  /** iconify | custom */
+  type: {
+    type: String,
+    default: 'iconify',
+  },
+})
+
+const iconCom = computed(() =>
+  props.type === 'iconify'
+    ? renderIcon(props.icon, { size: props.size, color: props.color })
+    : renderCustomIcon(props.icon, { size: props.size, color: props.color })
+)
+</script>
+
+<template>
+  <component :is="iconCom" />
+</template>

src/components/page/AppPage.vue

@@ -0,0 +1,17 @@
+<template>
+  <transition name="fade-slide" mode="out-in" appear>
+    <section class="cus-scroll-y wh-full p-15 flex-col bg-[#f5f6fb]">
+      <slot />
+      <AppFooter v-if="showFooter" mt-15 />
+    </section>
+  </transition>
+</template>
+
+<script setup>
+defineProps({
+  showFooter: {
+    type: Boolean,
+    default: false,
+  },
+})
+</script>

src/components/page/CommonPage.vue

@@ -0,0 +1,28 @@
+<template>
+  <AppPage :show-footer="showFooter">
+    <n-card rounded-10 flex-1>
+      <slot v-if="showHeader" name="header">
+        <h2 mb-15 color="#333">{{ title || route.meta?.title }}</h2>
+      </slot>
+      <slot />
+    </n-card>
+  </AppPage>
+</template>
+
+<script setup>
+defineProps({
+  showFooter: {
+    type: Boolean,
+    default: false,
+  },
+  showHeader: {
+    type: Boolean,
+    default: true,
+  },
+  title: {
+    type: String,
+    default: undefined,
+  },
+})
+const route = useRoute()
+</script>