[Core] [Layout] Add footer

core/datacap-ui/src/utils/package.ts

@@ -0,0 +1,17 @@
+import packageJson from '../../package.json'
+
+interface PackageJson
+{
+    name: string
+    description: string
+    version: string
+}
+
+export class PackageUtils
+{
+    public static get(key: keyof PackageJson): string
+    {
+        const pg = packageJson as PackageJson
+        return pg[key]
+    }
+}

core/datacap-ui/src/views/layouts/common/LayoutContainer.vue

@@ -3,9 +3,10 @@
     <div class="hidden flex-col md:flex">
       <LayoutHeader/>
       <LayoutBreadcrumb/>
-      <div class="flex-1 space-y-4 pl-8 pr-8">
-        <RouterView />
+      <div class="flex-1 space-y-4 pl-8 pr-8 min-h-[700px]">
+        <RouterView/>
       </div>
+      <LayoutFooter :data="footers"/>
     </div>
   </div>
 </template>
@@ -16,15 +17,23 @@ import LayoutHeader from '@/views/layouts/common/components/LayoutHeader.vue'
 import { Button } from '@/components/ui/button'
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
 import LayoutBreadcrumb from '@/views/layouts/common/components/LayoutBreadcrumb.vue'
+import LayoutFooter from '@/views/layouts/common/components/LayoutFooter.vue'
 import { TokenUtils } from '@/utils/token'
 import { ObjectUtils } from '@/utils/object'
 import { HttpUtils } from '@/utils/http'
 import UserService from '@/services/user'
 import CommonUtils from '@/utils/common'
+import { FooterModel } from '@/views/layouts/common/components/model/footer.ts'
 
 export default defineComponent({
   name: 'LayoutContainer',
-  components: {LayoutBreadcrumb, AvatarFallback, AvatarImage, Avatar, Button, LayoutHeader},
+  components: {
+    LayoutBreadcrumb,
+    AvatarFallback, AvatarImage, Avatar,
+    Button,
+    LayoutHeader,
+    LayoutFooter
+  },
   beforeUnmount()
   {
     clearInterval(this.timer)
@@ -32,12 +41,14 @@ export default defineComponent({
   data()
   {
     return {
-      timer: null as any
+      timer: null as any,
+      footers: [] as Array<FooterModel>
     }
   },
   created()
   {
     this.handlerInitialize()
+    this.handlerInitializeFooter()
   },
   methods: {
     handlerInitialize()
@@ -46,18 +57,109 @@ export default defineComponent({
       if (ObjectUtils.isNotEmpty(user)) {
         this.timer = setInterval(() => {
           const runTime = new Date().toLocaleTimeString()
-          console.log(`[DataCap] refresh on time ${runTime}`)
+          console.log(`[DataCap] refresh on time ${ runTime }`)
           const client = new HttpUtils().getAxios()
           client.all([UserService.getMenus(), UserService.getInfo()])
-              .then(client.spread((fetchMenu, fetchInfo) => {
-                if (fetchMenu.status && fetchInfo.status) {
-                  localStorage.setItem(CommonUtils.menu, JSON.stringify(fetchMenu.data))
-                  localStorage.setItem(CommonUtils.userEditorConfigure, JSON.stringify(fetchInfo.data.editorConfigure))
-                }
-              }))
+                .then(client.spread((fetchMenu, fetchInfo) => {
+                  if (fetchMenu.status && fetchInfo.status) {
+                    localStorage.setItem(CommonUtils.menu, JSON.stringify(fetchMenu.data))
+                    localStorage.setItem(CommonUtils.userEditorConfigure, JSON.stringify(fetchInfo.data.editorConfigure))
+                  }
+                }))
         }, 1000 * 60)
       }
+    },
+    handlerInitializeFooter()
+    {
+      const footers = new Array<FooterModel>()
+      footers.push({
+        title: 'Resources',
+        children: [
+          {
+            title: 'Blog',
+            link: 'https://datacap.devlive.org/',
+            external: true,
+            blank: '_blank'
+          },
+          {
+            title: 'Gitee',
+            link: 'https://gitee.com/devlive-community/datacap',
+            external: true,
+            blank: '_blank'
+          },
+          {
+            title: 'Github',
+            link: 'https://github.com/devlive-community/datacap',
+            external: true,
+            blank: '_blank'
+          },
+          {
+            title: 'Documentation',
+            link: 'https://datacap.devlive.org/',
+            external: true,
+            blank: '_blank'
+          }
+        ]
+      })
+      footers.push({
+        title: 'Community',
+        children: [
+          {
+            title: 'Website',
+            link: 'https://datacap.devlive.org/',
+            external: true,
+            blank: '_blank'
+          },
+          {
+            title: 'Issues',
+            link: 'https://github.com/devlive-community/datacap/issues',
+            external: true,
+            blank: '_blank'
+          },
+          {
+            title: 'Discussions',
+            link: 'https://github.com/devlive-community/datacap/discussions',
+            external: true,
+            blank: '_blank'
+          }
+        ]
+      })
+      footers.push({
+        title: 'About',
+        children: [
+          {
+            title: 'DataCap',
+            link: 'https://datacap.devlive.org/',
+            external: true,
+            blank: '_blank'
+          }
+        ]
+      })
+      footers.push({
+        title: 'Projects',
+        children: [
+          {
+            title: 'Database Tools',
+            link: 'https://github.com/devlive-community/dbm',
+            external: true,
+            blank: '_blank'
+          },
+          {
+            title: 'Open AI Java SDK',
+            link: 'https://github.com/devlive-community/openai-java-sdk',
+            external: true,
+            blank: '_blank'
+          },
+          {
+            title: 'Shadcn UI Vue Admin',
+            link: 'https://github.com/devlive-community/shadcn-ui-vue-admin',
+            external: true,
+            blank: '_blank'
+          }
+        ]
+      })
+      this.footers = footers
     }
   }
-});
+})
 </script>

core/datacap-ui/src/views/layouts/common/components/LayoutFooter.vue

@@ -0,0 +1,51 @@
+<template>
+  <footer class="font-sans py-8 px-10 mt-5">
+    <div :class="`grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-${data.length} gap-8`">
+      <div v-for="item in data" :key="item.title">
+        <h4 class="text-[#808695] font-bold text-lg mb-5">{{ item.title }}</h4>
+        <ul class="space-y-4">
+          <li v-for="children in item.children" :key="children.title">
+            <DcLink :external="children.external" :link="children.link" :target="children.blank"
+                    class="hover:text-[#5cadff] text-[#808695] text-[15px] font-semibold transition-all">
+              {{ children.title }}
+            </DcLink>
+          </li>
+        </ul>
+      </div>
+    </div>
+    <div class="border-t text-center border-[#dcdee2] pt-8 mt-8 space-y-2">
+      <p class="text-gray-300 text-[15px] font-semibold">
+        Copyright © 2022 - {{ new Date().getFullYear() }} Devlive Community All Rights Reserved
+      </p>
+      <p>{{ $t('common.version') }}:
+        <Text type="danger"
+              strong>
+          {{ version }}
+        </Text>
+      </p>
+    </div>
+  </footer>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { FooterModel } from '@/views/layouts/common/components/model/footer.ts'
+import DcLink from '@/views/components/link/DcLink.vue'
+import { PackageUtils } from '@/utils/package.ts'
+
+export default defineComponent({
+  name: 'LayoutFooter',
+  components: { DcLink },
+  props: {
+    data: {
+      type: Array as () => Array<FooterModel>,
+      default: () => new Array<FooterModel>()
+    }
+  },
+  setup()
+  {
+    const version = PackageUtils.get('version')
+    return { version }
+  }
+})
+</script>

core/datacap-ui/src/views/layouts/common/components/model/footer.ts

@@ -0,0 +1,10 @@
+export interface FooterModel
+{
+    title?: string
+    icon?: string
+    link?: string
+    external?: boolean
+    children?: FooterModel[],
+    copyright?: string
+    blank?: string
+}

core/datacap-ui/src/views/layouts/profile/LayoutContainer.vue

@@ -5,7 +5,7 @@
       <aside class="-mx-4 lg:w-1/12">
         <LayoutSidebar/>
       </aside>
-      <div class="flex-1 lg:max-w-3xl">
+      <div class="flex-1 lg:max-w-5xl">
         <div class="space-y-6">
           <RouterView/>
         </div>

core/datacap-ui/tsconfig.json

@@ -22,6 +22,7 @@
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true,
     "baseUrl": ".",
+    "allowSyntheticDefaultImports": true,
     "paths": {
       "@/*": [
         "./src/*"