From 3d2203a55222a7441087034cdeb22f866b1869fb Mon Sep 17 00:00:00 2001 From: qianmoQ Date: Sun, 24 Mar 2024 18:32:24 +0800 Subject: [PATCH 1/6] [Page] Add 403 --- README.md | 46 +++++++++++++++++++++++++++- src/data/Navigation.ts | 8 +++-- src/i18n/langs/en/Common.ts | 10 ++++-- src/i18n/langs/zhCn/Common.ts | 10 ++++-- src/router/default.ts | 5 +++ src/views/common/error/Forbidden.vue | 24 +++++++++++++++ src/views/common/error/NotFound.vue | 6 ++-- 7 files changed, 98 insertions(+), 11 deletions(-) create mode 100644 src/views/common/error/Forbidden.vue diff --git a/README.md b/README.md index e35e6e5c..c422e461 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,47 @@ # Shadcn UI Vue Admin -Admin crafted with Shadcn ui and Vite and Vue. Built with responsiveness and accessibility in mind. \ No newline at end of file +Admin crafted with Shadcn ui and Vite and Vue. Built with responsiveness and accessibility in mind. + +## Feature + +--- + +- **Responsive design** +- **Accessibility** +- **Light theme** +- **Dark theme** +- **Works right out of the box** +- **Supports multiple languages** +- **Supports multiple layouts** + +## Tech Stack + +--- + +- [Shadcn UI](https://shadcn.com/) +- [Vite](https://vitejs.dev/) +- [Vue 3](https://vuejs.org/) +- [Tailwind CSS](https://tailwindcss.com/) +- [TypeScript](https://www.typescriptlang.org/) + +## How to Run? + +--- + +Clone the repository + +```bash +https://github.com/devlive-community/shadcn-ui-vue-admin +``` + +Install dependencies + +```bash +npm install +``` + +Run + +```bash +npm run dev +``` diff --git a/src/data/Navigation.ts b/src/data/Navigation.ts index b0c7ff80..7b9bd9aa 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 { Ban, Home, LogIn, LogOut, StickyNote } from 'lucide-vue-next' +import { Ban, CircleOff, Home, LogIn, LogOut, StickyNote } from 'lucide-vue-next' const createNavigation = (): void => { NavigationService.addNavigation(createNavigationItem('common.common.home', undefined, '/home', Home, NavigationPosition.LEFT_TOP)) @@ -36,8 +36,10 @@ const createNavigation = (): void => { NavigationService.addNavigation(openProject) const page404 = createNavigationItem('common.common.page404', undefined, '/common/404', Ban, NavigationPosition.LEFT_TOP) - const pages = createNavigationItem('common.common.page', undefined, '/pages', StickyNote, - NavigationPosition.LEFT_TOP, [page404], undefined, 'common.common.page') + const page403 = createNavigationItem('common.common.page403', undefined, '/common/403', CircleOff, NavigationPosition.LEFT_TOP) + const pageArray = [page404, page403] + const pages = createNavigationItem('common.common.page', pageArray.length.toString(), '/pages', StickyNote, + NavigationPosition.LEFT_TOP, pageArray, undefined, 'common.common.page') NavigationService.addNavigation(pages) } diff --git a/src/i18n/langs/en/Common.ts b/src/i18n/langs/en/Common.ts index e9c2505e..9adbe94b 100644 --- a/src/i18n/langs/en/Common.ts +++ b/src/i18n/langs/en/Common.ts @@ -14,7 +14,11 @@ export default { openProject: 'Open Project', datacap: 'DataCap', page: 'Page', - page404: '404' + page404: '404 Not found', + pageNotFound: 'Page not found', + backToHome: 'Back to Home', + pageForbidden: 'Page Forbidden', + page403: '403 Forbidden', }, tip: { signInInfo: 'Enter your information to sign in to your account.', @@ -24,6 +28,8 @@ export default { signUpHasAccount: 'Already have an account?', forgotPasswordInfo: 'Enter your registered email and we will send you a link to reset your password.', inputAnyInfo: 'Enter your username and password at will', - datacap: 'DataCap is integrated software for data transformation, integration, and visualization. Support a variety of data sources, file types, big data related database, relational database, NoSQL database, etc. Through the software can realize the management of multiple data sources, the data under the source of various operations conversion, making data charts, monitoring data sources and other functions.' + datacap: 'DataCap is integrated software for data transformation, integration, and visualization. Support a variety of data sources, file types, big data related database, relational database, NoSQL database, etc. Through the software can realize the management of multiple data sources, the data under the source of various operations conversion, making data charts, monitoring data sources and other functions.', + pageNotFound: 'Oops! Page Not Found!', + pageForbidden: 'Oops! Page Forbidden!' } } \ No newline at end of file diff --git a/src/i18n/langs/zhCn/Common.ts b/src/i18n/langs/zhCn/Common.ts index 598d1ca6..c6235e85 100644 --- a/src/i18n/langs/zhCn/Common.ts +++ b/src/i18n/langs/zhCn/Common.ts @@ -14,7 +14,11 @@ export default { openProject: '开源项目', datacap: 'DataCap', page: '页面', - page404: '404' + page404: '404 页面未找到', + pageNotFound: '页面未找到', + backToHome: '返回首页', + pageForbidden: '页面禁止访问', + page403: '403 页面禁止访问', }, tip: { signInInfo: '输入您的信息以登录您的帐户。', @@ -24,6 +28,8 @@ export default { signUpHasAccount: '已有账号？', forgotPasswordInfo: '输入您注册的邮箱以获取重置密码的链接。', inputAnyInfo: '输入任何信息即可', - datacap: 'DataCap 是数据转换、集成和可视化的集成软件。支持多种数据源，文件类型，大数据相关数据库，关系型数据库，NoSQL 数据库等。通过软件可以实现管理多种数据源，对该源下的数据进行各种操作转换，制作数据图表，监控数据源等各种功能。' + datacap: 'DataCap 是数据转换、集成和可视化的集成软件。支持多种数据源，文件类型，大数据相关数据库，关系型数据库，NoSQL 数据库等。通过软件可以实现管理多种数据源，对该源下的数据进行各种操作转换，制作数据图表，监控数据源等各种功能。', + pageNotFound: 'Oops! 页面未找到!', + pageForbidden: 'Oops! 页面禁止访问!' } } \ No newline at end of file diff --git a/src/router/default.ts b/src/router/default.ts index 44c374e8..66b83d74 100644 --- a/src/router/default.ts +++ b/src/router/default.ts @@ -34,6 +34,11 @@ const createHttpRouter = (router: Router): void => { name: '404', path: '404', component: () => import('@/views/common/error/NotFound.vue') + }, + { + name: '403', + path: '403', + component: () => import('@/views/common/error/Forbidden.vue') } ] }) diff --git a/src/views/common/error/Forbidden.vue b/src/views/common/error/Forbidden.vue new file mode 100644 index 00000000..bf61ecba --- /dev/null +++ b/src/views/common/error/Forbidden.vue @@ -0,0 +1,24 @@ + + + diff --git a/src/views/common/error/NotFound.vue b/src/views/common/error/NotFound.vue index b7f8f8d2..53b98c94 100644 --- a/src/views/common/error/NotFound.vue +++ b/src/views/common/error/NotFound.vue @@ -2,11 +2,11 @@

404

- Page Not Found -

Oops! Page Not Found!

+ {{ $t('common.common.pageNotFound') }} +

{{ $t('common.tip.pageNotFound') }}

- +
From 9c12ed105baec1f79d757adbb9c4fa7a75a336f4 Mon Sep 17 00:00:00 2001 From: qianmoQ Date: Sun, 24 Mar 2024 19:46:45 +0800 Subject: [PATCH 2/6] [Page] [Layout] Add notification --- package-lock.json | 9 +++ package.json | 1 + src/components/ui/switch/Switch.vue | 37 ++++++++++ src/components/ui/switch/index.ts | 1 + src/data/Notification.ts | 40 ++++++++++ src/data/index.ts | 4 + src/i18n/langs/en/User.ts | 7 +- src/i18n/langs/zhCn/User.ts | 7 +- src/main.ts | 2 + src/model/Navigation.ts | 2 +- src/model/Notification.ts | 8 ++ src/services/Notification.ts | 18 +++++ .../layouts/base/components/LayoutHeader.vue | 4 +- .../components/NotificationNavigation.vue | 74 +++++++++++++++++++ tsconfig.json | 3 +- 15 files changed, 212 insertions(+), 5 deletions(-) create mode 100644 src/components/ui/switch/Switch.vue create mode 100644 src/components/ui/switch/index.ts create mode 100644 src/data/Notification.ts create mode 100644 src/model/Notification.ts create mode 100644 src/services/Notification.ts create mode 100644 src/views/layouts/base/components/components/NotificationNavigation.vue diff --git a/package-lock.json b/package-lock.json index c09e14e3..42c7acce 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15,6 +15,7 @@ "clsx": "^2.1.0", "lodash": "^4.17.21", "lucide-vue-next": "^0.360.0", + "moment": "^2.30.1", "radix-vue": "^1.5.3", "tailwind-merge": "^2.2.2", "tailwindcss-animate": "^1.0.7", @@ -1825,6 +1826,14 @@ "node": ">=16 || 14 >=14.17" } }, + "node_modules/moment": { + "version": "2.30.1", + "resolved": "https://registry.npmjs.org/moment/-/moment-2.30.1.tgz", + "integrity": "sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==", + "engines": { + "node": "*" + } + }, "node_modules/muggle-string": { "version": "0.4.1", "resolved": "https://registry.npmjs.org/muggle-string/-/muggle-string-0.4.1.tgz", diff --git a/package.json b/package.json index ce0dbcf0..22cc0657 100644 --- a/package.json +++ b/package.json @@ -16,6 +16,7 @@ "clsx": "^2.1.0", "lodash": "^4.17.21", "lucide-vue-next": "^0.360.0", + "moment": "^2.30.1", "radix-vue": "^1.5.3", "tailwind-merge": "^2.2.2", "tailwindcss-animate": "^1.0.7", diff --git a/src/components/ui/switch/Switch.vue b/src/components/ui/switch/Switch.vue new file mode 100644 index 00000000..ae4d13ae --- /dev/null +++ b/src/components/ui/switch/Switch.vue @@ -0,0 +1,37 @@ + + + diff --git a/src/components/ui/switch/index.ts b/src/components/ui/switch/index.ts new file mode 100644 index 00000000..87b4b17d --- /dev/null +++ b/src/components/ui/switch/index.ts @@ -0,0 +1 @@ +export { default as Switch } from './Switch.vue' diff --git a/src/data/Notification.ts b/src/data/Notification.ts new file mode 100644 index 00000000..2d9f85f6 --- /dev/null +++ b/src/data/Notification.ts @@ -0,0 +1,40 @@ +import NotificationService from '@/services/Notification' +import { NotificationModel } from '@/model/Notification' + +const createNotification = (): void => { + const notification001: NotificationModel = { + title: 'Notification 001', + description: 'This is the description of the first notification', + isRead: false, + createTime: '2024-01-01T00:00:00.000Z' + } + NotificationService.addNotification(notification001) + + const notification002: NotificationModel = { + title: 'Notification 002', + description: 'This is the description of the second notification', + isRead: false, + createTime: '2024-02-01T00:00:00.000Z' + } + NotificationService.addNotification(notification002) + + const notification003: NotificationModel = { + title: 'Notification 003', + description: 'This is the description of the third notification', + isRead: false, + createTime: '2024-03-01T00:00:00.000Z' + } + NotificationService.addNotification(notification003) + + const notification004: NotificationModel = { + title: 'Notification 004', + description: 'This is the description of the fourth notification', + isRead: true, + createTime: '2024-03-24T00:00:00.000Z' + } + NotificationService.addNotification(notification004) +} + +export { + createNotification +} diff --git a/src/data/index.ts b/src/data/index.ts index 56245cb2..599f560a 100644 --- a/src/data/index.ts +++ b/src/data/index.ts @@ -1,4 +1,8 @@ import { createNavigation } from '@/data/Navigation' +import { createNotification } from '@/data/Notification' // Import navigation data createNavigation() + +// Import notification data +createNotification() diff --git a/src/i18n/langs/en/User.ts b/src/i18n/langs/en/User.ts index 1b477213..830828f3 100644 --- a/src/i18n/langs/en/User.ts +++ b/src/i18n/langs/en/User.ts @@ -5,6 +5,9 @@ export default { confirmPassword: 'Confirm Password', continueWith: 'Or continue with', email: 'Email', + notification: 'Notification Center', + pushNotification: 'Push Notification', + markAllAsRead: 'Mark all as read' }, validator: { usernameRequired: 'Username is required', @@ -23,6 +26,8 @@ export default { confirmPasswordHolder: 'Please confirm your password', emailHolder: 'Please enter your email', signIn: 'In this you can enter your information to sign in to your account.', - signUp: 'In this you can enter your information to create an account.' + signUp: 'In this you can enter your information to create an account.', + unreadNotification: 'You have REPLACE_COUNT unread messages.', + pushNotification: 'Send notifications to device.' } } \ No newline at end of file diff --git a/src/i18n/langs/zhCn/User.ts b/src/i18n/langs/zhCn/User.ts index 6424aca8..d69c914d 100644 --- a/src/i18n/langs/zhCn/User.ts +++ b/src/i18n/langs/zhCn/User.ts @@ -5,6 +5,9 @@ export default { confirmPassword: '确认密码', continueWith: '或者继续使用', email: '邮箱', + notification: '通知中心', + pushNotification: '推送通知', + markAllAsRead: '全部标为已读' }, validator: { usernameRequired: '用户名为必填项', @@ -23,6 +26,8 @@ export default { confirmPasswordHolder: '请再次输入您的密码', emailHolder: '请输入您的邮箱', signIn: '在这里可以输入您的信息以登录您的帐户。', - signUp: '在这里可以输入您的信息以创建账号。' + signUp: '在这里可以输入您的信息以创建账号。', + unreadNotification: `您有 REPLACE_COUNT 个未读消息。`, + pushNotification: '向设备发送通知。' } } \ No newline at end of file diff --git a/src/main.ts b/src/main.ts index 73dd2108..2cebbd05 100644 --- a/src/main.ts +++ b/src/main.ts @@ -2,6 +2,7 @@ import { createApp } from 'vue' import App from './App.vue' import router from '@/router' import i18n from '@/i18n' +import moment from 'moment' import './style.css' import './assets/index.css' @@ -12,4 +13,5 @@ const app = createApp(App) app.use(router) app.use(i18n) app.provide('$t', i18n.global.t) +app.config.globalProperties.$dt = moment app.mount('#app') diff --git a/src/model/Navigation.ts b/src/model/Navigation.ts index 57da4f00..4f6988c9 100644 --- a/src/model/Navigation.ts +++ b/src/model/Navigation.ts @@ -1,6 +1,6 @@ export interface NavigationModel { - title?: string + title?: string // i18n key label?: string href?: string icon?: any diff --git a/src/model/Notification.ts b/src/model/Notification.ts new file mode 100644 index 00000000..572a6ddc --- /dev/null +++ b/src/model/Notification.ts @@ -0,0 +1,8 @@ +export interface NotificationModel +{ + id?: number + title?: string + description?: string + isRead?: boolean + createTime?: string +} \ No newline at end of file diff --git a/src/services/Notification.ts b/src/services/Notification.ts new file mode 100644 index 00000000..529e3c6f --- /dev/null +++ b/src/services/Notification.ts @@ -0,0 +1,18 @@ +import { NotificationModel } from '@/model/Notification' + +class NotificationService +{ + private notifications: NotificationModel[] = [] + + addNotification(notification: NotificationModel): void + { + this.notifications.push(notification) + } + + getNotifications(): NotificationModel[] + { + return this.notifications + } +} + +export default new NotificationService() diff --git a/src/views/layouts/base/components/LayoutHeader.vue b/src/views/layouts/base/components/LayoutHeader.vue index ebe955a3..6f455038 100644 --- a/src/views/layouts/base/components/LayoutHeader.vue +++ b/src/views/layouts/base/components/LayoutHeader.vue @@ -4,6 +4,7 @@
+
@@ -18,11 +19,12 @@ import NavigationHeader from '@/views/layouts/base/components/components/Navigat import { NavigationModel } from '@/model/Navigation' import ThemeSwitcher from '@/views/layouts/base/components/components/ThemeSwitcher.vue' import NavigationUser from '@/views/layouts/base/components/components/NavigationUser.vue' +import NotificationNavigation from '@/views/layouts/base/components/components/NotificationNavigation.vue' export default defineComponent({ name: 'LayoutHeader', components: { - NavigationUser, NavigationHeader, + NotificationNavigation, NavigationUser, NavigationHeader, ThemeSwitcher, LanguageSwitcher, Button }, diff --git a/src/views/layouts/base/components/components/NotificationNavigation.vue b/src/views/layouts/base/components/components/NotificationNavigation.vue new file mode 100644 index 00000000..6b124c9f --- /dev/null +++ b/src/views/layouts/base/components/components/NotificationNavigation.vue @@ -0,0 +1,74 @@ + + + diff --git a/tsconfig.json b/tsconfig.json index b57ed337..c4530a5e 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -27,7 +27,8 @@ "@/*": [ "./src/*" ] - } + }, + "allowSyntheticDefaultImports": true }, "include": [ "src/**/*.ts", From 1dee1d0833332017cf97f75ebf32c8157bcf103f Mon Sep 17 00:00:00 2001 From: qianmoQ Date: Sun, 24 Mar 2024 20:13:41 +0800 Subject: [PATCH 3/6] [Page] [Layout] Add monent i18n --- src/moment/zhCn.ts | 0 1 file changed, 0 insertions(+), 0 deletions(-) create mode 100644 src/moment/zhCn.ts diff --git a/src/moment/zhCn.ts b/src/moment/zhCn.ts new file mode 100644 index 00000000..e69de29b From 867a4552e9ff474e632d7d0203e8ac0e4ea9ab5d Mon Sep 17 00:00:00 2001 From: qianmoQ Date: Sun, 24 Mar 2024 20:13:51 +0800 Subject: [PATCH 4/6] [Page] [Layout] Add monent i18n --- src/main.ts | 4 + src/moment/zhCn.ts | 101 ++++++++++++++++++ .../components/NotificationNavigation.vue | 11 +- 3 files changed, 114 insertions(+), 2 deletions(-) diff --git a/src/main.ts b/src/main.ts index 2cebbd05..302ead8c 100644 --- a/src/main.ts +++ b/src/main.ts @@ -3,6 +3,7 @@ import App from './App.vue' import router from '@/router' import i18n from '@/i18n' import moment from 'moment' +import momentCN from './moment/zhCn' import './style.css' import './assets/index.css' @@ -13,5 +14,8 @@ const app = createApp(App) app.use(router) app.use(i18n) app.provide('$t', i18n.global.t) +// Setting moment +moment.locale('zh-cn', momentCN as any) app.config.globalProperties.$dt = moment +app.provide('$dt', moment) app.mount('#app') diff --git a/src/moment/zhCn.ts b/src/moment/zhCn.ts index e69de29b..b575e8da 100644 --- a/src/moment/zhCn.ts +++ b/src/moment/zhCn.ts @@ -0,0 +1,101 @@ +const momentCN = { + months: '一月_二月_三月_四月_五月_六月_七月_八月_九月_十月_十一月_十二月'.split('_'), + monthsShort: '1月_2月_3月_4月_5月_6月_7月_8月_9月_10月_11月_12月'.split('_'), + weekdays: '星期日_星期一_星期二_星期三_星期四_星期五_星期六'.split('_'), + weekdaysShort: '周日_周一_周二_周三_周四_周五_周六'.split('_'), + weekdaysMin: '日_一_二_三_四_五_六'.split('_'), + longDateFormat: { + LT: 'HH:mm', + LTS: 'HH:mm:ss', + L: 'YYYY-MM-DD', + LL: 'YYYY年MM月DD日', + LLL: 'YYYY年MM月DD日Ah点mm分', + LLLL: 'YYYY年MM月DD日ddddAh点mm分', + l: 'YYYY-M-D', + ll: 'YYYY年M月D日', + lll: 'YYYY年M月D日 HH:mm', + llll: 'YYYY年M月D日dddd HH:mm' + }, + meridiemParse: /凌晨|早上|上午|中午|下午|晚上/, + meridiemHour: function (hour: number, meridiem: string) { + if (hour === 12) { + hour = 0; + } + if (meridiem === '凌晨' || meridiem === '早上' || + meridiem === '上午') { + return hour; + } + else if (meridiem === '下午' || meridiem === '晚上') { + return hour + 12; + } + else { + return hour >= 11 ? hour : hour + 12; + } + }, + meridiem: function (hour: number, minute: number) { + const hm = hour * 100 + minute; + if (hm < 600) { + return '凌晨'; + } + else if (hm < 900) { + return '早上'; + } + else if (hm < 1130) { + return '上午'; + } + else if (hm < 1230) { + return '中午'; + } + else if (hm < 1800) { + return '下午'; + } + else { + return '晚上'; + } + }, + calendar: { + sameDay: '[今天]LT', + nextDay: '[明天]LT', + nextWeek: '[下]ddddLT', + lastDay: '[昨天]LT', + lastWeek: '[上]ddddLT', + sameElse: 'L' + }, + dayOfMonthOrdinalParse: /\d{1,2}(日|月|周)/, + ordinal: function (number: number, period: string) { + switch (period) { + case 'd': + case 'D': + case 'DDD': + return number + '日'; + case 'M': + return number + '月'; + case 'w': + case 'W': + return number + '周'; + default: + return number; + } + }, + relativeTime: { + future: '%s内', + past: '%s前', + s: '几秒', + ss: '%d秒', + m: '1分钟', + mm: '%d分钟', + h: '1小时', + hh: '%d小时', + d: '1天', + dd: '%d天', + M: '1个月', + MM: '%d个月', + y: '1年', + yy: '%d年' + }, + week: { + dow: 1, // Monday is the first day of the week. + doy: 4 // The week that contains Jan 4th is the first week of the year. + } +} +export default momentCN \ No newline at end of file diff --git a/src/views/layouts/base/components/components/NotificationNavigation.vue b/src/views/layouts/base/components/components/NotificationNavigation.vue index 6b124c9f..0b6afd6f 100644 --- a/src/views/layouts/base/components/components/NotificationNavigation.vue +++ b/src/views/layouts/base/components/components/NotificationNavigation.vue @@ -26,7 +26,7 @@

{{ notification.title }}

{{ notification.description }}

-

{{ $dt(notification.createTime).fromNow() }}

+

{{ formatDate(notification.createTime) }}

@@ -43,7 +43,7 @@ + + diff --git a/src/components/ui/badge/index.ts b/src/components/ui/badge/index.ts new file mode 100644 index 00000000..20eda06a --- /dev/null +++ b/src/components/ui/badge/index.ts @@ -0,0 +1,25 @@ +import { type VariantProps, cva } from 'class-variance-authority' + +export { default as Badge } from './Badge.vue' + +export const badgeVariants = cva( + 'inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2', + { + variants: { + variant: { + default: + 'border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80', + secondary: + 'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80', + destructive: + 'border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80', + outline: 'text-foreground', + }, + }, + defaultVariants: { + variant: 'default', + }, + }, +) + +export type BadgeVariants = VariantProps diff --git a/src/components/ui/sheet/Sheet.vue b/src/components/ui/sheet/Sheet.vue new file mode 100644 index 00000000..a04c0262 --- /dev/null +++ b/src/components/ui/sheet/Sheet.vue @@ -0,0 +1,14 @@ + + + diff --git a/src/components/ui/sheet/SheetClose.vue b/src/components/ui/sheet/SheetClose.vue new file mode 100644 index 00000000..a64703e5 --- /dev/null +++ b/src/components/ui/sheet/SheetClose.vue @@ -0,0 +1,11 @@ + + + diff --git a/src/components/ui/sheet/SheetContent.vue b/src/components/ui/sheet/SheetContent.vue new file mode 100644 index 00000000..188b69d7 --- /dev/null +++ b/src/components/ui/sheet/SheetContent.vue @@ -0,0 +1,56 @@ + + + diff --git a/src/components/ui/sheet/SheetDescription.vue b/src/components/ui/sheet/SheetDescription.vue new file mode 100644 index 00000000..842cd08a --- /dev/null +++ b/src/components/ui/sheet/SheetDescription.vue @@ -0,0 +1,22 @@ + + + diff --git a/src/components/ui/sheet/SheetFooter.vue b/src/components/ui/sheet/SheetFooter.vue new file mode 100644 index 00000000..ac2d0c18 --- /dev/null +++ b/src/components/ui/sheet/SheetFooter.vue @@ -0,0 +1,19 @@ + + + diff --git a/src/components/ui/sheet/SheetHeader.vue b/src/components/ui/sheet/SheetHeader.vue new file mode 100644 index 00000000..541f48f5 --- /dev/null +++ b/src/components/ui/sheet/SheetHeader.vue @@ -0,0 +1,16 @@ + + + diff --git a/src/components/ui/sheet/SheetTitle.vue b/src/components/ui/sheet/SheetTitle.vue new file mode 100644 index 00000000..2ca0c543 --- /dev/null +++ b/src/components/ui/sheet/SheetTitle.vue @@ -0,0 +1,22 @@ + + + diff --git a/src/components/ui/sheet/SheetTrigger.vue b/src/components/ui/sheet/SheetTrigger.vue new file mode 100644 index 00000000..ee0c12ff --- /dev/null +++ b/src/components/ui/sheet/SheetTrigger.vue @@ -0,0 +1,11 @@ + + + diff --git a/src/components/ui/sheet/index.ts b/src/components/ui/sheet/index.ts new file mode 100644 index 00000000..fae3f08c --- /dev/null +++ b/src/components/ui/sheet/index.ts @@ -0,0 +1,31 @@ +import { type VariantProps, cva } from 'class-variance-authority' + +export { default as Sheet } from './Sheet.vue' +export { default as SheetTrigger } from './SheetTrigger.vue' +export { default as SheetClose } from './SheetClose.vue' +export { default as SheetContent } from './SheetContent.vue' +export { default as SheetHeader } from './SheetHeader.vue' +export { default as SheetTitle } from './SheetTitle.vue' +export { default as SheetDescription } from './SheetDescription.vue' +export { default as SheetFooter } from './SheetFooter.vue' + +export const sheetVariants = cva( + 'fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500', + { + variants: { + side: { + top: 'inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top', + bottom: + 'inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom', + left: 'inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm', + right: + 'inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm', + }, + }, + defaultVariants: { + side: 'right', + }, + }, +) + +export type SheetVariants = VariantProps diff --git a/src/components/ui/table/Table.vue b/src/components/ui/table/Table.vue new file mode 100644 index 00000000..a4238918 --- /dev/null +++ b/src/components/ui/table/Table.vue @@ -0,0 +1,16 @@ + + + diff --git a/src/components/ui/table/TableBody.vue b/src/components/ui/table/TableBody.vue new file mode 100644 index 00000000..ab7a937d --- /dev/null +++ b/src/components/ui/table/TableBody.vue @@ -0,0 +1,14 @@ + + + diff --git a/src/components/ui/table/TableCaption.vue b/src/components/ui/table/TableCaption.vue new file mode 100644 index 00000000..3904c563 --- /dev/null +++ b/src/components/ui/table/TableCaption.vue @@ -0,0 +1,14 @@ + + + diff --git a/src/components/ui/table/TableCell.vue b/src/components/ui/table/TableCell.vue new file mode 100644 index 00000000..40c1f43e --- /dev/null +++ b/src/components/ui/table/TableCell.vue @@ -0,0 +1,21 @@ + + + diff --git a/src/components/ui/table/TableEmpty.vue b/src/components/ui/table/TableEmpty.vue new file mode 100644 index 00000000..43fe7e0c --- /dev/null +++ b/src/components/ui/table/TableEmpty.vue @@ -0,0 +1,37 @@ + + + diff --git a/src/components/ui/table/TableFooter.vue b/src/components/ui/table/TableFooter.vue new file mode 100644 index 00000000..693a4386 --- /dev/null +++ b/src/components/ui/table/TableFooter.vue @@ -0,0 +1,14 @@ + + + diff --git a/src/components/ui/table/TableHead.vue b/src/components/ui/table/TableHead.vue new file mode 100644 index 00000000..11fb1010 --- /dev/null +++ b/src/components/ui/table/TableHead.vue @@ -0,0 +1,14 @@ + + + diff --git a/src/components/ui/table/TableHeader.vue b/src/components/ui/table/TableHeader.vue new file mode 100644 index 00000000..220352f6 --- /dev/null +++ b/src/components/ui/table/TableHeader.vue @@ -0,0 +1,14 @@ + + + diff --git a/src/components/ui/table/TableRow.vue b/src/components/ui/table/TableRow.vue new file mode 100644 index 00000000..5b9e8749 --- /dev/null +++ b/src/components/ui/table/TableRow.vue @@ -0,0 +1,14 @@ + + + diff --git a/src/components/ui/table/index.ts b/src/components/ui/table/index.ts new file mode 100644 index 00000000..44582d35 --- /dev/null +++ b/src/components/ui/table/index.ts @@ -0,0 +1,8 @@ +export { default as Table } from './Table.vue' +export { default as TableBody } from './TableBody.vue' +export { default as TableCell } from './TableCell.vue' +export { default as TableHead } from './TableHead.vue' +export { default as TableHeader } from './TableHeader.vue' +export { default as TableRow } from './TableRow.vue' +export { default as TableCaption } from './TableCaption.vue' +export { default as TableEmpty } from './TableEmpty.vue' diff --git a/src/data/Navigation.ts b/src/data/Navigation.ts index 7b9bd9aa..89cfa28f 100644 --- a/src/data/Navigation.ts +++ b/src/data/Navigation.ts @@ -1,16 +1,16 @@ import { NavigationModel, NavigationPosition } from '@/model/Navigation' import NavigationService from '@/services/Navigation' -import { Ban, CircleOff, Home, LogIn, LogOut, StickyNote } from 'lucide-vue-next' +import { Ban, CircleOff, Gauge, LogIn, LogOut, StickyNote } from 'lucide-vue-next' const createNavigation = (): void => { - NavigationService.addNavigation(createNavigationItem('common.common.home', undefined, '/home', Home, NavigationPosition.LEFT_TOP)) + NavigationService.addNavigation(createNavigationItem('common.common.dashboard', undefined, '/dashboard', Gauge, NavigationPosition.LEFT_TOP)) const signIn = createNavigationItem('common.common.signIn', undefined, '/auth/signin', LogIn, NavigationPosition.LEFT_TOP) NavigationService.addNavigation(signIn) const signUp = createNavigationItem('common.common.signUp', undefined, '/auth/signup', LogOut, NavigationPosition.LEFT_BOTTOM) NavigationService.addNavigation(signUp) NavigationService.addNavigation(createNavigationItem('common.common.home', undefined, - '/home', + '/', undefined, NavigationPosition.TOP, [], diff --git a/src/i18n/langs/en/Common.ts b/src/i18n/langs/en/Common.ts index 9adbe94b..684a9d56 100644 --- a/src/i18n/langs/en/Common.ts +++ b/src/i18n/langs/en/Common.ts @@ -19,6 +19,7 @@ export default { backToHome: 'Back to Home', pageForbidden: 'Page Forbidden', page403: '403 Forbidden', + dashboard: 'Dashboard' }, 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 c6235e85..82071fb4 100644 --- a/src/i18n/langs/zhCn/Common.ts +++ b/src/i18n/langs/zhCn/Common.ts @@ -19,6 +19,7 @@ export default { backToHome: '返回首页', pageForbidden: '页面禁止访问', page403: '403 页面禁止访问', + dashboard: '仪表盘' }, tip: { signInInfo: '输入您的信息以登录您的帐户。', diff --git a/src/router/default.ts b/src/router/default.ts index 66b83d74..0b1c1953 100644 --- a/src/router/default.ts +++ b/src/router/default.ts @@ -5,13 +5,13 @@ const createDefaultRouter = (router: Router): void => { router.addRoute({ path: '/', name: 'home', - redirect: '/home', + redirect: '/dashboard', component: LayoutContainer, children: [ { - name: 'home', - path: 'home', - component: () => import('@/views/pages/home/HomeIndex.vue') + name: 'dashboard', + path: 'dashboard', + component: () => import('@/views/pages/dashboard/DashboardHome.vue') } ] }) diff --git a/src/views/pages/dashboard/DashboardHome.vue b/src/views/pages/dashboard/DashboardHome.vue new file mode 100644 index 00000000..315c7b33 --- /dev/null +++ b/src/views/pages/dashboard/DashboardHome.vue @@ -0,0 +1,353 @@ + + + diff --git a/src/views/pages/home/HomeIndex.vue b/src/views/pages/home/HomeIndex.vue deleted file mode 100644 index 1ed67e6a..00000000 --- a/src/views/pages/home/HomeIndex.vue +++ /dev/null @@ -1,14 +0,0 @@ - - -