feat(Issue #17): 新增数据内容容器组件。

.vscode/dnVue.code-snippets

@@ -1,29 +1,34 @@
 {
-	"TypeScript Header": {
-	  "body": [
-		"// **************************************************************************************************************************",
-		"// COPYRIGHT © 2006 - $CURRENT_YEAR WANG YUCAI. ALL RIGHTS RESERVED.",
-		"// LICENSED UNDER THE MIT LICENSE. SEE LICENSE FILE IN THE PROJECT ROOT FOR FULL LICENSE INFORMATION.",
-		"// **************************************************************************************************************************",
-		"$1"
-	  ],
-	  "description": "TypeScript 头部注释",
-	  "prefix": "dnvue",
-	  "scope": "typescript, javascript"
-	},
-	"HTML Header": {
-	  "body": [
-		"<!-- ",
-		"  **************************************************************************************************************************",
-		"  COPYRIGHT © 2006 - $CURRENT_YEAR WANG YUCAI. ALL RIGHTS RESERVED.",
-		"  LICENSED UNDER THE MIT LICENSE. SEE LICENSE FILE IN THE PROJECT ROOT FOR FULL LICENSE INFORMATION.",
-		"  **************************************************************************************************************************",
-		"-->",
-		"$1"
-	  ],
-	  "description": "HTML 头部注释",
-	  "prefix": "dnvue",
-	  "scope": "html, vue"
-	}
+  "TypeScript Header": {
+    "body": [
+      "// **************************************************************************************************************************",
+      "// COPYRIGHT © 2006 - $CURRENT_YEAR WANG YUCAI. ALL RIGHTS RESERVED.",
+      "// LICENSED UNDER THE MIT LICENSE. SEE LICENSE FILE IN THE PROJECT ROOT FOR FULL LICENSE INFORMATION.",
+      "// **************************************************************************************************************************",
+      "$1"
+    ],
+    "description": "TypeScript 头部注释",
+    "prefix": "dnvue",
+    "scope": "typescript, javascript"
+  },
+  "HTML Header": {
+    "body": [
+      "<!-- ",
+      "  **************************************************************************************************************************",
+      "  COPYRIGHT © 2006 - $CURRENT_YEAR WANG YUCAI. ALL RIGHTS RESERVED.",
+      "  LICENSED UNDER THE MIT LICENSE. SEE LICENSE FILE IN THE PROJECT ROOT FOR FULL LICENSE INFORMATION.",
+      "  **************************************************************************************************************************",
+      "-->",
+      "$1"
+    ],
+    "description": "HTML 头部注释",
+    "prefix": "dnvue",
+    "scope": "html, vue"
+  },
+  "Vue Setup Grammar": {
+    "body": ["<script lang=\"ts\" setup>", "$1", "</script>"],
+    "description": "VUE3 Setup Grammar",
+    "prefix": "dnvue",
+    "scope": "vue"
   }
-  
+}

packages/app/src/assets/theme/lib/_all.scss

@@ -7,6 +7,7 @@
 @use "./components/_v-image"as v-image;
 @use "./components/_v-appmanifest"as v-appmanifest;
 @use "./components/_v-container"as v-container;
+@use "./components/_v-content-container"as v-content-container;
 @use "./components/_v-signin"as v-signin;
 @use "./components/_v-toolbar"as v-toolbar;
 @use "./components/_v-sidebar"as v-sidebar;
@@ -28,6 +29,7 @@
     @include v-signin.generate-var;
     @include v-toolbar.generate-var;
     @include v-sidebar.generate-var;
+    @include v-content-container.generate-var;
 
     @include vw-authentication.generate-var;
 }
@@ -98,4 +100,5 @@ body,
 @include v-container.generate-cls;
 @include v-signin.generate-cls;
 @include v-toolbar.generate-cls;
-@include v-sidebar.generate-cls;
+@include v-sidebar.generate-cls;
+@include v-content-container.generate-cls;

packages/app/src/assets/theme/lib/components/_v-container.scss

@@ -49,7 +49,8 @@
         }
 
         >div#{&}-content {
-            flex: 1;
+            flex   : 1;
+            padding: 0 !important;
         }
     }
 }

packages/app/src/assets/theme/lib/components/_v-content-container.scss

@@ -0,0 +1,44 @@
+@use "../_variables"as *;
+@use "sass:math"as *;
+
+@mixin generate-var {
+    --v-content-container--padding             : #{div(10, $v-text-size--base)}rem;
+    --v-content-container-header--background   : var(--md-grey-100);
+    --v-content-container-operation--background: var(--md-grey-50);
+}
+
+@mixin generate-cls {
+    .v-content-container {
+        background-color: transparent;
+
+        >div {
+            padding         : var(--v-content-container--padding);
+            background-color: #FFFFFF;
+            width           : percentage($number: 1);
+        }
+
+        >div[data-v-role=header] {
+            background-color: var(--v-content-container-header--background);
+            height          : auto;
+
+            >span {
+                font: {
+                    size: var(--v-text-size--nm);
+                }
+            }
+        }
+
+        >div[data-v-role=operation] {
+            background-color: var(--v-content-container-operation--background);
+            height          : 200px;
+        }
+
+        >div[data-v-role=content] {
+            flex : 1;
+        }
+
+        >div[data-v-role=footer] {
+            background-color: var(--v-content-container-operation--background);
+        }
+    }
+}

packages/app/src/components/index.ts

@@ -11,7 +11,7 @@ export { vFlexbox } from "./v-flexbox";
 export { vIcon } from "./v-icon";
 export { vImage } from "./v-image";
 export { vAppManifest } from "./v-appmanifest";
-export { vContainer } from "./v-container";
+export { vContainer, vContentContainer } from "./v-container";
 export { vSignin } from "./v-signin";
 export { vToolbar, vToolbarItem } from "./v-toolbar";
 export { vSidebar } from "./v-sidebar";

packages/app/src/components/v-container/index.ts

@@ -4,5 +4,6 @@
 // **************************************************************************************************************************
 
 import vContainer from "./v-container.vue";
+import vContentContainer from "./v-content-container.vue";
 
-export { vContainer };
+export { vContainer, vContentContainer };

packages/app/src/components/v-container/v-content-container.vue

@@ -0,0 +1,56 @@
+<!-- 
+  **************************************************************************************************************************
+  COPYRIGHT © 2006 - 2022 WANG YUCAI. ALL RIGHTS RESERVED.
+  LICENSED UNDER THE MIT LICENSE. SEE LICENSE FILE IN THE PROJECT ROOT FOR FULL LICENSE INFORMATION.
+  **************************************************************************************************************************
+-->
+
+<template>
+  <v-flexbox direction="column" class="animate__animated animate__fadeIn v-content-container">
+    <v-flexbox align-items="center" justify-content="space-between" data-v-role="header" v-if="readonlyHeaderSlotVisible">
+      <span>{{ title }}</span>
+      <slot name="header" />
+    </v-flexbox>
+    <div data-v-role="operation" v-if="readonlyOperationSlotVisible">
+      <slot name="operation" />
+    </div>
+    <div data-v-role="content">
+      <slot />
+    </div>
+    <div data-v-role="footer" v-if="readonlyFooterSlotVisible">
+        <slot name="footer" />
+    </div>
+  </v-flexbox>
+</template>
+
+<script lang="ts" setup>
+import { vFlexbox } from "../v-flexbox";
+import { DnvueComponentProps } from "../component-props";
+import { computed, useSlots } from "vue";
+
+const slots = useSlots();
+
+const props = defineProps(
+  Object.assign({}, DnvueComponentProps, {
+    /**
+     * 设置或获取一个字符串，用于表示标题文本。
+     */
+    title: {
+      type: String,
+      default: "",
+    },
+  })
+);
+
+const readonlyHeaderSlotVisible = computed<boolean>(() => {
+  return !String.isNullOrWhitespace(props.title) || (slots["header"] !== null && slots["header"] !== undefined);
+});
+
+const readonlyOperationSlotVisible = computed<boolean>(() => {
+  return slots["operation"] !== null && slots["operation"] !== undefined;
+});
+
+const readonlyFooterSlotVisible = computed<boolean>(() => {
+  return slots["footer"] !== null && slots["footer"] !== undefined;
+});
+</script>

packages/app/src/index-app/router/route-table.ts

@@ -22,7 +22,11 @@ export function createRouteTable(): RouteRecordRaw[] {
             component: () => import("../views/home/index.vue"),
             meta: {
                 title: "CONTROL_PANEL"
-            }
+            },
+            children: [{
+                path: "dashboard",
+                component: () => import("../views/home/dashboard/dashboard.vue")
+            }]
         },
         {
             path: "/authentication",

packages/app/src/index-app/views/home/dashboard/dashboard.vue

@@ -0,0 +1,16 @@
+<!-- 
+  **************************************************************************************************************************
+  COPYRIGHT © 2006 - 2022 WANG YUCAI. ALL RIGHTS RESERVED.
+  LICENSED UNDER THE MIT LICENSE. SEE LICENSE FILE IN THE PROJECT ROOT FOR FULL LICENSE INFORMATION.
+  **************************************************************************************************************************
+-->
+
+<template>
+  <v-content-container :title="$t('DATA_TABLE')">
+
+  </v-content-container>
+</template>
+
+<script lang="ts" setup>
+import { vContentContainer } from "../../../../components";
+</script>

packages/app/src/index-app/views/home/index.vue

@@ -8,7 +8,7 @@
 <template>
   <v-flexbox direction="column">
     <v-appbar :logo-image-url="readonlyLogoImage" :title="$t('APPLICATION_NAME')">
-      <v-toolbar></v-toolbar>
+      <v-toolbar />
     </v-appbar>
     <v-app-manifest :title="$t('APPLICATION_MANIFEST')" />
     <v-container :actived-app-shortcut-index="0">