init

src/components/common/AppCard.vue

@@ -0,0 +1,19 @@
+<!--------------------------------
+ - @Author: Ronnie Zhang
+ - @LastEditor: Ronnie Zhang
+ - @LastEditTime: 2023/12/04 22:51:04
+ - @Email: zclzone@outlook.com
+ - Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
+ --------------------------------->
+
+<template>
+  <div class="auto-bg" :class="{ 'card-border': bordered }">
+    <slot />
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  bordered: Boolean,
+})
+</script>

src/components/common/AppPage.vue

@@ -0,0 +1,31 @@
+<!--------------------------------
+ - @Author: Ronnie Zhang
+ - @LastEditor: Ronnie Zhang
+ - @LastEditTime: 2023/12/04 22:51:12
+ - @Email: zclzone@outlook.com
+ - Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
+ --------------------------------->
+
+<template>
+  <main class="cus-scroll h-full flex-col flex-1 bg-#f5f6fb dark:bg-#121212">
+    <transition name="fade-slide" mode="out-in" appear>
+      <main :class="{ 'flex-1': full }" class="m-12"><slot /></main>
+    </transition>
+    <slot v-if="$slots.footer" name="footer" />
+    <TheFooter v-else-if="showFooter" class="mb-12 mt-auto" />
+    <n-back-top :bottom="20" />
+  </main>
+</template>
+
+<script setup>
+defineProps({
+  full: {
+    type: Boolean,
+    default: false,
+  },
+  showFooter: {
+    type: Boolean,
+    default: false,
+  },
+})
+</script>

src/components/common/CommonPage.vue

@@ -0,0 +1,74 @@
+<!--------------------------------
+ - @Author: Ronnie Zhang
+ - @LastEditor: Ronnie Zhang
+ - @LastEditTime: 2023/12/04 22:51:21
+ - @Email: zclzone@outlook.com
+ - Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
+ --------------------------------->
+
+<template>
+  <main class="h-full flex-1 overflow-hidden bg-#f5f6fb dark:bg-#121212">
+    <div class="h-full flex-col">
+      <AppCard
+        v-if="showHeader"
+        class="sticky top-0 z-1 min-h-60 flex items-center justify-between px-24"
+        border-b="1px solid light_border dark:dark_border"
+      >
+        <slot v-if="$slots.header" name="header" />
+        <template v-else>
+          <div class="flex items-center">
+            <slot v-if="$slots['title-prefix']" name="title-prefix" />
+            <template v-else-if="back">
+              <div
+                class="mr-16 flex cursor-pointer items-center text-16 opacity-60 transition-all-300 hover:opacity-40"
+                @click="router.back()"
+              >
+                <i class="i-material-symbols:arrow-left-alt" />
+                <span class="ml-4">返回</span>
+              </div>
+            </template>
+            <div class="mr-12 h-16 w-4 rounded-l-2 bg-primary"></div>
+            <h2 class="font-normal">{{ title ?? route.meta?.title }}</h2>
+            <slot name="title-suffix" />
+          </div>
+          <slot name="action" />
+        </template>
+      </AppCard>
+      <transition name="fade-slide" mode="out-in" appear>
+        <AppCard class="cus-scroll m-12 h-0 flex-1 rounded-8 p-24" bordered>
+          <slot />
+        </AppCard>
+      </transition>
+    </div>
+  </main>
+
+  <footer class="bg-#f5f6fb dark:bg-#121212">
+    <slot v-if="$slots.footer" name="footer" />
+    <AppCard v-else-if="showFooter" class="py-12">
+      <TheFooter />
+    </AppCard>
+  </footer>
+</template>
+
+<script setup>
+defineProps({
+  back: {
+    type: Boolean,
+    default: false,
+  },
+  showFooter: {
+    type: Boolean,
+    default: false,
+  },
+  showHeader: {
+    type: Boolean,
+    default: true,
+  },
+  title: {
+    type: String,
+    default: undefined,
+  },
+})
+const route = useRoute()
+const router = useRouter()
+</script>

src/components/common/TheFooter.vue

@@ -0,0 +1,24 @@
+<!--------------------------------
+ - @Description: 底部
+ - @Author: Ronnie Zhang
+ - @LastEditor: Ronnie Zhang
+ - @LastEditTime: 2023/12/04 22:42:33
+ - @Email: zclzone@outlook.com
+ - Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
+ --------------------------------->
+
+<template>
+  <footer class="f-c-c text-14 text-gray-500">
+    <p>
+      Copyright © 2023
+      <a
+        href="https://github.com/zclzone"
+        target="__blank"
+        class="transition"
+        hover="decoration-underline color-primary"
+      >
+        Ronnie Zhang(大脸怪)
+      </a>
+    </p>
+  </footer>
+</template>

src/components/common/index.js

@@ -0,0 +1,4 @@
+export { default as AppCard } from './AppCard.vue'
+export { default as TheFooter } from './TheFooter.vue'
+export { default as AppPage } from './AppPage.vue'
+export { default as CommonPage } from './CommonPage.vue'