From 8298ec98fc00cdafb6717cec988019a4d0dfc358 Mon Sep 17 00:00:00 2001
From: qianmoQ <shicheng@devlive.org>
Date: Thu, 11 Apr 2024 15:54:46 +0800
Subject: [PATCH 1/4] [Components] Add card

---
 src/data/Navigation.ts                    |  9 ++++-
 src/i18n/langs/en/Common.ts               |  1 +
 src/i18n/langs/zhCn/Common.ts             |  1 +
 src/router/default.ts                     | 16 ++++++++
 src/ui/button/button.vue                  | 28 +++++++++++++
 src/ui/card/card.vue                      | 48 +++++++++++++++++++++++
 src/ui/enum/Size.ts                       |  4 ++
 src/views/pages/components/ButtonHome.vue | 11 ++++++
 8 files changed, 116 insertions(+), 2 deletions(-)
 create mode 100644 src/ui/button/button.vue
 create mode 100644 src/ui/card/card.vue
 create mode 100644 src/ui/enum/Size.ts
 create mode 100644 src/views/pages/components/ButtonHome.vue

diff --git a/src/data/Navigation.ts b/src/data/Navigation.ts
index aec557e8..74b350bf 100644
--- a/src/data/Navigation.ts
+++ b/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,12 @@ 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 componentArray = [button]
+    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)
 }
diff --git a/src/i18n/langs/en/Common.ts b/src/i18n/langs/en/Common.ts
index c1717cad..99182346 100644
--- a/src/i18n/langs/en/Common.ts
+++ b/src/i18n/langs/en/Common.ts
@@ -31,6 +31,7 @@ export default {
         replyMessage: 'This is a reply message',
         notFoundItem: 'Not Found Item',
         search: 'Search',
+        component: 'Component',
     },
     tip: {
         signInInfo: 'Enter your information to sign in to your account.',
diff --git a/src/i18n/langs/zhCn/Common.ts b/src/i18n/langs/zhCn/Common.ts
index 593b7a30..1a5f129b 100644
--- a/src/i18n/langs/zhCn/Common.ts
+++ b/src/i18n/langs/zhCn/Common.ts
@@ -31,6 +31,7 @@ export default {
         replyMessage: '这是一条回复的消息',
         notFoundItem: '未找到该项',
         search: '搜索',
+        component: '组件',
     },
     tip: {
         signInInfo: '输入您的信息以登录您的帐户。',
diff --git a/src/router/default.ts b/src/router/default.ts
index 77299e48..37639bec 100644
--- a/src/router/default.ts
+++ b/src/router/default.ts
@@ -44,6 +44,7 @@ const createDefaultRouter = (router: Router): void => {
     createHttpRouter(router)
     createUserRouter(router)
     createFormRouter(router)
+    createComponentRouter(router)
 }
 
 /**
@@ -137,6 +138,21 @@ 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')
+            }
+        ]
+    })
+}
+
 export {
     createDefaultRouter
 }
diff --git a/src/ui/button/button.vue b/src/ui/button/button.vue
new file mode 100644
index 00000000..020eec4a
--- /dev/null
+++ b/src/ui/button/button.vue
@@ -0,0 +1,28 @@
+<template>
+  <Button :class="size">
+    <span v-if="text">{{ text }}</span>
+    <slot v-else name="text"/>
+  </Button>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { Size } from '@/ui/enum/Size.ts'
+import { Button } from '@/components/ui/button'
+
+export default defineComponent({
+  name: 'IButton',
+  components: {
+    Button
+  },
+  props: {
+    text: {
+      type: String
+    },
+    size: {
+      type: String,
+      default: Size.default
+    }
+  }
+})
+</script>
diff --git a/src/ui/card/card.vue b/src/ui/card/card.vue
new file mode 100644
index 00000000..76d4bc15
--- /dev/null
+++ b/src/ui/card/card.vue
@@ -0,0 +1,48 @@
+<template>
+  <Card class="rounded-sm">
+    <CardHeader v-if="!hiddenTitle" :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>
+      <slot name="footer"/>
+    </CardFooter>
+  </Card>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { Card, CardContent, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'
+
+export default defineComponent({
+  name: 'ICard',
+  components: {
+    CardFooter, Card, CardContent, CardHeader, CardTitle
+  },
+  props: {
+    title: {
+      type: String
+    },
+    titleClass: {
+      type: String
+    },
+    bodyClass: {
+      type: String
+    },
+    hiddenTitle: {
+      type: Boolean,
+      default: false
+    }
+  }
+})
+</script>
\ No newline at end of file
diff --git a/src/ui/enum/Size.ts b/src/ui/enum/Size.ts
new file mode 100644
index 00000000..f9d98262
--- /dev/null
+++ b/src/ui/enum/Size.ts
@@ -0,0 +1,4 @@
+export enum Size
+{
+    default = 'w-8 h-8',
+}
\ No newline at end of file
diff --git a/src/views/pages/components/ButtonHome.vue b/src/views/pages/components/ButtonHome.vue
new file mode 100644
index 00000000..4fa9ce1e
--- /dev/null
+++ b/src/views/pages/components/ButtonHome.vue
@@ -0,0 +1,11 @@
+<template>
+
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'ButtonHome'
+})
+</script>

From 7666902264fb9d9458de9147535003d2f9e25c22 Mon Sep 17 00:00:00 2001
From: qianmoQ <shicheng@devlive.org>
Date: Thu, 11 Apr 2024 17:12:16 +0800
Subject: [PATCH 2/4] [Components] Add button

---
 src/i18n/langs/en/Common.ts               |   3 +
 src/i18n/langs/zhCn/Common.ts             |   3 +
 src/ui/button/button.vue                  |  67 ++++++++++--
 src/ui/card/card.vue                      |   2 +-
 src/ui/enum/Size.ts                       |   6 +-
 src/ui/enum/Type.ts                       |   9 ++
 src/views/pages/components/ButtonHome.vue | 123 +++++++++++++++++++++-
 7 files changed, 202 insertions(+), 11 deletions(-)
 create mode 100644 src/ui/enum/Type.ts

diff --git a/src/i18n/langs/en/Common.ts b/src/i18n/langs/en/Common.ts
index 99182346..b2b84e40 100644
--- a/src/i18n/langs/en/Common.ts
+++ b/src/i18n/langs/en/Common.ts
@@ -32,6 +32,9 @@ export default {
         notFoundItem: 'Not Found Item',
         search: 'Search',
         component: 'Component',
+        size: 'Size',
+        type: 'Type',
+        icon: 'Icon',
     },
     tip: {
         signInInfo: 'Enter your information to sign in to your account.',
diff --git a/src/i18n/langs/zhCn/Common.ts b/src/i18n/langs/zhCn/Common.ts
index 1a5f129b..f631b28b 100644
--- a/src/i18n/langs/zhCn/Common.ts
+++ b/src/i18n/langs/zhCn/Common.ts
@@ -32,6 +32,9 @@ export default {
         notFoundItem: '未找到该项',
         search: '搜索',
         component: '组件',
+        size: '尺寸',
+        type: '类型',
+        icon: '图标',
     },
     tip: {
         signInInfo: '输入您的信息以登录您的帐户。',
diff --git a/src/ui/button/button.vue b/src/ui/button/button.vue
index 020eec4a..7ba45a77 100644
--- a/src/ui/button/button.vue
+++ b/src/ui/button/button.vue
@@ -1,19 +1,39 @@
 <template>
-  <Button :class="size">
-    <span v-if="text">{{ text }}</span>
-    <slot v-else name="text"/>
+  <Button :class="cn(computedSize,
+                     `bg-[${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 } from 'vue'
+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'
 
 export default defineComponent({
   name: 'IButton',
   components: {
-    Button
+    Button,
+    Loader2
   },
   props: {
     text: {
@@ -21,7 +41,42 @@ export default defineComponent({
     },
     size: {
       type: String,
-      default: Size.default
+      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,
+      computedSize,
+      computedType
     }
   }
 })
diff --git a/src/ui/card/card.vue b/src/ui/card/card.vue
index 76d4bc15..01fadc18 100644
--- a/src/ui/card/card.vue
+++ b/src/ui/card/card.vue
@@ -14,7 +14,7 @@
     <CardContent :class="`${bodyClass}`">
       <slot/>
     </CardContent>
-    <CardFooter>
+    <CardFooter v-if="$slots.footer">
       <slot name="footer"/>
     </CardFooter>
   </Card>
diff --git a/src/ui/enum/Size.ts b/src/ui/enum/Size.ts
index f9d98262..4c33db45 100644
--- a/src/ui/enum/Size.ts
+++ b/src/ui/enum/Size.ts
@@ -1,4 +1,6 @@
 export enum Size
 {
-    default = 'w-8 h-8',
-}
\ No newline at end of file
+    default = 'h-8',
+    small = 'h-6',
+    large = 'h-10'
+}
diff --git a/src/ui/enum/Type.ts b/src/ui/enum/Type.ts
new file mode 100644
index 00000000..5f13f0fb
--- /dev/null
+++ b/src/ui/enum/Type.ts
@@ -0,0 +1,9 @@
+export enum Type
+{
+    primary = '#409EFF',
+    success = '#67C23A',
+    warning = '#E6A23C',
+    danger = '#F56C6C',
+    info = '#909399',
+    text = '#606266'
+}
\ No newline at end of file
diff --git a/src/views/pages/components/ButtonHome.vue b/src/views/pages/components/ButtonHome.vue
index 4fa9ce1e..2d10dc59 100644
--- a/src/views/pages/components/ButtonHome.vue
+++ b/src/views/pages/components/ButtonHome.vue
@@ -1,11 +1,130 @@
 <template>
-
+  <div class="flex w-full flex-col gap-4 md:gap-8 md:p-8 lg:grid lg:grid-cols-4">
+    <ICard body-class="pt-3">
+      <template #title>Size</template>
+      <div class="space-x-2">
+        <IButton size="large">Large</IButton>
+        <IButton size="default">Default</IButton>
+        <IButton size="small">Small</IButton>
+      </div>
+    </ICard>
+    <ICard body-class="pt-3">
+      <template #title>Type</template>
+      <div class="space-x-2 space-y-2">
+        <IButton type="primary">Primary</IButton>
+        <IButton type="success">Success</IButton>
+        <IButton type="warning">Warning</IButton>
+        <IButton type="danger">Danger</IButton>
+        <IButton type="info">Info</IButton>
+        <IButton type="text">Text</IButton>
+      </div>
+    </ICard>
+    <ICard body-class="pt-3">
+      <template #title>Icon</template>
+      <div class="space-x-2 space-y-2">
+        <IButton>
+          <template #icon>
+            <Save/>
+          </template>
+          Icon
+        </IButton>
+        <IButton type="success">
+          <template #icon>
+            <Save/>
+          </template>
+          Icon + Type
+        </IButton>
+        <IButton type="success" size="small">
+          <template #icon>
+            <Save/>
+          </template>
+          Icon + Type + Size
+        </IButton>
+      </div>
+    </ICard>
+    <ICard body-class="pt-3">
+      <template #title>Round</template>
+      <div class="space-x-2 space-y-2">
+        <IButton round>Round</IButton>
+        <IButton type="success" round>Round + Type</IButton>
+        <IButton type="success" size="small" round>Round + Type + Size</IButton>
+        <IButton type="success" round>
+          <template #icon>
+            <Save/>
+          </template>
+          Round + Type + Size + Icon
+        </IButton>
+      </div>
+    </ICard>
+    <ICard body-class="pt-3">
+      <template #title>Disabled</template>
+      <div class="space-x-2 space-y-2">
+        <IButton disabled>Disabled</IButton>
+        <IButton type="success" disabled>Disabled + Type</IButton>
+        <IButton type="success" size="small" disabled>Disabled + Type + Size</IButton>
+        <IButton type="success" disabled>
+          <template #icon>
+            <Save/>
+          </template>
+          Disabled + Type + Size + Icon
+        </IButton>
+      </div>
+    </ICard>
+    <ICard body-class="pt-3">
+      <template #title>Circle</template>
+      <div class="space-x-2 space-y-2">
+        <IButton circle>1</IButton>
+        <IButton type="success" circle>2</IButton>
+        <IButton type="success" circle>
+          <template #icon>
+            <Save/>
+          </template>
+        </IButton>
+      </div>
+    </ICard>
+    <ICard body-class="pt-3">
+      <template #title>Loading</template>
+      <div class="space-x-2 space-y-2">
+        <IButton loading>Loading</IButton>
+        <IButton type="success" loading>Loading + Type</IButton>
+        <IButton type="success" size="small" loading>Loading + Type + Size</IButton>
+        <IButton type="success">
+          <template #loading>
+            <Save/>
+          </template>
+          Custom Loading
+        </IButton>
+      </div>
+    </ICard>
+    <ICard body-class="pt-3">
+      <template #title>Color</template>
+      <div class="space-x-2 space-y-2">
+        <IButton color="red">Red</IButton>
+        <IButton color="green">Green</IButton>
+        <IButton color="blue">Blue</IButton>
+        <IButton color="yellow">Yellow</IButton>
+        <IButton color="purple">Purple</IButton>
+        <IButton color="pink">Pink</IButton>
+        <IButton color="indigo">Indigo</IButton>
+        <IButton color="cyan">Cyan</IButton>
+        <IButton color="teal">Teal</IButton>
+      </div>
+    </ICard>
+  </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue'
+import ICard from '@/ui/card/card.vue'
+import IButton from '@/ui/button/button.vue'
+import { Save } from 'lucide-vue-next'
 
 export default defineComponent({
-  name: 'ButtonHome'
+  name: 'ButtonHome',
+  components: {
+    IButton,
+    ICard,
+    Save
+  }
 })
 </script>

From 0457f803cc0085c3d99a30a613c466e95569e7a0 Mon Sep 17 00:00:00 2001
From: qianmoQ <shicheng@devlive.org>
Date: Thu, 11 Apr 2024 17:45:44 +0800
Subject: [PATCH 3/4] [Components] Add card

---
 src/data/Navigation.ts                  |  3 +-
 src/i18n/langs/en/Common.ts             |  1 +
 src/i18n/langs/zhCn/Common.ts           |  1 +
 src/router/default.ts                   |  5 +++
 src/ui/card/card.vue                    | 29 ++++++++++++-----
 src/ui/enum/Shadow.ts                   |  6 ++++
 src/views/pages/components/CardHome.vue | 41 +++++++++++++++++++++++++
 7 files changed, 78 insertions(+), 8 deletions(-)
 create mode 100644 src/ui/enum/Shadow.ts
 create mode 100644 src/views/pages/components/CardHome.vue

diff --git a/src/data/Navigation.ts b/src/data/Navigation.ts
index 74b350bf..cf188c6d 100644
--- a/src/data/Navigation.ts
+++ b/src/data/Navigation.ts
@@ -64,7 +64,8 @@ const createNavigation = (): void => {
     NavigationService.addNavigation(pages)
 
     const button = createNavigationItem('common.common.button', undefined, '/components/button', undefined, NavigationPosition.LEFT_TOP)
-    const componentArray = [button]
+    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)
 
diff --git a/src/i18n/langs/en/Common.ts b/src/i18n/langs/en/Common.ts
index b2b84e40..11dabad6 100644
--- a/src/i18n/langs/en/Common.ts
+++ b/src/i18n/langs/en/Common.ts
@@ -35,6 +35,7 @@ export default {
         size: 'Size',
         type: 'Type',
         icon: 'Icon',
+        card: 'Card',
     },
     tip: {
         signInInfo: 'Enter your information to sign in to your account.',
diff --git a/src/i18n/langs/zhCn/Common.ts b/src/i18n/langs/zhCn/Common.ts
index f631b28b..b077567e 100644
--- a/src/i18n/langs/zhCn/Common.ts
+++ b/src/i18n/langs/zhCn/Common.ts
@@ -35,6 +35,7 @@ export default {
         size: '尺寸',
         type: '类型',
         icon: '图标',
+        card: '卡片',
     },
     tip: {
         signInInfo: '输入您的信息以登录您的帐户。',
diff --git a/src/router/default.ts b/src/router/default.ts
index 37639bec..32a28524 100644
--- a/src/router/default.ts
+++ b/src/router/default.ts
@@ -148,6 +148,11 @@ const createComponentRouter = (router: Router): void => {
                 name: 'button',
                 path: 'button',
                 component: () => import('@/views/pages/components/ButtonHome.vue')
+            },
+            {
+                name: 'card',
+                path: 'card',
+                component: () => import('@/views/pages/components/CardHome.vue')
             }
         ]
     })
diff --git a/src/ui/card/card.vue b/src/ui/card/card.vue
index 01fadc18..e8c8c3ef 100644
--- a/src/ui/card/card.vue
+++ b/src/ui/card/card.vue
@@ -1,6 +1,6 @@
 <template>
-  <Card class="rounded-sm">
-    <CardHeader v-if="!hiddenTitle" :class="`flex flex-row items-center justify-between border-b p-4 ${titleClass}`">
+  <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>
@@ -14,15 +14,17 @@
     <CardContent :class="`${bodyClass}`">
       <slot/>
     </CardContent>
-    <CardFooter v-if="$slots.footer">
+    <CardFooter class="border-t p-4" v-if="$slots.footer">
       <slot name="footer"/>
     </CardFooter>
   </Card>
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue'
+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',
@@ -39,9 +41,22 @@ export default defineComponent({
     bodyClass: {
       type: String
     },
-    hiddenTitle: {
-      type: Boolean,
-      default: false
+    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
     }
   }
 })
diff --git a/src/ui/enum/Shadow.ts b/src/ui/enum/Shadow.ts
new file mode 100644
index 00000000..a4dec4e4
--- /dev/null
+++ b/src/ui/enum/Shadow.ts
@@ -0,0 +1,6 @@
+export enum Shadow
+{
+    never = 'shadow-background',
+    always = 'shadow-2xl',
+    hover = 'hover:shadow-2xl',
+}
\ No newline at end of file
diff --git a/src/views/pages/components/CardHome.vue b/src/views/pages/components/CardHome.vue
new file mode 100644
index 00000000..d0e05a91
--- /dev/null
+++ b/src/views/pages/components/CardHome.vue
@@ -0,0 +1,41 @@
+<template>
+  <div class="flex w-full flex-col gap-4 md:gap-8 md:p-8 lg:grid lg:grid-cols-4">
+    <ICard title="Basic"/>
+    <ICard>No Title</ICard>
+    <ICard title="Title Class" title-class="text-red-500"/>
+    <ICard body-class="text-red-500">Body Class</ICard>
+    <ICard title="Extra">
+      <template #extra>
+        <IButton>Extra</IButton>
+      </template>
+    </ICard>
+    <ICard>
+      <template #title>
+        <span>Footer</span>
+      </template>
+      <template #extra>
+        <IButton>Extra</IButton>
+      </template>
+      <template #footer>
+        <IButton>Footer</IButton>
+      </template>
+    </ICard>
+    <ICard title="Shadow Never" shadow="never"/>
+    <ICard title="Shadow Always" shadow="always"/>
+    <ICard title="Shadow Hover" shadow="hover" body-class="p-10"/>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import ICard from '@/ui/card/card.vue'
+import IButton from '@/ui/button/button.vue'
+
+export default defineComponent({
+  name: 'CardHome',
+  components: {
+    ICard,
+    IButton
+  }
+})
+</script>

From 7d0d9ef39037cab379e8174337f96abf4beb066b Mon Sep 17 00:00:00 2001
From: qianmoQ <shicheng@devlive.org>
Date: Thu, 11 Apr 2024 17:59:01 +0800
Subject: [PATCH 4/4] [Components] [Button] Support calculation of hover color

---
 src/ui/button/button.vue |  4 +++-
 src/utils/Color.ts       | 12 ++++++++++++
 2 files changed, 15 insertions(+), 1 deletion(-)
 create mode 100644 src/utils/Color.ts

diff --git a/src/ui/button/button.vue b/src/ui/button/button.vue
index 7ba45a77..055b6958 100644
--- a/src/ui/button/button.vue
+++ b/src/ui/button/button.vue
@@ -1,6 +1,6 @@
 <template>
   <Button :class="cn(computedSize,
-                     `bg-[${computedType}]`,
+                     `bg-[${computedType}] hover:bg-[${calculateHoverColor(computedType)}]`,
                      { 'rounded-full': round },
                      { 'rounded-full': circle })"
           :size="circle ? 'icon' : 'default'"
@@ -28,6 +28,7 @@ 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',
@@ -75,6 +76,7 @@ export default defineComponent({
 
     return {
       cn,
+      calculateHoverColor,
       computedSize,
       computedType
     }
diff --git a/src/utils/Color.ts b/src/utils/Color.ts
new file mode 100644
index 00000000..3688359b
--- /dev/null
+++ b/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
+}