[Page] [Card] Add some card

README.md

@@ -1,7 +1,23 @@
+<div style="text-align: center;">
+
 # Shadcn UI Vue Admin
 
+![Visitors](https://api.visitorbadge.io/api/visitors?path=https%3A%2F%2Fgithub.com%2Fdevlive-community%2Fshadcn-ui-vue-admin&countColor=%23263759&style=flat)
+[![](https://tokei.rs/b1/github/devlive-community/shadcn-ui-vue-admin)](https://github.com/devlive-community/shadcn-ui-vue-admin)
+![version](https://img.shields.io/github/v/release/devlive-community/shadcn-ui-vue-admin.svg)
+
+![GitHub](https://img.shields.io/github/license/devlive-community/shadcn-ui-vue-admin)
+[![Push code checker](https://github.com/devlive-community/shadcn-ui-vue-admin/actions/workflows/checker.yml/badge.svg)](https://github.com/devlive-community/shadcn-ui-vue-admin/actions/workflows/checker.yml)
+![GitHub Release Date](https://img.shields.io/github/release-date/devlive-community/shadcn-ui-vue-admin?style=flat-square)
+
+![GitHub commit activity](https://img.shields.io/github/commit-activity/y/devlive-community/shadcn-ui-vue-admin?style=flat-square)
+![GitHub contributors](https://img.shields.io/github/contributors-anon/devlive-community/shadcn-ui-vue-admin?style=flat-square)
+![GitHub last commit](https://img.shields.io/github/last-commit/devlive-community/shadcn-ui-vue-admin?style=flat-square)
+
 Admin crafted with Shadcn ui and Vite and Vue. Built with responsiveness and accessibility in mind.
 
+</div>
+
 ## Feature
 
 ---

src/components/ui/separator/Separator.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { Separator, type SeparatorProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<SeparatorProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <Separator
+    v-bind="delegatedProps"
+    :class="cn('shrink-0 bg-border', props.orientation === 'vertical' ? 'w-px h-full' : 'h-px w-full', props.class)"
+  />
+</template>

src/components/ui/separator/index.ts

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

src/i18n/langs/en/Card.ts

@@ -22,7 +22,18 @@ export default {
         viewer: 'Viewer',
         developer: 'Developer',
         billing: 'Billing',
-        owner: 'Owner'
+        owner: 'Owner',
+        notification: 'Notification',
+        everything: 'Everything',
+        available: 'Available',
+        ignored: 'Ignored',
+        setting: 'Settings',
+        setting1: 'This is a setting item',
+        functionList: 'Function List',
+        list1: 'Function 1',
+        list2: 'Function 2',
+        list3: 'Function 3',
+        newList: 'Create List'
     },
     tip: {
         payment: 'This is a simulated payment card layout',
@@ -36,6 +47,12 @@ export default {
         viewer: 'Can view and comment.',
         developer: 'Can view, comment, and edit.',
         billing: 'Can view, comment, and billing.',
-        owner: 'Owner, with all permissions.'
+        owner: 'Owner, with all permissions.',
+        notification: 'This is a mock notification card layout',
+        everything: 'Email digest, mentions & all activity.',
+        available: 'Only mentions and comments.',
+        ignored: 'Turn off all notifications.',
+        setting: 'This is a mock setting card layout',
+        setting1: 'This is a description of the setting item',
     }
 }

src/i18n/langs/en/Common.ts

@@ -20,7 +20,8 @@ export default {
         pageForbidden: 'Page Forbidden',
         page403: '403 Forbidden',
         dashboard: 'Dashboard',
-        externalLink: 'External Link'
+        externalLink: 'External Link',
+        button: 'Button'
     },
     tip: {
         signInInfo: 'Enter your information to sign in to your account.',

src/i18n/langs/zhCn/Card.ts

@@ -22,7 +22,18 @@ export default {
         viewer: '查看者',
         developer: '开发者',
         billing: '账单管理',
-        owner: '拥有者'
+        owner: '拥有者',
+        notification: '通知',
+        everything: '全部活动',
+        available: '部分可用',
+        ignored: '忽略',
+        setting: '设置',
+        setting1: '这是一个配置项',
+        functionList: '功能列表',
+        function1: '功能 1',
+        function2: '功能 2',
+        function3: '功能 3',
+        newList: '新建列表',
     },
     tip: {
         payment: '这是一个模拟支付的卡片布局',
@@ -36,6 +47,12 @@ export default {
         viewer: '可以查看和评论。',
         developer: '可以查看评论，也可以发表评论。',
         billing: '可以查看和管理账单。',
-        owner: '拥有者，拥有所有权限。'
+        owner: '拥有者，拥有所有权限。',
+        notification: '这是一个模拟通知卡片布局。',
+        everything: '邮件摘要，提及和所有活动。',
+        available: '仅提及和评论。',
+        ignored: '关闭所有通知。',
+        setting: '这是一个模拟设置卡片布局。',
+        setting1: '这是一个设置项的说明'
     }
 }

src/i18n/langs/zhCn/Common.ts

@@ -20,7 +20,8 @@ export default {
         pageForbidden: '页面禁止访问',
         page403: '403 页面禁止访问',
         dashboard: '仪表盘',
-        externalLink: '外部链接'
+        externalLink: '外部链接',
+        button: '按钮'
     },
     tip: {
         signInInfo: '输入您的信息以登录您的帐户。',

src/views/pages/card/CardHome.vue

@@ -12,6 +12,17 @@
           <CardTeam/>
         </CardContainer>
       </div>
+      <div class="grid gap-3 md:grid-cols-2 md:gap-8 lg:grid-cols-3">
+        <CardContainer>
+          <CardNotification/>
+        </CardContainer>
+        <CardContainer>
+          <CardSetting/>
+        </CardContainer>
+        <CardContainer>
+          <CardGit/>
+        </CardContainer>
+      </div>
     </div>
   </div>
 </template>
@@ -22,9 +33,12 @@ import CardContainer from '@/views/pages/card/components/CardContainer.vue'
 import CardUser from '@/views/pages/card/components/CardUser.vue'
 import CardPayment from '@/views/pages/card/components/CardPayment.vue'
 import CardTeam from '@/views/pages/card/components/CardTeam.vue'
+import CardNotification from '@/views/pages/card/components/CardNotification.vue'
+import CardSetting from '@/views/pages/card/components/CardSetting.vue'
+import CardGit from '@/views/pages/card/components/CardGit.vue';
 
 export default defineComponent({
   name: 'CardHome',
-  components: {CardTeam, CardPayment, CardUser, CardContainer}
+  components: {CardGit, CardSetting, CardNotification, CardTeam, CardPayment, CardUser, CardContainer}
 })
 </script>

src/views/pages/card/components/CardGit.vue

@@ -0,0 +1,79 @@
+<template>
+  <Card>
+    <CardHeader class="grid grid-cols-[minmax(0,1fr)_110px] items-start gap-4 space-y-0">
+      <div class="space-y-1">
+        <CardTitle>
+          <a href="https://github.com/devlive-community/shadcn-ui-vue-admin" target="_blank">devlive-community/shadcn-ui-vue-admin</a>
+        </CardTitle>
+        <CardDescription>Admin crafted with Shadcn ui and Vite and Vue. Built with responsiveness and accessibility in mind.</CardDescription>
+      </div>
+      <div class="flex items-center space-x-1 rounded-md bg-secondary text-secondary-foreground">
+        <Button variant="secondary" class="px-3 shadow-none cursor-pointer">
+          <StarIcon class="mr-2 h-4 w-4"/>
+          Star
+        </Button>
+        <Separator orientation="vertical" class="h-5"/>
+        <DropdownMenu>
+          <DropdownMenuTrigger as-child>
+            <Button variant="secondary" class="px-2 shadow-none">
+              <ChevronDownIcon class="h-4 w-4 text-secondary-foreground"/>
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end" :align-offset="-5" class="w-[200px]">
+            <DropdownMenuLabel>{{ $t('card.common.functionList') }}</DropdownMenuLabel>
+            <DropdownMenuSeparator/>
+            <DropdownMenuCheckboxItem class="cursor-pointer" checked>{{ $t('card.common.function1') }}</DropdownMenuCheckboxItem>
+            <DropdownMenuCheckboxItem class="cursor-pointer">{{ $t('card.common.function2') }}</DropdownMenuCheckboxItem>
+            <DropdownMenuCheckboxItem class="cursor-pointer">{{ $t('card.common.function3') }}</DropdownMenuCheckboxItem>
+            <DropdownMenuSeparator/>
+            <DropdownMenuItem class="cursor-pointer">
+              <PlusIcon class="mr-2 h-4 w-4"/>
+              {{ $t('card.common.newList') }}
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+    </CardHeader>
+    <CardContent>
+      <div class="flex space-x-4 text-sm text-muted-foreground">
+        <div class="flex items-center cursor-pointer">
+          <CircleIcon class="mr-1 h-3 w-3 fill-sky-400 text-sky-400"/>
+          TypeScript
+        </div>
+        <div class="flex items-center cursor-pointer">
+          <StarIcon class="mr-1 h-3 w-3"/>
+          0 k
+        </div>
+        <div>Updated April 2024</div>
+      </div>
+    </CardContent>
+  </Card>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { ChevronDownIcon, CircleIcon, PlusIcon, StarIcon } from 'lucide-vue-next'
+import { Button } from '@/components/ui/button'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger
+} from '@/components/ui/dropdown-menu'
+import { Separator } from '@/components/ui/separator'
+
+export default defineComponent({
+  name: 'CardGit',
+  components: {
+    ChevronDownIcon, CircleIcon, PlusIcon, StarIcon,
+    Button,
+    Card, CardContent, CardDescription, CardHeader, CardTitle,
+    DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger,
+    Separator
+  }
+})
+</script>

src/views/pages/card/components/CardNotification.vue

@@ -0,0 +1,45 @@
+<template>
+  <Card>
+    <CardHeader class="pb-3">
+      <CardTitle>{{ $t('card.common.notification') }}</CardTitle>
+      <CardDescription>{{ $t('card.tip.notification') }}</CardDescription>
+    </CardHeader>
+    <CardContent class="grid gap-1">
+      <div class="cursor-pointer -mx-2 flex items-start space-x-4 rounded-md p-2 transition-all hover:bg-accent hover:text-accent-foreground">
+        <BellIcon class="mt-px h-5 w-5"/>
+        <div class="space-y-1">
+          <p class="text-sm font-medium leading-none">{{ $t('card.common.notification') }}</p>
+          <p class="text-sm text-muted-foreground">{{ $t('card.tip.notification') }}</p>
+        </div>
+      </div>
+      <div class="cursor-pointer -mx-2 flex items-start space-x-4 rounded-md bg-accent p-2 text-accent-foreground transition-all">
+        <PersonStandingIcon class="mt-px h-5 w-5"/>
+        <div class="space-y-1">
+          <p class="text-sm font-medium leading-none">{{ $t('card.common.available') }}</p>
+          <p class="text-sm text-muted-foreground">{{ $t('card.tip.available') }}</p>
+        </div>
+      </div>
+      <div class="cursor-pointer -mx-2 flex items-start space-x-4 rounded-md p-2 transition-all hover:bg-accent hover:text-accent-foreground">
+        <EyeOffIcon class="mt-px h-5 w-5"/>
+        <div class="space-y-1">
+          <p class="text-sm font-medium leading-none">{{ $t('card.common.ignored') }}</p>
+          <p class="text-sm text-muted-foreground">{{ $t('card.tip.ignored') }}</p>
+        </div>
+      </div>
+    </CardContent>
+  </Card>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
+import { BellIcon, EyeOffIcon, PersonStandingIcon } from 'lucide-vue-next'
+
+export default defineComponent({
+  name: 'CardNotification',
+  components: {
+    Card, CardContent, CardDescription, CardHeader, CardTitle,
+    BellIcon, EyeOffIcon, PersonStandingIcon
+  }
+})
+</script>

src/views/pages/card/components/CardSetting.vue

@@ -0,0 +1,44 @@
+<template>
+  <Card>
+    <CardHeader>
+      <CardTitle>{{ $t('card.common.setting') }}</CardTitle>
+      <CardDescription>{{ $t('card.tip.setting') }}</CardDescription>
+    </CardHeader>
+    <CardContent class="grid gap-6">
+      <div class="flex items-center justify-between space-x-2">
+        <Label for="necessary" class="flex flex-col space-y-1">
+          <span>{{ $t('card.common.setting1') }}</span>
+          <span class="font-normal leading-snug text-muted-foreground">{{ $t('card.tip.setting1') }}</span>
+        </Label>
+        <Switch id="necessary" default-checked/>
+      </div>
+      <div class="flex items-center justify-between space-x-2">
+        <Label for="functional" class="flex flex-col space-y-1">
+          <span>{{ $t('card.common.setting1') }}</span>
+          <span class="font-normal leading-snug text-muted-foreground">{{ $t('card.tip.setting1') }}</span>
+        </Label>
+        <Switch id="functional"/>
+      </div>
+    </CardContent>
+    <CardFooter>
+      <Button variant="outline" class="w-full">{{ $t('common.common.button') }}</Button>
+    </CardFooter>
+  </Card>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { Button } from '@/components/ui/button'
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'
+import { Label } from '@/components/ui/label'
+import { Switch } from '@/components/ui/switch'
+
+export default defineComponent({
+  name: 'CardSetting',
+  components: {
+    Button,
+    Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle,
+    Label, Switch
+  }
+})
+</script>