diff --git a/src/data/Navigation.ts b/src/data/Navigation.ts index aec557e8..cf188c6d 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,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) } diff --git a/src/i18n/langs/en/Common.ts b/src/i18n/langs/en/Common.ts index c1717cad..11dabad6 100644 --- a/src/i18n/langs/en/Common.ts +++ b/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.', diff --git a/src/i18n/langs/zhCn/Common.ts b/src/i18n/langs/zhCn/Common.ts index 593b7a30..b077567e 100644 --- a/src/i18n/langs/zhCn/Common.ts +++ b/src/i18n/langs/zhCn/Common.ts @@ -31,6 +31,11 @@ export default { replyMessage: '这是一条回复的消息', notFoundItem: '未找到该项', search: '搜索', + component: '组件', + size: '尺寸', + type: '类型', + icon: '图标', + card: '卡片', }, tip: { signInInfo: '输入您的信息以登录您的帐户。', diff --git a/src/router/default.ts b/src/router/default.ts index 77299e48..32a28524 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,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 } diff --git a/src/ui/button/button.vue b/src/ui/button/button.vue new file mode 100644 index 00000000..055b6958 --- /dev/null +++ b/src/ui/button/button.vue @@ -0,0 +1,85 @@ + + + diff --git a/src/ui/card/card.vue b/src/ui/card/card.vue new file mode 100644 index 00000000..e8c8c3ef --- /dev/null +++ b/src/ui/card/card.vue @@ -0,0 +1,63 @@ + + + \ No newline at end of file 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/ui/enum/Size.ts b/src/ui/enum/Size.ts new file mode 100644 index 00000000..4c33db45 --- /dev/null +++ b/src/ui/enum/Size.ts @@ -0,0 +1,6 @@ +export enum Size +{ + 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/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 +} diff --git a/src/views/pages/components/ButtonHome.vue b/src/views/pages/components/ButtonHome.vue new file mode 100644 index 00000000..2d10dc59 --- /dev/null +++ b/src/views/pages/components/ButtonHome.vue @@ -0,0 +1,130 @@ + + + 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 @@ + + +