Merge pull request #11 from qianmoQ/feature-dev

[Page] [Form] Add some form

src/data/Navigation.ts

@@ -1,21 +1,21 @@
 import { NavigationModel, NavigationPosition } from '@/model/Navigation'
 import NavigationService from '@/services/Navigation'
-import { Ban, CircleOff, Gauge, LogIn, LogOut, StickyNote } from 'lucide-vue-next'
+import { AudioWaveform, Ban, CircleOff, FormInput, Gauge, LogIn, LogOut, StickyNote } from 'lucide-vue-next'
 
 const createNavigation = (): void => {
     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',
+    NavigationService.addNavigation(createNavigationItem('common.common.dashboard',
         undefined,
-        '/',
+        '/dashboard',
         undefined,
         NavigationPosition.TOP,
         [],
-        'common.common.home',
+        'common.common.dashboard',
         undefined))
+    const signIn = createNavigationItem('common.common.signIn', undefined, '/auth/signin', LogIn, NavigationPosition.TOP)
+    NavigationService.addNavigation(signIn)
+    const signUp = createNavigationItem('common.common.signUp', undefined, '/auth/signup', LogOut, NavigationPosition.TOP)
+    NavigationService.addNavigation(signUp)
 
     const datacap = createNavigationItem('common.common.datacap',
         undefined,
@@ -41,6 +41,13 @@ const createNavigation = (): void => {
     const pages = createNavigationItem('common.common.page', pageArray.length.toString(), '/pages', StickyNote,
         NavigationPosition.LEFT_TOP, pageArray, undefined, 'common.common.page')
     NavigationService.addNavigation(pages)
+
+    const form = createNavigationItem('form.common.formBasic', undefined, '/forms/basic', AudioWaveform, NavigationPosition.LEFT_TOP)
+    const formWithAction = createNavigationItem('form.common.formWithAction', undefined, '/forms/withAction', AudioWaveform, NavigationPosition.LEFT_TOP)
+    const formArray = [form, formWithAction]
+    const froms = createNavigationItem('form.common.form', formArray.length.toString(), '/forms', FormInput, NavigationPosition.LEFT_TOP,
+        formArray, undefined, 'common.common.form')
+    NavigationService.addNavigation(froms)
 }
 
 const createNavigationItem = (title?: string, label?: string, href?: string, icon?: any, position?: NavigationPosition, children?: NavigationModel[], group?: string, description?: string, blank?: boolean): NavigationModel => {

src/i18n/langs/en/Form.ts

@@ -0,0 +1,12 @@
+export default {
+    common: {
+        form: 'Form',
+        formBasic: 'Basic Form',
+        formWithAction: 'Form with Action',
+        signInWithGoogle: 'Sign in with Google',
+    },
+    tip: {
+        formBasic: 'This is a basic form example',
+        formWithAction: 'Here\'s an example of a form with an action function'
+    }
+}

src/i18n/langs/en/index.ts

@@ -1,9 +1,11 @@
 import region from '@/i18n/langs/en/Region'
 import common from '@/i18n/langs/en/Common'
 import user from '@/i18n/langs/en/User'
+import form from '@/i18n/langs/en/Form'
 
 export default {
     region: region,
     common: common,
-    user: user
+    user: user,
+    form: form
 }

src/i18n/langs/zhCn/Form.ts

@@ -0,0 +1,12 @@
+export default {
+    common: {
+        form: '表单',
+        formBasic: '基础表单',
+        formWithAction: '带操作功能表单',
+        signInWithGoogle: '使用 Google 登录',
+    },
+    tip: {
+        formBasic: '这是一个表单的基础示例',
+        formWithAction: '这是一个带有操作功能的表单示例'
+    }
+}

src/i18n/langs/zhCn/index.ts

@@ -1,9 +1,11 @@
 import region from '@/i18n/langs/zhCn/Region'
 import common from '@/i18n/langs/zhCn/Common'
 import user from '@/i18n/langs/zhCn/User'
+import form from '@/i18n/langs/zhCn/Form'
 
 export default {
     region: region,
     common: common,
-    user: user
+    user: user,
+    form: form
 }

src/router/default.ts

@@ -17,6 +17,7 @@ const createDefaultRouter = (router: Router): void => {
     })
     createHttpRouter(router)
     createUserRouter(router)
+    createFormRouter(router)
 }
 
 /**
@@ -70,6 +71,26 @@ const createUserRouter = (router: Router): void => {
     })
 }
 
+const createFormRouter = (router: Router): void => {
+    router.addRoute({
+        path: '/forms',
+        name: 'form',
+        component: LayoutContainer,
+        children: [
+            {
+                name: 'basic',
+                path: 'basic',
+                component: () => import('@/views/pages/form/FormBasic.vue')
+            },
+            {
+                name: 'withAction',
+                path: 'withAction',
+                component: () => import('@/views/pages/form/FormWithAction.vue')
+            }
+        ]
+    })
+}
+
 export {
     createDefaultRouter
 }

src/views/layouts/base/components/components/NavigationOpened.vue

@@ -3,7 +3,19 @@
     <DropdownMenu v-if="navigator?.children && navigator.children.length > 0">
       <DropdownMenuTrigger class="cursor-pointer" as-child>
         <Button as="a" size="icon" class="h-12 w-12" :variant="$route.path === `${navigator?.href}` ? 'secondary' : 'ghost'">
-          <component :is="navigator?.icon"/>
+          <TooltipProvider>
+            <Tooltip :delay-duration="0">
+              <TooltipTrigger asChild>
+                <Button as="a" size="icon" class="h-12 w-12" :variant="$route.path === `${navigator?.href}` ? 'secondary' : 'ghost'">
+                  <component :is="navigator?.icon"/>
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent side="right" class="flex items-center gap-4">
+                {{ $t(navigator?.title as string) }}
+                <span v-if="navigator?.label" class="ml-auto text-muted-foreground">{{ navigator?.label }}</span>
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
         </Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent side='right' align='start'>

src/views/pages/form/FormBasic.vue

@@ -0,0 +1,43 @@
+<template>
+  <div class="container grid h-svh flex-col items-center justify-center bg-primary-foreground lg:max-w-none lg:px-0">
+    <div class="mx-auto flex w-full flex-col justify-center space-y-2 sm:w-[480px] lg:p-8">
+      <Card>
+        <CardHeader>
+          <CardTitle class="text-2xl">{{ $t('form.common.formBasic') }}</CardTitle>
+          <CardDescription>{{ $t('form.tip.formBasic') }}</CardDescription>
+        </CardHeader>
+        <CardContent class="grid gap-4">
+          <div class="grid gap-2">
+            <Label for="email">{{ $t('user.common.email') }}</Label>
+            <Input id="email" type="email" :placeholder="$t('user.tip.emailHolder')" required/>
+          </div>
+          <div class="grid gap-2">
+            <Label for="password">{{ $t('user.common.password') }}</Label>
+            <Input id="password" type="password" required :placeholder="$t('user.tip.passwordHolder')"/>
+          </div>
+        </CardContent>
+        <CardFooter>
+          <Button class="w-full">{{ $t('common.common.signIn') }}</Button>
+        </CardFooter>
+      </Card>
+    </div>
+  </div>
+</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 { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+
+export default defineComponent({
+  name: 'FormBasic',
+  components: {
+    Button,
+    Input,
+    Label,
+    Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle
+  }
+})
+</script>

src/views/pages/form/FormWithAction.vue

@@ -0,0 +1,51 @@
+<template>
+  <div class="container grid h-svh flex-col items-center justify-center bg-primary-foreground lg:max-w-none lg:px-0">
+    <div class="mx-auto flex w-full flex-col justify-center space-y-2 sm:w-[480px] lg:p-8">
+      <Card>
+        <CardHeader>
+          <CardTitle class="text-2xl">{{ $t('form.common.formWithAction') }}</CardTitle>
+          <CardDescription>{{ $t('form.tip.formWithAction') }}</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div class="grid gap-4">
+            <div class="grid gap-2">
+              <Label for="email">{{ $t('user.common.email') }}</Label>
+              <Input id="email" type="email" :placeholder="$t('user.tip.emailHolder')" required/>
+            </div>
+            <div class="grid gap-2">
+              <div class="flex items-center">
+                <Label for="password">{{ $t('user.common.password') }}</Label>
+                <a href="#" class="ml-auto inline-block text-sm underline">{{ $t('common.common.forgotPassword') }}?</a>
+              </div>
+              <Input id="password" type="password" required :placeholder="$t('user.tip.passwordHolder')"/>
+            </div>
+            <Button type="submit" class="w-full">{{ $t('common.common.signIn') }}</Button>
+            <Button variant="outline" class="w-full">{{ $t('form.common.signInWithGoogle') }}</Button>
+          </div>
+          <div class="mt-4 text-center text-sm">
+            {{ $t('common.tip.signInNoAccount') }}
+            <RouterLink to="#" class="underline">{{ $t('common.common.signUp') }}</RouterLink>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  </div>
+</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 { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+
+export default defineComponent({
+  name: 'FormWithAction',
+  components: {
+    Button,
+    Input,
+    Label,
+    Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle
+  }
+})
+</script>