feat: ma-table教程

.vitepress/components/code-group.vue

@@ -0,0 +1,41 @@
+<!--
+ - MineAdmin is committed to providing solutions for quickly building web applications
+ - Please view the LICENSE file that was distributed with this source code,
+ - For the full copyright and license information.
+ - Thank you very much for using MineAdmin.
+ -
+ - @Author X.Mo<root@imoi.cn>
+ - @Link   https://github.com/mineadmin
+-->
+<script setup lang="ts">
+import { computed, ref, useSlots } from 'vue'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const { files = [] } = defineProps<{files?: string[]}>()
+
+const slots = useSlots();
+
+const tabs = computed(() => {
+  return files.map((file) => {
+    return {
+      component: slots[file],
+      label: file,
+    };
+  });
+});
+
+const currentTab = ref('index.vue');
+</script>
+
+<template>
+  <el-tabs
+    v-model="currentTab"
+  >
+    <el-tab-pane v-for="tab in tabs" :label="tab.label" :name="tab.label" >
+      <component :is="tab.component" class="border-0" />
+    </el-tab-pane>
+  </el-tabs>
+</template>

.vitepress/components/preview.vue

@@ -1,41 +1,57 @@
 <script setup lang="ts">
-import { computed } from 'vue'
+import {computed, ref} from 'vue'
+import CodeGroup from "./code-group.vue";
 
 interface Props {
-  files?: string;
+  dir?: string
+  files?: string
 }
 
-const props = withDefaults(defineProps<Props>(), { files: '() => []' });
+const { files } = defineProps<Props>()
 
-const parsedFiles = computed(() => {
+const codeFiles = computed(() => {
   try {
-    return JSON.parse(decodeURIComponent(props.files ?? ''));
+    return JSON.parse(decodeURIComponent(files ?? ''))
   } catch {
-    return [];
+    return []
   }
-});
+})
+
+const isOpen = ref<boolean>(false)
 </script>
 
 <template>
-  <div class="border-border shadow-float relative rounded-xl border">
-    {{ parsedFiles }}
+  <div class="b-1 b-solid b-l-5 b-gray-2 dark:b-dark-2 relative rounded-lg shadow-sm dark:shadow-dark-3 hover:b-blue transition-all duration-300">
     <div
-      class="not-prose relative w-full overflow-x-auto rounded-t-lg px-4 py-6"
+      class="not-prose relative w-full overflow-x-auto"
     >
-      <div class="flex w-full max-w-[700px] px-2">
-        <ClientOnly>
-          <slot v-if="parsedFiles.length > 0"></slot>
-          <div v-else class="text-destructive text-sm">
-            <span class="bg-destructive text-foreground rounded-sm px-1 py-1">
-              找不到演示文件路径
+      <div class="flex w-full p-4 pb-10">
+        <client-only>
+          <slot v-if="codeFiles.length > 0"></slot>
+          <div v-else class="text-sm">
+            <span class="rounded-sm">
+              出错了，找不到演示文件路径
             </span>
           </div>
-        </ClientOnly>
+        </client-only>
+      </div>
+      <div class="relative min-h-42px w-full">
+        <el-button
+          class="absolute left-[calc(50%-48px)] bottom-5px z-9999"
+          type="primary"
+          plain
+          @click="() => isOpen = !isOpen"
+        >
+          {{ isOpen ? '隐藏' : '显示' }}代码
+        </el-button>
+        <div class="px-4 max-h-[500px] overflow-y-auto">
+          <code-group v-if="codeFiles.length > 0 && isOpen" :files="codeFiles">
+            <template v-for="file in codeFiles" #[file]>
+              <slot :name="file"></slot>
+            </template>
+          </code-group>
+        </div>
       </div>
     </div>
   </div>
-</template>
-
-<style scoped>
-
-</style>
+</template>

.vitepress/config.mts

@@ -9,11 +9,13 @@ import { AnnouncementPlugin } from 'vitepress-plugin-announcement'
 import { plantuml } from "@mdit/plugin-plantuml";
 import { previewPlugin } from './plugins/previewPlugin'
 import UnoCSS from 'unocss/vite'
+import vueJsx from '@vitejs/plugin-vue-jsx'
 
 // https://vitepress.dev/reference/site-config
 export default defineConfigWithTheme ({
   vite:{
     plugins:[
+      vueJsx(),
       UnoCSS(),
       AnnouncementPlugin({
         title:"MineAdmin 交流群",

.vitepress/theme/index.ts

@@ -12,8 +12,6 @@ import type { EnhanceAppContext, Theme } from 'vitepress'
 import DefaultTheme from 'vitepress/theme'
 
 import ElementPlus from 'element-plus'
-import 'element-plus/dist/index.css'
-import 'element-plus/theme-chalk/dark/css-vars.css'
 
 // @ts-ignore
 import Layout from './components/layout.vue'
@@ -36,11 +34,14 @@ import '@mineadmin/pro-table/dist/style.css'
 import '@imengyu/vue3-context-menu/lib/vue3-context-menu.css'
 
 import './styles/var.css'
+import './styles/element.css'
 import { baiduPlugin } from "./plugin/baidu";
 
 import "virtual:uno.css";
 
 import Preview from '../components/preview.vue';
+import 'element-plus/dist/index.css'
+import 'element-plus/theme-chalk/dark/css-vars.css'
 
 export default {
   enhanceApp(ctx: EnhanceAppContext) {

.vitepress/theme/styles/element.css

@@ -0,0 +1,35 @@
+.el-table {
+  border-radius: .25rem;
+}
+
+.el-table th.el-table__cell {
+  --un-bg-opacity: 1;
+  background-color: rgb(243 244 246 / var(--un-bg-opacity));
+  --un-text-opacity: 1;
+  color: rgb(15 15 15 / var(--un-text-opacity));
+  font-weight: 500
+}
+
+.dark .el-table th.el-table__cell {
+  --un-bg-opacity: 1 !important;
+  background-color: rgb(31 31 31 / var(--un-bg-opacity))!important;
+  --un-text-opacity: 1;
+  color: rgb(243 244 246 / var(--un-text-opacity))
+}
+
+
+.vp-doc table {
+  margin: 0;
+}
+
+.vp-doc tr {
+  margin-top: 0; border: none;
+}
+
+.vp-doc th, .vp-doc td {
+  border: 0;
+}
+
+.vp-doc tr:nth-child(2n) {
+  background-color: transparent;
+}

docs/demos/ma-table/useTable/index.vue

@@ -0,0 +1,51 @@
+<script setup lang="tsx">
+// import { ref, reactive } from 'vue'
+import { type MaTableExpose, useTable} from "@mineadmin/table"
+
+useTable('table').then((table: MaTableExpose) => {
+  table.setColumns([
+    {
+      label: '角色基础信息',
+      prop: 'base',
+      children: [
+        { label: '姓名', prop: 'name' },
+        { label: '性别', prop: 'sex' },
+      ]
+    },
+    { label: '成就', prop: 'chengjiu' },
+    {
+      label: '战力评价', prop: 'zhanli',
+      cellRender:({ row }) => <el-tag>{ row.zhanli }</el-tag>
+    },
+  ])
+
+  table.setData([
+    {
+      name: '石昊',
+      sex: '男',
+      chengjiu: '独断万古',
+      zhanli: 'SSS+',
+    },
+    {
+      name: '叶凡',
+      sex: '男',
+      chengjiu: '一叶遮天',
+      zhanli: 'SSS+',
+    },
+    {
+      name: '罗峰',
+      sex: '男',
+      chengjiu: '永恒真神',
+      zhanli: 'SS',
+    },
+  ])
+})
+</script>
+
+<template>
+  <ma-table ref="table" />
+</template>
+
+<style scoped>
+
+</style>

docs/zh/front/component/ma-table.md

@@ -1,6 +1,6 @@
 # MaTable
 
-二次封装的 `Table` 组件，非常好用。
+基于 `Element plus` 的表格二次封装的 `Table` 组件，非常好用。
 
-<Preview dir="demos/ma-form" />
+<Preview dir="demos/ma-table/useTable/" />
 

package.json

@@ -26,6 +26,8 @@
     "simple-git": "^3.27.0",
     "unocss": "^0.63.6",
     "vitepress": "^1.4.0",
+    "vue": "^3.5.12",
+    "@vitejs/plugin-vue-jsx": "^4.0.1",
     "vitepress-plugin-comment-with-giscus": "^1.1.15",
     "vitepress-plugin-group-icons": "^1.2.4"
   }