init

astro.config.mjs

@@ -24,7 +24,21 @@ const basename = isDev ? undefined : `${pkgs.basename}`;
 export default defineConfig({
   base: basename,
   integrations: [
-    mdx(),
+    mdx({
+      // MDX 配置选项
+      syntaxHighlight: 'shiki', // 或 'prism'
+      shikiConfig: {
+        theme: 'github-light', // 代码高亮主题
+      },
+      remarkPlugins: [
+        // 添加 remark 插件
+      ],
+      rehypePlugins: [
+        // 添加 rehype 插件
+      ],
+      // 启用 MDX 表达式
+      optimize: true
+    }),
     react(), //
     vue(),
     // sitemap(), // sitemap must be site has a domain

dagang.json

@@ -0,0 +1,12 @@
+{
+  "bilibili": {
+    "url": "https://www.bilibili.com/video/BV1fQSsBtEcF/",
+    "iframe": "<iframe src=\"//player.bilibili.com/player.html?isOutside=true&aid=115649141607117&bvid=BV1fQSsBtEcF&cid=34445724513&p=1\" scrolling=\"no\" border=\"0\" frameborder=\"no\" framespacing=\"0\" allowfullscreen=\"true\"></iframe>"
+  },
+  "douyin": {
+    "url": "https://v.douyin.com/cPMkaYoQ01w/"
+  },
+  "xiaohongshu": {
+    "url": "https://www.xiaohongshu.com/explore/692ea923000000001e0237cb?xsec_token=YB-qcCMYiY_klyJTylGtLANcFe9O0QU4d0qVhlkgqYFOQ%3D&xsec_source=pc_creatormng"
+  }
+}

package.json

@@ -1,17 +1,17 @@
 {
-  "name": "@kevisual/astro-simplate-template",
+  "name": "@kevisual/mtd",
   "version": "0.0.2",
   "description": "",
   "main": "index.js",
-  "basename": "/root/astro-simplate-template-docs",
+  "basename": "/root/mtd-docs",
   "scripts": {
     "dev": "astro dev",
     "build": "astro build",
     "preview": "astro preview",
-    "pub": "envision deploy ./dist -k astro-simplate-template-docs -v 0.0.2 -u",
+    "pub": "envision deploy ./dist -k mtd-docs -v 0.0.2 -u",
-    "slide:dev": "slidev --open slides/index.md",
+    "slide:dev": "slidev --open slides/index.md --remote",
-    "slide:build": "slidev build slides/index.md --base /root/astro-simplate-template-slide/",
+    "slide:build": "slidev build slides/index.md --base /root/mtd-slide/",
-    "slide:pub": "envision deploy ./slides/dist -k astro-simplate-template-slide -v 0.0.2 -u",
+    "slide:pub": "envision deploy ./slides/dist -k mtd-slide -v 0.0.2 -u",
     "ui": "pnpm dlx shadcn@latest add "
   },
   "keywords": [],
@@ -27,17 +27,20 @@
     "@kevisual/query-login": "^0.0.7",
     "@kevisual/registry": "^0.0.1",
     "@radix-ui/react-slot": "^1.2.4",
+    "@slidev/cli": "^52.10.1",
+    "@slidev/client": "^52.10.1",
+    "@slidev/theme-default": "^0.25.0",
     "@tailwindcss/vite": "^4.1.17",
-    "@uiw/react-md-editor": "^4.0.8",
+    "@uiw/react-md-editor": "^4.0.9",
     "antd": "^6.0.0",
-    "astro": "^5.16.0",
+    "astro": "^5.16.3",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "dayjs": "^1.11.19",
     "es-toolkit": "^1.42.0",
     "github-markdown-css": "^5.8.1",
     "highlight.js": "^11.11.1",
-    "lucide-react": "^0.554.0",
+    "lucide-react": "^0.555.0",
     "marked": "^17.0.1",
     "marked-highlight": "^2.2.3",
     "nanoid": "^5.1.6",
@@ -46,7 +49,7 @@
     "react-toastify": "^11.0.5",
     "tailwind-merge": "^3.4.0",
     "vue": "^3.5.25",
-    "zustand": "^5.0.8"
+    "zustand": "^5.0.9"
   },
   "publishConfig": {
     "access": "public"
@@ -59,7 +62,7 @@
     "tailwindcss": "^4.1.17",
     "tw-animate-css": "^1.4.0"
   },
-  "packageManager": "pnpm@10.23.0",
+  "packageManager": "pnpm@10.24.0",
   "onlyBuiltDependencies": [
     "@tailwindcss/oxide",
     "esbuild",

slides/components/GoBack.vue

@@ -0,0 +1,34 @@
+<template>
+  <div @click="onClick" class="mr-2 py-1 inline text-gray-500" hover:bg="white op-10">
+    <slot>
+      <carbon:arrow-left v-if="props.arrow === 'left'" />
+      <carbon:arrow-right v-else-if="props.arrow === 'right'" />
+      <carbon:arrow-up v-else-if="props.arrow === 'up'" />
+      <carbon:arrow-down v-else-if="props.arrow === 'down'" />
+      <carbon:arrow-left v-else />
+    </slot>
+  </div>
+</template>
+<script setup lang="ts">
+import { useSlideContext } from '@slidev/client';
+
+const { $slidev } = useSlideContext();
+const props = defineProps({
+  go: {
+    default: 1,
+  },
+  arrow: {
+    type: String,
+    default: 'left', // 'left', 'right', 'up', or 'down'
+  },
+});
+const onClick = () => {
+  const go = props.go;
+  if (go <= 0) {
+    $slidev.nav.go(1);
+    return;
+  }
+
+  $slidev.nav.go(go);
+};
+</script>

slides/components/MyFooter.vue

@@ -0,0 +1,19 @@
+<!-- Foo.vue -->
+
+<template>
+  <div class="fixed bottom-3 right-2 text-gray-300 font-light text-sm">
+   <a :href="link + basename">{{ link + basename }}</a>
+  </div>
+</template>
+<script setup lang="ts">
+const props = defineProps({
+  link: {
+    type: String,
+    default: 'https://kevisual.cn',
+  },
+  basename: {
+    type: String,
+    default: '',
+  },
+});
+</script>

slides/index.md

@@ -1,9 +1,10 @@
 ---
-theme: default
+# theme: default
 # random image from a curated Unsplash collection by Anthony
-background: https://cover.sli.dev
+# background: https://cover.sli.dev
+background: https://cdn.jsdelivr.net/gh/slidevjs/slidev-covers@main/static/rRpZIM_IJmc.webp
 # 介绍文档： https://sli.dev
-title: Welcome to Slidev
+title: 介绍开源多维表格
 info: |
   ## 关于Slidev的介绍
   演示稿
@@ -18,11 +19,43 @@ mdc: true
 htmlAttrs:
   dir: ltr
   lang: zh-CN
+fonts:
+  # 基础字体
+  sans: Robot
+  # 与 UnoCSS 的 `font-serif` css 类一同使用
+  serif: Robot Slab
+  # 用于代码块、内联代码等
+  mono: Fira Code
 # duration of the presentation
 duration: 35min
 ---
-# slide 是一个 所见即所得的幻灯片制作工具
+
+# 开源多维表格
+
+多维表格（也称为OLAP表格）是一种用于数据分析和报表的工具，允许用户从多个维度查看和分析数据。它们通常用于商业智能（BI）应用程序中，以帮助用户理解复杂的数据集。
+
+<!--
+1. 为什么介绍多维表格
+
+我想把自己知道的最好用的方式分享给大家
+
+他对我们日常生活，规范化知识非常有用
+
+2. 好用在哪里
+
+数据展示
+
+作为一个程序员，接触db比较多
+
+知识库，AI自动化，知识管理，
+
+3. 扩展自动化
+api
+
+智能化
+-->
+
 ---
-src: ./demos/contents.md
+src: ./pages/contents.md
 hide: false
 ---

slides/kevisual.json

@@ -0,0 +1 @@
+{}

slides/pages/contents.md

@@ -1,10 +1,164 @@
 ---
-title: '例子'
+transition: fade-out
+layout: image-right
+image: https://kevisual.cn/root/resources/upload/1.0.0/2025-12/rRpZIM_IJmc.webp
 ---
 
-# 常用语法结构
+# 拆分多维表格功能
+
+> 多维表格的大体功能而言，只是把程序开发的后端的数据库由前端展现了出来，并同时可观测性和交互性。
+
+<br />
+
+- [表格可视化，功能筛选，多维表格视图](/3)
+- [看板可视化，仪表盘展示任务管理](/4)
+- [日历可视化，根据日期分析](/5)
+- [画廊可视化，展示图片和多媒体内容](/6)
+
+扩展：
+
+1. 自动化解决方案
+2. 根据数据自己分析
+<v-click>
+<img src="https://kevisual.cn/root/resources/upload/1.0.0/2025-12/2025-12-02_12-17.png" alt="多维表格功能拆分" style="max-width: 80%; height: auto;" />
+</v-click>
+<MyFooter basename='/root/mtd-slide/' />
+
+<!--
+API 自动化
+
+https://nocodb.kevisual.cn/dashboard/#/base/d1ea31d6-0809-4f50-8312-78b7e9930ede
+
+- 为什么介绍多维表格
+我想把自己知道的最好用的方式分享给大家
+
+他对我们日常生活，规范化知识非常有用
+
+- 好用在哪里
+数据展示
+
+作为一个程序员，接触db比较多
+
+知识库，AI自动化，知识管理，
+
+- 扩展自动化 api
+
+智能化
+-->
 
 ---
+transition: fade-out
 --- 
 
-# 第二个
+# <go-back :go="2" /> 表格可视化
+
+数据表等于数据库，数据表的每一行等于数据库中的一条记录，每一列等于数据库中的一个字段。高级在于表格的可视化和交互性，很类似 Excel 的功能。
+
+<br />
+<center>
+<a href="https://nocodb.kevisual.cn/dashboard/#/nc/pkgmmh488p3ptrv/mkv0cc0f6cjsy4e/vw8nrnczj8ude334/01-%25E6%2588%2590%25E5%2591%2598%25E8%25A1%25A8" _target="_blank" rel="noopener">
+<img src="https://kevisual.cn/root/resources/upload/1.0.0/2025-12/Snipaste_2025-12-01_23-05-11.png" alt="表格可视化" style="max-width: 60%; height: auto;" />
+</a>
+</center>
+<MyFooter basename='/root/mtd-slide/' />
+
+---
+transition: fade-out
+---
+
+# <go-back :go="2" /> 看板功能
+
+看板多用于**项目管理，工作流，任务与待办事项管理，内容管理**等场景。通过看板视图，可以将任务或项目以卡片的形式进行展示和管理，支持拖拽操作，方便用户调整任务的优先级和状态。
+
+<br />
+<center>
+<a href="https://nocodb.kevisual.cn/dashboard/#/nc/pkgmmh488p3ptrv/mur63rlt7yjkmvi/vwk9vl1e8yhec1be/03-%25E4%25BB%25BB%25E5%258A%25A1%25E8%25A1%25A8-%25E7%259C%258B%25E6%259D%25BF" _target="_blank" rel="noopener">
+<img src="https://kevisual.cn/root/resources/upload/1.0.0/2025-12/Snipaste_2025-12-01_23-25-54.png" alt="看板功能" style="max-width: 60%; height: auto;" />
+</a>
+</center>
+<MyFooter basename='/root/mtd-slide/' />
+
+---
+transition: fade-out
+---
+
+# <go-back :go="2" /> 日历功能
+
+查看当天的任务,事件安排等，通过日历视图，可以直观地了解每天、每周或每月的任务分布情况，方便进行时间管理和计划安排。
+
+<br />
+<center>
+<a href="https://nocodb.kevisual.cn/dashboard/#/nc/pkgmmh488p3ptrv/mur63rlt7yjkmvi/vwupcjfo7ylt2gf2/03-%25E4%25BB%25BB%25E5%258A%25A1%25E8%25A1%25A8-%25E6%2597%25A5%25E5%258E%2586" _target="_blank" rel="noopener">
+<img src="https://kevisual.cn/root/resources/upload/1.0.0/2025-12/Snipaste_2025-12-01_23-29-39.png" alt="日历功能" style="max-width: 50%; height: auto;" />
+</a>
+</center>
+<MyFooter basename='/root/mtd-slide/' />
+
+---
+transition: fade-out
+---
+
+# <go-back :go="2" /> 画廊功能和表单
+
+画廊功能主要用于展示图片、多媒体内容等，适合用于作品集、产品展示等场景。用户可以通过画廊视图浏览和管理多媒体资源。
+
+<br />
+<center>
+<a href="https://nocodb.kevisual.cn/dashboard/#/nc/pkgmmh488p3ptrv/mxv69rskicd2kxy/vwhqc15y3vrjkygg/05-%25E7%2594%25BB%25E5%25BB%258A-%25E7%2594%25BB%25E5%25BB%258A" _target="_blank" rel="noopener">
+<img src="https://kevisual.cn/root/resources/upload/1.0.0/2025-12/Snipaste_2025-12-01_23-53-48.png" alt="画廊功能" style="max-width: 50%; height: auto;" />
+</a>
+</center>
+<MyFooter basename='/root/mtd-slide/' />
+
+---
+transition: fade-out
+---
+
+# 总结
+
+多维表格功能通过多种视图和交互方式，提升了数据的可视化和管理效率，适用于各种数据管理和分析场景。一切应用的底层基础设施。
+
+- 交互性
+
+> 把这个可视化的数据当做一个数据库来使用，通过筛选获取想要的类型数据。
+
+<br />
+
+- 可扩展性
+
+> 通过`webhook`和数据的状态判断，能够实现各种灵活性的动态修改数据。
+
+<br />
+
+- 自动化场景
+
+> 博客，个人任务管理，知识库，企业管理，信息管理，数据都能放这里，然后通过自动化实现各种功能。
+<MyFooter basename='/root/mtd-slide/' />
+
+---
+transition: fade-out
+layout: image-right
+image: https://cdn.jsdelivr.net/gh/slidevjs/slidev-covers@main/static/9jFPVQzUgNY.webp
+---
+
+# 规划任务
+
+- 怎么自部署开源表格（nocodb）
+- 使用案例技巧，解决方案
+  - 个人知识库，笔记，备忘录
+  - 任务管理，待办事项
+  - AI自动化
+  - 联动自己网页
+<MyFooter basename='/root/mtd-slide/' />
+
+<!--
+大纲
+
+没有扩展，就只等于一个数据
+
+下期任务
+
+本地部署，自己电脑的一个可执行文件，只能本地访问
+
+部署到云服务器上，可以公网访问
+-->

src/data/docs/01-base.md

@@ -0,0 +1,83 @@
+---
+title: '多维表格基本介绍'
+tags: ['mdt', '表格']
+createdAt: '2025-11-26 02:00:00'
+---
+
+# 多维表格基本介绍
+
+多维表格 是一种结构灵活、支持多维度数据关联与动态分析的智能数据管理工具。
+
+多维度 >> 多视图 去查看，分析数据
+
+
+## 视图类型
+
+- 表格
+- 看板
+- 画廊 
+- 表单
+- 日历
+
+## 自动化
+
+多维表格的数据可视，可以通过自动化编写功能实现自动把数据存储和修改。触发自动化功能。
+
+## 实现什么
+
+
+
+-----
+
+# nocodb 使用教程大纲
+
+## 1. nocodb概述
+
+## 2. 部署方式
+
+## 3. 项目和表和视图
+
+## 4. 模板
+
+## 5. 自动化实现
+
+## 6. 使用案例
+
+### 1. 任务管理
+
+看板系列等
+
+项目管理
+
+### 2. 客户关系
+
+关系表等
+
+CRM，客户管理，联系人，沟通记录，合同，销售，自动统计转化率
+
+人事管理，档案，入职时间，绩效，培训记录
+
+### 3. 库存采购管理
+
+表格等
+
+关联仓库，供应商，采购单，销售订单，实时预警
+
+### 4. 博客内容管理
+
+数据表等
+
+
+### 5. 数据看板
+
+分析看板等
+
+统计，分析，自动化
+
+### 6. 课程管理
+
+课程关联讲师，学员，课时，作业，课表
+
+### 7. 内容运营
+
+选题，发布时间，可视化

src/data/docs/menu.md

@@ -1,8 +0,0 @@
----
-title: 'astro 概览'
-tags: ['astro', 'simple', 'template']
-createdAt: '2025-11-25 20:00:00'
-hideInMenu: true
----
-
-## 概览

src/data/docs/simpalte-template.md

@@ -1,10 +0,0 @@
----
-title: 'astro 例子'
-tags: ['astro', 'simple', 'template']
-createdAt: '2025-11-25 20:00:00'
-hideInMenu: true
----
-
-## astro-simplate-template
-
-astro 是一个非常好的

src/layouts/MDXPost.astro

@@ -0,0 +1,26 @@
+---
+import '../styles/global.css';
+export interface Props {
+	title?: string;
+	description?: string;
+}
+
+const { title, description } = Astro.props;
+---
+
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <title>{title || '文档'}</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/5.2.0/github-markdown.min.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/github-dark.min.css">
+  </head>
+  <body class="bg-gray-50 min-h-screen">
+    <div class="container mx-auto px-4 py-8 max-w-4xl">
+      <article class="markdown-body bg-white rounded-lg shadow-lg p-8">
+        <slot />
+      </article>
+    </div>
+  </body>
+</html>

src/pages/docs/[...id].astro

@@ -22,6 +22,6 @@ const staticPaths = await getStaticPaths();
 const menu = staticPaths.map((item) => item.data);
 ---
 
-<Main showMenu={showMenu} menu={menu} basename={basename}>
+<Main showMenu={showMenu} menu={menu} basename={basename} title={post.data.title}>
   <Content />
 </Main>

src/pages/index.astro

@@ -1,47 +0,0 @@
----
-// import { query } from '@/modules/query.ts';
-console.log('Hello from index.astro');
-import '../styles/global.css';
----
-
-<html lang='en'>
-  <head>
-    <title>My Homepage</title>
-  </head>
-  <body>
-    <h1 onclick="{onClick}">Welcome to my website!</h1>
-    <div class='bg-amber-50 w-20 h-20 rounded-full'></div>
-    <div id='root'></div>
-    <script type='importmap' data-vite-ignore is:inline>
-      {
-        "imports": {
-          "react": "https://esm.sh/react@19.1.0",
-          "react-dom": "https://esm.sh/react-dom@19.1.0/client.js",
-          "react-toastify": "https://esm.sh/react-toastify@11.0.5"
-        }
-      }
-    </script>
-    <script type='module' data-vite-ignore is:inline>
-      import { Button, message } from 'https://esm.sh/antd?standalone';
-      import React from 'react';
-      import { ToastContainer, toast } from 'react-toastify';
-      import { createRoot } from 'react-dom';
-      setTimeout(() => {
-        toast.loading('Hello from index.astro');
-        window.toast = toast;
-        console.log('message', toast);
-      }, 1000);
-      console.log('Hello from index.astro', Button);
-      const root = document.getElementById('root');
-      const render = createRoot(root);
-      const App = () => {
-        const button = React.createElement(Button, null, 'Hello');
-        const messageEl = React.createElement(ToastContainer, null, 'Hello');
-        const wrapperMessage = React.createElement('div', null, [button, messageEl]);
-        return wrapperMessage;
-      };
-      // render.render(React.createElement(Button, null, 'Hello'), root);
-      render.render(App(), root);
-    </script>
-  </body>
-</html>

src/pages/index.mdx

@@ -0,0 +1,7 @@
+---
+layout: ../layouts/MDXPost.astro
+---
+
+# 什么是多维表格
+
+多维表格是一种用于展示和分析数据的表格形式，它允许用户在多个维度上对数据进行切片和钻取。