tr]:last:border-b-0",
+ className
+ )}
+ {...props}
+ />
+ )
+}
+
+function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
+ return (
+ |
+ )
+}
+
+function TableHead({ className, ...props }: React.ComponentProps<"th">) {
+ return (
+ [role=checkbox]]:translate-y-[2px]",
+ className
+ )}
+ {...props}
+ />
+ )
+}
+
+function TableCell({ className, ...props }: React.ComponentProps<"td">) {
+ return (
+ | [role=checkbox]]:translate-y-[2px]",
+ className
+ )}
+ {...props}
+ />
+ )
+}
+
+function TableCaption({
+ className,
+ ...props
+}: React.ComponentProps<"caption">) {
+ return (
+
+ )
+}
+
+export {
+ Table,
+ TableHeader,
+ TableBody,
+ TableFooter,
+ TableHead,
+ TableRow,
+ TableCell,
+ TableCaption,
+}
diff --git a/src/components/ui/textarea.tsx b/src/components/ui/textarea.tsx
new file mode 100644
index 0000000..7f21b5e
--- /dev/null
+++ b/src/components/ui/textarea.tsx
@@ -0,0 +1,18 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+ return (
+
+ )
+}
+
+export { Textarea }
diff --git a/src/components/ui/tooltip.tsx b/src/components/ui/tooltip.tsx
new file mode 100644
index 0000000..71ee0fe
--- /dev/null
+++ b/src/components/ui/tooltip.tsx
@@ -0,0 +1,59 @@
+import * as React from "react"
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+
+import { cn } from "@/lib/utils"
+
+function TooltipProvider({
+ delayDuration = 0,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+ )
+}
+
+function Tooltip({
+ ...props
+}: React.ComponentProps) {
+ return (
+
+
+
+ )
+}
+
+function TooltipTrigger({
+ ...props
+}: React.ComponentProps) {
+ return
+}
+
+function TooltipContent({
+ className,
+ sideOffset = 0,
+ children,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+
+ {children}
+
+
+
+ )
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
diff --git a/src/content.config.ts b/src/content.config.ts
new file mode 100644
index 0000000..74c4eec
--- /dev/null
+++ b/src/content.config.ts
@@ -0,0 +1,15 @@
+// @ts-ignore
+import { defineCollection, z } from 'astro:content';
+import { glob, file } from 'astro/loaders'; // 不适用于旧版 API
+
+const blog = defineCollection({
+ // loader: glob({ pattern: '**/*.md', base: './src/data/blogs' }),
+ loader: glob({ pattern: '**/[^_]*.md', base: './src/data/blogs' }),
+ schema: z.object({
+ title: z.string().optional(),
+ description: z.string().optional(),
+ // pubDate: z.coerce.date(),
+ // updatedDate: z.coerce.date().optional(),
+ }),
+});
+export const collections = { blog };
diff --git a/src/data/blogs/202502/20250217-20-think-frontend.md b/src/data/blogs/202502/20250217-20-think-frontend.md
new file mode 100644
index 0000000..df2cfb1
--- /dev/null
+++ b/src/data/blogs/202502/20250217-20-think-frontend.md
@@ -0,0 +1,17 @@
+# think frontend
+
+我今天很多的时候都反复的想到一件事情。前端在ai的环境下，是否不能做了？
+
+如果 ai 盛行，那么创建一个页面的成本变低，反而每一个人都可能创建页面的情况下，所有的人都需要懂得一点的前端开发。
+
+
+### 平台
+
+所以对于大前端来说，如果想通过ai做一个小的网站的时候，为了更便捷把自己作出来的东西展现出来的话，需要有一个快速的平台。
+
+### ai-frontend
+
+如何从零开始迅速学会 `ai-frontend`.
+
+#### 如何快速做一个应用
+
diff --git a/src/data/blogs/202502/20250218-07-ai-avatar.md b/src/data/blogs/202502/20250218-07-ai-avatar.md
new file mode 100644
index 0000000..6a12f30
--- /dev/null
+++ b/src/data/blogs/202502/20250218-07-ai-avatar.md
@@ -0,0 +1,10 @@
+# ai-avatar
+
+创建头像，自定义。
+
+## 根据会话生成一张图
+
+然后把资源上传到某一些地方
+
+- 比如自己的网站
+- 比如其他网站
\ No newline at end of file
diff --git a/src/data/blogs/202502/20250219-17-center.md b/src/data/blogs/202502/20250219-17-center.md
new file mode 100644
index 0000000..a2180d9
--- /dev/null
+++ b/src/data/blogs/202502/20250219-17-center.md
@@ -0,0 +1,5 @@
+# center
+
+今天讨论了一件事，关于ai，ai怎么帮助人来认清一个真实的情况。
+
+那就是中枢，中枢收集一切的数据，然后合拢到一起。
diff --git a/src/data/blogs/202502/20250219-17-project-tasks.md b/src/data/blogs/202502/20250219-17-project-tasks.md
new file mode 100644
index 0000000..c2d1e32
--- /dev/null
+++ b/src/data/blogs/202502/20250219-17-project-tasks.md
@@ -0,0 +1,11 @@
+# project-tasks
+
+回忆去年做的task的任务项目书
+
+1. 找出想做什么
+2. 做这个的步骤是什么
+3. 分解步骤
+4. 生成task
+
+
+## 上传到其他地方
diff --git a/src/data/blogs/202502/20250223-16-srvice.md b/src/data/blogs/202502/20250223-16-srvice.md
new file mode 100644
index 0000000..0b610e0
--- /dev/null
+++ b/src/data/blogs/202502/20250223-16-srvice.md
@@ -0,0 +1,26 @@
+# srvice
+
+关于服务器构思分享。
+
+## 服务器价格
+
+轻量云
+- 4h8g12m 一年大概600块， 10个人一个人60块（一个月6块）。共享一台服务器。
+- 2h4g5m 200
+
+- 轻量服务器：适用于小型企业、个人开发者、学生等，可用于网站建设、开发测试、小型应用、知识效率管理、云端学习等轻负载应用场景。
+
+平台费按量收费：10或者5一个月，维护管理。
+
+数据迁移费用：
+
+## 服务器使用说明
+
+让服务器作为一个中转站，少量部署应用。
+
+- 博客
+- 小网站
+- 笔记同步
+- 小工具
+
+日历，书签
\ No newline at end of file
diff --git a/src/data/blogs/README.md b/src/data/blogs/README.md
new file mode 100644
index 0000000..22a3c6e
--- /dev/null
+++ b/src/data/blogs/README.md
@@ -0,0 +1,16 @@
+---
+title: blogs list
+description: 个人博客
+---
+
+合并一些功能模块，ai相关的，导航，文字转语音，语音转文字，对话等
+
+## 2025-02
+具体时间的日志
+
+## code-logger
+关于code相关的
+
+## logger-life
+
+随笔
\ No newline at end of file
diff --git a/src/data/blogs/code-logger/0001-shadcn.md b/src/data/blogs/code-logger/0001-shadcn.md
new file mode 100644
index 0000000..b3f3074
--- /dev/null
+++ b/src/data/blogs/code-logger/0001-shadcn.md
@@ -0,0 +1,51 @@
+在 shadcn/ui 中，`Neutral`、`Gray`、`Zinc`、`Stone` 和 `Slate` 都是预设的灰色调色板（neutral color palettes），但它们的色调倾向和适用场景略有不同。以下是它们的区别和特点：
+
+---
+
+### 1. **`Neutral`**
+- **特点**：纯中性灰，几乎没有色相偏移（完全平衡的灰度）。
+- **适用场景**：需要绝对中性的背景或文本，适合极简设计或黑白风格。
+- **示例**：`bg-neutral-100`, `text-neutral-900`
+
+---
+
+### 2. **`Gray`**
+- **特点**：标准灰色，轻微冷调（略带蓝色底），但接近中性。
+- **适用场景**：通用场景，适合大多数界面（默认的灰色调）。
+- **示例**：`bg-gray-100`, `border-gray-200`
+
+---
+
+### 3. **`Zinc`**
+- **特点**：比 `Gray` 更暖一些，带有极轻微的黄色/绿色底。
+- **适用场景**：需要略微温暖的灰色，避免冷感。
+- **示例**：`bg-zinc-50`, `text-zinc-800`
+
+---
+
+### 4. **`Stone`**
+- **特点**：明显的暖灰色，类似石灰石的色调（黄色/棕色底）。
+- **适用场景**：复古、自然或温暖风格的设计。
+- **示例**：`bg-stone-200`, `border-stone-300`
+
+---
+
+### 5. **`Slate`**
+- **特点**：冷调灰色，带有蓝色/紫色底，比 `Gray` 更冷。
+- **适用场景**：科技感、现代感强的设计，或需要冷色调的界面。
+- **示例**：`bg-slate-100`, `text-slate-700`
+
+---
+
+### 如何选择？
+- **中性优先**：选 `Neutral` 或 `Gray`（最通用）。
+- **温暖感**：选 `Zinc` 或 `Stone`（`Stone` 最暖）。
+- **冷感/科技感**：选 `Slate`。
+- **一致性**：建议一个项目中只用一种灰色调色板，避免混用。
+
+---
+
+### 对比图（从冷到暖）：
+`Slate` → `Gray` → `Neutral` → `Zinc` → `Stone`
+
+如果需要更直观的对比，可以在 [shadcn/ui 官网](https://ui.shadcn.com/docs) 或 [Tailwind 调色板](https://tailwindcss.com/docs/customizing-colors) 查看色值示例。
\ No newline at end of file
diff --git a/src/data/blogs/code-logger/0002-query-prompt.md b/src/data/blogs/code-logger/0002-query-prompt.md
new file mode 100644
index 0000000..13472a2
--- /dev/null
+++ b/src/data/blogs/code-logger/0002-query-prompt.md
@@ -0,0 +1,26 @@
+```ts
+import { QueryUtil } from '@kevisual/router/define';
+
+export const q = QueryUtil.create({
+ getScript: {
+ path: 'script',
+ key: 'get',
+ description: '获取剧本信息',
+ },
+ updateScript: {
+ path: 'script',
+ key: 'update',
+ description: '更新剧本信息',
+ },
+ deleteScript: {
+ path: 'script',
+ key: 'delete',
+ description: '删除剧本信息',
+ },
+ listScripts: {
+ path: 'script',
+ key: 'list',
+ description: '列出所有剧本信息',
+ },
+});
+```
diff --git a/src/data/blogs/code-logger/0003-peer.md b/src/data/blogs/code-logger/0003-peer.md
new file mode 100644
index 0000000..e515754
--- /dev/null
+++ b/src/data/blogs/code-logger/0003-peer.md
@@ -0,0 +1,186 @@
+## Peerjs 能做什么？
+
+如果不是局域网，使用 **PeerJS** 和 WebRTC 技术仍然可以在互联网上实现点对点（P2P）消息发送，但需要满足以下条件：
+
+---
+
+### **1. 必须有一个信令服务器**
+- WebRTC 需要一个 **信令服务器** 用于初始连接的建立。
+- **PeerJS Server** 就是一个轻量级的信令服务器，它帮助两个设备（Peers）互相交换连接信息（如 SDP 和 ICE 候选信息）。
+- PeerJS Server 本身并不传输实际的数据，只负责建立连接。
+
+---
+
+### **2. 公网穿透问题**
+- WebRTC 需要设备之间直接通信（点对点），但在实际网络中，由于 **NAT（网络地址转换）** 和防火墙的限制，设备可能无法直接连接到对方。
+- 为了解决这个问题，需要使用 **STUN** 和 **TURN** 服务器：
+ 1. **STUN 服务器**：帮助设备发现自己的公网 IP 和端口，用于尝试直接连接。
+ 2. **TURN 服务器**：在无法直接连接时，充当中继服务器传输数据。
+
+PeerJS 支持自定义 STUN/TURN 服务器配置：
+
+```javascript
+const peer = new Peer({
+ config: {
+ iceServers: [
+ { url: "stun:stun.l.google.com:19302" }, // 免费的 Google STUN 服务器
+ {
+ url: "turn:your-turn-server.com",
+ username: "user",
+ credential: "password"
+ }
+ ]
+ }
+});
+```
+
+---
+
+### **3. 消息发送的实现**
+在非局域网环境中，只要能够建立 WebRTC 连接，消息仍然可以通过 P2P 方式直接发送，而无需依赖中间服务器。
+
+示例代码：
+
+#### 服务端（运行 PeerJS Server）：
+```bash
+npx peerjs --port 9000 --key myapp
+```
+
+#### 客户端 A：
+```javascript
+const peer = new Peer("peerA", { host: "your-server.com", port: 9000, key: "myapp" });
+
+peer.on("open", (id) => {
+ console.log("My peer ID is:", id);
+
+ // 连接到客户端 B
+ const conn = peer.connect("peerB");
+ conn.on("open", () => {
+ conn.send("Hello from peerA!");
+ });
+
+ conn.on("data", (data) => {
+ console.log("Received:", data);
+ });
+});
+```
+
+#### 客户端 B：
+```javascript
+const peer = new Peer("peerB", { host: "your-server.com", port: 9000, key: "myapp" });
+
+peer.on("connection", (conn) => {
+ conn.on("data", (data) => {
+ console.log("Received:", data);
+ conn.send("Hello back from peerB!");
+ });
+});
+```
+
+---
+
+### **注意事项**
+1. **需要一个稳定的信令服务器**：PeerJS Server 是建立连接的前提。
+ - 可以使用官方的 `peerjs` 服务，也可以自行托管。
+2. **STUN/TURN 服务是关键**：
+ - 公网环境中，推荐使用免费的 STUN 服务器，例如 Google STUN (`stun:stun.l.google.com:19302`)。
+ - 对于企业或大规模应用，建议搭建自己的 TURN 服务器，例如使用 [Coturn](https://github.com/coturn/coturn)。
+3. **网络质量和带宽**：
+ - P2P 消息的传输速度取决于两端的网络质量。
+ - 数据量较大时（如视频流），需要优化传输。
+
+---
+
+### **总结**
+在非局域网环境中，通过 **PeerJS** 和 WebRTC，配合信令服务器（PeerJS Server）和 STUN/TURN 服务器，你可以实现点对点消息传递。只要配置正确，消息和数据可以直接在设备之间传输，而不需要经过中间服务器。
+
+
+
+**PeerJS** 是一个用于构建 WebRTC 应用程序的 JavaScript 库，提供了简单的接口来创建点对点（P2P）连接。使用 PeerJS 以及它的服务器（PeerServer），你可以开发许多有趣的实时应用程序，以下是一些可能的项目想法：
+
+---
+
+### **1. 实时视频/语音聊天**
+- **应用场景**：创建类似 Zoom 或 Google Meet 的视频通话应用。
+- **功能**：
+ - 支持一对一或多对多的视频通话。
+ - 基于 WebRTC 的低延迟音视频传输。
+ - 使用 PeerJS Server 管理 Peer ID 和信令。
+
+---
+
+### **2. 文件共享应用**
+- **应用场景**：开发一个无需上传到服务器的点对点文件共享工具。
+- **功能**：
+ - 直接通过 P2P 传输文件（大文件可能需要分块传输）。
+ - 支持拖拽式文件发送。
+ - 使用加密保证传输安全性。
+
+---
+
+### **3. 实时协作工具**
+- **应用场景**：类似 Google Docs 的实时协作文档编辑器。
+- **功能**：
+ - 多人实时同步文本、图像、代码等内容。
+ - 点对点传输减少延迟，提高效率。
+ - 可结合 WebSocket 提供信令服务器。
+
+---
+
+### **4. 多人在线游戏**
+- **应用场景**：开发一个轻量级的多人在线游戏（如象棋、贪吃蛇）。
+- **功能**：
+ - 使用 PeerJS 建立玩家之间的 P2P 连接。
+ - 每个玩家充当主机同步游戏状态。
+ - 游戏状态通过 P2P 广播到所有玩家。
+
+---
+
+### **5. 局域网聊天工具**
+- **应用场景**：开发一个无需互联网的局域网聊天应用。
+- **功能**：
+ - 使用局域网 P2P 连接直接聊天。
+ - 支持群聊和私聊功能。
+ - 可选加密消息。
+
+---
+
+### **6. 实时屏幕共享**
+- **应用场景**：创建一个支持屏幕共享的在线演示工具。
+- **功能**：
+ - 基于 WebRTC 的屏幕共享功能。
+ - 观众通过 PeerJS 链接直接观看共享屏幕。
+ - 支持音频同步。
+
+---
+
+### **7. 分布式计算**
+- **应用场景**：开发一个利用用户设备的分布式计算工具。
+- **功能**：
+ - 点对点分享计算任务。
+ - 使用 PeerJS 传输计算任务和结果。
+ - 每个节点（Peer）负责部分计算。
+
+---
+
+### **8. 数据同步工具**
+- **应用场景**：开发类似 Resilio Sync 的文件同步工具。
+- **功能**：
+ - 文件夹之间的点对点同步。
+ - 断点续传功能。
+ - 使用信令服务器管理 Peer 之间的连接。
+
+---
+
+### **开发 PeerJS 应用需要的技术栈**
+1. **前端**：
+ - HTML/CSS/JavaScript
+ - PeerJS 客户端库
+2. **后端**（可选）：
+ - 使用 PeerJS Server 作为信令服务器。
+ - 结合 Node.js 实现 Peer ID 管理或其他功能。
+3. **基础设施**：
+ - 部署 PeerServer（例如：`peerjs --port 9000`）。
+ - 可选 WebSocket 或 STUN/TURN 服务支持。
+
+通过 PeerJS，你可以快速搭建小型实时 P2P 应用，无需复杂的后端开发。结合现有的浏览器 API（如 WebRTC、File API 等），还能实现更加创新的功能。
\ No newline at end of file
diff --git a/src/data/blogs/code-logger/0004-stun.md b/src/data/blogs/code-logger/0004-stun.md
new file mode 100644
index 0000000..b0467ce
--- /dev/null
+++ b/src/data/blogs/code-logger/0004-stun.md
@@ -0,0 +1,3 @@
+# STUN 服务介绍
+
+STUN (Session Traversal Utilities for NAT) 是一种网络协议，用于帮助客户端发现其公共IP地址和NAT类型，是WebRTC等实时通信技术中实现NAT穿透的关键组件。
diff --git a/src/data/blogs/logger-life/0001-记录一下kevisual.md b/src/data/blogs/logger-life/0001-记录一下kevisual.md
new file mode 100644
index 0000000..d2b9e65
--- /dev/null
+++ b/src/data/blogs/logger-life/0001-记录一下kevisual.md
@@ -0,0 +1,26 @@
+---
+title: kevisual
+date: 2025-05-24 01:11:00
+---
+# kevisual
+
+可视化
+
+整体而言，是为了实现一个动态助手，方便可执行任务。
+
+包函的模块功能
+
+1. 基础设施，部署前端和后端的功能
+2. 根据ai，调用不同的类型的数据
+3. 动态显示内容
+
+
+## 已经实现的功能模块
+
+动态部署前端，不够简洁化，需要优化
+
+后端功能，只存在部分的部署方案。需要优化
+
+ai功能，还没有
+
+@kevisual/cli 版本 0.0.54
\ No newline at end of file
diff --git a/src/data/blogs/logger-life/0002-esm-sh.md b/src/data/blogs/logger-life/0002-esm-sh.md
new file mode 100644
index 0000000..b0021c3
--- /dev/null
+++ b/src/data/blogs/logger-life/0002-esm-sh.md
@@ -0,0 +1,6 @@
+---
+title: esm-sh 是一个很好的前端工具
+
+---
+# esm-sh 是一个很好的前端工具
+
diff --git a/src/lib/player-stream.ts b/src/lib/player-stream.ts
new file mode 100644
index 0000000..dee27d1
--- /dev/null
+++ b/src/lib/player-stream.ts
@@ -0,0 +1,194 @@
+import { EventEmitter } from 'eventemitter3';
+type VideoStreamPlayerOptions = {
+ emitter?: EventEmitter;
+};
+export class VideoStreamPlayer {
+ emitter: EventEmitter;
+ audioContext: AudioContext;
+ audioBuffer: AudioBuffer | null = null;
+ audioQueue: Uint8Array[] = [];
+ decodedBuffers: AudioBuffer[] = []; // 存储已解码的音频缓冲区
+ currentSource: AudioBufferSourceNode | null = null;
+ audioElement: HTMLAudioElement;
+ processing: boolean = false;
+ canPlaying: boolean = false;
+ isPlaying: boolean = false;
+ bufferingThreshold: number = 3; // 预缓冲的音频块数量
+ decodePromises: Promise[] = []; // 跟踪解码进程
+ nextPlayTime: number = 0; // 下一个音频片段的开始时间
+ playStatus: 'paused' | 'playing' | 'buffering' | 'ended' = 'paused';
+
+ constructor(opts?: VideoStreamPlayerOptions) {
+ this.emitter = opts?.emitter || new EventEmitter();
+ this.audioContext = new AudioContext();
+ this.audioElement = new Audio();
+ this.audioElement.autoplay = false;
+ // 确保在页面交互后恢复音频上下文（解决自动播放限制问题）
+ document.addEventListener(
+ 'click',
+ () => {
+ if (this.audioContext.state === 'suspended') {
+ this.audioContext.resume();
+ }
+ },
+ { once: true },
+ );
+ }
+
+ // 处理收到的音频数据
+ async appendAudioChunk(chunk: ArrayBuffer | Uint8Array | string) {
+ let audioData: Uint8Array;
+
+ // 处理不同类型的输入数据
+ if (typeof chunk === 'string') {
+ // 如果是base64编码的数据
+ const binary = atob(chunk);
+ audioData = new Uint8Array(binary.length);
+ for (let i = 0; i < binary.length; i++) {
+ audioData[i] = binary.charCodeAt(i);
+ }
+ } else if (chunk instanceof ArrayBuffer) {
+ audioData = new Uint8Array(chunk);
+ } else {
+ audioData = chunk;
+ }
+
+ // 将音频数据加入队列
+ this.audioQueue.push(audioData);
+
+ // 开始解码音频，不等待前面的解码完成
+ this.decodeAudio();
+
+ // 如果当前没有在播放且可以播放，并且已有足够缓冲则开始播放
+ if (!this.isPlaying && this.canPlaying && this.decodedBuffers.length >= this.bufferingThreshold) {
+ this.startPlaying();
+ }
+ }
+
+ // 异步解码音频，不阻塞主线程
+ async decodeAudio() {
+ if (this.processing || this.audioQueue.length === 0) return;
+
+ this.processing = true;
+ const chunk = this.audioQueue.shift()!;
+
+ try {
+ // 解码音频数据
+ const decodePromise = this.audioContext
+ .decodeAudioData(chunk.buffer.slice(0))
+ .then((audioBuffer) => {
+ this.decodedBuffers.push(audioBuffer);
+
+ // 如果已经可以开始播放但尚未播放，开始播放
+ if (this.canPlaying && !this.isPlaying && this.decodedBuffers.length >= this.bufferingThreshold) {
+ this.startPlaying();
+ }
+
+ const index = this.decodePromises.indexOf(decodePromise as any);
+ if (index > -1) {
+ this.decodePromises.splice(index, 1);
+ }
+ })
+ .catch((error) => {
+ console.error('音频解码错误:', error);
+ const index = this.decodePromises.indexOf(decodePromise as any);
+ if (index > -1) {
+ this.decodePromises.splice(index, 1);
+ }
+ });
+
+ this.decodePromises.push(decodePromise as any);
+ } finally {
+ this.processing = false;
+
+ // 继续处理队列中的下一个
+ if (this.audioQueue.length > 0) {
+ this.decodeAudio();
+ }
+ }
+ }
+
+ // 开始播放
+ startPlaying() {
+ if (this.decodedBuffers.length === 0 || this.isPlaying) return;
+
+ this.isPlaying = true;
+ this.nextPlayTime = this.audioContext.currentTime;
+ this.scheduleNextBuffer();
+ this.emitter.emit('play-start');
+ }
+
+ // 安排播放下一个音频缓冲区
+ scheduleNextBuffer() {
+ if (this.decodedBuffers.length === 0) {
+ // 没有更多缓冲区时，如果队列中也没有待解码的数据，就标记为未播放状态
+ if (this.audioQueue.length === 0 && this.decodePromises.length === 0) {
+ this.isPlaying = false;
+ this.emitter.emit('play-end', true);
+ }
+ return;
+ }
+
+ const audioBuffer = this.decodedBuffers.shift()!;
+ const source = this.audioContext.createBufferSource();
+ this.currentSource = source;
+ source.buffer = audioBuffer;
+ source.connect(this.audioContext.destination);
+
+ // 在确切的时间安排播放，确保无缝连接
+ source.start(this.nextPlayTime);
+ this.nextPlayTime = parseFloat((this.nextPlayTime + audioBuffer.duration).toFixed(4));
+ // console.log('audioBuffer.duration start', audioBuffer.duration, this.nextPlayTime);
+ // 在音频播放结束前安排下一个缓冲区（提前一点安排可以减少间隙）
+ const safetyOffset = Math.min(0.05, audioBuffer.duration / 2); // 至少提前50ms或一半时长
+ setTimeout(() => {
+ this.scheduleNextBuffer();
+ }, (audioBuffer.duration - safetyOffset) * 1000);
+
+ // 发出事件通知
+ this.emitter.emit('playing', { duration: audioBuffer.duration });
+
+ // 如果缓冲区不足，继续解码
+ if (this.decodedBuffers.length < this.bufferingThreshold && this.audioQueue.length > 0 && !this.processing) {
+ this.decodeAudio();
+ }
+ }
+
+ // 处理WebSocket接收到的音频数据
+ handleWebSocketAudio(data: any) {
+ if (data && data.audio) {
+ this.appendAudioChunk(data.audio);
+ }
+ }
+
+ // 停止播放
+ stop() {
+ if (this.currentSource) {
+ try {
+ this.currentSource.stop();
+ } catch (e) {
+ // 可能已经停止，忽略错误
+ }
+ this.currentSource.disconnect();
+ this.currentSource = null;
+ }
+
+ this.audioQueue = [];
+ this.decodedBuffers = [];
+ this.decodePromises = [];
+ this.processing = false;
+ this.isPlaying = false;
+ this.canPlaying = false;
+ this.nextPlayTime = 0;
+ this.emitter.emit('stopped');
+ }
+
+ setCanPlaying(canPlaying = true) {
+ this.canPlaying = canPlaying;
+
+ // 如果设置为可播放，且有足够的解码缓冲区，则开始播放
+ if (canPlaying && !this.isPlaying && this.decodedBuffers.length >= this.bufferingThreshold) {
+ this.startPlaying();
+ }
+ }
+}
diff --git a/src/lib/player.ts b/src/lib/player.ts
new file mode 100644
index 0000000..60a76bc
--- /dev/null
+++ b/src/lib/player.ts
@@ -0,0 +1,75 @@
+import { EventEmitter } from 'eventemitter3';
+type VideoPlayerOptions = {
+ url?: string;
+ emitter?: EventEmitter;
+};
+export class VideoPlayer {
+ url?: string;
+ isPlaying = false;
+ audio?: HTMLAudioElement;
+ emitter?: EventEmitter;
+ private endedHandler?: () => void;
+ constructor(opts?: VideoPlayerOptions) {
+ this.url = opts?.url;
+ this.emitter = opts?.emitter || new EventEmitter();
+ }
+ init() {
+ if (!this.emitter) {
+ this.emitter = new EventEmitter();
+ }
+ return this.emitter;
+ }
+ play(url?: string) {
+ if (this.isPlaying) {
+ return { code: 400 };
+ }
+ const playUrl = url || this.url;
+ if (!playUrl) {
+ return { code: 404 };
+ }
+ if (playUrl !== this.url) {
+ this.url = playUrl;
+ }
+ // 创建新的Audio对象前，确保清理之前的资源
+ if (this.audio && this.endedHandler) {
+ this.audio.removeEventListener('ended', this.endedHandler);
+ }
+
+ this.audio = new Audio(playUrl);
+ this.audio.play();
+ this.isPlaying = true;
+ this.emitter?.emit('start', { url: playUrl, status: 'start' });
+
+ // 保存引用以便于后续移除
+ this.endedHandler = () => {
+ this.audio = undefined;
+ this.isPlaying = false;
+ this.emitter?.emit('stop', this.url);
+ };
+
+ this.audio.addEventListener('ended', this.endedHandler);
+ return { code: 200 };
+ }
+ stop() {
+ if (this.isPlaying) {
+ // 移除事件监听器
+ if (this.audio && this.endedHandler) {
+ this.audio.removeEventListener('ended', this.endedHandler);
+ }
+ this.audio?.pause();
+ this.audio = undefined;
+ this.isPlaying = false;
+ }
+ this.emitter?.emit('stop', this.url);
+ }
+ onStop(callback: (url: string) => void) {
+ this.emitter?.on('stop', callback);
+ return () => {
+ this.emitter?.off('stop', callback);
+ };
+ }
+ close() {
+ this.emitter?.removeAllListeners();
+ this.emitter = undefined;
+ }
+}
diff --git a/src/lib/random.ts b/src/lib/random.ts
new file mode 100644
index 0000000..8db5892
--- /dev/null
+++ b/src/lib/random.ts
@@ -0,0 +1,21 @@
+import { customAlphabet } from 'nanoid';
+
+export const letter = 'abcdefghijklmnopqrstuvwxyz';
+export const number = '0123456789';
+const alphanumeric = `${letter}${number}`;
+export const alphanumericWithDash = `${alphanumeric}-`;
+export const uuid = customAlphabet(letter);
+
+export const nanoid = customAlphabet(alphanumeric, 10);
+
+export const nanoidWithDash = customAlphabet(alphanumericWithDash, 10);
+
+/**
+ * 创建一个随机的 id，以字母开头的字符串
+ * @param number
+ * @returns
+ */
+export const randomId = (number: number) => {
+ const _letter = uuid(1);
+ return `${_letter}${nanoid(number)}`;
+};
diff --git a/src/modules/basename.ts b/src/modules/basename.ts
new file mode 100644
index 0000000..e647be9
--- /dev/null
+++ b/src/modules/basename.ts
@@ -0,0 +1,4 @@
+// @ts-ignore
+export const basename = BASE_NAME;
+
+console.log(basename);
\ No newline at end of file
diff --git a/src/modules/query.ts b/src/modules/query.ts
index 60abe1e..f7c25d9 100644
--- a/src/modules/query.ts
+++ b/src/modules/query.ts
@@ -1,3 +1,5 @@
import { Query } from '@kevisual/query';
export const query = new Query();
+
+export const clientQuery = new Query({ url: '/client/router' });
diff --git a/src/modules/toast/Provider.tsx b/src/modules/toast/Provider.tsx
new file mode 100644
index 0000000..da8f8c8
--- /dev/null
+++ b/src/modules/toast/Provider.tsx
@@ -0,0 +1,13 @@
+import { ToastContainer } from 'react-toastify';
+
+type ToastProviderProps = {
+ children?: React.ReactNode;
+};
+export const ToastProvider = ({ children }: ToastProviderProps) => {
+ return (
+ <>
+ {children}
+
+
+ );
+};
diff --git a/src/modules/toast/ToastLogin.tsx b/src/modules/toast/ToastLogin.tsx
new file mode 100644
index 0000000..c1c2a22
--- /dev/null
+++ b/src/modules/toast/ToastLogin.tsx
@@ -0,0 +1,52 @@
+import { toast } from 'react-toastify';
+// Custom message component
+const LoginMessage = (props: ToastLoginProps) => {
+ const lng = props.lng || 'zh';
+ const isZH = lng === 'zh';
+ const en = {
+ 'Please login': 'Please login',
+ 'Click here to go to the login page.': 'Click here to go to the login page.',
+ };
+ const zh = {
+ 'Please login': '请登录',
+ 'Click here to go to the login page.': '点击这里前往登录页面',
+ };
+ const t = isZH ? zh : en;
+ const handleClick = () => {
+ const currentUrl = window.location.href;
+ const redirect = encodeURIComponent(props?.redirectUrl || currentUrl);
+ const loginUrl = props?.loginUrl || '/user/login/';
+ const newUrl = location.origin + loginUrl + '?redirect=' + redirect;
+ window.open(newUrl, '_self');
+ };
+
+ return (
+
+ {t['Please login']}
+ {t['Click here to go to the login page.']}
+ {post.data.title}
+
+
diff --git a/src/pages/blogs/articles/index.astro b/src/pages/blogs/articles/index.astro
new file mode 100644
index 0000000..4c1aa51
--- /dev/null
+++ b/src/pages/blogs/articles/index.astro
@@ -0,0 +1,22 @@
+---
+import { getCollection } from 'astro:content';
+const posts = await getCollection('blog');
+console.log('post', posts);
+import { basename } from '@/modules/basename';
+import Blank from '@/components/html/blank.astro';
+
+---
+
+
+ My posts
+
+
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 614ecac..93757e0 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,16 +1,8 @@
---
import '../styles/global.css';
-import READ from '@/data/README.md'
-
+import Blank from '@/components/html/blank.astro';
---
-
-
-
- My Homepage
-
-
- 合并一些功能模块，ai相关的，导航，文字转语音，语音转文字，对话等
-
-
-
+
+ sdf
+
diff --git a/src/query/index.ts b/src/query/index.ts
new file mode 100644
index 0000000..cff06fa
--- /dev/null
+++ b/src/query/index.ts
@@ -0,0 +1,7 @@
+import { Query } from '@kevisual/query';
+
+export const query = new Query();
+
+export const clientQuery = new Query({ url: '/client/router' });
+
+export { QueryUtil } from '@kevisual/router/define';
diff --git a/src/query/query-app/defines/index.ts b/src/query/query-app/defines/index.ts
new file mode 100644
index 0000000..2a74834
--- /dev/null
+++ b/src/query/query-app/defines/index.ts
@@ -0,0 +1,3 @@
+import { appDefine } from './user-app-list';
+import { userAppDefine } from './user-app';
+export { appDefine, userAppDefine };
diff --git a/src/query/query-app/defines/user-app-list.ts b/src/query/query-app/defines/user-app-list.ts
new file mode 100644
index 0000000..b887e87
--- /dev/null
+++ b/src/query/query-app/defines/user-app-list.ts
@@ -0,0 +1,62 @@
+import { QueryUtil } from '@/query/index.ts';
+
+export const appDefine = QueryUtil.create({
+ getApp: {
+ path: 'app',
+ key: 'get',
+ description: '获取应用信息',
+ },
+
+ updateApp: {
+ path: 'app',
+ key: 'update',
+ description: '更新应用信息',
+ },
+
+ deleteApp: {
+ path: 'app',
+ key: 'delete',
+ description: '删除应用信息',
+ },
+
+ listApps: {
+ path: 'app',
+ key: 'list',
+ description: '列出所有应用信息',
+ },
+
+ canUploadFiles: {
+ path: 'app',
+ key: 'canUploadFiles',
+ description: '检查是否可以上传文件',
+ },
+
+ uploadFiles: {
+ path: 'app',
+ key: 'uploadFiles',
+ description: '上传文件',
+ },
+
+ publishApp: {
+ path: 'app',
+ key: 'publish',
+ description: '发布应用',
+ },
+
+ getMinioList: {
+ path: 'app',
+ key: 'get-minio-list',
+ description: '获取 MinIO 文件列表',
+ },
+
+ detectVersionList: {
+ path: 'app',
+ key: 'detectVersionList',
+ description: '检测版本列表并同步 MinIO 数据',
+ },
+ publicList: {
+ path: 'app',
+ key: 'public-list',
+ description: '获取公开应用列表',
+ },
+});
diff --git a/src/query/query-app/defines/user-app.ts b/src/query/query-app/defines/user-app.ts
new file mode 100644
index 0000000..9b517f5
--- /dev/null
+++ b/src/query/query-app/defines/user-app.ts
@@ -0,0 +1,33 @@
+import { QueryUtil } from '@/query/index.ts';
+
+export const userAppDefine = QueryUtil.create({
+ listUserApps: {
+ path: 'user-app',
+ key: 'list',
+ description: '列出当前用户的所有应用（不包含 data 字段）',
+ },
+
+ getUserApp: {
+ path: 'user-app',
+ key: 'get',
+ description: '获取用户应用信息，可以指定 id 或 key',
+ },
+
+ updateUserApp: {
+ path: 'user-app',
+ key: 'update',
+ description: '更新或创建用户应用',
+ },
+
+ deleteUserApp: {
+ path: 'user-app',
+ key: 'delete',
+ description: '删除用户应用及关联数据',
+ },
+
+ testUserApp: {
+ path: 'user-app',
+ key: 'test',
+ description: '对 user-app 的数据进行测试，获取版本信息',
+ },
+});
diff --git a/src/query/query-app/query-app-define.ts b/src/query/query-app/query-app-define.ts
new file mode 100644
index 0000000..23e8118
--- /dev/null
+++ b/src/query/query-app/query-app-define.ts
@@ -0,0 +1 @@
+export * from './defines/index.ts';
diff --git a/src/query/query-app/query-app.ts b/src/query/query-app/query-app.ts
new file mode 100644
index 0000000..6f882f7
--- /dev/null
+++ b/src/query/query-app/query-app.ts
@@ -0,0 +1,18 @@
+import { appDefine, userAppDefine } from './defines/index.ts';
+
+import { BaseQuery, DataOpts, Query } from '@kevisual/query/query';
+
+export { appDefine, userAppDefine };
+
+export class QueryApp extends BaseQuery {
+ appDefine = appDefine;
+ userAppDefine = userAppDefine;
+ constructor(opts?: { query: Query }) {
+ super(opts!);
+ this.appDefine.query = this.query;
+ this.userAppDefine.query = this.query;
+ }
+ getList(data: any, opts?: DataOpts) {
+ return this.appDefine.queryChain('listApps').post(data, opts);
+ }
+}
diff --git a/src/styles/global.css b/src/styles/global.css
index 7404224..b7d9eec 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -1,6 +1,5 @@
@import 'tailwindcss';
@import "tw-animate-css";
-
@custom-variant dark (&:is(.dark *));
@theme inline {
diff --git a/src/styles/styles/global.css b/src/styles/styles/global.css
new file mode 100644
index 0000000..b7d9eec
--- /dev/null
+++ b/src/styles/styles/global.css
@@ -0,0 +1,119 @@
+@import 'tailwindcss';
+@import "tw-animate-css";
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+ --radius-sm: calc(var(--radius) - 4px);
+ --radius-md: calc(var(--radius) - 2px);
+ --radius-lg: var(--radius);
+ --radius-xl: calc(var(--radius) + 4px);
+ --color-background: var(--background);
+ --color-foreground: var(--foreground);
+ --color-card: var(--card);
+ --color-card-foreground: var(--card-foreground);
+ --color-popover: var(--popover);
+ --color-popover-foreground: var(--popover-foreground);
+ --color-primary: var(--primary);
+ --color-primary-foreground: var(--primary-foreground);
+ --color-secondary: var(--secondary);
+ --color-secondary-foreground: var(--secondary-foreground);
+ --color-muted: var(--muted);
+ --color-muted-foreground: var(--muted-foreground);
+ --color-accent: var(--accent);
+ --color-accent-foreground: var(--accent-foreground);
+ --color-destructive: var(--destructive);
+ --color-border: var(--border);
+ --color-input: var(--input);
+ --color-ring: var(--ring);
+ --color-chart-1: var(--chart-1);
+ --color-chart-2: var(--chart-2);
+ --color-chart-3: var(--chart-3);
+ --color-chart-4: var(--chart-4);
+ --color-chart-5: var(--chart-5);
+ --color-sidebar: var(--sidebar);
+ --color-sidebar-foreground: var(--sidebar-foreground);
+ --color-sidebar-primary: var(--sidebar-primary);
+ --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+ --color-sidebar-accent: var(--sidebar-accent);
+ --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+ --color-sidebar-border: var(--sidebar-border);
+ --color-sidebar-ring: var(--sidebar-ring);
+}
+
+:root {
+ --radius: 0.625rem;
+ --background: oklch(1 0 0);
+ --foreground: oklch(0.145 0 0);
+ --card: oklch(1 0 0);
+ --card-foreground: oklch(0.145 0 0);
+ --popover: oklch(1 0 0);
+ --popover-foreground: oklch(0.145 0 0);
+ --primary: oklch(0.205 0 0);
+ --primary-foreground: oklch(0.985 0 0);
+ --secondary: oklch(0.97 0 0);
+ --secondary-foreground: oklch(0.205 0 0);
+ --muted: oklch(0.97 0 0);
+ --muted-foreground: oklch(0.556 0 0);
+ --accent: oklch(0.97 0 0);
+ --accent-foreground: oklch(0.205 0 0);
+ --destructive: oklch(0.577 0.245 27.325);
+ --border: oklch(0.922 0 0);
+ --input: oklch(0.922 0 0);
+ --ring: oklch(0.708 0 0);
+ --chart-1: oklch(0.646 0.222 41.116);
+ --chart-2: oklch(0.6 0.118 184.704);
+ --chart-3: oklch(0.398 0.07 227.392);
+ --chart-4: oklch(0.828 0.189 84.429);
+ --chart-5: oklch(0.769 0.188 70.08);
+ --sidebar: oklch(0.985 0 0);
+ --sidebar-foreground: oklch(0.145 0 0);
+ --sidebar-primary: oklch(0.205 0 0);
+ --sidebar-primary-foreground: oklch(0.985 0 0);
+ --sidebar-accent: oklch(0.97 0 0);
+ --sidebar-accent-foreground: oklch(0.205 0 0);
+ --sidebar-border: oklch(0.922 0 0);
+ --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+ --background: oklch(0.145 0 0);
+ --foreground: oklch(0.985 0 0);
+ --card: oklch(0.205 0 0);
+ --card-foreground: oklch(0.985 0 0);
+ --popover: oklch(0.205 0 0);
+ --popover-foreground: oklch(0.985 0 0);
+ --primary: oklch(0.922 0 0);
+ --primary-foreground: oklch(0.205 0 0);
+ --secondary: oklch(0.269 0 0);
+ --secondary-foreground: oklch(0.985 0 0);
+ --muted: oklch(0.269 0 0);
+ --muted-foreground: oklch(0.708 0 0);
+ --accent: oklch(0.269 0 0);
+ --accent-foreground: oklch(0.985 0 0);
+ --destructive: oklch(0.704 0.191 22.216);
+ --border: oklch(1 0 0 / 10%);
+ --input: oklch(1 0 0 / 15%);
+ --ring: oklch(0.556 0 0);
+ --chart-1: oklch(0.488 0.243 264.376);
+ --chart-2: oklch(0.696 0.17 162.48);
+ --chart-3: oklch(0.769 0.188 70.08);
+ --chart-4: oklch(0.627 0.265 303.9);
+ --chart-5: oklch(0.645 0.246 16.439);
+ --sidebar: oklch(0.205 0 0);
+ --sidebar-foreground: oklch(0.985 0 0);
+ --sidebar-primary: oklch(0.488 0.243 264.376);
+ --sidebar-primary-foreground: oklch(0.985 0 0);
+ --sidebar-accent: oklch(0.269 0 0);
+ --sidebar-accent-foreground: oklch(0.985 0 0);
+ --sidebar-border: oklch(1 0 0 / 10%);
+ --sidebar-ring: oklch(0.556 0 0);
+}
+
+@layer base {
+ * {
+ @apply border-border outline-ring/50;
+ }
+ body {
+ @apply bg-background text-foreground;
+ }
+}
\ No newline at end of file
diff --git a/src/styles/styles/styles/global.css b/src/styles/styles/styles/global.css
new file mode 100644
index 0000000..b7d9eec
--- /dev/null
+++ b/src/styles/styles/styles/global.css
@@ -0,0 +1,119 @@
+@import 'tailwindcss';
+@import "tw-animate-css";
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+ --radius-sm: calc(var(--radius) - 4px);
+ --radius-md: calc(var(--radius) - 2px);
+ --radius-lg: var(--radius);
+ --radius-xl: calc(var(--radius) + 4px);
+ --color-background: var(--background);
+ --color-foreground: var(--foreground);
+ --color-card: var(--card);
+ --color-card-foreground: var(--card-foreground);
+ --color-popover: var(--popover);
+ --color-popover-foreground: var(--popover-foreground);
+ --color-primary: var(--primary);
+ --color-primary-foreground: var(--primary-foreground);
+ --color-secondary: var(--secondary);
+ --color-secondary-foreground: var(--secondary-foreground);
+ --color-muted: var(--muted);
+ --color-muted-foreground: var(--muted-foreground);
+ --color-accent: var(--accent);
+ --color-accent-foreground: var(--accent-foreground);
+ --color-destructive: var(--destructive);
+ --color-border: var(--border);
+ --color-input: var(--input);
+ --color-ring: var(--ring);
+ --color-chart-1: var(--chart-1);
+ --color-chart-2: var(--chart-2);
+ --color-chart-3: var(--chart-3);
+ --color-chart-4: var(--chart-4);
+ --color-chart-5: var(--chart-5);
+ --color-sidebar: var(--sidebar);
+ --color-sidebar-foreground: var(--sidebar-foreground);
+ --color-sidebar-primary: var(--sidebar-primary);
+ --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+ --color-sidebar-accent: var(--sidebar-accent);
+ --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+ --color-sidebar-border: var(--sidebar-border);
+ --color-sidebar-ring: var(--sidebar-ring);
+}
+
+:root {
+ --radius: 0.625rem;
+ --background: oklch(1 0 0);
+ --foreground: oklch(0.145 0 0);
+ --card: oklch(1 0 0);
+ --card-foreground: oklch(0.145 0 0);
+ --popover: oklch(1 0 0);
+ --popover-foreground: oklch(0.145 0 0);
+ --primary: oklch(0.205 0 0);
+ --primary-foreground: oklch(0.985 0 0);
+ --secondary: oklch(0.97 0 0);
+ --secondary-foreground: oklch(0.205 0 0);
+ --muted: oklch(0.97 0 0);
+ --muted-foreground: oklch(0.556 0 0);
+ --accent: oklch(0.97 0 0);
+ --accent-foreground: oklch(0.205 0 0);
+ --destructive: oklch(0.577 0.245 27.325);
+ --border: oklch(0.922 0 0);
+ --input: oklch(0.922 0 0);
+ --ring: oklch(0.708 0 0);
+ --chart-1: oklch(0.646 0.222 41.116);
+ --chart-2: oklch(0.6 0.118 184.704);
+ --chart-3: oklch(0.398 0.07 227.392);
+ --chart-4: oklch(0.828 0.189 84.429);
+ --chart-5: oklch(0.769 0.188 70.08);
+ --sidebar: oklch(0.985 0 0);
+ --sidebar-foreground: oklch(0.145 0 0);
+ --sidebar-primary: oklch(0.205 0 0);
+ --sidebar-primary-foreground: oklch(0.985 0 0);
+ --sidebar-accent: oklch(0.97 0 0);
+ --sidebar-accent-foreground: oklch(0.205 0 0);
+ --sidebar-border: oklch(0.922 0 0);
+ --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+ --background: oklch(0.145 0 0);
+ --foreground: oklch(0.985 0 0);
+ --card: oklch(0.205 0 0);
+ --card-foreground: oklch(0.985 0 0);
+ --popover: oklch(0.205 0 0);
+ --popover-foreground: oklch(0.985 0 0);
+ --primary: oklch(0.922 0 0);
+ --primary-foreground: oklch(0.205 0 0);
+ --secondary: oklch(0.269 0 0);
+ --secondary-foreground: oklch(0.985 0 0);
+ --muted: oklch(0.269 0 0);
+ --muted-foreground: oklch(0.708 0 0);
+ --accent: oklch(0.269 0 0);
+ --accent-foreground: oklch(0.985 0 0);
+ --destructive: oklch(0.704 0.191 22.216);
+ --border: oklch(1 0 0 / 10%);
+ --input: oklch(1 0 0 / 15%);
+ --ring: oklch(0.556 0 0);
+ --chart-1: oklch(0.488 0.243 264.376);
+ --chart-2: oklch(0.696 0.17 162.48);
+ --chart-3: oklch(0.769 0.188 70.08);
+ --chart-4: oklch(0.627 0.265 303.9);
+ --chart-5: oklch(0.645 0.246 16.439);
+ --sidebar: oklch(0.205 0 0);
+ --sidebar-foreground: oklch(0.985 0 0);
+ --sidebar-primary: oklch(0.488 0.243 264.376);
+ --sidebar-primary-foreground: oklch(0.985 0 0);
+ --sidebar-accent: oklch(0.269 0 0);
+ --sidebar-accent-foreground: oklch(0.985 0 0);
+ --sidebar-border: oklch(1 0 0 / 10%);
+ --sidebar-ring: oklch(0.556 0 0);
+}
+
+@layer base {
+ * {
+ @apply border-border outline-ring/50;
+ }
+ body {
+ @apply bg-background text-foreground;
+ }
+}
\ No newline at end of file
diff --git a/src/styles/theme.css b/src/styles/theme.css
new file mode 100644
index 0000000..1682289
--- /dev/null
+++ b/src/styles/theme.css
@@ -0,0 +1,78 @@
+@import 'tailwindcss';
+
+@theme {
+ --color-primary: #ffc107;
+ --color-secondary: #ffa000;
+ --color-text-primary: #000000;
+ --color-text-secondary: #000000;
+ --color-success: #28a745;
+ --color-scrollbar-thumb: #999999;
+ --color-scrollbar-track: rgba(0, 0, 0, 0.1);
+ --color-scrollbar-thumb-hover: #666666;
+ --scrollbar-color: #ffc107; /* 滚动条颜色 */
+}
+
+html,
+body {
+ width: 100%;
+ height: 100%;
+ font-size: 16px;
+ font-family: 'Montserrat', sans-serif;
+}
+/* font-family */
+@utility font-family-mon {
+ font-family: 'Montserrat', sans-serif;
+}
+@utility font-family-rob {
+ font-family: 'Roboto', sans-serif;
+}
+@utility font-family-int {
+ font-family: 'Inter', sans-serif;
+}
+@utility font-family-orb {
+ font-family: 'Orbitron', sans-serif;
+}
+@utility font-family-din {
+ font-family: 'DIN', sans-serif;
+}
+
+@utility flex-row-center {
+ @apply flex flex-row items-center justify-center;
+}
+@utility flex-col-center {
+ @apply flex flex-col items-center justify-center;
+}
+
+@utility scrollbar {
+ overflow: auto;
+ /* 整个滚动条 */
+ &::-webkit-scrollbar {
+ width: 3px;
+ height: 3px;
+ }
+ &::-webkit-scrollbar-track {
+ background-color: var(--color-scrollbar-track);
+ }
+ /* 滚动条有滑块的轨道部分 */
+ &::-webkit-scrollbar-track-piece {
+ background-color: transparent;
+ border-radius: 1px;
+ }
+
+ /* 滚动条滑块(竖向:vertical 横向:horizontal) */
+ &::-webkit-scrollbar-thumb {
+ cursor: pointer;
+ background-color: var(--color-scrollbar-thumb);
+ border-radius: 5px;
+ }
+
+ /* 滚动条滑块hover */
+ &::-webkit-scrollbar-thumb:hover {
+ background-color: var(--color-scrollbar-thumb-hover);
+ }
+
+ /* 同时有垂直和水平滚动条时交汇的部分 */
+ &::-webkit-scrollbar-corner {
+ display: block; /* 修复交汇时出现的白块 */
+ }
+}
|