feat: add initial styling and layout for portal views

- Created a global CSS file for consistent styling across the application. - Implemented the Explore, Home, Topics, and various user views with responsive design. - Added a Login view with OTP functionality and a Checkout view for order processing. - Developed a NotFound view for handling 404 errors. - Established a configuration file for Vite with Tailwind CSS integration.
2025-12-26 09:18:41 +08:00
parent a4262b4a52
commit bcbd3327ea
40 changed files with 3795 additions and 0 deletions
--- a/frontend/portal/src/router/index.js
+++ b/frontend/portal/src/router/index.js
@@ -0,0 +1,161 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import LayoutMain from '../layout/LayoutMain.vue'
+import LayoutAuth from '../layout/LayoutAuth.vue'
+import LayoutUser from '../layout/LayoutUser.vue'
+
+const router = createRouter({
+  history: createWebHistory(import.meta.env.BASE_URL),
+  routes: [
+    {
+      path: '/',
+      component: LayoutMain,
+      children: [
+        {
+          path: '',
+          name: 'home',
+          component: () => import('../views/HomeView.vue')
+        },
+        {
+          path: 'contents/:id',
+          name: 'content-detail',
+          component: () => import('../views/content/DetailView.vue')
+        },
+        {
+          path: 't/:id',
+          name: 'tenant-home',
+          component: () => import('../views/tenant/HomeView.vue')
+        },
+        {
+          path: 'explore',
+          name: 'explore',
+          component: () => import('../views/ExploreView.vue') // Placeholder
+        },
+        {
+          path: 'topics',
+          name: 'topics',
+          component: () => import('../views/TopicsView.vue') // Placeholder
+        },
+        {
+            path: 'creator/apply',
+            name: 'creator-apply',
+            component: () => import('../views/creator/ApplyView.vue')
+        }
+      ]
+    },
+    {
+      path: '/auth',
+      component: LayoutAuth,
+      children: [
+        {
+          path: 'login',
+          name: 'login',
+          component: () => import('../views/auth/LoginView.vue')
+        }
+      ]
+    },
+    {
+        path: '/me',
+        component: LayoutUser,
+        children: [
+            {
+                path: '',
+                name: 'user-dashboard',
+                component: () => import('../views/user/DashboardView.vue')
+            },
+            {
+                path: 'orders',
+                name: 'user-orders',
+                component: () => import('../views/user/OrdersView.vue') // Placeholder
+            },
+            {
+                path: 'wallet',
+                name: 'user-wallet',
+                component: () => import('../views/user/WalletView.vue') // Placeholder
+            },
+            {
+                path: 'library',
+                name: 'user-library',
+                component: () => import('../views/user/LibraryView.vue') // Placeholder
+            },
+            {
+                path: 'notifications',
+                name: 'user-notifications',
+                component: () => import('../views/user/NotificationsView.vue') // Placeholder
+            },
+            {
+                path: 'profile',
+                name: 'user-profile',
+                component: () => import('../views/user/ProfileView.vue') // Placeholder
+            },
+            {
+                path: 'security',
+                name: 'user-security',
+                component: () => import('../views/user/SecurityView.vue') // Placeholder
+            }
+        ]
+    },
+    {
+        path: '/creator',
+        component: LayoutUser, // Initially use LayoutUser, later maybe specialized LayoutCreator
+        children: [
+             {
+                path: '',
+                name: 'creator-dashboard',
+                component: () => import('../views/creator/DashboardView.vue')
+             },
+             {
+                path: 'contents',
+                name: 'creator-contents',
+                component: () => import('../views/creator/ContentsView.vue')
+             },
+             {
+                path: 'orders',
+                name: 'creator-orders',
+                component: () => import('../views/creator/OrdersView.vue')
+             },
+             {
+                path: 'settings',
+                name: 'creator-settings',
+                component: () => import('../views/creator/SettingsView.vue')
+             }
+        ]
+    },
+    {
+        path: '/checkout',
+        component: LayoutMain, // Or a simplified checkout layout
+        children: [
+            {
+                path: '',
+                name: 'checkout',
+                component: () => import('../views/order/CheckoutView.vue')
+            }
+        ]
+    },
+    {
+        path: '/payment/:id',
+        component: LayoutMain,
+        children: [
+             {
+                path: '',
+                name: 'payment',
+                component: () => import('../views/order/PaymentView.vue')
+             }
+        ]
+    },
+    // Fallback
+    { 
+        path: '/:pathMatch(.*)*', 
+        name: 'not-found', 
+        component: () => import('../views/misc/NotFoundView.vue') 
+    }
+  ],
+  scrollBehavior(to, from, savedPosition) {
+    if (savedPosition) {
+      return savedPosition
+    } else {
+      return { top: 0 }
+    }
+  }
+})
+
+export default router