[Components] Add card, button

src/data/Navigation.ts

@@ -1,6 +1,6 @@
 import { NavigationModel, NavigationPosition } from '@/model/Navigation'
 import NavigationService from '@/services/Navigation'
-import { AudioWaveform, Ban, CircleOff, CreditCard, FormInput, Gauge, Link, LogIn, LogOut, StickyNote, MessageCircle } from 'lucide-vue-next'
+import { AudioWaveform, Ban, CircleOff, Command, CreditCard, FormInput, Gauge, Link, LogIn, LogOut, MessageCircle, StickyNote } from 'lucide-vue-next'
 
 const createNavigation = (): void => {
     NavigationService.addNavigation(createNavigationItem('common.common.dashboard', undefined, '/dashboard', Gauge, NavigationPosition.LEFT_TOP))
@@ -63,7 +63,13 @@ const createNavigation = (): void => {
         NavigationPosition.LEFT_TOP, pageArray, undefined, 'common.common.page')
     NavigationService.addNavigation(pages)
 
-    const external = createNavigationItem('common.common.externalLink', undefined, 'https://datacap.edurt.io', Link, NavigationPosition.LEFT_TOP)
+    const button = createNavigationItem('common.common.button', undefined, '/components/button', undefined, NavigationPosition.LEFT_TOP)
+    const card = createNavigationItem('common.common.card', undefined, '/components/card', undefined, NavigationPosition.LEFT_TOP)
+    const componentArray = [button, card]
+    const components = createNavigationItem('common.common.component', componentArray.length.toString(), '/components', Command, NavigationPosition.LEFT_TOP, componentArray)
+    NavigationService.addNavigation(components)
+
+    const external = createNavigationItem('common.common.externalLink', undefined, 'https://datacap.devlive.org', Link, NavigationPosition.LEFT_TOP)
     external.external = true
     NavigationService.addNavigation(external)
 }

src/i18n/langs/en/Common.ts

@@ -31,6 +31,11 @@ export default {
         replyMessage: 'This is a reply message',
         notFoundItem: 'Not Found Item',
         search: 'Search',
+        component: 'Component',
+        size: 'Size',
+        type: 'Type',
+        icon: 'Icon',
+        card: 'Card',
     },
     tip: {
         signInInfo: 'Enter your information to sign in to your account.',

src/i18n/langs/zhCn/Common.ts

@@ -31,6 +31,11 @@ export default {
         replyMessage: '这是一条回复的消息',
         notFoundItem: '未找到该项',
         search: '搜索',
+        component: '组件',
+        size: '尺寸',
+        type: '类型',
+        icon: '图标',
+        card: '卡片',
     },
     tip: {
         signInInfo: '输入您的信息以登录您的帐户。',

src/router/default.ts

@@ -44,6 +44,7 @@ const createDefaultRouter = (router: Router): void => {
     createHttpRouter(router)
     createUserRouter(router)
     createFormRouter(router)
+    createComponentRouter(router)
 }
 
 /**
@@ -137,6 +138,26 @@ const createFormRouter = (router: Router): void => {
     })
 }
 
+const createComponentRouter = (router: Router): void => {
+    router.addRoute({
+        path: '/components',
+        name: 'components',
+        component: LayoutContainer,
+        children: [
+            {
+                name: 'button',
+                path: 'button',
+                component: () => import('@/views/pages/components/ButtonHome.vue')
+            },
+            {
+                name: 'card',
+                path: 'card',
+                component: () => import('@/views/pages/components/CardHome.vue')
+            }
+        ]
+    })
+}
+
 export {
     createDefaultRouter
 }

src/ui/button/button.vue

@@ -0,0 +1,85 @@
+<template>
+  <Button :class="cn(computedSize,
+                     `bg-[${computedType}] hover:bg-[${calculateHoverColor(computedType)}]`,
+                     { 'rounded-full': round },
+                     { 'rounded-full': circle })"
+          :size="circle ? 'icon' : 'default'"
+          :style="{backgroundColor: color}">
+    <span :class="cn({'animate-spin mr-1.5': (loading || $slots.loading)})">
+      <slot v-if="!$slots.icon && $slots.loading" name="loading"/>
+      <Loader2 v-else-if="loading"/>
+    </span>
+
+    <span v-if="$slots.icon" :class="cn({'mr-1.5': (text || $slots.default)})">
+      <slot name="icon"/>
+    </span>
+
+    <span>
+      <span v-if="text">{{ text }}</span>
+      <slot v-else/>
+    </span>
+  </Button>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, watchEffect } from 'vue'
+import { Size } from '@/ui/enum/Size.ts'
+import { Button } from '@/components/ui/button'
+import { Type } from '@/ui/enum/Type.ts'
+import { cn } from '@/lib/utils.ts'
+import { Loader2 } from 'lucide-vue-next'
+import { calculateHoverColor } from '@/utils/Color.ts'
+
+export default defineComponent({
+  name: 'IButton',
+  components: {
+    Button,
+    Loader2
+  },
+  props: {
+    text: {
+      type: String
+    },
+    size: {
+      type: String,
+      default: 'default'
+    },
+    type: {
+      type: String,
+      default: 'primary'
+    },
+    round: {
+      type: Boolean,
+      default: false
+    },
+    circle: {
+      type: Boolean,
+      default: false
+    },
+    loading: {
+      type: Boolean,
+      default: false
+    },
+    color: {
+      type: String
+    }
+  },
+  setup(props)
+  {
+    const computedSize = ref<string>('default')
+    const computedType = ref<string>('primary')
+
+    watchEffect(() => {
+      computedSize.value = Size[props.size as keyof typeof Size]
+      computedType.value = Type[props.type as keyof typeof Type]
+    })
+
+    return {
+      cn,
+      calculateHoverColor,
+      computedSize,
+      computedType
+    }
+  }
+})
+</script>

src/ui/card/card.vue

@@ -0,0 +1,63 @@
+<template>
+  <Card :class="cn('rounded-sm', computedShadow)">
+    <CardHeader v-if="$slots.title || title" :class="`flex flex-row items-center justify-between border-b p-4 ${titleClass}`">
+      <div class="grid gap-2">
+        <CardTitle>
+          <span v-if="title">{{ title }}</span>
+          <slot v-else name="title"/>
+        </CardTitle>
+      </div>
+      <div>
+        <slot name="extra"/>
+      </div>
+    </CardHeader>
+    <CardContent :class="`${bodyClass}`">
+      <slot/>
+    </CardContent>
+    <CardFooter class="border-t p-4" v-if="$slots.footer">
+      <slot name="footer"/>
+    </CardFooter>
+  </Card>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, watchEffect } from 'vue'
+import { Card, CardContent, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'
+import { cn } from '@/lib/utils.ts'
+import { Shadow } from '@/ui/enum/Shadow.ts'
+
+export default defineComponent({
+  name: 'ICard',
+  components: {
+    CardFooter, Card, CardContent, CardHeader, CardTitle
+  },
+  props: {
+    title: {
+      type: String
+    },
+    titleClass: {
+      type: String
+    },
+    bodyClass: {
+      type: String
+    },
+    shadow: {
+      type: String,
+      default: 'never'
+    }
+  },
+  setup(props)
+  {
+    const computedShadow = ref<string>('never')
+
+    watchEffect(() => {
+      computedShadow.value = Shadow[props.shadow as keyof typeof Shadow]
+    })
+
+    return {
+      cn,
+      computedShadow
+    }
+  }
+})
+</script>

src/ui/enum/Shadow.ts

@@ -0,0 +1,6 @@
+export enum Shadow
+{
+    never = 'shadow-background',
+    always = 'shadow-2xl',
+    hover = 'hover:shadow-2xl',
+}

src/ui/enum/Size.ts

@@ -0,0 +1,6 @@
+export enum Size
+{
+    default = 'h-8',
+    small = 'h-6',
+    large = 'h-10'
+}

src/ui/enum/Type.ts

@@ -0,0 +1,9 @@
+export enum Type
+{
+    primary = '#409EFF',
+    success = '#67C23A',
+    warning = '#E6A23C',
+    danger = '#F56C6C',
+    info = '#909399',
+    text = '#606266'
+}

src/utils/Color.ts

@@ -0,0 +1,12 @@
+export function calculateHoverColor(color: string): string
+{
+    const hex = color.replace('#', '')
+    const r = parseInt(hex.substring(0, 2), 16)
+    const g = parseInt(hex.substring(2, 4), 16)
+    const b = parseInt(hex.substring(4, 6), 16)
+    const hoverR = Math.max(0, r - 20)
+    const hoverG = Math.max(0, g - 20)
+    const hoverB = Math.max(0, b - 20)
+    const hoverHex = `#${hoverR.toString(16).padStart(2, '0')}${hoverG.toString(16).padStart(2, '0')}${hoverB.toString(16).padStart(2, '0')}`
+    return hoverHex
+}