feat: 基础组件开发

package.json

@@ -81,6 +81,7 @@
     "typescript": "^5.4.5",
     "typescript-eslint": "^7.11.0",
     "unplugin-auto-import": "^0.17.6",
+    "unplugin-vue-components": "^0.27.0",
     "vite": "^5.2.12",
     "vite-plugin-purge-icons": "^0.10.0",
     "vite-plugin-svg-icons": "^2.0.1",

pnpm-lock.yaml

@@ -180,6 +180,9 @@ importers:
       unplugin-auto-import:
         specifier: ^0.17.6
         version: 0.17.6(rollup@4.18.0)
+      unplugin-vue-components:
+        specifier: ^0.27.0
+        version: 0.27.0(@babel/parser@7.24.7)(rollup@4.18.0)(vue@3.4.27(typescript@5.4.5))
       vite:
         specifier: ^5.2.12
         version: 5.2.12(@types/node@20.14.2)(sass@1.77.4)(terser@5.31.0)
@@ -5068,6 +5071,19 @@ packages:
       '@vueuse/core':
         optional: true
 
+  unplugin-vue-components@0.27.0:
+    resolution: {integrity: sha512-77eTEy23sQ0UpzGWnZ9I2mY3cnmXwklz4ITcn3JfxjCoX643ghImkiZ4nFm58sxbdVcc4Fo/o4LIoFnlqEqsSg==}
+    engines: {node: '>=14'}
+    peerDependencies:
+      '@babel/parser': ^7.15.8
+      '@nuxt/kit': ^3.2.2
+      vue: 2 || 3
+    peerDependenciesMeta:
+      '@babel/parser':
+        optional: true
+      '@nuxt/kit':
+        optional: true
+
   unplugin@1.10.1:
     resolution: {integrity: sha512-d6Mhq8RJeGA8UfKCu54Um4lFA0eSaRa3XxdAJg8tIdxbu1ubW0hBCZUL7yI2uGyYCRndvbK8FLHzqy2XKfeMsg==}
     engines: {node: '>=14.0.0'}
@@ -11409,6 +11425,25 @@ snapshots:
     transitivePeerDependencies:
       - rollup
 
+  unplugin-vue-components@0.27.0(@babel/parser@7.24.7)(rollup@4.18.0)(vue@3.4.27(typescript@5.4.5)):
+    dependencies:
+      '@antfu/utils': 0.7.8
+      '@rollup/pluginutils': 5.1.0(rollup@4.18.0)
+      chokidar: 3.6.0
+      debug: 4.3.5
+      fast-glob: 3.3.2
+      local-pkg: 0.5.0
+      magic-string: 0.30.10
+      minimatch: 9.0.4
+      resolve: 1.22.8
+      unplugin: 1.10.1
+      vue: 3.4.27(typescript@5.4.5)
+    optionalDependencies:
+      '@babel/parser': 7.24.7
+    transitivePeerDependencies:
+      - rollup
+      - supports-color
+
   unplugin@1.10.1:
     dependencies:
       acorn: 8.11.3

src/components/MCard/index.ts

@@ -0,0 +1 @@
+export { default } from './index.vue'

src/components/MCard/index.vue

@@ -0,0 +1,36 @@
+<template>
+  <view
+    class="m-card"
+    :style="{
+      padding: `${padding}px`,
+      background: `${bgColor}`,
+    }"
+    :class="[`${rounded ? 'rounded-12px' : ''}`]"
+  >
+    <slot></slot>
+  </view>
+</template>
+
+<script setup lang="ts">
+  defineOptions({ name: 'MCard' })
+
+  withDefaults(
+    defineProps<{
+      bgColor?: string
+      rounded?: boolean
+      padding?: number | string
+    }>(),
+    {
+      bgColor: 'white',
+      padding: 16,
+      rounded: true,
+    }
+  )
+</script>
+
+<style scoped lang="scss">
+  .m-card {
+    @apply my-12px;
+    box-shadow: 0px 0px 10px rgba(0, 0, 0, 20%);
+  }
+</style>

src/components/MFooter/index.ts

@@ -0,0 +1 @@
+export { default } from './index.vue'

src/components/MFooter/index.vue

@@ -0,0 +1,24 @@
+<!--
+ * @Author: wjc
+ * @Date: 2024-06-18 10:17:32
+ * @LastEditors: wjc
+ * @LastEditTime: 2024-06-18 11:45:00
+ * @Description: 
+-->
+<template>
+  <view class="m-footer">
+    <view>绘管家</view>
+    <view>2016-{{ new Date().getFullYear() }} Ⓒ 海南智慧城科技有限公司</view>
+    <view>琼ICP备18001846号-4A</view>
+  </view>
+</template>
+
+<script setup lang="ts">
+  defineOptions({ name: 'MFooter' })
+</script>
+
+<style scoped lang="scss">
+  .m-footer {
+    @apply text-12px text-center color-gray my-24px;
+  }
+</style>

src/components/MPage/index.ts

@@ -0,0 +1 @@
+export { default } from './index.vue'

src/components/MPage/index.vue

@@ -0,0 +1,33 @@
+<!--
+ * @Author: wjc
+ * @Date: 2024-06-18 11:40:55
+ * @LastEditors: wjc
+ * @LastEditTime: 2024-06-18 11:53:36
+ * @Description: 
+-->
+<template>
+  <view class="m-page">
+    <slot></slot>
+  </view>
+</template>
+
+<script setup lang="ts">
+  defineOptions({ name: 'MPage' })
+
+  withDefaults(
+    defineProps<{
+      bg?: boolean
+    }>(),
+    {
+      bg: true,
+    }
+  )
+</script>
+
+<style scoped lang="scss">
+  .m-page {
+    @apply h-full bg-white p-12px;
+    background: linear-gradient(180deg, #c5e6ff 0%, #ffffff 100%);
+    backdrop-filter: blur(57px);
+  }
+</style>

src/pages/login/index.vue

@@ -2,7 +2,7 @@
  * @Author: wjc
  * @Date: 2024-06-06 14:51:25
  * @LastEditors: wjc
- * @LastEditTime: 2024-06-12 17:22:09
+ * @LastEditTime: 2024-06-18 10:21:00
  * @Description: 
 -->
 <template>
@@ -42,11 +42,7 @@
       </view>
       <up-button type="primary" class="btn-primary" @click="onSubmit">登录</up-button>
     </view>
-    <view class="footer">
-      <view>绘管家</view>
-      <view>2016-{{ new Date().getFullYear() }} Ⓒ 海南智慧城科技有限公司</view>
-      <view>琼ICP备18001846号-4A</view>
-    </view>
+    <MFooter></MFooter>
     <PrivacyModal @privacy="handlePrivacy"></PrivacyModal>
   </view>
 </template>
@@ -54,6 +50,7 @@
 <script setup lang="ts">
   import { useUserStore } from '@/stores/modules/userStore'
   import logo from '@/static/images/logo.png'
+  import MFooter from '@/components/MFooter'
   import PrivacyModal from './components/privacy.vue'
 
   defineOptions({ name: 'Login' })
@@ -154,8 +151,5 @@
         }
       }
     }
-    .footer {
-      @apply text-12px text-center color-gray;
-    }
   }
 </style>

src/pages/mine/index.vue

@@ -1,6 +1,18 @@
+<!--
+ * @Author: wjc
+ * @Date: 2024-06-17 16:02:59
+ * @LastEditors: wjc
+ * @LastEditTime: 2024-06-18 11:44:21
+ * @Description: 
+-->
 <template>
-  <view>我的</view>
-  <up-button type="primary" class="btn-primary" @click="handleConfirmLogout">退出登录</up-button>
+  <MPage>
+    <MCard>
+      <view>我的</view>
+    </MCard>
+    <up-button type="primary" class="btn-primary" @click="handleConfirmLogout">退出登录</up-button>
+    <MFooter></MFooter>
+  </MPage>
   <up-modal :show="logoutShow">
     <view class="text-18px py-24px">确认退出登录？</view>
     <template #confirmButton>
@@ -14,6 +26,9 @@
 
 <script setup lang="ts">
   import { useUserStore } from '@/stores/modules/userStore'
+  import MPage from '@/components/MPage'
+  import MFooter from '@/components/MFooter'
+  import MCard from '@/components/MCard'
 
   defineOptions({ name: 'Mine' })
 

types/components.d.ts

@@ -0,0 +1,18 @@
+/* eslint-disable */
+// @ts-nocheck
+// Generated by unplugin-vue-components
+// Read more: https://github.com/vuejs/core/pull/3399
+export {}
+
+/* prettier-ignore */
+declare module 'vue' {
+  export interface GlobalComponents {
+    MButton: typeof import('./../src/components/MButton/index.vue')['default']
+    MCard: typeof import('./../src/components/MCard/index.vue')['default']
+    MContainer: typeof import('./../src/components/MContainer/index.vue')['default']
+    MFooter: typeof import('./../src/components/MFooter/index.vue')['default']
+    MPage: typeof import('./../src/components/MPage/index.vue')['default']
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
+  }
+}

vite.config.ts

@@ -2,7 +2,7 @@
  * @Author: wjc
  * @Date: 2024-05-27 10:17:11
  * @LastEditors: wjc
- * @LastEditTime: 2024-06-06 09:42:32
+ * @LastEditTime: 2024-06-18 10:53:13
  * @Description:
  */
 import path from 'node:path'
@@ -12,6 +12,7 @@ import uni from '@dcloudio/vite-plugin-uni'
 import PurgeIcons from 'vite-plugin-purge-icons'
 import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
 import AutoImport from 'unplugin-auto-import/vite'
+import Components from 'unplugin-vue-components/vite'
 
 const root = process.cwd()
 
@@ -45,6 +46,11 @@ export default defineConfig(({ mode }) => {
         symbolId: 'icon-[dir]-[name]',
         svgoOptions: true,
       }),
+      Components({
+        // 按需导入组件，相关组件声明放置于 components.d.ts
+        dts: './types/components.d.ts',
+        dirs: ['src/components'],
+      }),
       AutoImport({
         include: [
           /\.[tj]sx?$/, // .ts, .tsx, .js, .jsx
@@ -52,7 +58,7 @@ export default defineConfig(({ mode }) => {
           /\.vue\?vue/, // .vue
         ],
         dirs: ['./src'],
-        imports: ['vue', 'uni-app'], // 限定范围为 vue, vue-router
+        imports: ['vue', 'uni-app'], // 限定范围为 vue, uni-app
         dts: 'types/auto-import.d.ts', // 自动生成 'auto-import.d.ts'全局声明
       }),
       PurgeIcons(),