"feat: 改进 Markdown 渲染布局与工具提示组件,新增 kevisual 平台文档"

This commit is contained in:
熊潇 2025-06-03 17:15:05 +08:00
parent 0847751125
commit 63d21d6614
13 changed files with 171 additions and 18 deletions

@ -0,0 +1 @@
Subproject commit aed46f2adcc43e0c5febb59859301b8f75263443

View File

@ -33,7 +33,7 @@ export interface Props {
<h1>My Site Header</h1>
</slot>
</div>
<main class='markdown-body' style='padding: 1rem'>
<main class='markdown-body scrollbar h-full overflow-auto' style='padding: 1rem'>
<slot />
</main>
<footer>

View File

@ -1,12 +1,12 @@
import { Tooltip as UITooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
import React from 'react';
export const Tooltip = (props: { children?: React.ReactNode; title?: React.ReactNode; placement?: 'top' | 'bottom' | 'left' | 'right' }) => {
export const Tooltip = (props: { children?: React.ReactNode; title?: React.ReactNode }) => {
return (
<TooltipProvider>
<UITooltip>
<TooltipTrigger asChild>{props.children}</TooltipTrigger>
<TooltipContent className='bg-gray-800 text-white' side={props.placement || 'top'}>
<TooltipContent>
<p>{props.title}</p>
</TooltipContent>
</UITooltip>

View File

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

View File

@ -0,0 +1,16 @@
import { cn } from '@/lib/utils';
// import './Preview.css';
type Props = {
children?: React.ReactNode;
className?: string;
style?: React.CSSProperties;
[key: string]: any; // Allow any additional props
};
export const MarkdownPreview = (props: Props) => {
return (
<div className={cn('markdown-body scrollbar h-full overflow-auto px-6 py-2 max-w-[800px] border my-4 flex flex-col justify-self-center rounded-md shadow-md', props.className)} style={props.style}>
{props.children}
</div>
);
};

View File

@ -0,0 +1,75 @@
---
title: '总结'
tags: ['kevisual', 'platform', 'assistant']
---
# @kevisual assistant
这里是进行介绍一下整个的 `kevisual` 助手关系网,以及整体的程序运行的规划和方向。
## 目标
软件不再是开放者的归属而是使用者私自的后花园。AI 能够更快速的生成代码,所以用户只需要一个能把代码跑起来的平台,可视化部署,管理,动作。
所以类似于把一个小程序的平台挂到自己的网站,电脑,私有部署。为了解决类小程序化,所以需要有一个程序框架去当作容器,代码是属于动态代码。
什么语言能够实现这个功能呢?需要保证动态,需要保证浏览器容易执行,而且保持稳定性。**只有 js**。而在服务端同代码执行的deno 和 bun已经非常的优秀了。
## 平台搭建
当私有化部署可以跨平台运行windowslinuxmacdocker。他对于用户而言就是一个终极的**助手**,而它是属于一个代码环境,用户可以放动态的代码。
### 实现方案
前端和后端可执行的实现方案是两个不同的难度量级,但是两者的核心都是在于动态文件管理。文件管理都基于开源的 minio用 api 获取。
#### 前端的动态
首先,对于前端而言,访问页面,就相当于是浏览器找到了对应的文件资源,而且打开了。这里就有一个定位问题需要解决。
所以我开发了一个`page-proxy`,功能只有一个,页面代理,以及 api 的代理。
对于不同的用户,拥有的不同的应用,因为平台是包函多样性的,同一个用户可以有不同的身份。所以定位问题就属于定位到用户的程序,也就是路径`/username/appKey/`, 往下一层级的路由,假如文件不存在,转到`/username/appKey/`,类似于`try_files`的模式(解决了单页面应用 `browser history` 路由问题)。对于 `api` 而言,比较特殊,就像是`/api/v1/`, `api` 这个用户的 `v1` 应用(属于 rest api,特殊的适配。
**最后解决了,任何用户都能够上传自己的前端代码,然后都能够在对应的自己名下去找到那一个应用进行访问。**
所以 ai 生成的简单页面,能够最简方式去运行。
为了平台的可用性,添加用户级的访问权限,可以配置公共或则私有。
#### 后端的动态
后端的动态是一个比较难去解决的问题!**因为用户的可执行代码必须要在安全的环境执行,服务器必须要执行安全的代码**。
助手是我切实感受到的最能解决的办法。往上一层级的视野去思考,使用助手去安装我上一步说的的平台,平台的后端服务是动态插入式的,使用助手去管理。
<!-- ![root](https://kevisual.xiongxiao.me/root/ai/kevisual/uploads/2025-06/root.png) -->
<img src="https://kevisual.xiongxiao.me/root/ai/kevisual/uploads/2025-06/root.png" class="flex justify-self-center" width="800" height="600" alt="root">
平台的核心在于应用,用户体系,而这种属于可脱离运行的和全部私有部署的。可以只当作一个客户端使用,也可以当做一个管理服务器的助手。
为什么需要动态和把代码下载到本地运行?因为自由度,比如本地的任何的脚本,程序打开,任何的人和电脑的交互。助手的灵活性,辅助用户。
#### 归纳
对于整个平台,前端的,后端的,客户端的本地的。是可拆分的几个模块,模块的不同组合实现不同的功能。
当核心助手模块完善后,就能够用 AI 来实现一些其他的东西了。
## AI
doing
### 怎么用 AI 生成一个应用
#### 前端的应用
#### 后端的应用
#### 本地的应用
### AI的知识库的搭建
### 知识库的运用

View File

@ -0,0 +1,3 @@
# AiNote extends
https://baike.baidu.com/item/%E8%AE%B8%E8%BF%9B%E8%B6%85/3259993

View File

@ -0,0 +1,17 @@
# db
数据库存储使用 postgres
缓存和时间监听使用redis
本地数据库
- sqlite 高入高出
- duckdb 搜索优先
向量搜索
- Qdrant
- chroma
搜索引擎
- fuse.js
- MeiliSearch 全文搜索

View File

@ -0,0 +1,14 @@
## code server
```sh
brew install code-server
code-server
```
## vscode 的默认的 server
```sh
code serve-web
```

View File

@ -0,0 +1,17 @@
# kevisual使用分级
对于使用 kevisual 的分级
## 1. 纯粹对网页页面的内容的部署
比如ai生成的简单页面
## 2. code-center配置
类似一些一些简单的服务upload图床权限分享等。
本地跑一个 `@kevisual/cli`的服务
## 3. 项目开发和管理
溢出使用 `@kevisual/cli` 的 asst 服务

View File

@ -1,12 +0,0 @@
---
title: router
tags: ['kevisual', 'lib']
---
# @kevisual/router
在使用 node 开发的时候http 服务和 api 是首要关注的内容。但是真实的在开发的时候,发现一件事情,开发应该只关注于对应的内容的东西。
## 介绍

View File

@ -0,0 +1,23 @@
---
import '@/styles/theme.css';
import '@/styles/global.css';
import Blank from '@/components/html/blank.astro';
import Readme from '@/data/blogs/kevisual/06-01-summary.md';
import { MarkdownPreview } from '@/components/html/md/Preview';
---
<link
rel='stylesheet'
href='https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/5.8.1/github-markdown-light.min.css'
integrity='sha512-X175XRJAO6PHAUi8AA7GP8uUF5Wiv+w9bOi64i02CHKDQBsO1yy0jLSKaUKg/NhRCDYBmOLQCfKaTaXiyZlLrw=='
crossorigin='anonymous'
referrerpolicy='no-referrer'
/>
<Blank>
<div class="p-4 h-full">
<MarkdownPreview>
<Readme />
</MarkdownPreview>
</div>
</Blank>

View File

@ -15,7 +15,4 @@ export class QueryApp extends BaseQuery {
getList(data: any, opts?: DataOpts) {
return this.appDefine.queryChain('listApps').post(data, opts);
}
publishVersion(data: any, opts?: DataOpts) {
return this.appDefine.queryChain('publishApp').post(data, opts);
}
}