feat: 基础件demo (feat #137) (#212)

* wip: 基础组件demo。(wip #137) * feat: 基础件demo。 (feat #137) --------- Co-authored-by: sunHsl <sun20001016@gmail.com>
vbenjs · Oct 26, 2023 · 9c990e3 · 9c990e3
1 parent 960ac03
commit 9c990e3
Show file tree

Hide file tree

Showing 6 changed files with 99 additions and 5 deletions.
diff --git a/apps/admin/src/pages/demo/Basic.vue b/apps/admin/src/pages/demo/Basic.vue
@@ -0,0 +1,6 @@
+<script lang="ts" setup>
+import { Basic } from '@vben/demo'
+</script>
+<template>
+  <Basic />
+</template>
diff --git a/packages/demo/index.ts b/packages/demo/index.ts
@@ -5,3 +5,4 @@ export { default as BasicTable } from './src/Table/basic.vue'
 export { default as FixedColumn } from './src/Table/fixedColumn.vue'
 export { default as TreeTable } from './src/Table/TreeTable.vue'
 export { default as Modal } from './src/Modal/index.vue'
+export { default as Basic } from './src/Basic/index.vue'
diff --git a/packages/demo/src/Basic/index.vue b/packages/demo/src/Basic/index.vue
@@ -0,0 +1,77 @@
+<script lang="ts" setup>
+const buttonColors = [
+  'default',
+  'tertiary',
+  'primary',
+  'info',
+  'success',
+  'warning',
+  'error',
+]
+
+const buttonTypes = [
+  {
+    type: '基础按钮',
+    value: '',
+  },
+  {
+    type: '圆角按钮',
+    value: 'round',
+  },
+  {
+    type: '次要按钮',
+    value: 'secondary',
+  },
+  {
+    type: '次次要按钮',
+    value: 'tertiary',
+  },
+  {
+    type: '次次次要按钮',
+    value: 'quaternary',
+  },
+  {
+    type: '虚线按钮',
+    value: 'dashed',
+  },
+  {
+    type: '透明背景',
+    value: 'ghost',
+  },
+]
+</script>
+
+<template>
+  <div class="p-2 h-full">
+    <VbenCard>
+      <h2>基础组件</h2>
+      <p>
+        基础组件依赖于Naive-UI,组件库已有的基础组件,项目中不会再次进行demo展示（二次封装组件除外）。
+        <VbenButton
+          text
+          tag="a"
+          href="https://www.naiveui.com/zh-CN/os-theme/components/button"
+          target="_blank"
+          type="primary"
+        >
+          Naive-UI
+        </VbenButton>
+      </p>
+    </VbenCard>
+    <VbenCard class="mt-3">
+      <div v-for="buttonType in buttonTypes" :key="buttonType.value">
+        <h3>{{ buttonType.type }}</h3>
+        <VbenButton
+          class="mx-2"
+          v-for="buttonColor in buttonColors"
+          :[buttonType.value]="buttonType.value"
+          :key="buttonColor"
+          :type="buttonColor"
+          >{{ buttonColor }}</VbenButton
+        >
+      </div>
+    </VbenCard>
+  </div>
+</template>
+
+<style lang="less" scoped></style>
diff --git a/packages/locale/src/lang/en/routes.ts b/packages/locale/src/lang/en/routes.ts
@@ -10,6 +10,7 @@ export default {
     analysis: 'Analysis',
   },
   demo: {
+    basic: 'Basic',
     demo: 'Demo',
     card: 'Card',
     form: 'Form',

diff --git a/packages/locale/src/lang/zh-CN/routes.ts b/packages/locale/src/lang/zh-CN/routes.ts
@@ -10,6 +10,7 @@ export default {
     analysis: '分析页',
   },
   demo: {
+    basic: '基础组件',
     demo: '组件',
     card: '卡片',
     form: '表单',

diff --git a/packages/router/src/routes/modules/demo/demo.ts b/packages/router/src/routes/modules/demo/demo.ts
@@ -12,6 +12,14 @@ const dashboard: RouteRecordItem = {
     root: true,
   },
   children: [
+    {
+      path: 'basic',
+      name: 'Basic',
+      component: () => import('@/pages/demo/Basic.vue'),
+      meta: {
+        title: 'routes.demo.basic',
+      },
+    },
     {
       path: 'table',
       name: 'Table',
@@ -41,9 +49,9 @@ const dashboard: RouteRecordItem = {
           name: 'TreeTable',
           component: () => import('@/pages/demo/table/TreeTable.vue'),
           meta: {
-            title: 'routes.demo.table.treeTable'
-          }
-        }
+            title: 'routes.demo.table.treeTable',
+          },
+        },
       ],
     },
 
@@ -60,8 +68,8 @@ const dashboard: RouteRecordItem = {
       name: 'Modal',
       component: () => import('@/pages/demo/Modal.vue'),
       meta: {
-        title: 'routes.demo.modal'
-      }
+        title: 'routes.demo.modal',
+      },
     },
     {
       path: 'card',