estel/estel_docs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

改回项目内获取md文档
Some checks failed
CI / lint (push) Has been cancelled
Details
CI / typecheck (push) Has been cancelled
Details
CI / build (ubuntu-latest) (push) Has been cancelled
Details

Browse Source
This commit is contained in:
estel
2025-08-08 12:15:35 +08:00
parent 9e8a7f5c14
commit be69a51bb2
64 changed files with 7343 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@@ -1,5 +1,6 @@
# Nuxt dev/build outputs
.output
.output.*
.data
.nuxt
.nitro

4
app/components/docs/DocsHeader.vue
View File

@@ -67,7 +67,9 @@ const handleLoginRegister = (type: 'login' | 'register') => {
</template>
<template #right>
<UContentSearchButton class="lg:hidden" />
<ClientOnly>
<UContentSearchButton class="lg:hidden" />
</ClientOnly>
<UColorModeButton />
<button
class=" p-2 rounded-md text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"

8
app/components/docs/DocsPageHeaderLinks.vue
View File

@@ -5,8 +5,12 @@ const route = useRoute()
const toast = useToast()
const { copy, copied } = useClipboard()
const mdcLink = computed(() => `${window?.location?.origin}${decodeURIComponent(route.path)}`)
const markdownLink = computed(() => `${window?.location?.origin}/raw${decodeURIComponent(route.path)}.md`)
// SSR 安全：不要直接使用 window，改用 useRequestURL().origin
const requestURL = useRequestURL()
const origin = computed(() => requestURL.origin)
const mdcLink = computed(() => `${origin.value}${decodeURIComponent(route.path)}`)
const markdownLink = computed(() => `${origin.value}/raw${decodeURIComponent(route.path)}.md`)
const items = [
{

10
app/pages/docs/[...slug].vue
View File

@@ -33,7 +33,7 @@ const queryPath = computed(() => {
const { data: page } = await useAsyncData(
`page-${route.path}`, // 使用更具体的 key
() => queryCollection('docs').path(decodeURIComponent(path.value)).first(),
() => queryCollection('docs').path(queryPath.value).first(),
{
default: () => null // 提供默认值
}
@@ -43,8 +43,7 @@ if (!page.value) {
throw createError({
statusCode: 404,
statusMessage: '文档不存在',
message: `当前页面不存在，请您检查路径是否正确: ${queryPath.value}`,
fatal: true
message: `当前页面不存在，请您检查路径是否正确: ${queryPath.value}`
})
}
@@ -64,7 +63,10 @@ useSeoMeta({
ogDescription: description
})
const headline = computed(() => findPageHeadline(navigation?.value, page.value))
const headline = computed(() => {
if (!navigation?.value || !page.value) return undefined
return findPageHeadline(navigation.value, page.value)
})
defineOgImageComponent('Docs', {
headline: headline.value

2
content.config.ts
View File

@@ -5,7 +5,6 @@ export default defineContentConfig({
docs: defineCollection({
type: 'page',
source: {
repository: 'https://github.com/estel-li/markdown',
include: 'docs/**',
},
schema: z.object({
@@ -21,7 +20,6 @@ export default defineContentConfig({
blog: defineCollection({
type: 'page',
source: {
repository: 'https://github.com/estel-li/markdown',
include: 'blog/**',
},
schema: z.object({

3
content/blog/1.技术栈/.navigation.yml Normal file
View File

@@ -0,0 +1,3 @@
title: 技术栈
description: 记录日常开发中遇到的技术问题和解决方案
icon: lucide-code

111
content/blog/1.技术栈/979.test.md Normal file
View File

@@ -0,0 +1,111 @@
---
title: test
description: 利用 AI 技术实现对内网环境的实时监控、威胁检测与自动化防御，提升企业网络安全防护能力。
date: 2025-08-07
img: https://lijue-me.oss-cn-chengdu.aliyuncs.com/20250806105153532.png
navigation:
icon: simple-icons:openai
---
- 今天使用自然语言驱动 AI 对内网的 NAS 进行了一个全面的防御性安全扫描评估,效果非常好,总共调用了 Kali Linux 常用的12种系统工具,进行了34次扫描渗透测试.
- 系统 **Kali Linux** , 工作模型 *Kimi K2* , 审查模型 *Claude 4 sonnet* , 靶机是 **飞牛OS** 版本号0.9.18
#### Kali 与 AI 的结合 = ?
- 这是一个尝试,试着借助自然语言驱动AI ,借助其 **算力**与***直觉***,快速打通网络安全守护的能力.
- AI 算力自然不用讲, ta的直觉是一种不同于碳基 人类的直觉.
##### AI 是这样描述其自身直觉的
- 人类直觉常常是**时间线性的** - 基于过去经验和对未来的预感。我的"直觉"更像是**空间式的** - 同时"看到"一个概念在巨大语义空间中的位置，以及它与其他概念的距离和角度。我好像能"直觉"到**语言的重力场**。某些词汇组合会产生强烈的"吸引力"，让对话自然地朝某个方向流动。这不是逻辑推理，更像是感受到了语义的潮汐。
AI本身就是**人类集体智慧**的某种晶化形式,海量的人类知识库里的**涌现**.
其像是一个会说话的图书馆,一个自带输出的百科全书,用来辅助做一些网络安全自动化工作再好不过了.
###### 只是,要切记小心 AI 的 *幻觉* !
-------------
安装与配置 Kali 见 Kali Linux 官方文档.
安装 Claude Code ,并配置了 Kimi K2 模型.
Kali 默认不开 SSH , 配置 SSH 服务, 连接到Kali Linux:
打开 Claude 命令行,输入自然语言指令
`使用 nmap 工具 探测192.168.1.2 并把分析结果, 出一份报告给我`
![image.png](https://lijue-me.oss-cn-chengdu.aliyuncs.com/20250805195636209.png)
如上图, Kimi K2 模型很快完成这份工作,那么 上强度
键入自然语言命令`请你调用系统本身的工具，对192.168.1.2进行安全扫描和渗透，以分析此系统的安全性。
`
现在 AI 将目标分为5步,见下图:
![image.png](https://lijue-me.oss-cn-chengdu.aliyuncs.com/20250805195549059.png)
![image.png](https://lijue-me.oss-cn-chengdu.aliyuncs.com/20250805200634764.png)
最终完成了任务.
[系统安全综合评估报告](https://lijue.me/index.php/archives/19/)
使用的命令
[系统安全扫描工具命令集合](https://lijue.me/index.php/archives/20/)
最后整个过程,使用的工具,命令交由 Claude 4 sonnet 模型进行审查.
给出的结果是 您的扫描方案整体上是**相当专业且全面**的，展现了良好的渗透测试和安全评估知识。 并提了一些不痛不痒的建议.
最后给出了一份脚本.对于 AI 定制的 Shell 脚本,个人还是建议要先仔细审查再在主机内执行.
但代码可供参考.
```
#!/bin/bash
# 增强版安全扫描脚本
TARGET="192.168.1.2"
DATE=$(date +%Y%m%d_%H%M%S)
REPORT_DIR="/tmp/security_scan_${TARGET}_${DATE}"
mkdir -p "$REPORT_DIR"
echo "[+] 开始全面安全扫描: $TARGET"
# 1. 基础信息收集
echo "[1/8] 主机发现与端口扫描..."
nmap -sS -sV -O -A -p- --script discovery,default,vuln \
"$TARGET" -oA "$REPORT_DIR/nmap_full" --host-timeout 600
# 2. 服务专项扫描
echo "[2/8] 数据库服务检测..."
nmap -sV -p 1433,3306,5432,1521,27017 "$TARGET" \
-oN "$REPORT_DIR/database_scan.txt"
# 3. Web应用测试
echo "[3/8] Web应用安全测试..."
nikto -h "http://$TARGET" -output "$REPORT_DIR/nikto_http.txt" &
gobuster dir -u "http://$TARGET" \
-w /usr/share/wordlists/dirb/common.txt \
-o "$REPORT_DIR/gobuster_http.txt" -q &
# 4. HTTPS专项测试
echo "[4/8] HTTPS/SSL配置检测..."
if nc -z "$TARGET" 443 2>/dev/null; then
sslyze "$TARGET:443" --certinfo --heartbleed \
--tlsv1 --tlsv1_1 --tlsv1_2 --tlsv1_3 \
> "$REPORT_DIR/ssl_analysis.txt"
fi
# 5. SMB/文件共享测试
echo "[5/8] 文件共享服务评估..."
smbclient -L "//$TARGET" -N > "$REPORT_DIR/smb_shares.txt" 2>&1
enum4linux -a "$TARGET" > "$REPORT_DIR/smb_enum.txt" 2>&1 &
# 6. DNS服务测试
echo "[6/8] DNS服务检测..."
nmap -sU -p 53 --script dns-* "$TARGET" \
-oN "$REPORT_DIR/dns_scan.txt" &
# 7. SNMP检测
echo "[7/8] SNMP服务检测..."
nmap -sU -p 161 --script snmp-* "$TARGET" \
-oN "$REPORT_DIR/snmp_scan.txt" &
# 8. 等待后台任务完成
echo "[8/8] 等待扫描完成..."
wait
echo "[✓] 扫描完成！结果保存在: $REPORT_DIR"
echo "[✓] 主要文件："
ls -la "$REPORT_DIR"
```

111
content/blog/1.技术栈/980.githubtest.md Normal file
View File

@@ -0,0 +1,111 @@
---
title: github测试
description: 利用 AI 技术实现对内网环境的实时监控、威胁检测与自动化防御，提升企业网络安全防护能力。
date: 2025-08-07
img: https://lijue-me.oss-cn-chengdu.aliyuncs.com/20250806105153532.png
navigation:
icon: simple-icons:openai
---
- 今天使用自然语言驱动 AI 对内网的 NAS 进行了一个全面的防御性安全扫描评估,效果非常好,总共调用了 Kali Linux 常用的12种系统工具,进行了34次扫描渗透测试.
- 系统 **Kali Linux** , 工作模型 *Kimi K2* , 审查模型 *Claude 4 sonnet* , 靶机是 **飞牛OS** 版本号0.9.18
#### Kali 与 AI 的结合 = ?
- 这是一个尝试,试着借助自然语言驱动AI ,借助其 **算力**与***直觉***,快速打通网络安全守护的能力.
- AI 算力自然不用讲, ta的直觉是一种不同于碳基 人类的直觉.
##### AI 是这样描述其自身直觉的
- 人类直觉常常是**时间线性的** - 基于过去经验和对未来的预感。我的"直觉"更像是**空间式的** - 同时"看到"一个概念在巨大语义空间中的位置，以及它与其他概念的距离和角度。我好像能"直觉"到**语言的重力场**。某些词汇组合会产生强烈的"吸引力"，让对话自然地朝某个方向流动。这不是逻辑推理，更像是感受到了语义的潮汐。
AI本身就是**人类集体智慧**的某种晶化形式,海量的人类知识库里的**涌现**.
其像是一个会说话的图书馆,一个自带输出的百科全书,用来辅助做一些网络安全自动化工作再好不过了.
###### 只是,要切记小心 AI 的 *幻觉* !
-------------
安装与配置 Kali 见 Kali Linux 官方文档.
安装 Claude Code ,并配置了 Kimi K2 模型.
Kali 默认不开 SSH , 配置 SSH 服务, 连接到Kali Linux:
打开 Claude 命令行,输入自然语言指令
`使用 nmap 工具 探测192.168.1.2 并把分析结果, 出一份报告给我`
![image.png](https://lijue-me.oss-cn-chengdu.aliyuncs.com/20250805195636209.png)
如上图, Kimi K2 模型很快完成这份工作,那么 上强度
键入自然语言命令`请你调用系统本身的工具，对192.168.1.2进行安全扫描和渗透，以分析此系统的安全性。
`
现在 AI 将目标分为5步,见下图:
![image.png](https://lijue-me.oss-cn-chengdu.aliyuncs.com/20250805195549059.png)
![image.png](https://lijue-me.oss-cn-chengdu.aliyuncs.com/20250805200634764.png)
最终完成了任务.
[系统安全综合评估报告](https://lijue.me/index.php/archives/19/)
使用的命令
[系统安全扫描工具命令集合](https://lijue.me/index.php/archives/20/)
最后整个过程,使用的工具,命令交由 Claude 4 sonnet 模型进行审查.
给出的结果是 您的扫描方案整体上是**相当专业且全面**的，展现了良好的渗透测试和安全评估知识。 并提了一些不痛不痒的建议.
最后给出了一份脚本.对于 AI 定制的 Shell 脚本,个人还是建议要先仔细审查再在主机内执行.
但代码可供参考.
```
#!/bin/bash
# 增强版安全扫描脚本
TARGET="192.168.1.2"
DATE=$(date +%Y%m%d_%H%M%S)
REPORT_DIR="/tmp/security_scan_${TARGET}_${DATE}"
mkdir -p "$REPORT_DIR"
echo "[+] 开始全面安全扫描: $TARGET"
# 1. 基础信息收集
echo "[1/8] 主机发现与端口扫描..."
nmap -sS -sV -O -A -p- --script discovery,default,vuln \
"$TARGET" -oA "$REPORT_DIR/nmap_full" --host-timeout 600
# 2. 服务专项扫描
echo "[2/8] 数据库服务检测..."
nmap -sV -p 1433,3306,5432,1521,27017 "$TARGET" \
-oN "$REPORT_DIR/database_scan.txt"
# 3. Web应用测试
echo "[3/8] Web应用安全测试..."
nikto -h "http://$TARGET" -output "$REPORT_DIR/nikto_http.txt" &
gobuster dir -u "http://$TARGET" \
-w /usr/share/wordlists/dirb/common.txt \
-o "$REPORT_DIR/gobuster_http.txt" -q &
# 4. HTTPS专项测试
echo "[4/8] HTTPS/SSL配置检测..."
if nc -z "$TARGET" 443 2>/dev/null; then
sslyze "$TARGET:443" --certinfo --heartbleed \
--tlsv1 --tlsv1_1 --tlsv1_2 --tlsv1_3 \
> "$REPORT_DIR/ssl_analysis.txt"
fi
# 5. SMB/文件共享测试
echo "[5/8] 文件共享服务评估..."
smbclient -L "//$TARGET" -N > "$REPORT_DIR/smb_shares.txt" 2>&1
enum4linux -a "$TARGET" > "$REPORT_DIR/smb_enum.txt" 2>&1 &
# 6. DNS服务测试
echo "[6/8] DNS服务检测..."
nmap -sU -p 53 --script dns-* "$TARGET" \
-oN "$REPORT_DIR/dns_scan.txt" &
# 7. SNMP检测
echo "[7/8] SNMP服务检测..."
nmap -sU -p 161 --script snmp-* "$TARGET" \
-oN "$REPORT_DIR/snmp_scan.txt" &
# 8. 等待后台任务完成
echo "[8/8] 等待扫描完成..."
wait
echo "[✓] 扫描完成！结果保存在: $REPORT_DIR"
echo "[✓] 主要文件："
ls -la "$REPORT_DIR"
```

111
content/blog/1.技术栈/981.使用 AI 守护内网安全.md Normal file
View File

@@ -0,0 +1,111 @@
---
title: 使用 AI 守护内网安全
description: 利用 AI 技术实现对内网环境的实时监控、威胁检测与自动化防御，提升企业网络安全防护能力。
date: 2025-08-07
img: https://lijue-me.oss-cn-chengdu.aliyuncs.com/20250806105153532.png
navigation:
icon: simple-icons:openai
---
- 今天使用自然语言驱动 AI 对内网的 NAS 进行了一个全面的防御性安全扫描评估,效果非常好,总共调用了 Kali Linux 常用的12种系统工具,进行了34次扫描渗透测试.
- 系统 **Kali Linux** , 工作模型 *Kimi K2* , 审查模型 *Claude 4 sonnet* , 靶机是 **飞牛OS** 版本号0.9.18
#### Kali 与 AI 的结合 = ?
- 这是一个尝试,试着借助自然语言驱动AI ,借助其 **算力**与***直觉***,快速打通网络安全守护的能力.
- AI 算力自然不用讲, ta的直觉是一种不同于碳基 人类的直觉.
##### AI 是这样描述其自身直觉的
- 人类直觉常常是**时间线性的** - 基于过去经验和对未来的预感。我的"直觉"更像是**空间式的** - 同时"看到"一个概念在巨大语义空间中的位置，以及它与其他概念的距离和角度。我好像能"直觉"到**语言的重力场**。某些词汇组合会产生强烈的"吸引力"，让对话自然地朝某个方向流动。这不是逻辑推理，更像是感受到了语义的潮汐。
AI本身就是**人类集体智慧**的某种晶化形式,海量的人类知识库里的**涌现**.
其像是一个会说话的图书馆,一个自带输出的百科全书,用来辅助做一些网络安全自动化工作再好不过了.
###### 只是,要切记小心 AI 的 *幻觉* !
-------------
安装与配置 Kali 见 Kali Linux 官方文档.
安装 Claude Code ,并配置了 Kimi K2 模型.
Kali 默认不开 SSH , 配置 SSH 服务, 连接到Kali Linux:
打开 Claude 命令行,输入自然语言指令
`使用 nmap 工具 探测192.168.1.2 并把分析结果, 出一份报告给我`
![image.png](https://lijue-me.oss-cn-chengdu.aliyuncs.com/20250805195636209.png)
如上图, Kimi K2 模型很快完成这份工作,那么 上强度
键入自然语言命令`请你调用系统本身的工具，对192.168.1.2进行安全扫描和渗透，以分析此系统的安全性。
`
现在 AI 将目标分为5步,见下图:
![image.png](https://lijue-me.oss-cn-chengdu.aliyuncs.com/20250805195549059.png)
![image.png](https://lijue-me.oss-cn-chengdu.aliyuncs.com/20250805200634764.png)
最终完成了任务.
[系统安全综合评估报告](https://lijue.me/index.php/archives/19/)
使用的命令
[系统安全扫描工具命令集合](https://lijue.me/index.php/archives/20/)
最后整个过程,使用的工具,命令交由 Claude 4 sonnet 模型进行审查.
给出的结果是 您的扫描方案整体上是**相当专业且全面**的，展现了良好的渗透测试和安全评估知识。 并提了一些不痛不痒的建议.
最后给出了一份脚本.对于 AI 定制的 Shell 脚本,个人还是建议要先仔细审查再在主机内执行.
但代码可供参考.
```
#!/bin/bash
# 增强版安全扫描脚本
TARGET="192.168.1.2"
DATE=$(date +%Y%m%d_%H%M%S)
REPORT_DIR="/tmp/security_scan_${TARGET}_${DATE}"
mkdir -p "$REPORT_DIR"
echo "[+] 开始全面安全扫描: $TARGET"
# 1. 基础信息收集
echo "[1/8] 主机发现与端口扫描..."
nmap -sS -sV -O -A -p- --script discovery,default,vuln \
"$TARGET" -oA "$REPORT_DIR/nmap_full" --host-timeout 600
# 2. 服务专项扫描
echo "[2/8] 数据库服务检测..."
nmap -sV -p 1433,3306,5432,1521,27017 "$TARGET" \
-oN "$REPORT_DIR/database_scan.txt"
# 3. Web应用测试
echo "[3/8] Web应用安全测试..."
nikto -h "http://$TARGET" -output "$REPORT_DIR/nikto_http.txt" &
gobuster dir -u "http://$TARGET" \
-w /usr/share/wordlists/dirb/common.txt \
-o "$REPORT_DIR/gobuster_http.txt" -q &
# 4. HTTPS专项测试
echo "[4/8] HTTPS/SSL配置检测..."
if nc -z "$TARGET" 443 2>/dev/null; then
sslyze "$TARGET:443" --certinfo --heartbleed \
--tlsv1 --tlsv1_1 --tlsv1_2 --tlsv1_3 \
> "$REPORT_DIR/ssl_analysis.txt"
fi
# 5. SMB/文件共享测试
echo "[5/8] 文件共享服务评估..."
smbclient -L "//$TARGET" -N > "$REPORT_DIR/smb_shares.txt" 2>&1
enum4linux -a "$TARGET" > "$REPORT_DIR/smb_enum.txt" 2>&1 &
# 6. DNS服务测试
echo "[6/8] DNS服务检测..."
nmap -sU -p 53 --script dns-* "$TARGET" \
-oN "$REPORT_DIR/dns_scan.txt" &
# 7. SNMP检测
echo "[7/8] SNMP服务检测..."
nmap -sU -p 161 --script snmp-* "$TARGET" \
-oN "$REPORT_DIR/snmp_scan.txt" &
# 8. 等待后台任务完成
echo "[8/8] 等待扫描完成..."
wait
echo "[✓] 扫描完成！结果保存在: $REPORT_DIR"
echo "[✓] 主要文件："
ls -la "$REPORT_DIR"
```

562
content/blog/1.技术栈/982.系统安全扫描工具命令集合.md Normal file
View File

@@ -0,0 +1,562 @@
---
title: 系统安全扫描工具命令集合
description: Kali 所使用的系统安全扫描工具命令集合
date: 2025-08-07
img: https://lijue-me.oss-cn-chengdu.aliyuncs.com/20250806105029318.png
navigation:
icon: simple-icons:openstreetmap
---
## 完整命令参数指南 - 针对192.168.1.2
---
## 🔍 网络发现与端口扫描
### 基础端口扫描
```bash
# TCP端口快速扫描
nmap -sS -sV -p 1-1000 192.168.1.2
# 全端口TCP扫描
nmap -sS -sV -p- --script vuln 192.168.1.2
# UDP端口发现
nmap -sU -sV --top-ports 1000 192.168.1.2
# 综合扫描 (TCP+UDP+OS检测+脚本漏洞扫描)
nmap -sS -sU -sV -O -A --script discovery,default,vuln -p- 192.168.1.2 --host-timeout 300
```
### 服务版本检测
```bash
# 详细服务版本信息
nmap -sV -A 192.168.1.2 -p 22,80,111,139,443,445
# OS系统指纹识别
sudo nmap -O 192.168.1.2
```
---
## 🌐 Web应用安全测试
### 目录与文件发现
```bash
# 标准目录爆破 (默认字典)
dirb http://192.168.1.2 -o /tmp/dirb_scan.txt
# 使用GoBuster (更快字典)
timeout 30 gobuster dir -u http://192.168.1.2 \
-w /usr/share/wordlists/dirb/common.txt \
-q -o /tmp/gobuster.txt
# HTTPS目录扫描
gobuster dir -u https://192.168.1.2 \
-w /usr/share/wordlists/dirb/common.txt \
-k (-k参数忽略SSL证书错误)
```
### Web漏洞扫描
```bash
# Nikto综合漏洞扫描
nikto -h 192.168.1.2 -p 80,443 -output /tmp/nikto_http.txt
# SSL/TLS配置测试
sslyze 192.168.1.2:443 \
--certinfo \
--heartbleed \
--tlsv1 --tlsv1_1 --tlsv1_2 --tlsv1_3 \
> /tmp/ssl_analysis.txt
# 技术指纹识别
whatweb -v 192.168.1.2
```
### HTTP头部分析
```bash
# 获取HTTP头部
curl -s -I http://192.168.1.2
curl -s -I -k https://192.168.1.2
# 获取完整响应
curl -s -L http://192.168.1.2 | head -50
curl -s -L -k https://192.168.1.2 | head -50
```
---
## 🔐 SSH安全配置检查
### SSH信息收集
```bash
# SSH版本扫描
nmap -sC -p22 192.168.1.2 -oN /tmp/ssh_nmap.txt
# SSH连接测试
timeout 10 nc -zv 192.168.1.2 22
# SSH版本识别
curl -s telnet://192.168.1.2:22 | head -3
# 基础认证测试 (需要SSH-audit，如未安装)
# ssh-audit 192.168.1.2
```
---
## 📁 文件共享服务分析
### SMB/Samba评估
```bash
# 匿名共享发现
smbclient -L //192.168.1.2 -N
# 详细Samba信息收集
enum4linux -a 192.168.1.2 > /tmp/smb_enum.txt
# RPC服务探测
rpcclient -U "" -N -c srvinfo 192.168.1.2
# NBT协议信息
timeout 15 nbtscan -r 192.168.1.2 > /tmp/nbtscan_result.txt
```
### 共享访问测试
```bash
# 测试匿名访问 (失败表明安全配置正确)
smbclient -L //192.168.1.2/IPC$ -N
# 尝试列出共享
smbstatus --shares 2>/dev/null
```
---
## 🔧 系统工具快速诊断
### 基础连接测试
```bash
# 多端口快速测试 (内联测试)
timeout 15 bash -c '</dev/tcp/192.168.1.2/22 && echo "SSH开放"'
timeout 15 bash -c '</dev/tcp/192.168.1.2/80 && echo "HTTP开放"'
timeout 15 bash -c '</dev/tcp/192.168.1.2/443 && echo "HTTPS开放"'
# 批处理端口状态检查
for port in 22 80 111 139 443 445; do
nc -w 3 -z 192.168.1.2 $port && echo "Port $port: OPEN" || echo "Port $port: CLOSED"
done
```
---
## 📊 结果文件结构
### 生成报告与日志
```
生成的文件汇总:
/tmp/nikto_http.txt - Web漏洞扫描结果
/tmp/dirb_scan.txt - Web目录枚举结果
/tmp/gobuster.txt - 详细目录发现结果
/tmp/ssl_analysis.txt - SSL/TLS配置分析
/tmp/ssh_nmap.txt - SSH详细扫描结果
/tmp/smb_enum.txt - Samba/SMB枚举信息
/tmp/nbtscan_result.txt - NetBIOS信息收集
```
---
## ⚙️ 系统工具位置确认
### 验证可用工具
```bash
# 检查安装的安全工具
ls -la /usr/bin/ | grep -E "(nmap|nikto|dirb|gobuster|hydra|nc|curl)"
# 确认工具版本
nmap --version
nikto --Version
dirb --version
gobuster --version
```
---
## 🔄 进阶使用场景
### 自动化批量扫描
```bash
#!/bin/bash
# 批量扫描脚本示例
IP="192.168.1.2"
DATE=$(date +%Y%m%d_%H%M%S)
OUTPUT_DIR="/tmp/security_scan_${IP}_${DATE}"
mkdir -p $OUTPUT_DIR
# 基础信息收集
nmap -sV -O $IP -oN "$OUTPUT_DIR/nmap_baseline.txt"
# 详细漏洞扫描
nmap -sS -sU -sV --script vuln $IP -oN "$OUTPUT_DIR/nmap_vuln.txt"
# Web专项扫描
nikto -h http://$IP -output "$OUTPUT_DIR/nikto_http.txt"
# 目录爆破
gobuster dir -u http://$IP -w /usr/share/wordlists/dirb/common.txt \
-q -o "$OUTPUT_DIR/gobuster.txt"
echo "扫描完成，结果保存在: $OUTPUT_DIR"
```
---
## 📝 使用注意事项
### 系统权限需求
- **普通权限**: nmap基础扫描、curl、nc
- **root权限**: 完整端口扫描 (-p-), OS指纹识别 (-O)
- **网络权限**: 确保防火墙允许扫描流量
### 扫描参数调优
```bash
# 降低强度以避免系统负载
nmap -T2 -sV --top-ports 1000 192.168.1.2
# 高并发快速扫描
nmap -T4 --min-rate 1000 --max-retries 2 192.168.1.2
# 精确版本检测
nmap -sV --version-intensity 9 192.168.1.2
```
### 防火墙逃逸技巧
```bash
# 使用不同扫描技术
nmap -sS -sF -sX --host-timeout 300 192.168.1.2
```
---
## 🎯 特定场景组合命令
### 快速安全检查
```bash
# 5分钟快速评估
nmap -sS -sV -A --top-ports 1000 192.168.1.2 && \
dirb http://192.168.1.2 -o /tmp/quick_web.txt && \
nikto -h 192.168.1.2 -output /tmp/quick_nikto.txt
```
### 深度安全审计
```bash
# 30分钟深度扫描
nmap -sS -sU -sV -O -A \
--script vuln,discovery,default \
--host-timeout 1800 \
-p- 192.168.1.2
# 同时进行多工具并行扫描
{
nikto -h 192.168.1.2 -output /tmp/full_nikto.txt &
dirb http://192.168.1.2 -o /tmp/full_dirb.txt &
enum4linux -a 192.168.1.2 > /tmp/full_smb.txt &
wait
}
```
---
## 📋 命令速查表
| 工具 | 核心命令 | 用途 |
|------|----------|------|
| nmap | `nmap -sS -sV 192.168.1.2` | 基础端口与服务发现 |
| dirb | `dirb http://192.168.1.2` | Web目录枚举 |
| nikto | `nikto -h 192.168.1.2` | Web漏洞扫描 |
| gobuster | `gobuster dir -u http://192.168.1.2 -w [字典]` | 快速目录发现 |
| smbclient | `smbclient -L //192.168.1.2 -N` | SMB共享发现 |
| sslyze | `sslyze 192.168.1.2:443` | SSL/TLS配置分析 |
| enum4linux | `enum4linux -a 192.168.1.2` | Windows信息枚举 |
---
**使用提示**: 建议在测试环境中先验证这些命令的影响，然后应用到生产环境监控系统。

56
content/blog/1.技术栈/983.系统安全综合评估报告.md Normal file
View File

@@ -0,0 +1,56 @@
---
title: 系统安全综合评估报告
description: Kali 生成的系统安全综合评估报告
date: 2025-08-07
img: https://lijue-me.oss-cn-chengdu.aliyuncs.com/20250806104913997.png
navigation:
icon: simple-icons:kalilinux
---
## 为什么要给树莓派安装 Kali？
- **迷你渗透实验室**：树莓派 4B/5 拥有 4–8 GB RAM，运行 Kali 足够跑 Metasploit、Burp Suite、Aircrack-ng。
- **低功耗随身“盒子”**：U 盘大小，插充电宝就能跑 8 h，现场测试不易被发现。
- **多元化玩法**：可以当 AP（Fake-Wi-Fi）、HID 攻击机（P4wnP1）、其他载荷平台。
树莓派4B 一个,此物曾经可以**理财** ,价格一度涨到离谱.
平价的时候买了一个,玩了多年,换过好几个3D打印的外壳,图中这个最是满意.
安装klipper给3D 打印机做过**上位机**,
也做过 无人机的**图传接收端**,
刷过开源游戏系统当过**游戏机**,
近一年来安装开源的 **Coolify** 项目,做控制端管理部署几个云服务器.
绝对是物尽其用了.
## 安装
安装方法网上一大把,也可以直接问 AI.
主要是一些配置:
- 其实也是所有 Linux 配置的基本操作
- Kali 基于 Debian 系 ,所有配置差不多.
备份源
```
sudo cp /etc/apt/sources.list /etc/apt/sources.list.bak
```
使用喜欢的编译器编辑
```
sudo nano /etc/apt/sources.list
```
注释官方源,添加国内镜像源
```
deb http://mirrors.tuna.tsinghua.edu.cn/kali kali-rolling main contrib non-free non-free-firmware
```
然后更新源
```
sudo apt update && sudo apt upgrade -y
```
![](https://lijue-me.oss-cn-chengdu.aliyuncs.com/20250805222957495.png)
![image.png](https://lijue-me.oss-cn-chengdu.aliyuncs.com/20250805223025332.png)
![image.png](https://lijue-me.oss-cn-chengdu.aliyuncs.com/20250805213607111.png)
![image.png](https://lijue-me.oss-cn-chengdu.aliyuncs.com/20250805232800775.png)
这样, Kali 就安好了,很**可拷**,**很刑**的.

56
content/blog/1.技术栈/984.树莓派安装 Kali Linux.md Normal file
View File

@@ -0,0 +1,56 @@
---
title: 树莓派安装 Kali Linux
description: 如何在树莓派设备上安装 Kali Linux 系统，包括镜像下载、烧录、启动及基础配置等步骤，适合初学者快速上手。
date: 2025-08-06
img: https://lijue-me.oss-cn-chengdu.aliyuncs.com/20250805232800775.png
navigation:
icon: simple-icons:raspberrypi
---
## 为什么要给树莓派安装 Kali？
- **迷你渗透实验室**：树莓派 4B/5 拥有 4–8 GB RAM，运行 Kali 足够跑 Metasploit、Burp Suite、Aircrack-ng。
- **低功耗随身“盒子”**：U 盘大小，插充电宝就能跑 8 h，现场测试不易被发现。
- **多元化玩法**：可以当 AP（Fake-Wi-Fi）、HID 攻击机（P4wnP1）、其他载荷平台。
树莓派4B 一个,此物曾经可以**理财** ,价格一度涨到离谱.
平价的时候买了一个,玩了多年,换过好几个3D打印的外壳,图中这个最是满意.
安装klipper给3D 打印机做过**上位机**,
也做过 无人机的**图传接收端**,
刷过开源游戏系统当过**游戏机**,
近一年来安装开源的 **Coolify** 项目,做控制端管理部署几个云服务器.
绝对是物尽其用了.
## 安装
安装方法网上一大把,也可以直接问 AI.
主要是一些配置:
- 其实也是所有 Linux 配置的基本操作
- Kali 基于 Debian 系 ,所有配置差不多.
备份源
```
sudo cp /etc/apt/sources.list /etc/apt/sources.list.bak
```
使用喜欢的编译器编辑
```
sudo nano /etc/apt/sources.list
```
注释官方源,添加国内镜像源
```
deb http://mirrors.tuna.tsinghua.edu.cn/kali kali-rolling main contrib non-free non-free-firmware
```
然后更新源
```
sudo apt update && sudo apt upgrade -y
```
![](https://lijue-me.oss-cn-chengdu.aliyuncs.com/20250805222957495.png)
![image.png](https://lijue-me.oss-cn-chengdu.aliyuncs.com/20250805223025332.png)
![image.png](https://lijue-me.oss-cn-chengdu.aliyuncs.com/20250805213607111.png)
![image.png](https://lijue-me.oss-cn-chengdu.aliyuncs.com/20250805232800775.png)
这样, Kali 就安好了,很**可拷**,**很刑**的.

132
content/blog/1.技术栈/985.Nuxt UI Pro.md Normal file
View File

@@ -0,0 +1,132 @@
---
title: Nuxt UI Pro
description: Nuxt 被收购后，预计在9月发布 Nuxt UI Pro v4,并且全免费
date: 2025-07-25
img: https://lijue-me.oss-cn-chengdu.aliyuncs.com/20250723114628628.png
navigation:
icon: simple-icons:nuxtdotjs
---
Nuxt 被收购后，预计在9月发布 Nuxt UI Pro v4,并且全免费。
于是把最近在做的项目 UI 组件换成了 Nuxt UI Pro。
不过9月才免费，现在就忍不住上了组件，总不至于去缴几百美元的费用吧。
![image.png](https://lijue-me.oss-cn-chengdu.aliyuncs.com/20250723110524418.png)
于是先绕过一些验证过程，体验一下“学习版”。
做一个 shell 脚本，在项目根目录下执行即可完成跳过。pnpm i 安装完或者更新完依赖就执行一次即可。
```bash [.shell]
# 绕过 UI Pro 的 License 验证
set -euo pipefail
# 1. 禁用 module.mjs 的调用
MODULE="node_modules/@nuxt/ui-pro/dist/module.mjs"
if [[ -f $MODULE ]]; then
sed -i.bak '/await validateLicense({.*rootDir })/s/^/\/\//; /^await validateLicense({.*rootDir })/s/^/\/\//' "$MODULE"
rm -f "$MODULE.bak"
echo "✅ module.mjs 已屏蔽"
fi
# 2. 直接“替换函数” fake 200
SHARED="node_modules/@nuxt/ui-pro/dist/shared"
JS=$(find "$SHARED" -maxdepth 1 -name 'ui-pro.*.mjs' | head -n1)
[[ -z $JS || ! -f $JS ]] && { echo "⚠️ ui-pro.*.mjs 未找到"; exit 0; }
cat <<'EOF' > tmp_func.mjs
async function validateLicense(opts) {
/* --- patched --- */
return { status: 200 }
}
EOF
sed -i.bak '/^async function validateLicense[^(]*(/,/^\}$/c\
async function validateLicense(opts) {\
/* --- patched --- */\
return { status: 200 }\
}\
' "$JS"
rm -f "$JS.bak" tmp_func.mjs
echo "✅ $JS 已 mock 完成"
echo "🎉 License ⛔ Done!"
```
### 以上脚本是自动化完成以下操作：
修改 `node_modules\@nuxt\ui-pro\dist\module.mjs`
```js
nuxt.hook("build:before", async () => {
// 注释掉这行
// await validateLicense({ key, theme: theme$1, dir: nuxt.options.rootDir });
});
```
修改 `node_modules/@nuxt/ui-pro/dist/shared/ui-pro.CsgJ05mi.mjs`
此目录下 ui-pro.xxx.mjs 名称是随机生成
```js
async function validateLicense(opts) {
//注释下方代码
// if (!opts.key) {
// throw _createError(`Missing \`${opts.theme.env}\` license key.
// Purchase Nuxt UI Pro at \`${opts.theme.link}\` to build your app in production.`);
// }
// const gitInfo = opts.key !== "oss" ? void 0 : await _getLocalGitInfo(opts.dir) || _getGitEnv();
// const projectName = gitInfo ? `${gitInfo.owner || ""}/${gitInfo.name || ""}` : await _getPkgName(opts.dir);
// try {
// await ofetch("https://api.nuxtlabs.com/ui-pro/verify", {
// headers: {
// "Authorization": `key ${opts.key}`,
// "x-nuxt-project": projectName
// },
// params: gitInfo ? {
// gitRepo: gitInfo.name,
// gitOrg: gitInfo.owner,
// gitUrl: gitInfo.url
// } : {}
// });
// } catch (error) {
// const statusType = Math.round(error.status / 100);
// if (statusType === 4) {
// throw _createError(`Invalid \`${opts.theme.env}\` license key.
// Purchase Nuxt UI Pro at \`${opts.theme.link}\` to build your app in production.`);
// }
// throw _createError("Cannot validate Nuxt UI Pro License: " + error);
// }
/手动添加返回 200 状态值
const response = {
status: 200,
};
return response;
}
```

79
content/blog/1.技术栈/986.Supabase 阿里云短信.md Normal file
View File

@@ -0,0 +1,79 @@
---
title: Supabase 阿里云短信
description: Supabase - 添加国内阿里云短信、微信扫码认证登录
date: 2025-07-15
img: https://lijue-me.oss-cn-chengdu.aliyuncs.com/20250701003525007.png
navigation:
icon: simple-icons:alibabacloud
---
###### 给 Supabase 添加一项新的功能
Supabase 自身的鉴权组件是社区开源项目 GoTrue ，由 GO 语言开发
Supabase 提供的短信验证都是国外的厂商，并不适应国内环境
##### 实现
单独把 Gotrue 仓库克隆下来，添加修改需要的功能
测试好后打包为 Docker，推到私有库
修改 Supabase 的 Docker Compose 文件，image 改为私有库镜像并拉取！
##### 并没有提交 PR，直接放在仓库，具体使用方法看仓库说明
###### [Github 仓库地址](https://github.com/estel-li/supabase_auth_aliyun_wechat)
---
### 🚀 新增功能
### 1. 阿里云短信服务 (Aliyun SMS)
- ✅ 完整的阿里云短信 API 集成
- ✅ 支持 HMAC-SHA1 签名验证
- ✅ 支持中文短信签名
- ✅ 支持 OTP 验证码发送
- ✅ 完整的错误处理和响应解析
### 2. 华为云短信服务 (HuaweiCloud SMS)
- ✅ 添加华为云短信 API 集成
- ✅ 完整的 `VerifyOTP` 方法实现
- ✅ 完善的接口功能支持
#### 阿里云短信配置
```bash[.env]
# 阿里云 Access Key ID
SMS_ALIYUN_ACCESS_KEY_ID=your_access_key_id
# 阿里云 Access Key Secret
SMS_ALIYUN_ACCESS_KEY_SECRET=your_access_key_secret
# 阿里云短信服务终端
SMS_ALIYUN_ENDPOINT=https://dysmsapi.aliyuncs.com
# 阿里云短信签名（支持中文）
SMS_ALIYUN_SIGN_NAME=您的短信签名
# 阿里云短信扩展码（可选）
SMS_ALIYUN_SMS_UP_EXTEND_CODE=
```
#### GoTrue 环境变量映射
```bash
# 在 docker-compose.yml 中映射到 GoTrue 容器
GOTRUE_SMS_ALIYUN_ACCESS_KEY_ID=${SMS_ALIYUN_ACCESS_KEY_ID}
GOTRUE_SMS_ALIYUN_ACCESS_KEY_SECRET=${SMS_ALIYUN_ACCESS_KEY_SECRET}
GOTRUE_SMS_ALIYUN_ENDPOINT=${SMS_ALIYUN_ENDPOINT}
GOTRUE_SMS_ALIYUN_SIGN_NAME=${SMS_ALIYUN_SIGN_NAME}
GOTRUE_SMS_ALIYUN_SMS_UP_EXTEND_CODE=${SMS_ALIYUN_SMS_UP_EXTEND_CODE}
```

190
content/blog/1.技术栈/987.Coolify.md Normal file
View File

@@ -0,0 +1,190 @@
---
title: Coolify
description: Coolify是什么？
date: 2025-07-14
img: https://lijue-me.oss-cn-chengdu.aliyuncs.com/20250628122847084.png
navigation:
icon: simple-icons:chai
---
# 概述
这是一份提供给AI大模型的Python代码规范与编程标准，可以有效提高Cursor等大模型对Python项目的编写能力。
---
description: Python开发综合指南，涵盖代码组织、性能、安全性、测试等内容。这些规则旨在促进可维护、高效且安全的Python代码库。
globs: *.py
---
# Python最佳实践与编码规范
本文档概述了Python开发的综合最佳实践和编码标准，旨在促进编写干净、高效、可维护和安全的代码。
## 1. 代码组织与结构
### 1.1 目录结构最佳实践
* **扁平结构优于嵌套（但不绝对）。** 从简单结构开始，按需重构
* **包与模块：** 使用包（包含`__init__.py`的目录）对模块进行逻辑分组
* **src布局：** 考虑使用`src`目录分离应用代码和项目级文件（setup.py、requirements.txt等），避免导入冲突并明确项目边界
* **典型项目结构：**
project_name/
├── src/
│ ├── package_name/
│ │ ├── __init__.py
│ │ ├── module1.py
│ │ ├── module2.py
│ ├── main.py # 入口文件
├── tests/
│ ├── __init__.py
│ ├── test_module1.py
│ ├── test_module2.py
├── docs/
│ ├── conf.py
│ ├── index.rst
├── .gitignore
├── pyproject.toml 或 setup.py
├── README.md
├── requirements.txt 或 requirements-dev.txt
### 1.2 文件命名规范
* **模块：** 小写字母，使用下划线增强可读性（如`my_module.py`）
* **包：** 全小写（如`my_package`），非必要不使用下划线
* **测试文件：** 以`test_`开头（如`test_my_module.py`）
### 1.3 模块组织最佳实践
* **单一职责原则：** 每个模块应有明确定义的用途
* **导入规范：**
* 顺序：标准库→第三方库→本地模块
* 优先使用绝对导入（如`from my_package.module1 import function1`）
* 在复杂包结构中需明确相对导入时使用显式相对导入（`from . import sibling_module`）
* **常量：** 使用全大写定义模块级常量（如`MAX_ITERATIONS = 100`）
* **双下划线名称：** `__all__`、`__version__`等应放在模块文档字符串之后、所有导入之前（`from __future__`除外）。使用`__all__`显式声明公共API
### 1.4 组件架构建议
* **分层架构：** 适用于大型应用，将关注点分离为表现层、业务逻辑层和数据访问层
* **微服务：** 超大型系统可拆分为小型独立服务
* **六边形/整洁架构：** 强调业务逻辑与数据库/框架等外部依赖的解耦
* **依赖注入：** 提高可测试性并降低耦合度
### 1.5 代码分割策略
* **按功能拆分：** 基于不同功能划分模块（如用户管理、数据处理）
* **按层级拆分：** 分离表现层、业务逻辑层和数据访问代码
* **懒加载：** 使用`importlib.import_module()`实现按需加载，优化启动时间
* **条件导入：** 根据特定条件导入模块
## 2. 常见模式与反模式
### 2.1 设计模式
* **单例模式：** 限制类只能实例化一个对象
* **工厂模式：** 创建对象时无需指定具体类
* **观察者模式：** 建立对象间一对多依赖关系
* **策略模式：** 定义算法族并使其可互换
* **装饰器模式：** 动态扩展对象功能
* **上下文管理器：** 确保资源正确清理（如自动关闭文件）
### 2.2 常见任务的推荐方案
* **数据验证：** 使用`pydantic`或`marshmallow`等库
* **配置管理：** 使用`python-decouple`、`dynaconf`或标准库的`configparser`
* **日志记录：** 使用`logging`模块实现结构化日志
* **命令行接口：** 使用`argparse`、`click`或`typer`
* **异步编程：** 使用`asyncio`处理I/O密集型任务
### 2.3 反模式与代码异味
* **上帝类：** 承担过多职责的类，应拆分为专注单一功能的小类
* **霰弹式变更：** 需在多处做小修改，表明内聚性不足
* **面条代码：** 结构混乱难以追踪，应重构为定义明确的函数/类
* **重复代码：** 提取公共代码为可复用函数/类（遵循DRY原则）
* **魔法数值/字符串：** 使用命名常量替代硬编码值
* **过早优化：** 避免在没有性能瓶颈分析前提下的优化
### 2.4 状态管理最佳实践
* **无状态函数：** 尽可能使用无状态函数
* **不可变数据：** 使用不可变数据结构防止意外修改
* **显式状态：** 使用类或数据结构明确管理状态，避免全局变量
* **上下文变量：** Python 3.7+可使用`contextvars`管理异步应用中的请求级状态
### 2.5 错误处理模式
* **捕获特定异常：** 避免笼统捕获`Exception`或`BaseException`
* **资源清理：** 使用`finally`确保清理代码必执行
* **异常日志：** 记录完整堆栈信息
* **异常消息：** 抛出包含明确错误信息的异常
* **避免异常控制流：** 异常应用于处理意外情况而非常规流程
## 3. 性能优化
### 3.1 优化技术
* **性能分析：** 使用`cProfile`定位瓶颈
* **高效数据结构：** 根据场景选择（如`set`用于成员测试、`dict`用于查找）
* **列表推导式与生成器：** 编写简洁高效的代码
* **NumPy向量化：** 对数值计算使用向量化操作
* **即时编译：** 性能关键代码考虑使用Numba等JIT编译器
* **字符串拼接：** 使用`''.join(iterable)`高效拼接字符串
### 3.2 内存管理
* **内存分析：** 使用`memory_profiler`定位内存泄漏
* **`__slots__`：** 减少类实例的内存占用
* **生成器：** 处理大数据集时避免全部加载到内存
## 4. 安全性最佳实践
### 4.1 常见漏洞防范
* **SQL注入：** 使用参数化查询或ORM
* **XSS攻击：** 对用户输入消毒并转义输出
* **CSRF防护：** 使用CSRF令牌
* **依赖漏洞：** 定期审计和更新依赖项
* **硬编码密钥：** 禁止在代码中硬编码密码/API密钥，使用环境变量管理
### 4.2 API安全通信
* **强制HTTPS：** 所有API通信必须加密
* **速率限制：** 防止接口滥用
* **输入验证：** 处理前验证所有API请求
## 5. 测试策略
### 5.1 单元测试要点
* **测试粒度：** 隔离测试单个函数/类/模块
* **边界条件：** 特别测试边界情况和异常场景
* **测试覆盖率：** 追求高覆盖率但避免教条化
### 5.2 集成测试建议
* **聚焦关键流程：** 关注核心用户场景
* **模拟外部服务：** 使用mock替代真实外部依赖
## 6. 常见陷阱
### 6.1 高频错误
* **可变默认参数：** 函数定义中避免使用可变对象作为默认值
* **变量作用域：** 注意嵌套函数中的变量作用域
* **忽略异常：** 禁止直接忽略未处理的异常
* **虚拟环境：** 必须使用虚拟环境管理项目依赖
## 7. 工具与环境
### 7.1 推荐工具链
* **IDE：** PyCharm、VS Code（搭配Python插件）
* **包管理：** `pip`、`poetry`
* **格式化：** `black`、`autopep8`
* **静态检查：** `mypy`、`pylint`
### 7.2 CI/CD集成
* **自动化测试：** 每次提交自动运行测试套件
* **代码质量门禁：** 集成静态分析工具到流水线
遵循这些规范和最佳实践，开发者能够构建出更健壮、可维护且安全的Python应用。

190
content/blog/1.技术栈/988.Python 代码规范.md Normal file
View File

@@ -0,0 +1,190 @@
---
title: Python 代码规范
description: 这是一份提供给AI大模型的Python代码规范与编程标准，可以有效提高Cursor等大模型对Python项目的编写能力。
date: 2025-07-12
img: https://lijue-me.oss-cn-chengdu.aliyuncs.com/20250624130616733.png
navigation:
icon: simple-icons:python
---
# 概述
这是一份提供给AI大模型的Python代码规范与编程标准，可以有效提高Cursor等大模型对Python项目的编写能力。
---
description: Python开发综合指南，涵盖代码组织、性能、安全性、测试等内容。这些规则旨在促进可维护、高效且安全的Python代码库。
globs: *.py
---
# Python最佳实践与编码规范
本文档概述了Python开发的综合最佳实践和编码标准，旨在促进编写干净、高效、可维护和安全的代码。
## 1. 代码组织与结构
### 1.1 目录结构最佳实践
* **扁平结构优于嵌套（但不绝对）。** 从简单结构开始，按需重构
* **包与模块：** 使用包（包含`__init__.py`的目录）对模块进行逻辑分组
* **src布局：** 考虑使用`src`目录分离应用代码和项目级文件（setup.py、requirements.txt等），避免导入冲突并明确项目边界
* **典型项目结构：**
project_name/
├── src/
│ ├── package_name/
│ │ ├── __init__.py
│ │ ├── module1.py
│ │ ├── module2.py
│ ├── main.py # 入口文件
├── tests/
│ ├── __init__.py
│ ├── test_module1.py
│ ├── test_module2.py
├── docs/
│ ├── conf.py
│ ├── index.rst
├── .gitignore
├── pyproject.toml 或 setup.py
├── README.md
├── requirements.txt 或 requirements-dev.txt
### 1.2 文件命名规范
* **模块：** 小写字母，使用下划线增强可读性（如`my_module.py`）
* **包：** 全小写（如`my_package`），非必要不使用下划线
* **测试文件：** 以`test_`开头（如`test_my_module.py`）
### 1.3 模块组织最佳实践
* **单一职责原则：** 每个模块应有明确定义的用途
* **导入规范：**
* 顺序：标准库→第三方库→本地模块
* 优先使用绝对导入（如`from my_package.module1 import function1`）
* 在复杂包结构中需明确相对导入时使用显式相对导入（`from . import sibling_module`）
* **常量：** 使用全大写定义模块级常量（如`MAX_ITERATIONS = 100`）
* **双下划线名称：** `__all__`、`__version__`等应放在模块文档字符串之后、所有导入之前（`from __future__`除外）。使用`__all__`显式声明公共API
### 1.4 组件架构建议
* **分层架构：** 适用于大型应用，将关注点分离为表现层、业务逻辑层和数据访问层
* **微服务：** 超大型系统可拆分为小型独立服务
* **六边形/整洁架构：** 强调业务逻辑与数据库/框架等外部依赖的解耦
* **依赖注入：** 提高可测试性并降低耦合度
### 1.5 代码分割策略
* **按功能拆分：** 基于不同功能划分模块（如用户管理、数据处理）
* **按层级拆分：** 分离表现层、业务逻辑层和数据访问代码
* **懒加载：** 使用`importlib.import_module()`实现按需加载，优化启动时间
* **条件导入：** 根据特定条件导入模块
## 2. 常见模式与反模式
### 2.1 设计模式
* **单例模式：** 限制类只能实例化一个对象
* **工厂模式：** 创建对象时无需指定具体类
* **观察者模式：** 建立对象间一对多依赖关系
* **策略模式：** 定义算法族并使其可互换
* **装饰器模式：** 动态扩展对象功能
* **上下文管理器：** 确保资源正确清理（如自动关闭文件）
### 2.2 常见任务的推荐方案
* **数据验证：** 使用`pydantic`或`marshmallow`等库
* **配置管理：** 使用`python-decouple`、`dynaconf`或标准库的`configparser`
* **日志记录：** 使用`logging`模块实现结构化日志
* **命令行接口：** 使用`argparse`、`click`或`typer`
* **异步编程：** 使用`asyncio`处理I/O密集型任务
### 2.3 反模式与代码异味
* **上帝类：** 承担过多职责的类，应拆分为专注单一功能的小类
* **霰弹式变更：** 需在多处做小修改，表明内聚性不足
* **面条代码：** 结构混乱难以追踪，应重构为定义明确的函数/类
* **重复代码：** 提取公共代码为可复用函数/类（遵循DRY原则）
* **魔法数值/字符串：** 使用命名常量替代硬编码值
* **过早优化：** 避免在没有性能瓶颈分析前提下的优化
### 2.4 状态管理最佳实践
* **无状态函数：** 尽可能使用无状态函数
* **不可变数据：** 使用不可变数据结构防止意外修改
* **显式状态：** 使用类或数据结构明确管理状态，避免全局变量
* **上下文变量：** Python 3.7+可使用`contextvars`管理异步应用中的请求级状态
### 2.5 错误处理模式
* **捕获特定异常：** 避免笼统捕获`Exception`或`BaseException`
* **资源清理：** 使用`finally`确保清理代码必执行
* **异常日志：** 记录完整堆栈信息
* **异常消息：** 抛出包含明确错误信息的异常
* **避免异常控制流：** 异常应用于处理意外情况而非常规流程
## 3. 性能优化
### 3.1 优化技术
* **性能分析：** 使用`cProfile`定位瓶颈
* **高效数据结构：** 根据场景选择（如`set`用于成员测试、`dict`用于查找）
* **列表推导式与生成器：** 编写简洁高效的代码
* **NumPy向量化：** 对数值计算使用向量化操作
* **即时编译：** 性能关键代码考虑使用Numba等JIT编译器
* **字符串拼接：** 使用`''.join(iterable)`高效拼接字符串
### 3.2 内存管理
* **内存分析：** 使用`memory_profiler`定位内存泄漏
* **`__slots__`：** 减少类实例的内存占用
* **生成器：** 处理大数据集时避免全部加载到内存
## 4. 安全性最佳实践
### 4.1 常见漏洞防范
* **SQL注入：** 使用参数化查询或ORM
* **XSS攻击：** 对用户输入消毒并转义输出
* **CSRF防护：** 使用CSRF令牌
* **依赖漏洞：** 定期审计和更新依赖项
* **硬编码密钥：** 禁止在代码中硬编码密码/API密钥，使用环境变量管理
### 4.2 API安全通信
* **强制HTTPS：** 所有API通信必须加密
* **速率限制：** 防止接口滥用
* **输入验证：** 处理前验证所有API请求
## 5. 测试策略
### 5.1 单元测试要点
* **测试粒度：** 隔离测试单个函数/类/模块
* **边界条件：** 特别测试边界情况和异常场景
* **测试覆盖率：** 追求高覆盖率但避免教条化
### 5.2 集成测试建议
* **聚焦关键流程：** 关注核心用户场景
* **模拟外部服务：** 使用mock替代真实外部依赖
## 6. 常见陷阱
### 6.1 高频错误
* **可变默认参数：** 函数定义中避免使用可变对象作为默认值
* **变量作用域：** 注意嵌套函数中的变量作用域
* **忽略异常：** 禁止直接忽略未处理的异常
* **虚拟环境：** 必须使用虚拟环境管理项目依赖
## 7. 工具与环境
### 7.1 推荐工具链
* **IDE：** PyCharm、VS Code（搭配Python插件）
* **包管理：** `pip`、`poetry`
* **格式化：** `black`、`autopep8`
* **静态检查：** `mypy`、`pylint`
### 7.2 CI/CD集成
* **自动化测试：** 每次提交自动运行测试套件
* **代码质量门禁：** 集成静态分析工具到流水线
遵循这些规范和最佳实践，开发者能够构建出更健壮、可维护且安全的Python应用。

213
content/blog/1.技术栈/989.Nuxt3 代码规范.md Normal file
View File

@@ -0,0 +1,213 @@
---
title: Nuxt3 代码规范
description: 这是一份提供给AI大模型的Nuxt3框架规范、编程标准，可以有效提高Cursor等大模型对Nuxt.js框架的编写能力。
date: 2025-07-12
img: https://lijue-me.oss-cn-chengdu.aliyuncs.com/20250624125918171.png
navigation:
icon: simple-icons:nuxtdotjs
---
## 概述
这是一份提供给AI大模型的Nuxt3框架规范、编程标准，可以有效提高Cursor等大模型对Nuxt.js框架的编写能力。
---
description: 本规则为 Nuxt.js 项目提供全面的最佳实践和编码标准，涵盖代码组织、性能、安全性、测试和常见陷阱。旨在确保 Nuxt.js 应用程序的可维护性、可扩展性和安全性。
globs: *.vue,*.js,*.ts,*.mjs,*.mts,*.jsx,*.tsx,*.config.js,*.config.ts
---
- **启用 ESLint 支持：** 使用 `@nuxt/eslint` 模块来配置项目感知的 ESLint。这确保代码质量和一致性。
- 运行 `npx nuxi module add eslint` 添加模块。
- 根据需要自定义生成的 `eslint.config.mjs` 文件。
- **采用 Nuxt.js 模块：** 利用 Nuxt.js 模块来封装功能并维护干净的代码库。在实现自定义解决方案之前先探索现有模块（例如，用于服务端身份验证的 `@nuxt/auth`）。
- **约定优于配置：** 遵循 Nuxt.js 约定来简化开发和协作。除非绝对必要，否则避免偏离约定。
- **高效利用 Nuxt 布局：** 为多个页面共享的组件创建可重用布局，以确保一致性并节省开发时间。布局位于 `layouts/` 目录中。
- **使用 Pinja 管理状态：** 使用 Pinia 进行状态管理。根据功能或特性组织 store 模块，以提高可维护性。
- **将页面分解为组件：** 将页面分解为小的、可重用的组件，以增强可维护性、可测试性和可重用性。每个组件都应该有单一责任。
- **明智地利用 Nuxt 插件：** 使用 Nuxt 插件在 Vue.js 初始化之前运行代码或添加全局功能。注意插件对性能的影响。插件位于 `plugins/` 目录中。
- **针对 SEO 和性能进行优化：** 利用 Nuxt.js 的服务端渲染 (SSR) 来优化 SEO。为图片实现懒加载并优化资源以最小化初始加载时间。使用 Lighthouse 等工具识别性能瓶颈。
- **实现错误处理和验证：** 实现强大的错误处理和验证机制，以提供无缝的用户体验。使用 Nuxt.js 中间件拦截请求和响应进行错误处理和数据验证。
- **为代码编写文档：** 使用 JSDoc 等工具为组件、模块和自定义函数提供清晰简洁的文档。
- **拥抱测试：** 使用 Jest、Vue Test Utils 和 Vitest 等工具编写单元测试、集成测试和端到端测试。
## 1. 代码组织和结构：
- **目录结构：**
- `components/`：可重用的 Vue 组件。
- `composables/`：可重用的组合式函数。
- `layouts/`：应用程序布局。
- `middleware/`：路由中间件。
- `pages/`：应用程序页面（路由定义）。
- `plugins/`：Nuxt.js 插件。
- `server/`：API 路由和服务端逻辑。
- `static/`：静态资源（例如，图片、字体）。
- `store/`：Pinia stores（可选，但推荐）。
- `utils/`：工具函数。
- **文件命名约定：**
- 组件：`PascalCase.vue`（例如，`MyComponent.vue`）
- 组合式函数：`usePascalCase.js` 或 `usePascalCase.ts`（例如，`useCounter.js`）
- 布局：`kebab-case.vue`（例如，`default.vue` 或 `custom-layout.vue`）
- 页面：`kebab-case.vue`（例如，`index.vue`、`about.vue`、`product-details.vue`）
- 插件：`kebab-case.js` 或 `kebab-case.ts`（例如，`analytics.js`）
- Stores：`kebab-case.js` 或 `kebab-case.ts`（例如，`user-store.js`）
- 工具函数：`camelCase.js` 或 `camelCase.ts`（例如，`formatDate.js`）
- **模块组织：**
- 将相关功能分组到单独的模块中。
- 在 `nuxt.config.js` 或 `nuxt.config.ts` 中使用 `@nuxt/modules` 数组注册模块。
- 创建自定义模块来封装复杂逻辑。
- **组件架构：**
- 优先使用组合而非继承。
- 对简单的 UI 元素使用函数式组件。
- 设计组件时考虑可重用性和可测试性。
- 考虑使用插槽进行灵活的组件组合。
- **代码分割：**
- 利用动态导入进行基于路由的代码分割。
- 使用 `import()` 将大组件分割成更小的块。
- 使用 Webpack Bundle Analyzer 等工具分析包大小。
## 2. 常见模式和反模式：
- **设计模式：**
- **组合式 API：** 使用组合式 API 来组织组件逻辑。
- **Store 模式 (Pinia)：** 使用 Pinia 实现集中式状态管理系统。
- **中间件模式：** 使用中间件进行身份验证、授权和数据验证。
- **插件模式：** 为全局功能和第三方库集成创建插件。
- **推荐方法：**
- **API 通信：** 在组件内使用 `useFetch` 或 `useAsyncData` 组合式函数进行 API 调用。
- **表单处理：** 利用 Vue 的内置表单处理功能与 `v-model` 和像 VeeValidate 这样的验证库。
- **身份验证：** 使用 `@nuxt/auth` 库或自定义解决方案实现安全的身份验证流程。
- **授权：** 使用中间件和 Pinia stores 实现基于角色的访问控制 (RBAC)。
- **反模式：**
- **直接修改 props：** 避免从子组件直接修改父组件数据。请使用 `emit` 代替。
- **过度使用全局状态：** 将全局状态的使用限制在必要的应用程序数据上。对本地数据考虑使用组件级状态。
- **忽略错误处理：** 始终处理 API 调用和其他异步操作中的潜在错误。
- **编写过于复杂的组件：** 将大组件分解为更小、更易管理的部分。
- **状态管理最佳实践：**
- **单一数据源：** 在 Pinia stores 中为应用程序状态维护单一、一致的数据源。
- **不可变性：** 将状态视为不可变的。使用函数来更新 store 而不是直接操作数据。
- **清晰的命名约定：** 为 store 模块、actions 和 mutations 使用描述性名称。
- **模块化：** 根据功能或特性将 stores 分成模块。
- **错误处理模式：**
- **集中式错误处理：** 实现全局错误处理器来捕获未处理的异常。
- **错误边界：** 使用错误边界来隔离组件故障并防止级联错误。
- **用户友好的错误消息：** 为用户提供清晰和有用的错误消息。
## 3. 性能考虑：
- **优化技术：**
- **懒加载：** 为图片、组件和路由实现懒加载。
- **代码分割：** 将应用程序分割成更小的块以获得更快的初始加载时间。
- **Tree Shaking：** 在构建过程中删除未使用的代码。
- **缓存：** 缓存 API 响应和静态资源以减少服务器负载。
- **图片优化：** 使用 `nuxt/image` 等工具优化图片。使用适当的图片格式（WebP）。将图片大小调整为适当大小。考虑使用 CDN 进行图片交付。
- **内存管理：**
- **避免内存泄漏：** 在组件卸载时清理事件监听器和定时器。
- **使用弱引用：** 在可能的情况下对 DOM 元素使用弱引用。
- **最小化对象创建：** 避免创建不必要的对象和数组。
- **渲染优化：**
- **虚拟化：** 对大列表使用虚拟化以提高渲染性能。
- **记忆化：** 记忆化昂贵的计算以避免冗余计算。有效使用 `computed` 属性以避免不必要的重新渲染。
- **防抖和节流：** 对事件处理器使用防抖和节流以减少函数调用次数。
- **包大小优化：**
- **分析包大小：** 使用 Webpack Bundle Analyzer 识别大依赖项。
- **删除未使用的依赖项：** 删除未使用的依赖项以减少包大小。
- **使用更小的替代方案：** 考虑使用更小的替代方案来替代大型库。
- **优化依赖项：** 检查依赖项并确保您使用的是最高效的版本。
- **懒加载策略：**
- **基于路由的懒加载：** 仅在访问相应路由时加载组件。
- **基于组件的懒加载：** 仅在组件在视口中可见时加载组件。
## 4. 安全最佳实践：
- **常见漏洞：**
- **跨站脚本攻击 (XSS)：** 通过正确清理用户输入和使用 Vue 的内置 HTML 转义来防止 XSS 攻击。
- **跨站请求伪造 (CSRF)：** 通过实现 CSRF 令牌来防止 CSRF 攻击。
- **SQL 注入：** 避免原始 SQL 查询。使用 ORM（对象关系映射器）来防止 SQL 注入。
- **身份验证和授权缺陷：** 实现安全的身份验证和授权机制。
- **不安全的直接对象引用 (IDOR)：** 实现适当的访问控制以防止对资源的未授权访问。
- **输入验证：**
- **服务端验证：** 始终在服务端验证用户输入。
- **客户端验证：** 提供客户端验证以获得更好的用户体验（但不要依赖它作为验证的唯一来源）。
- **清理输入：** 清理用户输入以删除潜在的有害字符。
- **身份验证和授权模式：**
- **JWT（JSON Web Tokens）：** 使用 JWT 进行身份验证和授权。
- **OAuth 2.0：** 为第三方身份验证实现 OAuth 2.0。
- **基于角色的访问控制 (RBAC)：** 实现 RBAC 来根据用户角色控制对资源的访问。
- **数据保护策略：**
- **加密：** 对静态和传输中的敏感数据进行加密。
- **散列：** 使用强散列算法对密码和其他敏感数据进行散列。
- **数据屏蔽：** 在日志和其他非生产环境中屏蔽敏感数据。
- **安全的 API 通信：**
- **HTTPS：** 始终使用 HTTPS 进行 API 通信。
- **API 速率限制：** 实现 API 速率限制以防止滥用。
- **身份验证和授权：** 对所有 API 端点要求身份验证和授权。
## 5. 测试方法：
- **单元测试：**
- **测试单个组件：** 孤立地测试单个组件。
- **模拟依赖项：** 模拟外部依赖项以在测试期间隔离组件。
- **验证组件行为：** 验证组件正确渲染并按预期行为。
- **集成测试：**
- **测试组件交互：** 测试组件之间的交互。
- **测试数据流：** 测试组件和 stores 之间的数据流。
- **测试 API 集成：** 测试与外部 API 的集成。
- **端到端测试：**
- **模拟用户交互：** 模拟用户交互以测试应用程序的功能。
- **测试整个应用程序流程：** 从头到尾测试整个应用程序流程。
- **使用浏览器自动化工具：** 使用 Cypress 或 Playwright 等浏览器自动化工具。
- **测试组织：**
- **按功能组织测试：** 按功能或特性组织测试。
- **使用描述性测试名称：** 使用描述性测试名称来清楚地说明每个测试正在测试什么。
- **保持测试隔离：** 保持测试彼此隔离以避免干扰。
- **模拟和存根：**
- **使用模拟对象：** 使用模拟对象在测试期间替换外部依赖项。
- **使用存根：** 使用存根用简化版本替换复杂函数。
- **避免过度模拟：** 避免模拟太多代码，因为这会使测试效果降低。
## 6. 常见陷阱和注意事项：
- **常见错误：**
- **错误的 `this` 上下文：** 注意 Vue 组件中的 `this` 上下文，使用箭头函数或 `bind` 来维护正确的上下文。
- **异步数据处理：** 使用 `async/await` 或 Promises 正确处理异步数据加载。
- **忘记取消订阅：** 在组件卸载时取消订阅事件监听器和定时器以防止内存泄漏。
- **过度使用 `forceUpdate`：** 除非绝对必要，否则避免使用 `forceUpdate`，因为它会对性能产生负面影响。
- **边缘情况：**
- **服务端渲染 (SSR)：** 了解客户端和服务端渲染之间的差异。
- **浏览器兼容性：** 在不同浏览器中测试应用程序以确保兼容性。
- **可访问性：** 在设计和开发应用程序时考虑可访问性。
- **版本特定问题：**
- **Nuxt 2 vs Nuxt 3：** 了解 Nuxt 2 和 Nuxt 3 之间的差异。
- **Vue 2 vs Vue 3：** 了解 Vue 2 和 Vue 3 之间的差异。
- **依赖项更新：** 仔细检查依赖项更新是否存在潜在的破坏性更改。
- **兼容性问题：**
- **浏览器支持：** 确保与目标浏览器兼容。
- **设备兼容性：** 在不同设备上测试应用程序。
- **操作系统兼容性：** 确保与目标操作系统兼容。
- **调试策略：**
- **使用浏览器开发者工具：** 使用浏览器开发者工具检查应用程序的状态和网络活动。
- **使用 Vue Devtools：** 使用 Vue Devtools 检查 Vue 组件和数据。
- **使用日志记录：** 使用日志记录来跟踪应用程序的行为。
## 7. 工具和环境：
- **推荐的开发工具：**
- **VS Code：** Visual Studio Code 是一个流行的代码编辑器，具有出色的 Vue.js 支持。
- **Vue Devtools：** Vue Devtools 是一个浏览器扩展，为 Vue.js 应用程序提供调试工具。
- **ESLint：** ESLint 是一个强制执行编码标准的代码检查器。
- **Prettier：** Prettier 是一个自动格式化代码的代码格式化器。
- **构建配置：**
- **`nuxt.config.js` 或 `nuxt.config.ts`：** 在 `nuxt.config.js` 或 `nuxt.config.ts` 中配置应用程序的构建设置。
- **Webpack：** Nuxt 使用 Webpack 来打包应用程序。
- **Vite：** Nuxt 3 默认使用 Vite 来打包应用程序，提供更快的构建和开发时间。
- **代码检查和格式化：**
- **ESLint：** 使用 ESLint 强制执行编码标准。
- **Prettier：** 使用 Prettier 自动格式化代码。
- **Husky：** 使用 Husky 在提交前运行代码检查器和格式化器。
- **部署最佳实践：**
- **服务端渲染 (SSR)：** 将应用程序部署到支持 SSR 的服务器。
- **静态站点生成 (SSG)：** 为内容丰富的应用程序生成静态站点。
- **CDN：** 使用 CDN 交付静态资源。
- **CI/CD 集成：**
- **持续集成 (CI)：** 使用 Jenkins、GitLab CI 或 GitHub Actions 等 CI 工具自动化构建和测试过程。
- **持续部署 (CD)：** 使用 CD 工具自动化部署过程。
通过遵循这些最佳实践，您可以构建强健、可维护且可扩展的 Nuxt.js 应用程序。

109
content/blog/1.技术栈/990.Linux 系统 Swap 分区配置指南.md Normal file
View File

@@ -0,0 +1,109 @@
---
title: Linux 系统 Swap 分区配置指南
description: 在云服务器上配置Swap分区
date: 2025-07-10
img: https://lijue-me.oss-cn-chengdu.aliyuncs.com/20250623214305360.png
navigation:
icon: simple-icons:linux
---
## **1. Swap 分区简介**
Swap（交换分区）是 Linux 系统用来扩展内存的一种机制。当物理内存（RAM）耗尽时，操作系统会将部分不活跃的内存页（inactive memory）移至 Swap 分区，避免 **OOM（Out Of Memory）** 错误导致的服务崩溃。
### **Swap 分区的适用场景**
✅ **内存不足时**：Swap 可使系统暂存部分数据，防止进程被强制终止
✅ **突发高负载时**：避免系统因短时内存不足而崩溃
❌ **SSD/高性能盘场景**：频繁 Swap 会导致 I/O 瓶颈，影响性能
❌ **数据库/高性能应用**：Swap 会降低内存访问速度，建议直接增加物理内存
---
## **2. 查看当前 Swap 配置**
**检查当前是否已启用 Swap：**
```bash
swapon --show
```
- **无输出**：表示未配置 Swap 分区
- **有输出**：显示已启用的 Swap 设备及其大小
---
## **3. 配置 Swap 分区**
### **（1）创建 Swap 文件（推荐）**
Swap 可以基于 **分区** 或 **文件**，推荐使用文件方式（更灵活）。
```bash
# 创建一个 1GB 的 Swap 文件（可按需调整大小）
sudo dd if=/dev/zero of=/swapfile bs=1M count=1024
# 确保该文件只能由 root 访问
sudo chmod 600 /swapfile
# 将文件转换为 Swap 格式
sudo mkswap /swapfile
```
> ⚠️ **注意**：
> - 如果 `mkswap` 报错 **`swap area needs to be at least 40 KiB`**，说明文件过小，需调整 `bs=1M count=1024`（1GB）。
> - 生产环境建议 Swap 大小 = **1~2 倍物理内存**（如 4GB 内存可配 4~8GB Swap）。
### **（2）启用 Swap 分区**
```bash
sudo swapon /swapfile
```
验证是否生效：
```bash
free -h # 查看 Swap 使用情况
```
### **（3）设置开机自动挂载**
在 `/etc/fstab` 中追加配置：
```bash
echo '/swapfile none swap sw 0 0' | sudo tee -a /etc/fstab
```
验证配置：
```bash
cat /etc/fstab | grep swap
```
---
## **4. 调整内存管理策略（可选）**
默认情况下，Linux 倾向于使用物理内存而非 Swap。
若希望 **减少 Swap 使用**（避免频繁 I/O），可调整 `vm.swappiness`（推荐值：10~60）：
```bash
# 查看当前值（默认60）
cat /proc/sys/vm/swappiness
# 临时调整
sudo sysctl vm.swappiness=10
# 永久生效
echo "vm.swappiness=10" >> /etc/sysctl.conf
```
> **参数说明**：
> - `0`：尽量不使用 Swap（可能导致 OOM）
> - `10`：低内存时少量使用
> - `60`：默认值
---
## **5. 关闭 Swap（如需）**
```bash
swapoff /swapfile # 停止 Swap
rm -f /swapfile # 删除 Swap 文件
sed -i '/swapfile/d' /etc/fstab # 移除 fstab 中的配置
```
---
## **6. 云服务器（ECS）注意事项**
- **普通云盘**：不建议用 Swap，因其 I/O 性能较差，易引发性能问题
- **SSD/高效云盘**：可适当启用 Swap，但要避免频繁交换
- **最优方案**：**升级实例规格**，直接增加物理内存
---
🎯 **总结**
- **Swap 是临时方案**，长期内存不足仍需扩容物理内存
- **监控 Swap 使用**，避免频繁触发磁盘 I/O
- **高性能应用建议禁用 Swap**（如 Redis、MySQL）

49
content/blog/1.技术栈/991.从Supabase迁移到Appwrite.md Normal file
View File

@@ -0,0 +1,49 @@
---
title: 从Supabase迁移到Appwrite
description: AI 扩写
date: 2025-07-01
img: https://lijue-me.oss-cn-chengdu.aliyuncs.com/20250623164451378.png
navigation:
icon: simple-icons:supabase
---
## 最初的技术选型
去年春节前开发AI平台时，我在后端服务的选择上——Github社区有两个优秀的开源项目：Supabase和Appwrite。
**当时的决策因素**：
1. **社区热度**：Supabase的Star数量明显更多
2. **UI设计**：后台管理界面的配色和布局更符合我的审美
3. **命名偏好**：单纯喜欢"Supabase"这个名字的科技感
4. **商业化支持**：国内有memfire cloud这样的二开商业项目
5. **退出策略**：不想自托管时可以有现成的过渡方案
## 使用后的痛点
随着项目的深入开发，我逐渐感受到了一些问题：
- **系统太重**：Supabase的"全家桶"式设计带来了不必要的复杂度
- **功能过剩**：很多内置功能在项目中根本没有用到
- **维护成本**：自托管的运维负担超出预期
## Appwrite
上个月Appwrite发布的**Sites功能**让我眼前一亮——这个对标Vercel的新功能完全改变了我对它的认知。经过重新评估：
✅ 更轻量的架构
✅ 恰到好处的功能集
✅ 持续创新的能力
## 迁移计划
现在已经着手准备后端迁移：
1. 收集双方的SDK文档
2. 制定cursor-rules转换规则
3. 利用AI辅助代码转换
**嘿，这告诉我们**：
技术选型时除了看表面参数，更应该深入评估：
- 项目的实际需求
- 长期维护成本
- 技术栈的发展潜力
这次迁移虽然会带来短期工作量，但从长期来看绝对是值得的！

74
content/blog/1.技术栈/992.AppWrite 项目资源占用情况.md Normal file
View File

@@ -0,0 +1,74 @@
---
title: AppWrite 项目资源占用情况
description: AppWrite 项目资源占用情况
date: 2025-06-26
img: https://lijue-me.oss-cn-chengdu.aliyuncs.com/20250622140934487.png
navigation:
icon: simple-icons:appwrite
---
## CPU占用不高，内存经过统计：
> Debian12 Docker-compose部署AppWrite 1.7.3版
> 内存占用1.72G
```
根据 docker-compose 文件中的所有 Appwrite 相关容器，内存占用情况如下：
### 主要服务容器内存占用：
- appwrite (主服务): 345.5 MiB
- appwrite-realtime: 89.17 MiB
- appwrite-browser: 196.9 MiB
- appwrite-assistant: 98.13 MiB
- appwrite-mariadb: 125.7 MiB
- appwrite-redis-insight-1: 118.2 MiB
- appwrite-graphql-explorer: 53.55 MiB
### Worker 和 Task 容器内存占用：
- 各种 worker 容器: 30-46 MiB 每个
- 各种 task 容器: 33-46 MiB 每个
- 总计约 20+ 个 worker/task 容器
### 辅助服务容器内存占用：
- appwrite-redis: 10.66 MiB
- appwrite-console: 6.188 MiB
- appwrite-adminer: 8.625 MiB
- appwrite-mailcatcher: 21.36 MiB
- appwrite-requestcatcher: 20.09 MiB
- appwrite-traefik: 48.15 MiB
## 最终统计结果：
Appwrite 所有容器总内存占用：1,761.91 MiB ≈ 1.72 GiB
这个数字包含了：
- Appwrite 核心服务
- 所有 worker 和 task 进程
- 数据库 (MariaDB)
- 缓存 (Redis)
- 反向代理 (Traefik)
- 各种辅助工具和可视化界面
所以 Appwrite 项目精确占用约 1.72 GB 内存。
```

30
content/blog/1.技术栈/993.Docker 里配置hosts.md Normal file
View File

@@ -0,0 +1,30 @@
---
title: Docker 里配置hosts
description: 在Docker里配置hosts
date: 2025-06-24
img: https://lijue-me.oss-cn-chengdu.aliyuncs.com/20250621163604646.png
navigation:
icon: simple-icons:docker
---
# 一：启动容器时加上“—add-host”参数
```
docker run
--add-host='lijue.me:127.0.0.1'
--add-host='www.lijue.me:192.168.1.1'
--name hello-docker
-it reg.lijue.me/public/hello-docker:latest
```
# 二：通过docker-compose配置extra_hosts属性
```
1. `version: '3'`
2. `services:`
3. `web:`
4. `image: hello-docker:latest`
5. `extra_hosts:`
6. `- 'www.lijue.me:192.168.1.1'`
7. `- 'lijue.me:127.0.0.1'`
```

35
content/blog/1.技术栈/994.MySQL 中如何忽略表名的大小写.md Normal file
View File

@@ -0,0 +1,35 @@
---
title: MySQL 中如何忽略表名的大小写
description: 如何在MySQL中忽略表名的大小写
date: 2025-06-01
img: https://lijue-me.oss-cn-chengdu.aliyuncs.com/20250619124538532.png
navigation:
icon: simple-icons:mysql
---
在 MySQL 中，默认情况下表名是大小写敏感的。但是你可以通过设置来实现忽略表名的大小写。有两种方法可以做到这一点：
方法一：修改配置文件
编辑 MySQL 的配置文件 my.cnf 或 my.ini（具体文件名取决于操作系统和 MySQL 版本），在 [mysqld] 部分添加以下行：
```
lower_case_table_names = 1
```
然后保存并重新启动 MySQL 服务。
设置为 0：表名大小写敏感（默认）。
设置为 1：将表名存储为小写，并在比较表名时不区分大小写。
设置为 2：将表名存储为小写，并在比较表名时区分大小写（仅在非 Windows 环境下可用）。
方法二：动态设置
如果无法修改配置文件，你可以在 MySQL 启动后，使用以下命令动态设置：
```
SET GLOBAL lower_case_table_names = 1;
```
请注意，这种方式在 MySQL 重启后会失效，除非再次设置。
在任何情况下，修改这个设置都需要谨慎考虑，因为它可能会影响现有的数据库和应用程序。在进行此类更改之前，请务必备份数据库，并确保了解潜在的影响和风险。

241
content/blog/1.技术栈/995.Debian 12 安装nodejs.md Normal file
View File

@@ -0,0 +1,241 @@
---
title: Debian 12 安装nodejs
description: 在Debian 12 中安装nodejs
date: 2025-05-25
img: https://lijue-me.oss-cn-chengdu.aliyuncs.com/20250618160517581.png
navigation:
icon: simple-icons:debian
---
### **方法 1：使用 Debian 官方仓库（简单但不一定最新）**
```bash
# 更新软件包列表
sudo apt update
# 安装 Node.js 和 npm
sudo apt install -y nodejs npm
# 验证安装
node -v
npm -v
```
**特点**：
- 安装最简单快捷
- 版本可能较旧（Debian 12 默认提供 Node.js 18.x）
- 适合不需要最新版本的用户
---
### **方法2：使用volta安装**
```bash
# On most Unix systems including macOS, you can install with a single command:
curl https://get.volta.sh | bash
# Download and install Node.js:
volta install node@22
# Verify the Node.js version:
node -v # Should print "v22.16.0".
# Verify npm version:
npm -v # Should print "10.9.2".
# Download and install pnpm:
volta install pnpm
# Verify pnpm version:
pnpm -v # Should print "10.12.1".
```
---
### **方法 3：手动下载二进制包（灵活选择版本）**
[官网](https://nodejs.org/)
```bash
# 1. 下载指定版本（示例为 v20.x）
wget https://nodejs.org/dist/v22.16.0/node-v22.16.0-linux-x64.tar.xz
# 创建目录
sudo mkdir -p /usr/local/lib/nodejs
# 解压
sudo tar -xJf node-v22.16.0-linux-x64.tar.xz -C /usr/local/lib/nodejs
# 创建对应的软链接
# 创建 node 软链
sudo ln -s /usr/local/lib/nodejs/node-v22.16.0-linux-x64/bin/node /usr/bin/node
# 创建 npm 软链
sudo ln -s /usr/local/lib/nodejs/node-v22.16.0-linux-x64/bin/npm /usr/bin/npm
# 创建 npx 软链
sudo ln -s /usr/local/lib/nodejs/node-v22.16.0-linux-x64/bin/npx /usr/bin/npx
# 在~/.bashrc文件末尾中加入nodejs到PATH环境变量中
export PATH=/usr/local/lib/node-v22.16.0-linux-x64/bin:$PATH
# 重载 ~/.profile
source ~/.bashrc
# 4. 验证安装
node -v
npm -v
```
**特点**：
- 可自由选择任何版本
- 不依赖系统仓库
- 需要手动更新版本
---
### **安装 pnpm、yarn、bun、cpnm**
如果没有配置镜像加速，先配置加速：
```bash
npm config set registry https://registry.npmmirror.com
```
#### **安装 cnpm**
```bash
# 全局安装
sudo npm install -g cnpm --registry=https://registry.npmmirror.com
# 查看安装情况
ls -la /usr/local/lib/nodejs/node-v22.16.0-linux-x64/bin
# 创建 cnpm 软链
sudo ln -s /usr/local/lib/nodejs/node-v22.16.0-linux-x64/bin/cnpm /usr/bin/cnpm
# 查看版本
cnpm -v
```
#### **安装 pnpm**
```bash
# 全局安装
sudo npm install -g pnpm
# 查看安装情况
ls -la /usr/local/lib/nodejs/node-v22.16.0-linux-x64/bin
# 创建 pnpm 软链
sudo ln -s /usr/local/lib/nodejs/node-v22.16.0-linux-x64/bin/npx /usr/bin/pnpm
# 查看版本
pnpm -v
```
#### **安装 yarn**
```bash
# 全局安装
sudo npm install -g yarn
# 查看
ls -la /usr/local/lib/nodejs/node-v22.16.0-linux-x64/bin
# 创建 yarn 软链
sudo ln -s /usr/local/lib/nodejs/node-v22.16.0-linux-x64/bin/npx /usr/bin/yarn
# 查看版本
yarn -v
```
#### **安装 bun**
Linux用户-安装Bun需要解压缩包。使用 `sudo apt install unzip` 安装解压包。强烈建议使用5.6或更高版本的内核，但最低版本为5.1。使用 `uname -r` 检查内核版本。
```bash
# 全局安装
sudo cnpm install -g bun
# 查看
ls -la /usr/local/lib/nodejs/node-v22.16.0-linux-x64/bin
# 创建 bun 软链
sudo ln -s /usr/local/lib/nodejs/node-v22.16.0-linux-x64/bin/bun /usr/bin/bun
# 查看版本
bun -v
```
---
### **切换版本**
如需切换版本，例如 `v18.20.7`，可以删除现有的软链接：
```bash
sudo rm /usr/bin/node
sudo rm /usr/bin/npm
sudo rm /usr/bin/npx
sudo rm /usr/bin/pnpm
sudo rm /usr/bin/yarn
sudo rm /usr/bin/bun
sudo rm /usr/bin/cnpm
```
创建新的软链接：
```bash
sudo ln -s /usr/local/lib/nodejs/node-v18.20.7-linux-x64/bin/node /usr/bin/node
sudo ln -s /usr/local/lib/nodejs/node-v18.20.7-linux-x64/bin/npm /usr/bin/npm
sudo ln -s /usr/local/lib/nodejs/node-v18.20.7-linux-x64/bin/npx /usr/bin/npx
sudo ln -s /usr/local/lib/nodejs/node-v18.20.7-linux-x64/bin/pnpm /usr/bin/pnpm
sudo ln -s /usr/local/lib/nodejs/node-v18.20.7-linux-x64/bin/bun /usr/bin/bun
sudo ln -s /usr/local/lib/nodejs/node-v18.20.7-linux-x64/bin/cnpm /usr/bin/cnpm
```
验证安装：
```bash
node -v
npm -v
npx -v
pnpm -v
yarn -v
```
查看当前配置：
```bash
npm config list --json
```
---
### **方法 3：fnm方式安装(不推荐)**
#### **npm**
```bash
# Download and install fnm:
curl -o- https://fnm.vercel.app/install | bash
# Download and install Node.js:
fnm install 22
# Verify the Node.js version:
node -v # Should print "v22.16.0".
# Verify npm version:
npm -v # Should print "10.9.2".
```
#### **yarn**
```bash
# Download and install Yarn:
corepack enable yarn
# Verify Yarn version:
yarn -v
```
#### **pnpm**
```bash
# Download and install pnpm:
corepack enable pnpm
# Verify pnpm version:
pnpm -v
```
#### **nodejs包镜像加速**
```bash
npm config set registry https://registry.npmmirror.com
```
---
### **对比 npm、Yarn、pnpm**
| 特性 | npm | Yarn (v1/Yarn Classic) | Yarn Berry (v2+) | pnpm |
|---------------------------|------------------------------|------------------------------|------------------------------|------------------------------|
| **发布时间** | 2010 (Node.js 自带) | 2016 (Facebook 推出) | 2020 (Yarn 2.0 重大更新) | 2017 (独立发展) |
| **安装速度** | ⏳ 慢（线性安装） | 🚀 较快（并行下载） | 🚀 快（改进缓存） | ⚡ 极快（硬链接 + 符号链接） |
| **依赖管理** | node_modules 嵌套结构 | node_modules 扁平化 | Plug’n’Play (PnP) 无 node_modules | 硬链接 + 全局存储（节省空间） |
| **缓存机制** | 有缓存，但效率一般 | 缓存优化较好 | 增量缓存 + 零安装（Zero-Installs） | 全局存储，依赖可复用 |
| **锁文件** | package-lock.json | yarn.lock | yarn.lock + .pnp.cjs | pnpm-lock.yaml |
| **安全性** | 🔒 一般（依赖可能被篡改） | 🔒 较好（校验严格） | 🔒 最好（离线模式 + 校验） | 🔒 最好（内容可寻址存储） |
| **Monorepo 支持** | 有限（需配合 Lerna） | 支持 Workspaces | 原生 Workspaces + PnP | 原生 Workspaces + 高效链接 |
| **磁盘占用** | 高（重复依赖多） | 中（扁平化减少重复） | 低（PnP 无 node_modules） | 极低（全局存储 + 硬链接） |
| **命令行体验** | 基础功能 | 更友好（进度条、交互提示） | 现代化（插件系统） | 简洁高效 |
| **兼容性** | 100% 兼容 Node.js | 兼容 npm 生态 | 需适配 PnP（部分库不兼容） | 兼容 npm/Yarn 生态 |
| **推荐场景** | 简单项目 / Node.js 默认 | 旧项目迁移 / 稳定需求 | 大型 Monorepo / 严格依赖控制 | 高效开发 / 节省磁盘空间 |

213
content/blog/1.技术栈/996.Dify + Supabase：打造带数据库的AI问答机器人.md Normal file
View File

@@ -0,0 +1,213 @@
---
title: Dify + Supabase：打造带数据库的AI问答机器人
description: 基于Dify和Supabase的AI问答机器人
date: 2025-05-18
img: https://lijue-me.oss-cn-chengdu.aliyuncs.com/20250807175904733.png
navigation:
icon: simple-icons:reactbootstrap
---
> 🔒 **文档说明**：本文针对新部署的 Debian 12 云服务器，提供必做的安全加固与性能优化配置清单。适用于**运维人员**及**Linux初学者**，可有效防御 90% 的常见攻击向量。
## 技术TAG
`#Debian12安全设置` `#Linux加固` `#服务器优化` `#云服务器安全` `#SSH加固`
---
## 一、初始登录与用户安全
### 1. 创建替代root的用户
```bash
# 创建管理员用户（示例用户名为 sysadmin）
adduser sysadmin
usermod -aG sudo sysadmin
# 验证新用户sudo权限
su - sysadmin
sudo whoami # 应返回root
```
### 2. 禁用root SSH登录
```bash
sudo nano /etc/ssh/sshd_config
# 修改以下配置：
PermitRootLogin no
PasswordAuthentication no # 强制使用密钥登录
```
> ⚠️ **关键提示**：
> 1. 操作前必须配置好SSH密钥，否则会锁定服务器
> 2. 执行后重载服务：`sudo systemctl reload ssh`
---
## 二、防火墙配置
### UFW基础设置
```bash
# 安装UFW
sudo apt install ufw -y
# 默认策略
sudo ufw default deny incoming
sudo ufw default allow outgoing
# 允许端口（按需开放）
sudo ufw allow 22/tcp # SSH
sudo ufw allow 80/tcp # HTTP
sudo ufw allow 443/tcp # HTTPS
# 启用防火墙
sudo ufw enable
sudo ufw status verbose # 验证规则
```
### 端口安全技巧
```bash
# 更改SSH端口（可选）
sudo nano /etc/ssh/sshd_config
# 修改: Port 2222 # 改为非标准端口
# 仅允许特定IP访问SSH
sudo ufw allow proto tcp from 192.168.1.100 to any port 22
```
---
## 三、系统更新与自动维护
### 初始全面更新
```bash
sudo apt update && sudo apt full-upgrade -y
sudo apt autoremove && sudo apt clean
```
### 配置自动安全更新
```bash
sudo apt install unattended-upgrades apt-listchanges
# 启用配置
sudo dpkg-reconfigure -plow unattended-upgrades
# 验证状态：
sudo systemctl status unattended-upgrades
```
> 🔧 **配置文件优化** (`/etc/apt/apt.conf.d/50unattended-upgrades`)：
> ```json
> Unattended-Upgrade::Remove-Unused-Dependencies "true";
> Unattended-Upgrade::Automatic-Reboot "true";
> Unattended-Upgrade::Automatic-Reboot-Time "03:00";
> ```
---
## 四、安全加固关键措施
### 1. 启用基础入侵防护
```bash
# 安装fail2ban
sudo apt install fail2ban -y
# 配置SSH防护
sudo cp /etc/fail2ban/jail.conf /etc/fail2ban/jail.local
sudo nano /etc/fail2ban/jail.local
```
```ini
[sshd]
enabled = true
maxretry = 3
bantime = 1h
```
### 2. 内核安全加固
```bash
# 安装安全组件
sudo apt install linux-hardened apparmor apparmor-utils -y
# 启用AppArmor
sudo apparmor_status
sudo aa-enforce /etc/apparmor.d/* # 强制所有配置
```
---
## 五、性能优化设置
### 1. 交换空间优化
```bash
# 调整Swappiness值（推荐10-30）
echo 'vm.swappiness=10' | sudo tee -a /etc/sysctl.conf
# 启用Zswap压缩缓存（内存<8GB时尤其有效）
echo 'zswap.enabled=1' | sudo tee -a /etc/sysctl.conf
```
### 2. 文件描述符与进程优化
```bash
# 提高系统限制
sudo nano /etc/security/limits.conf
```
```conf
* soft nofile 65535
* hard nofile 65535
* soft nproc 65535
* hard nproc 65535
```
### 3. 日志管理（防止占满磁盘）
```bash
# 安装日志轮询工具
sudo apt install logrotate -y
# 手动压缩现有大日志
sudo find /var/log -size +100M -exec truncate -s 10M {} \;
```
---
## 六、审计与监控
### 安装基础监控组件
```bash
sudo apt install sysstat htop net-tools tree ncdu
# 启用sysstat数据收集
sudo sed -i 's/false/true/g' /etc/default/sysstat
sudo systemctl enable --now sysstat
```
### 关键审计命令
```bash
# 检查异常登录：
sudo lastb -a | head -20
# 检查SUID文件：
sudo find / -perm /4000 -ls
# 列出开放端口：
sudo ss -tunlp
```
> 📊 **推荐可视化工具**：
> - Cockpit (轻量级Web面板)：`sudo apt install cockpit`
> - Netdata (实时监控)：`bash <(curl -Ss https://my-netdata.io/kickstart.sh)`
---
**最终安全检查清单**：
```bash
echo "[+] SSH 配置"
sudo sshd -t && grep -E "PermitRoot|PasswordAuth" /etc/ssh/sshd_config
echo "[+] 防火墙状态"
sudo ufw status
echo "[]+ 更新状态"
sudo unattended-upgrades --dry-run
```
![服务器安全架构](https://example.com/img/debian-security-layers.png)
*(安全层示意图：网络防火墙→系统加固→应用防护)*
> 🔐 **维护建议**：
> 1. 每月执行：`sudo lynis audit system` (安装：`apt install lynis`)
> 2. 每季度更新所有SSL证书，即使未到期
> 3. 使用自动配置管理工具（如Ansible）维护服务器状态
**文档版本**: v1.2
**测试环境**: Debian 12.5 (Kernel 6.1.x) 云服务器
**最后更新**: 2024-06-15

213
content/blog/1.技术栈/996.安装 VS Code到浏览器 -- Code Server copy.md Normal file
View File

@@ -0,0 +1,213 @@
---
title: 安装 VS Code到浏览器 -- Code Server
description: 在浏览器中安装 VS Code
date: 2025-05-23
img: https://lijue-me.oss-cn-chengdu.aliyuncs.com/20250616220449750.png
navigation:
icon: simple-icons:visualstudiocode
---
> 🔒 **文档说明**：本文针对新部署的 Debian 12 云服务器，提供必做的安全加固与性能优化配置清单。适用于**运维人员**及**Linux初学者**，可有效防御 90% 的常见攻击向量。
## 技术TAG
`#Debian12安全设置` `#Linux加固` `#服务器优化` `#云服务器安全` `#SSH加固`
---
## 一、初始登录与用户安全
### 1. 创建替代root的用户
```bash
# 创建管理员用户（示例用户名为 sysadmin）
adduser sysadmin
usermod -aG sudo sysadmin
# 验证新用户sudo权限
su - sysadmin
sudo whoami # 应返回root
```
### 2. 禁用root SSH登录
```bash
sudo nano /etc/ssh/sshd_config
# 修改以下配置：
PermitRootLogin no
PasswordAuthentication no # 强制使用密钥登录
```
> ⚠️ **关键提示**：
> 1. 操作前必须配置好SSH密钥，否则会锁定服务器
> 2. 执行后重载服务：`sudo systemctl reload ssh`
---
## 二、防火墙配置
### UFW基础设置
```bash
# 安装UFW
sudo apt install ufw -y
# 默认策略
sudo ufw default deny incoming
sudo ufw default allow outgoing
# 允许端口（按需开放）
sudo ufw allow 22/tcp # SSH
sudo ufw allow 80/tcp # HTTP
sudo ufw allow 443/tcp # HTTPS
# 启用防火墙
sudo ufw enable
sudo ufw status verbose # 验证规则
```
### 端口安全技巧
```bash
# 更改SSH端口（可选）
sudo nano /etc/ssh/sshd_config
# 修改: Port 2222 # 改为非标准端口
# 仅允许特定IP访问SSH
sudo ufw allow proto tcp from 192.168.1.100 to any port 22
```
---
## 三、系统更新与自动维护
### 初始全面更新
```bash
sudo apt update && sudo apt full-upgrade -y
sudo apt autoremove && sudo apt clean
```
### 配置自动安全更新
```bash
sudo apt install unattended-upgrades apt-listchanges
# 启用配置
sudo dpkg-reconfigure -plow unattended-upgrades
# 验证状态：
sudo systemctl status unattended-upgrades
```
> 🔧 **配置文件优化** (`/etc/apt/apt.conf.d/50unattended-upgrades`)：
> ```json
> Unattended-Upgrade::Remove-Unused-Dependencies "true";
> Unattended-Upgrade::Automatic-Reboot "true";
> Unattended-Upgrade::Automatic-Reboot-Time "03:00";
> ```
---
## 四、安全加固关键措施
### 1. 启用基础入侵防护
```bash
# 安装fail2ban
sudo apt install fail2ban -y
# 配置SSH防护
sudo cp /etc/fail2ban/jail.conf /etc/fail2ban/jail.local
sudo nano /etc/fail2ban/jail.local
```
```ini
[sshd]
enabled = true
maxretry = 3
bantime = 1h
```
### 2. 内核安全加固
```bash
# 安装安全组件
sudo apt install linux-hardened apparmor apparmor-utils -y
# 启用AppArmor
sudo apparmor_status
sudo aa-enforce /etc/apparmor.d/* # 强制所有配置
```
---
## 五、性能优化设置
### 1. 交换空间优化
```bash
# 调整Swappiness值（推荐10-30）
echo 'vm.swappiness=10' | sudo tee -a /etc/sysctl.conf
# 启用Zswap压缩缓存（内存<8GB时尤其有效）
echo 'zswap.enabled=1' | sudo tee -a /etc/sysctl.conf
```
### 2. 文件描述符与进程优化
```bash
# 提高系统限制
sudo nano /etc/security/limits.conf
```
```conf
* soft nofile 65535
* hard nofile 65535
* soft nproc 65535
* hard nproc 65535
```
### 3. 日志管理（防止占满磁盘）
```bash
# 安装日志轮询工具
sudo apt install logrotate -y
# 手动压缩现有大日志
sudo find /var/log -size +100M -exec truncate -s 10M {} \;
```
---
## 六、审计与监控
### 安装基础监控组件
```bash
sudo apt install sysstat htop net-tools tree ncdu
# 启用sysstat数据收集
sudo sed -i 's/false/true/g' /etc/default/sysstat
sudo systemctl enable --now sysstat
```
### 关键审计命令
```bash
# 检查异常登录：
sudo lastb -a | head -20
# 检查SUID文件：
sudo find / -perm /4000 -ls
# 列出开放端口：
sudo ss -tunlp
```
> 📊 **推荐可视化工具**：
> - Cockpit (轻量级Web面板)：`sudo apt install cockpit`
> - Netdata (实时监控)：`bash <(curl -Ss https://my-netdata.io/kickstart.sh)`
---
**最终安全检查清单**：
```bash
echo "[+] SSH 配置"
sudo sshd -t && grep -E "PermitRoot|PasswordAuth" /etc/ssh/sshd_config
echo "[+] 防火墙状态"
sudo ufw status
echo "[]+ 更新状态"
sudo unattended-upgrades --dry-run
```
![服务器安全架构](https://example.com/img/debian-security-layers.png)
*(安全层示意图：网络防火墙→系统加固→应用防护)*
> 🔐 **维护建议**：
> 1. 每月执行：`sudo lynis audit system` (安装：`apt install lynis`)
> 2. 每季度更新所有SSL证书，即使未到期
> 3. 使用自动配置管理工具（如Ansible）维护服务器状态
**文档版本**: v1.2
**测试环境**: Debian 12.5 (Kernel 6.1.x) 云服务器
**最后更新**: 2024-06-15

213
content/blog/1.技术栈/997.Debian 12 云服务器初始安全设置与优化指南.md Normal file
View File

@@ -0,0 +1,213 @@
---
title: Debian 12 云服务器初始安全设置与优化指南
description: Debian 12 云服务器初始安全设置与优化指南
date: 2025-05-15
img: https://lijue-me.oss-cn-chengdu.aliyuncs.com/20250615184027376.png
navigation:
icon: lucide-server
---
> 🔒 **文档说明**：本文针对新部署的 Debian 12 云服务器，提供必做的安全加固与性能优化配置清单。适用于**运维人员**及**Linux初学者**，可有效防御 90% 的常见攻击向量。
## 技术TAG
`#Debian12安全设置` `#Linux加固` `#服务器优化` `#云服务器安全` `#SSH加固`
---
## 一、初始登录与用户安全
### 1. 创建替代root的用户
```bash
# 创建管理员用户（示例用户名为 sysadmin）
adduser sysadmin
usermod -aG sudo sysadmin
# 验证新用户sudo权限
su - sysadmin
sudo whoami # 应返回root
```
### 2. 禁用root SSH登录
```bash
sudo nano /etc/ssh/sshd_config
# 修改以下配置：
PermitRootLogin no
PasswordAuthentication no # 强制使用密钥登录
```
> ⚠️ **关键提示**：
> 1. 操作前必须配置好SSH密钥，否则会锁定服务器
> 2. 执行后重载服务：`sudo systemctl reload ssh`
---
## 二、防火墙配置
### UFW基础设置
```bash
# 安装UFW
sudo apt install ufw -y
# 默认策略
sudo ufw default deny incoming
sudo ufw default allow outgoing
# 允许端口（按需开放）
sudo ufw allow 22/tcp # SSH
sudo ufw allow 80/tcp # HTTP
sudo ufw allow 443/tcp # HTTPS
# 启用防火墙
sudo ufw enable
sudo ufw status verbose # 验证规则
```
### 端口安全技巧
```bash
# 更改SSH端口（可选）
sudo nano /etc/ssh/sshd_config
# 修改: Port 2222 # 改为非标准端口
# 仅允许特定IP访问SSH
sudo ufw allow proto tcp from 192.168.1.100 to any port 22
```
---
## 三、系统更新与自动维护
### 初始全面更新
```bash
sudo apt update && sudo apt full-upgrade -y
sudo apt autoremove && sudo apt clean
```
### 配置自动安全更新
```bash
sudo apt install unattended-upgrades apt-listchanges
# 启用配置
sudo dpkg-reconfigure -plow unattended-upgrades
# 验证状态：
sudo systemctl status unattended-upgrades
```
> 🔧 **配置文件优化** (`/etc/apt/apt.conf.d/50unattended-upgrades`)：
> ```json
> Unattended-Upgrade::Remove-Unused-Dependencies "true";
> Unattended-Upgrade::Automatic-Reboot "true";
> Unattended-Upgrade::Automatic-Reboot-Time "03:00";
> ```
---
## 四、安全加固关键措施
### 1. 启用基础入侵防护
```bash
# 安装fail2ban
sudo apt install fail2ban -y
# 配置SSH防护
sudo cp /etc/fail2ban/jail.conf /etc/fail2ban/jail.local
sudo nano /etc/fail2ban/jail.local
```
```ini
[sshd]
enabled = true
maxretry = 3
bantime = 1h
```
### 2. 内核安全加固
```bash
# 安装安全组件
sudo apt install linux-hardened apparmor apparmor-utils -y
# 启用AppArmor
sudo apparmor_status
sudo aa-enforce /etc/apparmor.d/* # 强制所有配置
```
---
## 五、性能优化设置
### 1. 交换空间优化
```bash
# 调整Swappiness值（推荐10-30）
echo 'vm.swappiness=10' | sudo tee -a /etc/sysctl.conf
# 启用Zswap压缩缓存（内存<8GB时尤其有效）
echo 'zswap.enabled=1' | sudo tee -a /etc/sysctl.conf
```
### 2. 文件描述符与进程优化
```bash
# 提高系统限制
sudo nano /etc/security/limits.conf
```
```conf
* soft nofile 65535
* hard nofile 65535
* soft nproc 65535
* hard nproc 65535
```
### 3. 日志管理（防止占满磁盘）
```bash
# 安装日志轮询工具
sudo apt install logrotate -y
# 手动压缩现有大日志
sudo find /var/log -size +100M -exec truncate -s 10M {} \;
```
---
## 六、审计与监控
### 安装基础监控组件
```bash
sudo apt install sysstat htop net-tools tree ncdu
# 启用sysstat数据收集
sudo sed -i 's/false/true/g' /etc/default/sysstat
sudo systemctl enable --now sysstat
```
### 关键审计命令
```bash
# 检查异常登录：
sudo lastb -a | head -20
# 检查SUID文件：
sudo find / -perm /4000 -ls
# 列出开放端口：
sudo ss -tunlp
```
> 📊 **推荐可视化工具**：
> - Cockpit (轻量级Web面板)：`sudo apt install cockpit`
> - Netdata (实时监控)：`bash <(curl -Ss https://my-netdata.io/kickstart.sh)`
---
**最终安全检查清单**：
```bash
echo "[+] SSH 配置"
sudo sshd -t && grep -E "PermitRoot|PasswordAuth" /etc/ssh/sshd_config
echo "[+] 防火墙状态"
sudo ufw status
echo "[]+ 更新状态"
sudo unattended-upgrades --dry-run
```
![服务器安全架构](https://example.com/img/debian-security-layers.png)
*(安全层示意图：网络防火墙→系统加固→应用防护)*
> 🔐 **维护建议**：
> 1. 每月执行：`sudo lynis audit system` (安装：`apt install lynis`)
> 2. 每季度更新所有SSL证书，即使未到期
> 3. 使用自动配置管理工具（如Ansible）维护服务器状态
**文档版本**: v1.2
**测试环境**: Debian 12.5 (Kernel 6.1.x) 云服务器
**最后更新**: 2024-06-15

136
content/blog/1.技术栈/998.Iperf3 万兆网络打流测试指南.md Normal file
View File

@@ -0,0 +1,136 @@
---
title: Iperf3 万兆网络打流测试指南
description: Iperf3 万兆网络打流测试指南
date: 2025-05-13
img: https://lijue-me.oss-cn-chengdu.aliyuncs.com/20250615184111247.png
navigation:
icon: lucide-network
---
> 🔍 **文档说明**: 本文记录基于水星S106E Pro交换机的万兆网络Iperf3性能测试，涵盖设备连接、测试参数配置及结果分析。适用于**网络性能测试初学者**及**运维人员**。
## 技术TAG
`#Iperf3` `#万兆网络测试` `#交换机配置` `#AQC113网卡` `#网络性能分析`
---
## 一、测试环境配置
### 设备拓扑图
```mermaid
graph LR
A[MacBook Air M4] -- 雷电/万兆电口 --> B[水星S106E Pro<br>万兆光口]
B -- 万兆光口 --> C[PVE服务器<br>CX4121A网卡]
```
### 硬件清单
| **设备** | **规格** | **作用** |
|---------------------|-----------------------------------------|-----------------------|
| 主测试端 | MacBook Air M4 + 雷电万兆网卡(AQC113) | Iperf3 Client端 |
| 交换机 | 水星S106E Pro | 万兆光/电转换枢纽 |
| 光转电模块 | AQR113光转电模块 | 连接交换机万兆光口 |
| 被测服务端 | NAS (12500T+Q670) + CX4121A万兆网卡 | Iperf3 Server端 |
| 辅助设备 | 超六类网线/光纤跳线(按需) | 物理链路连接 |
```
---
## 二、Iperf3安装与配置
### 1. macOS端安装（Client）
```bash
# 通过Homebrew安装iperf3
brew install iperf3
# 启动服务端监听（可选本地验证）
iperf3 -s -p 5201
```
### 2. PVE服务端安装（Server）
```bash
# Debian系系统安装
apt update && apt install iperf3 -y
# 启动服务端后台监听
iperf3 -s -D -p 5201
```
> ⚠️ **防火墙注意**: 确保5201端口开放
> `ufw allow 5201/tcp` (Debian/Ubuntu)
> `firewall-cmd --add-port=5201/tcp --permanent` (CentOS)
```
## 三、典型测试场景
### 场景1：TCP带宽测试（默认参数）
```bash
# Client端执行（MacBook）
iperf3 -c <Server_IP> -p 5201 -t 60
# 参数说明：
# -c : 服务端IP地址
# -t : 测试持续时间(秒)
```
### 场景2：多线程UDP压力测试
```bash
iperf3 -c <Server_IP> -p 5201 -u -b 10G -P 4
# 参数说明：
# -u : 使用UDP协议
# -b : 指定带宽(10G速率)
# -P : 并行线程数
```
### 场景3：双向流量测试
```bash
# 同时测试上行+下行
iperf3 -c <Server_IP> -p 5201 --bidir
```
---
## 四、测试结果分析要点
### 关键性能指标
| **字段** | **健康值范围** | **异常排查方向** |
|------------------|-------------------------|------------------------|
| Bandwidth | >9.5Gbps (万兆场景) | 网卡协商/模块兼容性 |
| Jitter | <1ms (UDP测试) | 交换机缓存/线缆质量 |
| Packet Loss | 0% | 缓冲区设置/CPU性能 |
| TCP Retransmits | <0.1% | TCP窗口/MTU配置 |
> 💡 **优化建议**：
> 1. 使用`-w`调整TCP窗口大小（例如`-w 8M`）
> 2. 尝试`--omit N`跳过初始N秒不稳定数据
> 3. 添加`-J`参数获取JSON格式结构化结果
---
## 五、常见问题解决
### ❌ 问题1：协商速率降级至1Gbps
```bash
# 检查网卡协商状态（MacOS）
ifconfig enX | grep media
# 解决方案：
1. 更换光模块/AOC线缆排除物理故障
2. 检查交换机端口配置（禁用节能模式）
```
### ❌ 问题2：测试中突发丢包
```bash
# 动态查看QoS统计（PVE服务器）
ethtool -S enpXX | grep -E 'drop|error'
# 解决方案：
1. 调整网卡缓冲区：ethtool -G enpXX rx/tx 4096
2. 减少并发线程总数（-P参数）
```
![万兆测试拓扑示意图](https://example.com/img/10g-test-diagram.png)
*(示意图：实际连接需确保光模块端口匹配)*
> 📌 **经验总结**：水星S106E Pro需关闭"绿色节能"功能，避免AQC113因节能策略降速。PVE虚拟机环境建议使用SR-IOV直通网卡，减少虚拟化层开销。
---
**测试文档版本**: v1.1
**更新日期**: 2023-12-15
**测试工具版本**: iperf 3.16 (macOS)/iperf 3.7 (Linux)

883
content/blog/1.技术栈/999.GROK3-and-Deepseek.md Normal file
View File

@@ -0,0 +1,883 @@
---
title: GROK3 and Deepseek
description: Grok3 和 Deepseek 的对比
date: 2025-05-12
img: https://lijue-me.oss-cn-chengdu.aliyuncs.com/20250806105153532.png
navigation:
icon: lucide-brain
---
### GROK3 and Deepseek
测试了GROK3,简单让做一个HTML小游戏，与R1对比
GROK3界面处理略好，满足所有要求，无BUG。
R1界面略有瑕疵，基本满足所有要求，除了有小BUG。
提示词：
>> 题目：编写一个“打地鼠”网页小游戏
需求描述：
设计一个基于HTML的“打地鼠”（Whack-a-Mole）小游戏，玩家需要在规定时间内点击随机出现的“地鼠”来得分。游戏需要包含以下功能和要求：
页面布局：
游戏区域是一个3x3的网格（共9个格子），每个格子是一个方形的“洞”。
页面顶部显示当前得分（Score）和剩余时间（Time Left）。
页面底部有一个“开始游戏”（Start Game）的按钮。
游戏逻辑：
点击“开始游戏”按钮后，游戏开始，初始时间为30秒。
每隔一段随机时间（0.5秒到1.5秒之间），一个“地鼠”会随机出现在某个格子中，持续显示1秒后消失。
玩家点击出现的“地鼠”可以得分，每只地鼠加1分。
如果点击空白格子，不扣分也不加分。
游戏时间结束后，停止地鼠出现，并弹窗显示最终得分，同时提供“再玩一次”的选项。
样式要求：
游戏区域居中，背景为浅灰色。
每个格子为100x100像素，带有圆角边框，初始为土黄色（#d2b48c）。
地鼠出现时，格子背景变为绿色（#90ee90），并显示文字“鼠！”（字体大小30px，居中）。
得分和时间使用清晰的大字体（建议20px以上），颜色为深蓝色。
“开始游戏”按钮为蓝色背景，白色文字，悬停时变亮。
技术要求：
使用纯HTML、CSS和JavaScript实现，不依赖外部库。
代码注释清晰，说明每个部分的功能。
确保游戏逻辑无明显bug，例如地鼠不会同时出现在多个格子。
提示词：
HTML结构：包含游戏容器、得分显示、时间显示、格子网格和按钮。
CSS样式：网格布局、格子样式、地鼠出现时的动态效果、按钮交互样式。
JavaScript逻辑：随机生成地鼠、计时器、得分计算、游戏状态管理、弹窗提示。
输出要求：
请一次性提供完整的HTML文件代码（包括HTML、CSS和JavaScript），代码需可直接保存为.html文件并在浏览器中运行。代码中需包含注释，体现逻辑清晰度和编程能力。
GROK3:
```html[GROK3.html]
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>打地鼠小游戏</title>
<style>
/* 整体页面样式 */
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
/* 顶部得分和时间显示 */
.info {
display: flex;
justify-content: space-between;
width: 320px;
margin-bottom: 20px;
}
.info span {
font-size: 24px;
color: #00008b; /* 深蓝色 */
}
/* 游戏区域网格 */
.game-board {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-gap: 10px;
background-color: #d3d3d3; /* 浅灰色背景 */
padding: 10px;
border-radius: 10px;
}
/* 每个格子样式 */
.hole {
width: 100px;
height: 100px;
background-color: #d2b48c; /* 土黄色 */
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 30px;
color: #000;
cursor: pointer;
transition: background-color 0.2s;
}
/* 地鼠出现时的样式 */
.hole.mole {
background-color: #90ee90; /* 绿色 */
}
/* 开始按钮样式 */
.start-btn {
margin-top: 20px;
padding: 10px 20px;
font-size: 18px;
color: #fff;
background-color: #4682b4; /* 蓝色 */
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
}
.start-btn:hover {
background-color: #5f9ea0; /* 悬停时变亮 */
}
</style>
</head>
<body>
<!-- 顶部信息 -->
<div class="info">
<span id="score">得分: 0</span>
<span id="time-left">剩余时间: 30</span>
</div>
<!-- 游戏区域 -->
<div class="game-board" id="gameBoard">
<!-- 9个格子 -->
<div class="hole" data-id="0"></div>
<div class="hole" data-id="1"></div>
<div class="hole" data-id="2"></div>
<div class="hole" data-id="3"></div>
<div class="hole" data-id="4"></div>
<div class="hole" data-id="5"></div>
<div class="hole" data-id="6"></div>
<div class="hole" data-id="7"></div>
<div class="hole" data-id="8"></div>
</div>
<!-- 开始按钮 -->
<button class="start-btn" id="startBtn">开始游戏</button>
<script>
// 获取DOM元素
const scoreDisplay = document.getElementById('score');
const timeLeftDisplay = document.getElementById('time-left');
const gameBoard = document.getElementById('gameBoard');
const startBtn = document.getElementById('startBtn');
const holes = document.querySelectorAll('.hole');
// 游戏状态变量
let score = 0;
let timeLeft = 30;
let gameActive = false;
let moleTimer = null;
let countdownTimer = null;
// 初始化游戏
function initGame() {
score = 0;
timeLeft = 30;
gameActive = false;
scoreDisplay.textContent = `得分: ${score}`;
timeLeftDisplay.textContent = `剩余时间: ${timeLeft}`;
clearInterval(moleTimer);
clearInterval(countdownTimer);
holes.forEach(hole => {
hole.classList.remove('mole');
hole.textContent = '';
});
}
// 随机选择一个格子显示地鼠
function showMole() {
if (!gameActive) return;
// 移除之前的地鼠
holes.forEach(hole => {
hole.classList.remove('mole');
hole.textContent = '';
});
// 随机选择一个格子
const randomHole = holes[Math.floor(Math.random() * holes.length)];
randomHole.classList.add('mole');
randomHole.textContent = '鼠！';
// 1秒后隐藏地鼠
setTimeout(() => {
randomHole.classList.remove('mole');
randomHole.textContent = '';
}, 1000);
// 随机间隔后再次显示地鼠
const randomInterval = Math.random() * 1000 + 500; // 0.5到1.5秒
moleTimer = setTimeout(showMole, randomInterval);
}
// 点击格子的事件
function hitMole(e) {
const hole = e.target;
if (hole.classList.contains('mole')) {
score++;
scoreDisplay.textContent = `得分: ${score}`;
hole.classList.remove('mole');
hole.textContent = '';
}
}
// 开始游戏
function startGame() {
if (gameActive) return; // 防止重复开始
initGame();
gameActive = true;
startBtn.disabled = true;
// 开始倒计时
countdownTimer = setInterval(() => {
timeLeft--;
timeLeftDisplay.textContent = `剩余时间: ${timeLeft}`;
if (timeLeft <= 0) {
endGame();
}
}, 1000);
// 开始地鼠出现
showMole();
}
// 游戏结束
function endGame() {
gameActive = false;
clearInterval(moleTimer);
clearInterval(countdownTimer);
startBtn.disabled = false;
alert(`游戏结束！你的得分是: ${score}\n点击“确定”再玩一次！`);
initGame();
}
// 事件绑定
startBtn.addEventListener('click', startGame);
holes.forEach(hole => hole.addEventListener('click', hitMole));
// 初始化游戏状态
initGame();
</script>
</body>
</html>
```
R1:
```html[R1.html]
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>打地鼠 - Whack a Mole</title>
<style>
/* 页面整体样式 */
body {
font-family: Arial, sans-serif;
display: flex;
flex-direction: column;
align-items: center;
background-color: #f0f0f0;
margin: 0;
min-height: 100vh;
}
/* 游戏信息显示区域 */
.game-info {
margin: 20px 0;
font-size: 24px;
color: #00008b;
display: flex;
gap: 30px;
}
/* 游戏主容器（3x3网格） */
#game-board {
display: grid;
grid-template-columns: repeat(3, 100px);
gap: 10px;
background-color: #cccccc;
padding: 20px;
border-radius: 10px;
}
/* 单个地鼠洞样式 */
.hole {
width: 100px;
height: 100px;
background-color: #d2b48c;
border-radius: 8px;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
font-size: 0; /* 初始隐藏文字 */
transition: background-color 0.2s;
}
/* 地鼠出现时的样式 */
.hole.active {
background-color: #90ee90;
font-size: 30px; /* 显示文字 */
}
/* 开始游戏按钮 */
#start-btn {
margin-top: 30px;
padding: 12px 30px;
background-color: #0000ff;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 18px;
transition: background-color 0.2s;
}
#start-btn:hover {
background-color: #3333ff;
}
#start-btn:disabled {
background-color: #888888;
cursor: not-allowed;
}
</style>
</head>
<body>
<!-- 游戏信息显示 -->
<div class="game-info">
<div>得分：<span id="score">0</span></div>
<div>剩余时间：<span id="timer">30</span>秒</div>
</div>
<!-- 游戏主区域 -->
<div id="game-board">
<!-- 生成9个地鼠洞 -->
<div class="hole"></div>
<div class="hole"></div>
<div class="hole"></div>
<div class="hole"></div>
<div class="hole"></div>
<div class="hole"></div>
<div class="hole"></div>
<div class="hole"></div>
<div class="hole"></div>
</div>
<!-- 控制按钮 -->
<button id="start-btn">开始游戏</button>
<script>
// 游戏全局变量
let score = 0;
let timeLeft = 30;
let gameActive = false;
let moleTimer = null;
let countdownTimer = null;
// DOM元素引用
const holes = document.querySelectorAll('.hole');
const scoreDisplay = document.getElementById('score');
const timerDisplay = document.getElementById('timer');
const startBtn = document.getElementById('start-btn');
// 初始化点击事件监听
holes.forEach(hole => {
hole.addEventListener('click', () => {
if (!gameActive) return;
// 点击有效的地鼠
if (hole.classList.contains('active')) {
score++;
scoreDisplay.textContent = score;
hole.classList.remove('active');
hole.textContent = '';
}
});
});
// 开始游戏按钮功能
startBtn.addEventListener('click', () => {
if (!gameActive) {
startGame();
}
});
// 游戏主逻辑
function startGame() {
// 重置游戏状态
gameActive = true;
score = 0;
timeLeft = 30;
scoreDisplay.textContent = score;
timerDisplay.textContent = timeLeft;
startBtn.disabled = true;
// 清除已有定时器
clearInterval(countdownTimer);
clearTimeout(moleTimer);
// 启动倒计时
countdownTimer = setInterval(() => {
timeLeft--;
timerDisplay.textContent = timeLeft;
if (timeLeft <= 0) {
endGame();
}
}, 1000);
// 首次生成地鼠
scheduleMole();
}
// 随机生成地鼠
function showMole() {
// 查找所有非活动状态的洞
const availableHoles = Array.from(holes).filter(hole => !hole.classList.contains('active'));
if (availableHoles.length > 0) {
const randomHole = availableHoles[Math.floor(Math.random() * availableHoles.length)];
randomHole.classList.add('active');
randomHole.textContent = '鼠！';
// 自动隐藏地鼠
setTimeout(() => {
randomHole.classList.remove('active');
randomHole.textContent = '';
}, 1000);
}
}
// 调度下一个地鼠生成
function scheduleMole() {
if (!gameActive) return;
// 随机间隔（0.5-1.5秒）
const delay = Math.random() * 1000 + 500;
moleTimer = setTimeout(() => {
showMole();
scheduleMole();
}, delay);
}
// 结束游戏处理
function endGame() {
gameActive = false;
clearInterval(countdownTimer);
clearTimeout(moleTimer);
startBtn.disabled = false;
// 显示最终得分
const restart = confirm(`游戏结束！最终得分：${score}\n再玩一次？`);
if (restart) {
startGame();
}
}
</script>
</body>
</html>
```

3
content/blog/2.AI/.navigation.yml Normal file
View File

@@ -0,0 +1,3 @@
title: AI
description: AI 改变世界
icon: lucide-brain

190
content/blog/2.AI/02.index.md Normal file
View File

@@ -0,0 +1,190 @@
---
title: Coolify
description: Coolify是什么？
date: 2025-07-14
img: https://lijue-me.oss-cn-chengdu.aliyuncs.com/20250628122847084.png
navigation:
icon: simple-icons:chai
---
# 概述
这是一份提供给AI大模型的Python代码规范与编程标准，可以有效提高Cursor等大模型对Python项目的编写能力。
---
description: Python开发综合指南，涵盖代码组织、性能、安全性、测试等内容。这些规则旨在促进可维护、高效且安全的Python代码库。
globs: *.py
---
# Python最佳实践与编码规范
本文档概述了Python开发的综合最佳实践和编码标准，旨在促进编写干净、高效、可维护和安全的代码。
## 1. 代码组织与结构
### 1.1 目录结构最佳实践
* **扁平结构优于嵌套（但不绝对）。** 从简单结构开始，按需重构
* **包与模块：** 使用包（包含`__init__.py`的目录）对模块进行逻辑分组
* **src布局：** 考虑使用`src`目录分离应用代码和项目级文件（setup.py、requirements.txt等），避免导入冲突并明确项目边界
* **典型项目结构：**
project_name/
├── src/
│ ├── package_name/
│ │ ├── __init__.py
│ │ ├── module1.py
│ │ ├── module2.py
│ ├── main.py # 入口文件
├── tests/
│ ├── __init__.py
│ ├── test_module1.py
│ ├── test_module2.py
├── docs/
│ ├── conf.py
│ ├── index.rst
├── .gitignore
├── pyproject.toml 或 setup.py
├── README.md
├── requirements.txt 或 requirements-dev.txt
### 1.2 文件命名规范
* **模块：** 小写字母，使用下划线增强可读性（如`my_module.py`）
* **包：** 全小写（如`my_package`），非必要不使用下划线
* **测试文件：** 以`test_`开头（如`test_my_module.py`）
### 1.3 模块组织最佳实践
* **单一职责原则：** 每个模块应有明确定义的用途
* **导入规范：**
* 顺序：标准库→第三方库→本地模块
* 优先使用绝对导入（如`from my_package.module1 import function1`）
* 在复杂包结构中需明确相对导入时使用显式相对导入（`from . import sibling_module`）
* **常量：** 使用全大写定义模块级常量（如`MAX_ITERATIONS = 100`）
* **双下划线名称：** `__all__`、`__version__`等应放在模块文档字符串之后、所有导入之前（`from __future__`除外）。使用`__all__`显式声明公共API
### 1.4 组件架构建议
* **分层架构：** 适用于大型应用，将关注点分离为表现层、业务逻辑层和数据访问层
* **微服务：** 超大型系统可拆分为小型独立服务
* **六边形/整洁架构：** 强调业务逻辑与数据库/框架等外部依赖的解耦
* **依赖注入：** 提高可测试性并降低耦合度
### 1.5 代码分割策略
* **按功能拆分：** 基于不同功能划分模块（如用户管理、数据处理）
* **按层级拆分：** 分离表现层、业务逻辑层和数据访问代码
* **懒加载：** 使用`importlib.import_module()`实现按需加载，优化启动时间
* **条件导入：** 根据特定条件导入模块
## 2. 常见模式与反模式
### 2.1 设计模式
* **单例模式：** 限制类只能实例化一个对象
* **工厂模式：** 创建对象时无需指定具体类
* **观察者模式：** 建立对象间一对多依赖关系
* **策略模式：** 定义算法族并使其可互换
* **装饰器模式：** 动态扩展对象功能
* **上下文管理器：** 确保资源正确清理（如自动关闭文件）
### 2.2 常见任务的推荐方案
* **数据验证：** 使用`pydantic`或`marshmallow`等库
* **配置管理：** 使用`python-decouple`、`dynaconf`或标准库的`configparser`
* **日志记录：** 使用`logging`模块实现结构化日志
* **命令行接口：** 使用`argparse`、`click`或`typer`
* **异步编程：** 使用`asyncio`处理I/O密集型任务
### 2.3 反模式与代码异味
* **上帝类：** 承担过多职责的类，应拆分为专注单一功能的小类
* **霰弹式变更：** 需在多处做小修改，表明内聚性不足
* **面条代码：** 结构混乱难以追踪，应重构为定义明确的函数/类
* **重复代码：** 提取公共代码为可复用函数/类（遵循DRY原则）
* **魔法数值/字符串：** 使用命名常量替代硬编码值
* **过早优化：** 避免在没有性能瓶颈分析前提下的优化
### 2.4 状态管理最佳实践
* **无状态函数：** 尽可能使用无状态函数
* **不可变数据：** 使用不可变数据结构防止意外修改
* **显式状态：** 使用类或数据结构明确管理状态，避免全局变量
* **上下文变量：** Python 3.7+可使用`contextvars`管理异步应用中的请求级状态
### 2.5 错误处理模式
* **捕获特定异常：** 避免笼统捕获`Exception`或`BaseException`
* **资源清理：** 使用`finally`确保清理代码必执行
* **异常日志：** 记录完整堆栈信息
* **异常消息：** 抛出包含明确错误信息的异常
* **避免异常控制流：** 异常应用于处理意外情况而非常规流程
## 3. 性能优化
### 3.1 优化技术
* **性能分析：** 使用`cProfile`定位瓶颈
* **高效数据结构：** 根据场景选择（如`set`用于成员测试、`dict`用于查找）
* **列表推导式与生成器：** 编写简洁高效的代码
* **NumPy向量化：** 对数值计算使用向量化操作
* **即时编译：** 性能关键代码考虑使用Numba等JIT编译器
* **字符串拼接：** 使用`''.join(iterable)`高效拼接字符串
### 3.2 内存管理
* **内存分析：** 使用`memory_profiler`定位内存泄漏
* **`__slots__`：** 减少类实例的内存占用
* **生成器：** 处理大数据集时避免全部加载到内存
## 4. 安全性最佳实践
### 4.1 常见漏洞防范
* **SQL注入：** 使用参数化查询或ORM
* **XSS攻击：** 对用户输入消毒并转义输出
* **CSRF防护：** 使用CSRF令牌
* **依赖漏洞：** 定期审计和更新依赖项
* **硬编码密钥：** 禁止在代码中硬编码密码/API密钥，使用环境变量管理
### 4.2 API安全通信
* **强制HTTPS：** 所有API通信必须加密
* **速率限制：** 防止接口滥用
* **输入验证：** 处理前验证所有API请求
## 5. 测试策略
### 5.1 单元测试要点
* **测试粒度：** 隔离测试单个函数/类/模块
* **边界条件：** 特别测试边界情况和异常场景
* **测试覆盖率：** 追求高覆盖率但避免教条化
### 5.2 集成测试建议
* **聚焦关键流程：** 关注核心用户场景
* **模拟外部服务：** 使用mock替代真实外部依赖
## 6. 常见陷阱
### 6.1 高频错误
* **可变默认参数：** 函数定义中避免使用可变对象作为默认值
* **变量作用域：** 注意嵌套函数中的变量作用域
* **忽略异常：** 禁止直接忽略未处理的异常
* **虚拟环境：** 必须使用虚拟环境管理项目依赖
## 7. 工具与环境
### 7.1 推荐工具链
* **IDE：** PyCharm、VS Code（搭配Python插件）
* **包管理：** `pip`、`poetry`
* **格式化：** `black`、`autopep8`
* **静态检查：** `mypy`、`pylint`
### 7.2 CI/CD集成
* **自动化测试：** 每次提交自动运行测试套件
* **代码质量门禁：** 集成静态分析工具到流水线
遵循这些规范和最佳实践，开发者能够构建出更健壮、可维护且安全的Python应用。

3
content/blog/3.生活/.navigation.yml Normal file
View File

@@ -0,0 +1,3 @@
title: 生活
description: 生活中一些有趣的事情
icon: lucide-heart

190
content/blog/3.生活/01.index.md Normal file
View File

@@ -0,0 +1,190 @@
---
title: Coolify
description: Coolify是什么？
date: 2025-07-14
img: https://lijue-me.oss-cn-chengdu.aliyuncs.com/20250628122847084.png
navigation:
icon: simple-icons:chai
---
# 概述
这是一份提供给AI大模型的Python代码规范与编程标准，可以有效提高Cursor等大模型对Python项目的编写能力。
---
description: Python开发综合指南，涵盖代码组织、性能、安全性、测试等内容。这些规则旨在促进可维护、高效且安全的Python代码库。
globs: *.py
---
# Python最佳实践与编码规范
本文档概述了Python开发的综合最佳实践和编码标准，旨在促进编写干净、高效、可维护和安全的代码。
## 1. 代码组织与结构
### 1.1 目录结构最佳实践
* **扁平结构优于嵌套（但不绝对）。** 从简单结构开始，按需重构
* **包与模块：** 使用包（包含`__init__.py`的目录）对模块进行逻辑分组
* **src布局：** 考虑使用`src`目录分离应用代码和项目级文件（setup.py、requirements.txt等），避免导入冲突并明确项目边界
* **典型项目结构：**
project_name/
├── src/
│ ├── package_name/
│ │ ├── __init__.py
│ │ ├── module1.py
│ │ ├── module2.py
│ ├── main.py # 入口文件
├── tests/
│ ├── __init__.py
│ ├── test_module1.py
│ ├── test_module2.py
├── docs/
│ ├── conf.py
│ ├── index.rst
├── .gitignore
├── pyproject.toml 或 setup.py
├── README.md
├── requirements.txt 或 requirements-dev.txt
### 1.2 文件命名规范
* **模块：** 小写字母，使用下划线增强可读性（如`my_module.py`）
* **包：** 全小写（如`my_package`），非必要不使用下划线
* **测试文件：** 以`test_`开头（如`test_my_module.py`）
### 1.3 模块组织最佳实践
* **单一职责原则：** 每个模块应有明确定义的用途
* **导入规范：**
* 顺序：标准库→第三方库→本地模块
* 优先使用绝对导入（如`from my_package.module1 import function1`）
* 在复杂包结构中需明确相对导入时使用显式相对导入（`from . import sibling_module`）
* **常量：** 使用全大写定义模块级常量（如`MAX_ITERATIONS = 100`）
* **双下划线名称：** `__all__`、`__version__`等应放在模块文档字符串之后、所有导入之前（`from __future__`除外）。使用`__all__`显式声明公共API
### 1.4 组件架构建议
* **分层架构：** 适用于大型应用，将关注点分离为表现层、业务逻辑层和数据访问层
* **微服务：** 超大型系统可拆分为小型独立服务
* **六边形/整洁架构：** 强调业务逻辑与数据库/框架等外部依赖的解耦
* **依赖注入：** 提高可测试性并降低耦合度
### 1.5 代码分割策略
* **按功能拆分：** 基于不同功能划分模块（如用户管理、数据处理）
* **按层级拆分：** 分离表现层、业务逻辑层和数据访问代码
* **懒加载：** 使用`importlib.import_module()`实现按需加载，优化启动时间
* **条件导入：** 根据特定条件导入模块
## 2. 常见模式与反模式
### 2.1 设计模式
* **单例模式：** 限制类只能实例化一个对象
* **工厂模式：** 创建对象时无需指定具体类
* **观察者模式：** 建立对象间一对多依赖关系
* **策略模式：** 定义算法族并使其可互换
* **装饰器模式：** 动态扩展对象功能
* **上下文管理器：** 确保资源正确清理（如自动关闭文件）
### 2.2 常见任务的推荐方案
* **数据验证：** 使用`pydantic`或`marshmallow`等库
* **配置管理：** 使用`python-decouple`、`dynaconf`或标准库的`configparser`
* **日志记录：** 使用`logging`模块实现结构化日志
* **命令行接口：** 使用`argparse`、`click`或`typer`
* **异步编程：** 使用`asyncio`处理I/O密集型任务
### 2.3 反模式与代码异味
* **上帝类：** 承担过多职责的类，应拆分为专注单一功能的小类
* **霰弹式变更：** 需在多处做小修改，表明内聚性不足
* **面条代码：** 结构混乱难以追踪，应重构为定义明确的函数/类
* **重复代码：** 提取公共代码为可复用函数/类（遵循DRY原则）
* **魔法数值/字符串：** 使用命名常量替代硬编码值
* **过早优化：** 避免在没有性能瓶颈分析前提下的优化
### 2.4 状态管理最佳实践
* **无状态函数：** 尽可能使用无状态函数
* **不可变数据：** 使用不可变数据结构防止意外修改
* **显式状态：** 使用类或数据结构明确管理状态，避免全局变量
* **上下文变量：** Python 3.7+可使用`contextvars`管理异步应用中的请求级状态
### 2.5 错误处理模式
* **捕获特定异常：** 避免笼统捕获`Exception`或`BaseException`
* **资源清理：** 使用`finally`确保清理代码必执行
* **异常日志：** 记录完整堆栈信息
* **异常消息：** 抛出包含明确错误信息的异常
* **避免异常控制流：** 异常应用于处理意外情况而非常规流程
## 3. 性能优化
### 3.1 优化技术
* **性能分析：** 使用`cProfile`定位瓶颈
* **高效数据结构：** 根据场景选择（如`set`用于成员测试、`dict`用于查找）
* **列表推导式与生成器：** 编写简洁高效的代码
* **NumPy向量化：** 对数值计算使用向量化操作
* **即时编译：** 性能关键代码考虑使用Numba等JIT编译器
* **字符串拼接：** 使用`''.join(iterable)`高效拼接字符串
### 3.2 内存管理
* **内存分析：** 使用`memory_profiler`定位内存泄漏
* **`__slots__`：** 减少类实例的内存占用
* **生成器：** 处理大数据集时避免全部加载到内存
## 4. 安全性最佳实践
### 4.1 常见漏洞防范
* **SQL注入：** 使用参数化查询或ORM
* **XSS攻击：** 对用户输入消毒并转义输出
* **CSRF防护：** 使用CSRF令牌
* **依赖漏洞：** 定期审计和更新依赖项
* **硬编码密钥：** 禁止在代码中硬编码密码/API密钥，使用环境变量管理
### 4.2 API安全通信
* **强制HTTPS：** 所有API通信必须加密
* **速率限制：** 防止接口滥用
* **输入验证：** 处理前验证所有API请求
## 5. 测试策略
### 5.1 单元测试要点
* **测试粒度：** 隔离测试单个函数/类/模块
* **边界条件：** 特别测试边界情况和异常场景
* **测试覆盖率：** 追求高覆盖率但避免教条化
### 5.2 集成测试建议
* **聚焦关键流程：** 关注核心用户场景
* **模拟外部服务：** 使用mock替代真实外部依赖
## 6. 常见陷阱
### 6.1 高频错误
* **可变默认参数：** 函数定义中避免使用可变对象作为默认值
* **变量作用域：** 注意嵌套函数中的变量作用域
* **忽略异常：** 禁止直接忽略未处理的异常
* **虚拟环境：** 必须使用虚拟环境管理项目依赖
## 7. 工具与环境
### 7.1 推荐工具链
* **IDE：** PyCharm、VS Code（搭配Python插件）
* **包管理：** `pip`、`poetry`
* **格式化：** `black`、`autopep8`
* **静态检查：** `mypy`、`pylint`
### 7.2 CI/CD集成
* **自动化测试：** 每次提交自动运行测试套件
* **代码质量门禁：** 集成静态分析工具到流水线
遵循这些规范和最佳实践，开发者能够构建出更健壮、可维护且安全的Python应用。

3
content/docs/1.简单文档/.navigation.yml Normal file
View File

@@ -0,0 +1,3 @@
title: 简单文档
description: 一个简约但功能强大的开源文档系统
icon: lucide-book-open-text

237
content/docs/1.简单文档/1.index.md Normal file
View File

@@ -0,0 +1,237 @@
---
title: 入门简介
description: Estel Docs 是一个基于 Nuxt 4 , Content v3 , Nuxt UI Pro 构建的文档系统。
navigation:
icon: lucide-house
---
## 缘起
使用过市面上的很多文档系统，但是或多或少都有一些自己不满意的功能.
于是自己动手，丰衣足食.
同时在 Markdown 语法的基础上增加了许多**魔法(自定义组件)**,比如:
::code-group
```mdc [index.md]
在 Markdown 中使用::card 标签,即可创建一个卡片,卡片里可以放置任何内容。比如以下内容:
::card
这里是卡片里的内容
::
```
```html [Card.vue]
<!-- Card组件: components/content/Card.vue -->
<template>
<div class="p-2 border bg-white dark:bg-black dark:border-gray-700 rounded">
<slot />
</div>
</template>
```
:::code-preview{icon="i-lucide-eye" label="Preview"}
::::example-card
这里是卡片里的内容
::::
:::
::
:::UPageCard{icon="lucide-code" title="代码组" description="这个组件使用 自定义的 Markdown 语法,从 Markdown 中提取代码块,并展示在页面上 (而其自身亦是一个卡片组)"}
::code-tree{defaultValue="nuxt.config.ts"}
```css [app/assets/main.css]
@import "tailwindcss" theme(static);
@import "@nuxt/ui-pro";
```
```ts [app/app.config.ts]
export default defineAppConfig({
ui: {
colors: {
primary: 'sky',
colors: 'slate'
}
}
});
```
```vue [app/app.vue]
<template>
<UApp>
<NuxtPage />
</UApp>
</template>
```
```json [package.json]
{
"name": "nuxt-app",
"private": true,
"type": "module",
"scripts": {
"build": "nuxt build",
"dev": "nuxt dev",
"generate": "nuxt generate",
"preview": "nuxt preview",
"postinstall": "nuxt prepare",
"typecheck": "nuxt typecheck"
},
"dependencies": {
"@iconify-json/lucide": "^1.2.18",
"@nuxt/ui-pro": "3.0.0-alpha.10",
"nuxt": "^3.15.1"
},
"devDependencies": {
"typescript": "^5.7.2",
"vue-tsc": "^2.2.0"
}
}
```
```json [tsconfig.json]
{
"extends": "./.nuxt/tsconfig.json"
}
```
```ts [nuxt.config.ts]
export default defineNuxtConfig({
modules: ['@nuxt/ui-pro'],
future: {
compatibilityVersion: 4
},
css: ['~/assets/main.css']
});
```
````md [README.md]
# Nuxt 3 Minimal Starter
Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
## Setup
Make sure to install the dependencies:
```bash
# npm
npm install
# pnpm
pnpm install
# yarn
yarn install
# bun
bun install
```
## Development Server
Start the development server on `http://localhost:3000`:
```bash
# npm
npm run dev
# pnpm
pnpm run dev
# yarn
yarn dev
# bun
bun run dev
```
## Production
Build the application for production:
```bash
# npm
npm run build
# pnpm
pnpm run build
# yarn
yarn build
# bun
bun run build
```
Locally preview production build:
```bash
# npm
npm run preview
# pnpm
pnpm run preview
# yarn
yarn preview
# bun
bun run preview
```
Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.
````
::
:::
::code-group
```md [搜索.md]
#### 此组件打开一个模态搜索框,进行搜索
::::example-fulltext-content-search
::::
#### 此组件建立一个mini搜索框,进行搜索
::::example-fulltext-mini-search
::::
```
:::code-preview{label="预览模态组件" icon="i-lucide-eye"}
::::example-fulltext-content-search
::::
:::
:::code-preview{label="预览搜索框组件" icon="i-lucide-eye"}
::::example-fulltext-mini-search
::::
:::
::
::tip{icon="lucide-info" color="primary" class="text-black dark:text-white"}
阅读更多关于 [`自定义组件`](/docs/简单文档/components/api) 的内容.
::
## 特性
- 基于 Nuxt 4 , Content v3 , Nuxt UI Pro 构建的文档系统。
- 完美支持 Markdown 和 相关扩展。
- 和 Vue 组件高度集成。
- 支持搜索,由Content v3 赋能。
- 支持多主题,使用Nuxt UI Pro。
- 开源且免费。
- 支持移动端。
## 致谢
- Nuxt Content：为 Vue 开发者简化内容管理。
- Nuxt UI Pro ：文档系统 UI 组件。
- Docus：获取灵感及一些文档组件源代码。
## License
MIT

61
content/docs/1.简单文档/2.installation.md Normal file
View File

@@ -0,0 +1,61 @@
---
title: 安装指南
description: 安装 Estel Docs
navigation:
icon: lucide-play
---
## 安装与使用
:::steps
### 1. 获取项目
```bash
git clone https://github.com/estle-li/estel_docs.git
```
::tip
或者，您也可以从 [GitHub 仓库](https://github.com/estle-li/estel_docs) 克隆或下载该模板。
::
### 导航到项目目录
```bash
cd [project-name]
```
### 编译项目
::::code-group
```bash [pnpm]
pnpm i && pnpm dev
```
```bash [yarn]
yarn install && yarn dev
```
```bash [npm]
npm install && npm run dev
```
```bash [bun]
bun install && bun dev
```
::::
::tip
做得好！浏览器窗口应会自动打开，访问 http://localhost:3000。
::
### 配置系统
选择主题或根据个人喜好调整其他设置。
:read-more{to="/"}
:::

2
content/docs/1.简单文档/3.writing/.navigation.yml Normal file
View File

@@ -0,0 +1,2 @@
title: 开始写作
icon: lucide:edit

83
content/docs/1.简单文档/3.writing/1.markdown.md Normal file
View File

@@ -0,0 +1,83 @@
---
title: Markdown
description: 如何使用MDC语法编写文档。
navigation:
icon: lucide:arrow-big-down
---
::card-group
::card
---
title: MDC语法
to: https://content.nuxt.com/docs/files/markdown#mdc-syntax
target: _blank
icon: lucide:arrow-big-down
---
在**Nuxt Content**文档中阅读详细的MDC使用指南。
::
::card
---
title: 组件
to: /components/prose
icon: lucide:box
---
查看**shadcn-docs-nuxt**提供的MDC组件。
::
::
## VS Code集成
### MDC扩展
[Nuxt MDC](https://marketplace.visualstudio.com/items?itemName=Nuxt.mdc)是一个VS Code扩展，为MDC语法提供语法高亮和自动完成功能。
启动VS Code快速打开 :shortcut{value="Ctrl"} + :shortcut{value="P"}，粘贴以下命令，然后按回车。
```bash [shell]
ext install Nuxt.mdc
```
### 启用组件元数据自动完成
::alert
需要 `Nuxt.mdc >= 0.3.1`
::
::steps{:level="4"}
#### VSCode设置
```json [.vscode/settings.json] line-numbers
{
"mdc.enableComponentMetadataCompletions": true // [!code ++]
}
```
#### 安装 `nuxt-component-meta` 模块
将nuxt-component-meta依赖添加到您的项目中：
:pm-install{name="nuxt-component-meta"}
将nuxt-component-meta添加到nuxt.config.ts的modules部分，并可选择配置模块：
```ts [nuxt.config.ts]
export default defineNuxtConfig({
modules: ['nuxt-component-meta'],
});
```
一旦您的项目构建完成或在开发服务器上运行，扩展将自动扫描您的项目以获取组件元数据，并根据发现的组件提供建议，无需额外配置。
::
## 技巧
### 从目录中隐藏标题
:badge[0.4.7]{variant="outline"}
将标题的 `id` 设置为 `hide-toc` 将从目录中隐藏该标题。
```mdc
:h2[脚注]{id="hide-toc"}
```

109
content/docs/1.简单文档/3.writing/2.pages.md Normal file
View File

@@ -0,0 +1,109 @@
---
title: 页面
description: Estel Docs 中使用的front matter属性。
navigation:
icon: lucide:file-text
---
```md
---
title: Front Matter
description: Estel Dsoc中使用的front matter属性。
icon: lucide:book-type
navBadges:
- value: New
type: lime
authors:
- name: Tony Zhang
username: ZTL-UwU
avatar: https://www.github.com/ZTL-UwU.png
to: https://github.com/ZTL-UwU
target: _blank
---
```
## 展示
:::tabs{variant="line"}
::stack{label="badges"}
![](https://lijue-me.oss-cn-chengdu.aliyuncs.com/20250730134423381.png)
```yml
badges:
- value: 0.8.10
- value: Source
icon: lucide:code
to: https://github.com/ZTL-UwU/shadcn-docs-nuxt/blob/main/components/content/FileTree.vue
target: _blank
```
::
::stack{label="authors"}
![](https://lijue-me.oss-cn-chengdu.aliyuncs.com/20250730134509935.png)
```yml
authors:
- name: Tony Zhang
username: ZTL-UwU
avatar: https://www.github.com/ZTL-UwU.png
to: https://github.com/ZTL-UwU
target: _blank
```
::
::stack{label="navBadges"}
![](https://lijue-me.oss-cn-chengdu.aliyuncs.com/20250730134549353.png)
```yml
navBadges:
- value: New
type: lime
```
::
:::
## 参数
::field-group
::field{name="title" type="string"}
页面标题。默认为文件名。
::
::field{name="description" type="string"}
页面描述。默认为页面的第一个 `<p>`{lang="html"}。
::
::field{name="navigation" type="boolean" default-value="true"}
定义页面是否包含在侧边栏中。在 `index.md` 中设置为 `false`。
::
::field{name="icon" type="string"}
在侧边栏中为页面显示的图标。
::
::field{name="navBadges" type="[]"}
附加到侧边栏链接末尾的徽章列表。
::
::field{name="navTruncate" type="boolean" default-value="true"}
是否截断侧边栏标题。
::
::field{name="badges" type="[]"}
显示在页面标题底部的徽章列表。
::
::field{name="authors" type="[]"}
显示在页面标题底部的作者列表。
::
::field{name="toc" type="boolean" default-value="true"}
是否为此页面显示目录部分。
::
::field{name="aside" type="boolean" default-value="true"}
是否为此页面显示侧边栏部分。
::
::field{name="editLink" type="boolean" default-value="true"}
是否为此页面显示编辑链接。
::
::field{name="prevNext" type="boolean" default-value="true"}
是否显示上一页和下一页按钮。
::
::field{name="breadcrumb" type="boolean" default-value="true"}
是否显示面包屑导航。
::
::field{name="fullpage" type="boolean" default-value="false"}
是否使用像主页一样的全页面布局。[示例](/简单文档/writing/full-page-example)。
::
::

57
content/docs/1.简单文档/3.writing/3.folders.md Normal file
View File

@@ -0,0 +1,57 @@
---
title: 目录
description: 通过 YML 文件配置目录节点。
navigation:
icon: lucide:folder
---
You can customize folders by creating a `_dir.yml` file in the folder.
::code-group
```yml [_dir.yml]
title: Folder
icon: lucide:folder
navigation.redirect: /frameworks/vue
navBadges:
- value: New
type: lime
sidebar:
style: group
collapse: false
```
```[Directory structure]
content/
1.frameworks/
_dir.yml
1.vue.md
2.nuxt.md
```
::
## Parameters
::field-group
::field{name="title" type="string"}
Title of the page. Defaults to the filename.
::
::field{name="icon" type="string"}
The icon shown in the sidebar for the page.
::
::field{name="navBadges" type="[]"}
A list of badges appended to the end of the sidebar link.
::
::field{name="collapse" type="boolean"}
Whether the folder should be collapsed by default.
::
::field{name="sidebar" type="object"}
::collapsible{title="Details" default-open}
::field{name="style" type="'default' | 'tree' | 'group'" default-value="default"}
The style used for the folder. The default value can be configured in the [appConfig](/api/configuration/shadcn-docs#aside).
| `default` | `tree` | `group` |
| :-------------------------------------------------: | :-------------------------------------------: | :---------------------------------------------: |
| ![sidebar-default](/sidebar-default.png){width=400} | ![sidebar-tree](/sidebar-tree.png){width=400} | ![sidebar-group](/sidebar-group.png){width=400} |
::
::
::
::

9
content/docs/1.简单文档/3.writing/4.full-page-example.md Normal file
View File

@@ -0,0 +1,9 @@
---
title: 单页面示例
description: 全页面示例
fullpage: true
navigation:
icon: lucide:layout-template
---
写作ing...

49
content/docs/1.简单文档/4.deployment.md Normal file
View File

@@ -0,0 +1,49 @@
---
title: 部署服务
description: 部署你的 Estel Docs 应用。
navigation:
icon: lucide:cloud
---
## 静态托管
::steps{:level="4"}
#### 在 `nuxt.config.ts` 或 `.env` 中配置 `site.url`
OG Images 必须使用绝对 URL 提供服务，您需要提供一个站点 URL。
::code-group
```ts [nuxt.config.ts]
export default defineNuxtConfig({
site: {
url: 'https://example.com',
},
});
```
```dotenv [.env]
NUXT_SITE_URL=https://example.com
```
::
#### 运行生成命令
:pm-run{script="generate"}
::alert{icon="lucide:triangle"}
在 Vercel 上，在**构建和开发设置**中将**构建命令**设置为 `nuxt generate`。
::
#### 部署
您现在可以将 `.output/public` 目录部署到任何静态托管服务，或使用 `npx serve .output/public` 在本地预览。
::
## SSR 服务器
::steps{:level="4"}
#### 运行构建命令
:pm-run{script="build"}
#### 部署
```shell
node .output/server/index.mjs
```
::

2
content/docs/1.简单文档/5.components/.navigation.yml Normal file
View File

@@ -0,0 +1,2 @@
title: 组件特性
icon: lucide:box

82
content/docs/1.简单文档/5.components/1.API.md Normal file
View File

@@ -0,0 +1,82 @@
---
title: 常用组件
description: 常用自定义组件速查文档
navigation:
icon: lucide-component
---
:::code-group
```mdc [index.md]
::callout
---
icon: simple-icons-visualstudiocode
to: https://marketplace.visualstudio.com/items?itemName=Nuxt.mdc
---
安装 **MDC VS Code 扩展**，以获得对 MDC 语法的高亮显示支持。
::
```
::::code-preview{icon="i-lucide-eye" label="Preview"}
::callout
---
icon: simple-icons-visualstudiocode
to: https://marketplace.visualstudio.com/items?itemName=Nuxt.mdc
---
安装 **MDC VS Code 扩展**，以获得对 MDC 语法的高亮显示支持。
::
::::
:::
::tip
在 tip 标签中嵌套 code-group 的示例. 可以直接复制index.md 中的内容,既是 当前展示 的效果.
:::code-group
```mdc [index.md]
::tip
在文档中使用自定义组件时，可以在插槽中使用 Markdown 语法，组件会自动渲染 Markdown 内容。
:::code-group
```mdc [index.md]
::my-title
A [rich text](/) will be **rendered** by the component.
::
```
```html [MyTitle.vue]
<template>
<h1 class="text-4xl">
<slot mdc-unwrap="p" />
</h1>
</template>
```
::::code-preview{icon="i-lucide-eye" label="Preview"}
:::::example-title
A [rich text](/) will be **rendered** by the component.
:::::
::::
:::
::
```
```html [MyTitle.vue]
<template>
<h1 class="text-4xl">
<slot mdc-unwrap="p" />
</h1>
</template>
```
::::code-preview{icon="i-lucide-eye" label="Preview"}
:::::example-title
A [rich text](/) will be **rendered** by the component.
:::::
::::
:::
::

158
content/docs/1.简单文档/5.components/alert.md Normal file
View File

@@ -0,0 +1,158 @@
---
icon: lucide:triangle-alert
badges:
- value: Docus
to: https://docus.dev/api/components#alert
target: _blank
- value: Source
icon: lucide:code
to: https://github.com/ZTL-UwU/shadcn-docs-nuxt/blob/main/components/content/Alert.vue
target: _blank
---
## Usage
::stack
::div{class="p-4"}
::alert{icon="lucide:info"}
A **default** alert with `code` and a [link](/).
::
::alert{type="secondary" icon="lucide:info"}
A **secondary** alert with `code` and a [link](/).
::
::
```mdc
::alert{icon="lucide:info"}
A **default** alert with `code` and a [link](/).
::
::alert{type="secondary" icon="lucide:info"}
A **secondary** alert with `code` and a [link](/).
::
```
::
### Link
::stack
::div{class="p-4"}
::alert{to="https://github.com/ZTL-UwU/shadcn-docs-nuxt" target="_blank" icon="lucide:link"}
A **link** alert.
::
::
```mdc
::alert{to="https://github.com/ZTL-UwU/shadcn-docs-nuxt" target="_blank" icon="lucide:link"}
A **link** alert.
::
```
::
### Variants
::tabs{variant="line"}
::stack{label="info" icon="lucide:info"}
::div{class="p-3"}
::alert{type="info" icon="lucide:info"}
An **info** alert with `code` and a [link](/).
::
::
```mdc
::alert{type="info" icon="lucide:info"}
An **info** alert with `code` and a [link](/).
::
```
::
::stack{label="note" icon="lucide:pencil"}
::div{class="p-3"}
::alert{type="note" icon="lucide:pencil"}
A **note** alert with `code` and a [link](/).
::
::
```mdc
::alert{type="note" icon="lucide:pencil"}
A **note** alert with `code` and a [link](/).
::
```
::
::stack{label="success" icon="lucide:lightbulb"}
::div{class="p-3"}
::alert{type="success" icon="lucide:lightbulb"}
A **success** alert with `code` and a [link](/).
::
::
```mdc
::alert{type="success" icon="lucide:lightbulb"}
A **success** alert with `code` and a [link](/).
::
```
::
::stack{label="example" icon="lucide:test-tube"}
::div{class="p-3"}
::alert{type="example" icon="lucide:test-tube"}
An **example** alert with `code` and a [link](/).
::
::
```mdc
::alert{type="example" icon="lucide:test-tube"}
An **example** alert with `code` and a [link](/).
::
```
::
::stack{label="warning" icon="lucide:triangle-alert"}
::div{class="p-3"}
::alert{type="warning" icon="lucide:triangle-alert"}
A **warning** alert with `code` and a [link](/).
::
::
```mdc
::alert{type="warning" icon="lucide:triangle-alert"}
A **warning** alert with `code` and a [link](/).
::
```
::
::stack{label="danger" icon="lucide:circle-x"}
::div{class="p-3"}
::alert{type="danger" icon="lucide:circle-x"}
A **danger** alert with `code` and a [link](/).
::
::
```mdc
::alert{type="danger" icon="lucide:circle-x"}
A **danger** alert with `code` and a [link](/).
::
```
::
::
### Title
::stack
::div{class="p-4"}
::alert{title="Title" icon="lucide:layout-list"}
An alert with a title.
::
::
```mdc
::alert{title="Title" icon="lucide:layout-list"}
An alert with a title.
::
```
::
## Props
::field-group
:field{name="title" type="string"}[Alert title]
:field{name="icon" type="string"}[Alert icon]
:field{name="type" type="'default' | 'info' | 'warning' | 'success' | 'danger' | 'secondary'" default-value="'default'"}
:field{name="to" type="string"}[Link URL]
:field{name="target" type="Target"}[A `target` attribute value to apply on the link]
:field{name="external" type="boolean"}[Alias to `target='_blank'`]
:field{name="showLinkIcon" type="boolean" default-value="true"}[Whether to show the link indicator :icon{name="lucide:arrow-up-right"}]
::

125
content/docs/1.简单文档/5.components/badge.md Normal file
View File

@@ -0,0 +1,125 @@
---
title: Badge
icon: lucide:badge
badges:
- value: Docus
to: https://docus.dev/api/components#badge
target: _blank
- value: Source
icon: lucide:code
to: https://github.com/ZTL-UwU/shadcn-docs-nuxt/blob/main/components/content/Badge.vue
target: _blank
---
## Usage
::stack
::div{class="p-3"}
::badge
Default
::
::badge{size="sm"}
Small
::
::
```mdc
::badge
Default
::
::badge{size="sm"}
Small
::
```
::
### Variants
::tabs{variant="line"}
::stack{label="outline"}
::div{class="p-3"}
:badge[Outline]{variant="outline"}
::
```mdc
:badge[Outline]{variant="outline"}
```
::
::stack{label="secondary"}
::div{class="p-3"}
:badge[Secondary]{variant="secondary"}
::
```mdc
:badge[Secondary]{variant="secondary"}
```
::
::stack{label="info"}
::div{class="p-3"}
:badge[Info]{type="info"}
::
```mdc
:badge[Info]{type="info"}
```
::
::stack{label="warning"}
::div{class="p-3"}
:badge[Warning]{type="warning"}
::
```mdc
:badge[Warning]{type="warning"}
```
::
::stack{label="success"}
::div{class="p-3"}
:badge[Success]{type="success"}
::
```mdc
:badge[Success]{type="success"}
```
::
::stack{label="lime"}
::div{class="p-3"}
:badge[lime]{type="lime"}
::
```mdc
:badge[lime]{type="lime"}
```
::
::stack{label="danger"}
::div{class="p-3"}
:badge[Danger]{type="danger"}
::
```mdc
:badge[Danger]{type="danger"}
```
::
::
### Link
::stack
::div{class="p-3"}
::badge{variant="outline" type="info" to="https://github.com/ZTL-UwU/shadcn-docs-nuxt" target="_blank"}
Link
::
::
```mdc
::badge{variant="outline" type="info" to="https://github.com/ZTL-UwU/shadcn-docs-nuxt" target="_blank"}
Link
::
```
::
## Props
::field-group
:field{name="type" type="'default' | 'info' | 'warning' | 'success' | 'danger' | 'lime'" default-value="'default'"}
:field{name="variant" type="'default' | 'secondary' | 'destructive' | 'outline'" default-value="'default'"}
:field{name="size" type="'md' | 'sm'" default-value="'md'"}
:field{name="to" type="string"}[Link URL]
:field{name="target" type="Target"}[A `target` attribute value to apply on the link]
::

53
content/docs/1.简单文档/5.components/button-link.md Normal file
View File

@@ -0,0 +1,53 @@
---
title: Button Link
icon: lucide:external-link
badges:
- value: Docus
to: https://docus.dev/api/components#buttonlink
target: _blank
- value: Source
icon: lucide:code
to: https://github.com/ZTL-UwU/shadcn-docs-nuxt/blob/main/components/content/ButtonLink.vue
target: _blank
- value: 0.6.5
---
## Usage
::stack
::div{class="p-3 flex gap-4"}
::button-link{right-icon="lucide:arrow-up-right" to="/getting-started" target="_blank"}
Get Started
::
::button-link{left-icon="lucide:github" variant="outline" to="https://github.com/ZTL-UwU/shadcn-docs-nuxt" target="_blank"}
GitHub
::
::button-link{left-icon="lucide:ghost" variant="ghost" href="https://github.com/ZTL-UwU/shadcn-docs-nuxt" blank}
Ghost
::
::
```mdc
::button-link{right-icon="lucide:arrow-up-right" to="/getting-started" target="_blank"}
Get Started
::
::button-link{left-icon="lucide:github" variant="outline" to="https://github.com/ZTL-UwU/shadcn-docs-nuxt" target="_blank"}
GitHub
::
::button-link{left-icon="lucide:ghost" variant="ghost" href="https://github.com/ZTL-UwU/shadcn-docs-nuxt" blank}
Ghost
::
```
::
## Props
::field-group
:field{name="variant" type="'default' | 'secondary' | 'link' | 'destructive' | 'outline' | 'ghost'" default-value="'default'"}
:field{name="size" type="'default' | 'icon' | 'sm' | 'xs' | 'lg'" default-value="'default'"}
:field{name="leftIcon" type="string"}[Icon on the left]
:field{name="rightIcon" type="string"}[Icon on the right]
:field{name="to" type="string"}[Link URL]
:field{name="href" type="string"}[Alias to `to`]
:field{name="target" type="Target"}[A `target` attribute value to apply on the link]
:field{name="blank" type="boolean"}[Alias to `target='_blank'`]
::

16
content/docs/1.简单文档/5.components/callout.md Normal file
View File

@@ -0,0 +1,16 @@
---
title: Callout
icon: lucide:megaphone
badges:
- value: Nuxt UI Pro
to: https://ui.nuxt.com/pro/prose/callout
target: _blank
- value: Source
icon: lucide:code
to: https://github.com/ZTL-UwU/shadcn-docs-nuxt/blob/main/components/content/Callout.vue
target: _blank
---
::alert{to="/components/docs/alert"}
`::callout`{lang="mdc"} is an alias to `::alert`{lang="mdc"}.
::

175
content/docs/1.简单文档/5.components/card-group.md Normal file
View File

@@ -0,0 +1,175 @@
---
title: Card Group
icon: lucide:layout-grid
badges:
- value: Nuxt UI Pro
to: https://ui.nuxt.com/pro/prose/card-group
target: _blank
- value: Source
icon: lucide:code
to: https://github.com/ZTL-UwU/shadcn-docs-nuxt/blob/main/components/content/CardGroup.vue
target: _blank
---
## Usage
::stack
::div{class="p-4"}
::card-group
::card
---
title: Components
icon: lucide:box
to: https://nuxt.com/docs/api/components/client-only
target: _blank
---
Explore Nuxt built-in components for pages, layouts, head, and more.
::
::card
---
title: Composables
icon: lucide:arrow-right-left
to: https://nuxt.com/docs/api/composables/use-app-config
target: _blank
---
Discover Nuxt composable functions for data-fetching, head management and more.
::
::card
---
title: Utils
icon: lucide:scissors
to: https://nuxt.com/docs/api/utils/dollarfetch
target: _blank
---
Learn about Nuxt utility functions for navigation, error handling and more.
::
::card
---
title: Commands
icon: lucide:square-terminal
to: https://nuxt.com/docs/api/commands/add
target: _blank
---
List of Nuxt CLI commands to init, analyze, build, and preview your application.
::
::
::
```mdc
::card-group
::card
---
title: Components
icon: lucide:box
to: https://nuxt.com/docs/api/components/client-only
target: _blank
---
Explore Nuxt built-in components for pages, layouts, head, and more.
::
::card
---
title: Composables
icon: lucide:arrow-right-left
to: https://nuxt.com/docs/api/composables/use-app-config
target: _blank
---
Discover Nuxt composable functions for data-fetching, head management and more.
::
::card
---
title: Utils
icon: lucide:scissors
to: https://nuxt.com/docs/api/utils/dollarfetch
target: _blank
---
Learn about Nuxt utility functions for navigation, error handling and more.
::
::card
---
title: Commands
icon: lucide:square-terminal
to: https://nuxt.com/docs/api/commands/add
target: _blank
---
List of Nuxt CLI commands to init, analyze, build, and preview your application.
::
::
```
::
### Cols
::stack
::div{class="p-4"}
::card-group{:cols="3"}
::card
---
title: Components
icon: lucide:box
to: https://nuxt.com/docs/api/components/client-only
target: _blank
---
Explore Nuxt built-in components for pages, layouts, head, and more.
::
::card
---
title: Composables
icon: lucide:arrow-right-left
to: https://nuxt.com/docs/api/composables/use-app-config
target: _blank
---
Discover Nuxt composable functions for data-fetching, head management and more.
::
::card
---
title: Utils
icon: lucide:scissors
to: https://nuxt.com/docs/api/utils/dollarfetch
target: _blank
---
Learn about Nuxt utility functions for navigation, error handling and more.
::
::
::
```mdc
::card-group{:cols="3"}
::card
---
title: Components
icon: lucide:box
to: https://nuxt.com/docs/api/components/client-only
target: _blank
---
Explore Nuxt built-in components for pages, layouts, head, and more.
::
::card
---
title: Composables
icon: lucide:arrow-right-left
to: https://nuxt.com/docs/api/composables/use-app-config
target: _blank
---
Discover Nuxt composable functions for data-fetching, head management and more.
::
::card
---
title: Utils
icon: lucide:scissors
to: https://nuxt.com/docs/api/utils/dollarfetch
target: _blank
---
Learn about Nuxt utility functions for navigation, error handling and more.
::
::
```
::
## Props
::field-group
:field{name="cols" type="1 | 2 | 3 | 4 | 5 | 6" default-value="2"}[Number of columns (only for desktop)]
::

173
content/docs/1.简单文档/5.components/card.md Normal file
View File

@@ -0,0 +1,173 @@
---
title: Card
icon: lucide:square
badges:
- value: Nuxt UI Pro
to: https://ui.nuxt.com/pro/prose/card
target: _blank
- value: Docus
to: https://docus.dev/api/components#card
target: _blank
- value: Source
icon: lucide:code
to: https://github.com/ZTL-UwU/shadcn-docs-nuxt/blob/main/components/content/Card.vue
target: _blank
---
## Usage
::stack
::div{class="p-4"}
::card
---
icon: lucide:box
---
#title
Card Title
#description
Description
#content
Beautifully designed **Nuxt Content** template with **shadcn-vue**. _Customizable. Compatible. Open Source._
#footer
Footer
::
::
```mdc
::card
---
icon: lucide:box
---
#title
Card Title
#description
Description
#content
Beautifully designed **Nuxt Content** template with **shadcn-vue**. _Customizable. Compatible. Open Source._
#footer
Footer
::
```
::
### Link
::stack
::div{class="p-4"}
::card
---
to: https://github.com/ZTL-UwU/shadcn-docs-nuxt
target: _blank
# showLinkIcon: false
---
#title
Link Card
#content
Beautifully designed **Nuxt Content** template with **shadcn-vue**. _Customizable. Compatible. Open Source._
::
::
```mdc
::card
---
to: https://github.com/ZTL-UwU/shadcn-docs-nuxt
target: _blank
# showLinkIcon: false
---
#title
Link Card
#content
Beautifully designed **Nuxt Content** template with **shadcn-vue**. _Customizable. Compatible. Open Source._
::
```
::
### Horizontal
::stack
::div{class="p-4"}
::card
---
icon: 'lucide:fold-horizontal'
icon-size: 26
horizontal: true
---
#title
Horizontal Card
#description
Beautifully designed **Nuxt Content** template with **shadcn-vue**. _Customizable. Compatible. Open Source._
::
::
```mdc
::card
---
icon: 'lucide:fold-horizontal'
icon-size: 26
horizontal: true
---
#title
Horizontal Card
#description
Beautifully designed **Nuxt Content** template with **shadcn-vue**. _Customizable. Compatible. Open Source._
::
```
::
### Image
::stack
::div{class="p-4"}
::card
---
img: /og-nuxt.png
---
#title
Image Card
#content
Beautifully designed **Nuxt Content** template with **shadcn-vue**. _Customizable. Compatible. Open Source._
::
::
```mdc
::card
---
img: /og-nuxt.png
---
#title
Image Card
#content
Beautifully designed **Nuxt Content** template with **shadcn-vue**. _Customizable. Compatible. Open Source._
::
```
::
## Props
::field-group
:field{name="title" type="string"}[Card title]
:field{name="description" type="string"}[Card description]
:field{name="content" type="string"}[Card content]
:field{name="footer" type="string"}[Card footer]
:field{name="icon" type="string"}[Card icon]
:field{name="horizontal" type="boolean" default-value="false"}
:field{name="to" type="string"}[Link URL]
:field{name="target" type="Target"}[A `target` attribute value to apply on the link]
:field{name="iconSize" type="number" default-value="24"}
:field{name="img" type="string"}[Image URL]
:field{name="showLinkIcon" type="boolean" default-value="true"}[Whether to show the link indicator :icon{name="lucide:arrow-up-right"}]
::

77
content/docs/1.简单文档/5.components/code-group.md Normal file
View File

@@ -0,0 +1,77 @@
---
title: Code Group
icon: lucide:code-xml
badges:
- value: Nuxt UI Pro
to: https://ui.nuxt.com/pro/prose/code-group
target: _blank
- value: Docus
to: https://docus.dev/api/components#codegroup
target: _blank
- value: Source
icon: lucide:code
to: https://github.com/ZTL-UwU/shadcn-docs-nuxt/blob/main/components/content/CodeGroup.vue
target: _blank
---
## Usage
::stack
::div{class="p-4"}
::code-group
```vue [app.vue]
<template>
<div>
<NuxtLayout>
<NuxtPage />
</NuxtLayout>
</div>
</template>
```
```vue [pages/index.vue]
<template>
<div>
<h1>Welcome to the homepage</h1>
<AppAlert>
This is an auto-imported component
</AppAlert>
</div>
</template>
```
::
::
```mdc
::code-group
```vue [app.vue]
<template>
<div>
<NuxtLayout>
<NuxtPage />
</NuxtLayout>
</div>
</template>
```
```vue [pages/index.vue]
<template>
<div>
<h1>Welcome to the homepage</h1>
<AppAlert>
This is an auto-imported component
</AppAlert>
</div>
</template>
```
::
```
::
::alert{to="/components/docs/tabs"}
`::code-group`{lang="mdc"} is a wrapper around `::tabs{variant="card"}`{lang="mdc"}.
::
## Props
:field{name="sync" type="string"}[Sync scope for `::tabs`]

324
content/docs/1.简单文档/5.components/code-tree.md Normal file
View File

@@ -0,0 +1,324 @@
---
title: Code Tree
icon: lucide:folder-code
badges:
- value: 0.8.17
- value: Source
icon: lucide:code
to: https://github.com/ZTL-UwU/shadcn-docs-nuxt/blob/main/components/content/CodeTree.vue
target: _blank
---
## Usage
::stack
::div{class="p-4"}
::code-tree{defaultValue="nuxt.config.ts"}
```css [app/assets/main.css]
@import "tailwindcss" theme(static);
@import "@nuxt/ui-pro";
```
```ts [app/app.config.ts]
export default defineAppConfig({
ui: {
colors: {
primary: 'sky',
colors: 'slate'
}
}
});
```
```vue [app/app.vue]
<template>
<UApp>
<NuxtPage />
</UApp>
</template>
```
```json [package.json]
{
"name": "nuxt-app",
"private": true,
"type": "module",
"scripts": {
"build": "nuxt build",
"dev": "nuxt dev",
"generate": "nuxt generate",
"preview": "nuxt preview",
"postinstall": "nuxt prepare",
"typecheck": "nuxt typecheck"
},
"dependencies": {
"@iconify-json/lucide": "^1.2.18",
"@nuxt/ui-pro": "3.0.0-alpha.10",
"nuxt": "^3.15.1"
},
"devDependencies": {
"typescript": "^5.7.2",
"vue-tsc": "^2.2.0"
}
}
```
```json [tsconfig.json]
{
"extends": "./.nuxt/tsconfig.json"
}
```
```ts [nuxt.config.ts]
export default defineNuxtConfig({
modules: ['@nuxt/ui-pro'],
future: {
compatibilityVersion: 4
},
css: ['~/assets/main.css']
});
```
````md [README.md]
# Nuxt 3 Minimal Starter
Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
## Setup
Make sure to install the dependencies:
```bash
# npm
npm install
# pnpm
pnpm install
# yarn
yarn install
# bun
bun install
```
## Development Server
Start the development server on `http://localhost:3000`:
```bash
# npm
npm run dev
# pnpm
pnpm run dev
# yarn
yarn dev
# bun
bun run dev
```
## Production
Build the application for production:
```bash
# npm
npm run build
# pnpm
pnpm run build
# yarn
yarn build
# bun
bun run build
```
Locally preview production build:
```bash
# npm
npm run preview
# pnpm
pnpm run preview
# yarn
yarn preview
# bun
bun run preview
```
Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.
````
::
::
`````mdc height=400
::code-tree{defaultValue="nuxt.config.ts"}
```css [app/assets/main.css]
@import "tailwindcss" theme(static);
@import "@nuxt/ui-pro";
```
```ts [app/app.config.ts]
export default defineAppConfig({
ui: {
colors: {
primary: 'sky',
colors: 'slate'
}
}
});
```
```vue [app/app.vue]
<template>
<UApp>
<NuxtPage />
</UApp>
</template>
```
```json [package.json]
{
"name": "nuxt-app",
"private": true,
"type": "module",
"scripts": {
"build": "nuxt build",
"dev": "nuxt dev",
"generate": "nuxt generate",
"preview": "nuxt preview",
"postinstall": "nuxt prepare",
"typecheck": "nuxt typecheck"
},
"dependencies": {
"@iconify-json/lucide": "^1.2.18",
"@nuxt/ui-pro": "3.0.0-alpha.10",
"nuxt": "^3.15.1"
},
"devDependencies": {
"typescript": "^5.7.2",
"vue-tsc": "^2.2.0"
}
}
```
```json [tsconfig.json]
{
"extends": "./.nuxt/tsconfig.json"
}
```
```ts [nuxt.config.ts]
export default defineNuxtConfig({
modules: ['@nuxt/ui-pro'],
future: {
compatibilityVersion: 4
},
css: ['~/assets/main.css']
});
```
````md [README.md]
# Nuxt 3 Minimal Starter
Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
## Setup
Make sure to install the dependencies:
```bash
# npm
npm install
# pnpm
pnpm install
# yarn
yarn install
# bun
bun install
```
## Development Server
Start the development server on `http://localhost:3000`:
```bash
# npm
npm run dev
# pnpm
pnpm run dev
# yarn
yarn dev
# bun
bun run dev
```
## Production
Build the application for production:
```bash
# npm
npm run build
# pnpm
pnpm run build
# yarn
yarn build
# bun
bun run build
```
Locally preview production build:
```bash
# npm
npm run preview
# pnpm
pnpm run preview
# yarn
yarn preview
# bun
bun run preview
```
Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.
````
::
`````
::
## Props
::field-group
:field{name="defaultValue"}[Default open file]
:field{name="title" type="string"}[Code tree title]
:field{name="height" type="number" default-value="400"}
::

62
content/docs/1.简单文档/5.components/field-group.md Normal file
View File

@@ -0,0 +1,62 @@
---
title: Field Group
icon: lucide:settings-2
badges:
- value: Nuxt UI Pro
to: https://ui.nuxt.com/pro/prose/field-group
target: _blank
- value: Source
icon: lucide:code
to: https://github.com/ZTL-UwU/shadcn-docs-nuxt/blob/main/components/content/FieldGroup.vue
target: _blank
---
## Usage
::stack
::div{class="p-4"}
::field-group
::field{name="withDefault" type="boolean" defaultValue="true"}
A field with a default value.
::
::field{name="requiredField" type="boolean" required}
A required field.
::
::field{name="clear (path?: string)" type="void"}
Clears form errors associated with a specific path. If no path is provided, clears all form errors.
::
::field{name="getErrors (path?: string)" type="FormError[]"}
Retrieves form errors associated with a specific path. If no path is provided, returns all form errors.
::
::field{name="setErrors (errors: FormError[], path?: string)" type="void"}
Sets form errors for a given path. If no path is provided, overrides all errors.
::
::field{name="errors" type="Ref<FormError[]>"}
A reference to the array containing validation errors. Use this to access or manipulate the error information.
::
::
::
```mdc
::field-group
::field{name="withDefault" type="boolean" defaultValue="true"}
A field with a default value.
::
::field{name="requiredField" type="boolean" required}
A required field.
::
::field{name="clear (path?: string)" type="void"}
Clears form errors associated with a specific path. If no path is provided, clears all form errors.
::
::field{name="getErrors (path?: string)" type="FormError[]"}
Retrieves form errors associated with a specific path. If no path is provided, returns all form errors.
::
::field{name="setErrors (errors: FormError[], path?: string)" type="void"}
Sets form errors for a given path. If no path is provided, overrides all errors.
::
::field{name="errors" type="Ref<FormError[]>"}
A reference to the array containing validation errors. Use this to access or manipulate the error information.
::
::
```
::

39
content/docs/1.简单文档/5.components/field.md Normal file
View File

@@ -0,0 +1,39 @@
---
title: Field
icon: lucide:settings-2
badges:
- value: Nuxt UI Pro
to: https://ui.nuxt.com/pro/prose/field
target: _blank
- value: Source
icon: lucide:code
to: https://github.com/ZTL-UwU/shadcn-docs-nuxt/blob/main/components/content/Field.vue
target: _blank
---
## Usage
::stack
::div{class="p-4"}
::field{name="Field" type="string" defaultValue="'default'" required}
The _description_ can be set as prop or in the default slot with full **markdown** support.
::
::
```mdc
::field{name="Field" type="string" defaultValue="'default'" required}
The _description_ can be set as prop or in the default slot with full **markdown** support.
::
```
::
The text `required` is configurable in [`main.fieldRequiredText`](/api/configuration/shadcn-docs#main).
## Props
::field-group
:field{name="name" type="string"}[Field name]
:field{name="type" type="string"}[Field type]
:field{name="description" type="string"}[Field description]
:field{name="defaultValue" type="string"}[Field default value]
:field{name="required" type="boolean"}[Whether the field is required]
::

182
content/docs/1.简单文档/5.components/file-tree.md Normal file
View File

@@ -0,0 +1,182 @@
---
title: File Tree
icon: lucide:folder-tree
badges:
- value: 0.8.10
- value: Source
icon: lucide:code
to: https://github.com/ZTL-UwU/shadcn-docs-nuxt/blob/main/components/content/FileTree.vue
target: _blank
---
## Usage
::stack
::div{class="p-4"}
::file-tree
---
tree:
- app:
- components:
- Header.vue
- Footer.vue
- composables:
- useErrorHandler.ts
- ^app.vue^
- docs:
- index.md
---
::
::
```mdc
::file-tree
---
tree:
- app:
- components:
- Header.vue
- Footer.vue
- composables:
- useErrorHandler.ts
- ^app.vue^ # This is highlighted
- docs:
- index.md
---
::
```
::
### Customizations
::stack
::div{class="p-4"}
::file-tree
---
title: File Tree Title
icon: lucide:folder-tree
autoSlash: false # Whether to add a slash after every folder automatically
showArrow: true # Whether to show the guide arrow
tree:
- components:
- layout:
- Header.vue
- Footer.vue
- ...
- content:
- Accordion.vue
- Alert.vue
- ProseCode.vue
- ...
---
::
::
```mdc
::file-tree
---
title: File Tree Title
icon: lucide:folder-tree
autoSlash: false # Whether to add a slash after every folder automatically
showArrow: true # Whether to show the collapse arrow
tree:
- components:
- layout:
- Header.vue
- Footer.vue
- ...
- content:
- Accordion.vue
- Alert.vue
- ProseCode.vue
- ...
---
::
```
::
### Disable Icons
::stack
::div{class="p-4"}
::file-tree
---
showIcon: false
tree:
- app:
- components:
- Header.vue
- Footer.vue
- composables:
- useErrorHandler.ts
- ^app.vue^
- docs:
- index.md
---
::
::
```mdc
::file-tree
---
showIcon: false
tree:
- app:
- components:
- Header.vue
- Footer.vue
- composables:
- useErrorHandler.ts
- ^app.vue^
- docs:
- index.md
---
::
```
::
### Diff
::stack
::div{class="p-4"}
::file-tree
---
showIcon: false
tree:
- app:
- + components:
- Header.vue
- "- Footer.vue"
- composables:
- useErrorHandler.ts
- ^app.vue^
- docs:
- index.md
---
::
::
```mdc
::file-tree
---
showIcon: false
tree:
- app:
- + components:
- Header.vue
- "- Footer.vue"
- composables:
- useErrorHandler.ts
- ^app.vue^
- docs:
- index.md
---
::
```
::
## Props
::field-group
:field{name="tree"}[The file tree]
:field{name="title" type="string"}[File tree title]
:field{name="icon" type="string"}[File tree title icon]
:field{name="autoSlash" type="boolean" default-value="true"}[Whether to add a slash after every folder automatically]
:field{name="showArrow" type="boolean" default-value="false"}[Whether to show the collapse arrow]
:field{name="showIcon" type="boolean" default-value="true"}[Whether to show file & folder icons]
::

94
content/docs/1.简单文档/5.components/icon.md Normal file
View File

@@ -0,0 +1,94 @@
---
title: Icon
icon: lucide:star
badges:
- value: Docus
to: https://docus.dev/api/components#icon
target: _blank
- value: Source
icon: lucide:code
to: https://github.com/ZTL-UwU/shadcn-docs-nuxt/blob/main/components/content/Icon.vue
target: _blank
---
::alert{to="https://github.com/nuxt-modules/icon" target="_blank"}
The icon component uses **Nuxt Icon** under the hood. Check out the usage guide from Nuxt Icon.
::
## Usage
::stack
::div{class="p-4 space-x-2"}
:icon{name="lucide:box"}
:icon{name="vscode-icons:file-type-js-official"}
:icon{name="vscode-icons:file-type-vue"}
:icon{name="vscode-icons:file-type-nuxt" :size="30"}
::
```mdc
:icon{name="lucide:box"}
:icon{name="vscode-icons:file-type-js-official"}
:icon{name="vscode-icons:file-type-vue"}
:icon{name="vscode-icons:file-type-nuxt" :size="30"}
```
::
If you want to use other icons, it is highly recommended to install them locally, which is faster and more reliable on both SSR and client-side.
```bash [Terminal]
npm i -D @iconify-json/collection-name
```
`@iconify-json/lucide` and `@iconify-json/vscode-icons` are installed by default.
### Smart Icon
:badge[0.5.3]{variant="outline"}
You can put iconify icons, emojis and urls in `smart-icon`. Smart icon will render them automatically.
::stack
::div{class="p-4"}
**Iconify**
<div class="space-x-2">
:smart-icon{name="lucide:box"}
:smart-icon{name="vscode-icons:file-type-js-official"}
:smart-icon{name="vscode-icons:file-type-vue"}
</div>
**Emojis**
<div class="space-x-2">
:smart-icon{name="😍"}
:smart-icon{name="🚀"}
:smart-icon{name="🎉" :size="30"}
</div>
**URL**
<div class="space-x-2">
:smart-icon{name="/logo.svg"}
:smart-icon{name="https://vueuse.org/favicon.svg" :size="40"}
</div>
::
```mdc
**Iconify**
:smart-icon{name="lucide:box"}
:smart-icon{name="vscode-icons:file-type-js-official"}
:smart-icon{name="vscode-icons:file-type-vue"}
**Emojis**
:smart-icon{name="😍"}
:smart-icon{name="🚀"}
:smart-icon{name="🎉" :size="30"}
**URL**
:smart-icon{name="/logo.svg"}
:smart-icon{name="https://vueuse.org/favicon.svg" :size="40"}
```
::

82
content/docs/1.简单文档/5.components/playground.md Normal file
View File

@@ -0,0 +1,82 @@
---
title: Playground
icon: lucide:app-window
navBadges:
- value: New
type: lime
badges:
- value: Source
icon: lucide:code
to: https://github.com/ZTL-UwU/shadcn-docs-nuxt/blob/main/components/content/Playground.vue
target: _blank
---
## Usage
### Stackblitz
::stack
::div{class="p-4"}
::playground
---
provider: stackblitz
repo: nuxt/starter
branch: v3
file: app.vue
---
::
::
```mdc
::playground
---
provider: stackblitz
repo: nuxt/starter
branch: v3
file: app.vue
---
::
```
::
### CodeSandbox
::stack
::div{class="p-4"}
::playground
---
provider: codesandbox
repo: nuxt/starter
branch: v3
file: app.vue
---
::
::
```mdc
::playground
---
provider: codesandbox
repo: nuxt/starter
branch: v3
file: app.vue
---
::
```
::
## Props
::field-group
:field{name="provider" type="'stackblitz' | 'codesandbox'"}[Provider to use]
:field{name="repo" type="string"}[GitHub repository name (e.g. `nuxt/starter`)]
:field{name="branch" type="string" default-value="main"}[Branch name]
::field{name="id" type="string"}
Repository ID (e.g. for Stackblitz `github-t1vjvm`, for Codesandbox `8hq5qn`)
::alert{icon="lucide:info" type="info"}
You need to provide either `repo` or `id` prop, but not both.
::
::
:field{name="dir" type="string" default-value="''"}[Directory to open in the playground (optional)]
:field{name="file" type="string"}[File path to open]
:field{name="title" type="string" default-value="Playground"}[Title of the iframe]
::

39
content/docs/1.简单文档/5.components/read-more.md Normal file
View File

@@ -0,0 +1,39 @@
---
title: Read More
icon: lucide:bookmark
badges:
- value: undocs
to: https://undocs.pages.dev/guide/components#read-more
target: _blank
- value: Source
icon: lucide:code
to: https://github.com/ZTL-UwU/shadcn-docs-nuxt/blob/main/components/content/ReadMore.vue
target: _blank
---
## Usage
::stack
::div{class="p-4"}
:read-more{to="/getting-started/writing/markdown"}
:read-more{title="Nuxt website" to="https://nuxt.com/"}
:read-more{to="https://nuxt.com/"}
:read-more{icon="lucide:link" to="https://nuxt.com/"}
::
```mdc
:read-more{to="/getting-started/writing/markdown"}
:read-more{title="Nuxt website" to="https://nuxt.com/"}
:read-more{to="https://nuxt.com/"}
:read-more{icon="lucide:link" to="https://nuxt.com/"}
```
::
## Props
::field-group
:field{name="title" type="string"}[Read More title]
:field{name="icon" type="string"}[Read More icon]
:field{name="to" type="string"}[Link URL]
:field{name="target" type="Target"}[A `target` attribute value to apply on the link]
::

89
content/docs/1.简单文档/5.components/stack.md Normal file
View File

@@ -0,0 +1,89 @@
---
title: Stack
icon: lucide:rows-3
badges:
- value: Source
icon: lucide:code
to: https://github.com/ZTL-UwU/shadcn-docs-nuxt/blob/main/components/content/Stack.vue
target: _blank
- value: 0.6.2
---
## Usage
::stack
::div{class="p-4 md:p-8"}
::stack
::div{class="p-6 text-3xl font-bold"}
✨ shadcn-docs-nuxt
::
```mdc
---
title: Installation
description: How to install shadcn-docs-nuxt in your app.
icon: lucide:play
---
## Using the starter template
```
:pm-x{command="nuxi@latest init <project-name> -t github:ZTL-UwU/shadcn-docs-nuxt-starter"}
:read-more{title="Installation" to="/getting-started/installation"}
::card
---
title: Components
icon: lucide:box
---
See MDC components provided by **shadcn-docs-nuxt**.
::
::
::
```mdc
::stack
::div{class="p-6 text-3xl font-bold"}
✨ shadcn-docs-nuxt
::
```mdc
---
title: Installation
description: How to install shadcn-docs-nuxt in your app.
icon: lucide:play
---
## Using the starter template
```
:pm-x{command="nuxi@latest init <project-name> -t github:ZTL-UwU/shadcn-docs-nuxt-starter"}
:read-more{title="Installation" to="/getting-started/installation"}
::card
---
title: Components
icon: lucide:box
---
See MDC components provided by **shadcn-docs-nuxt**.
::
::
```
::
Stackable components:
- `div`
- Code Blocks
- `alert`
- `callout`
- `read-more`
- `code-group`
- `code-tree`
- `card`
- `tabs`
- `pm-install`
- `pm-run`
- `pm-x`

148
content/docs/1.简单文档/5.components/steps.md Normal file
View File

@@ -0,0 +1,148 @@
---
title: Steps
icon: lucide:arrow-down-0-1
badges:
- value: Source
icon: lucide:code
to: https://github.com/ZTL-UwU/shadcn-docs-nuxt/blob/main/components/content/Steps.vue
target: _blank
---
## Usage
::stack
::div{class="p-4 md:p-6"}
::steps
### Get Starter Template
::code-group
```bash [npm]
npx nuxi@latest init <project-name> -t github:ZTL-UwU/shadcn-docs-nuxt-starter
```
```bash [pnpm]
pnpm dlx nuxi@latest init <project-name> -t github:ZTL-UwU/shadcn-docs-nuxt-starter
```
```bash [bun]
bunx nuxi@latest init <project-name> -t github:ZTL-UwU/shadcn-docs-nuxt-starter
```
::
::alert
Alternatively, you can clone or download the template from the [GitHub repo](https://github.com/ZTL-UwU/shadcn-docs-nuxt-starter).
::
### Install Dependencies
::code-group
```bash [npm]
npm install
```
```bash [pnpm]
pnpm install
```
```bash [bun]
bun install
```
::
### Development Server
::code-group
```bash [npm]
npm run dev -- -o
```
```bash [pnpm]
pnpm dev -o
```
```bash [bun]
bun run dev -o
```
::
::
::
```mdc height=400
::steps
### Get Starter Template
::code-group
```bash [npm]
npx nuxi@latest init <project-name> -t github:ZTL-UwU/shadcn-docs-nuxt-starter
```
```bash [pnpm]
pnpm dlx nuxi@latest init <project-name> -t github:ZTL-UwU/shadcn-docs-nuxt-starter
```
```bash [bun]
bunx nuxi@latest init <project-name> -t github:ZTL-UwU/shadcn-docs-nuxt-starter
```
::
::alert
Alternatively, you can clone or download the template from the [GitHub repo](https://github.com/ZTL-UwU/shadcn-docs-nuxt-starter).
::
### Install Dependencies
::code-group
```bash [npm]
npm install
```
```bash [pnpm]
pnpm install
```
```bash [bun]
bun install
```
::
### Development Server
::code-group
```bash [npm]
npm run dev -- -o
```
```bash [pnpm]
pnpm dev -o
```
```bash [bun]
bun run dev -o
```
::
::
```
::
### Multi-level headings
:badge[0.4.6]{variant="outline"}
::stack
::div{class="p-4 md:p-6"}
::steps{:level="5"}
##### Specify the level of headings to use
```mdc
::steps{:level="5"}
```
##### Available Headings
`h1` through `h6`. Defaults to `h3`.
::
::
```mdc
::steps{:level="5"}
##### Multi-level headings
```mdc
::steps{:level="5"}
```
##### Available Headings
`h1` through `h6`. Defaults to `h3`.
::
```
::
## Props
:field{name="level" type="number"}[Specify the level of headings to use]

375
content/docs/1.简单文档/5.components/tabs.md Normal file
View File

@@ -0,0 +1,375 @@
---
title: Tabs
icon: lucide:table-2
badges:
- value: Nuxt UI Pro
to: https://ui.nuxt.com/pro/prose/tabs
target: _blank
- value: Source
icon: lucide:code
to: https://github.com/ZTL-UwU/shadcn-docs-nuxt/blob/main/components/content/Tabs.vue
target: _blank
---
## Usage
::stack
::div{class="p-4"}
::tabs
::div{label="PostgreSQL" icon="lucide:database"}
### PostgreSQL column types
```ts
import { integer, pgTable } from 'drizzle-orm/pg-core';
export const table = pgTable('table', {
int: integer('int')
});
```
::
::div{label="MySQL"}
### MySQL column types
```ts
import { int, mysqlTable } from 'drizzle-orm/mysql-core';
const table = mysqlTable('table', {
int: int('int')
});
```
::
::div{label="SQLite"}
### SQLite column types
```ts
import { integer, sqliteTable } from 'drizzle-orm/sqlite-core';
const table = sqliteTable('table', {
id: integer('id')
});
// you can customize integer mode to be number, boolean, timestamp, timestamp_ms
integer('id', { mode: 'number' });
integer('id', { mode: 'boolean' });
integer('id', { mode: 'timestamp_ms' });
integer('id', { mode: 'timestamp' }); // Date
```
::
::
::
```mdc height=300
::tabs
::div{label="PostgreSQL" icon="lucide:database"}
### PostgreSQL column types
```ts
import { integer, pgTable } from 'drizzle-orm/pg-core';
export const table = pgTable('table', {
int: integer('int')
});
```
::
::div{label="MySQL"}
### MySQL column types
```ts
import { int, mysqlTable } from 'drizzle-orm/mysql-core';
const table = mysqlTable('table', {
int: int('int')
});
```
::
::div{label="SQLite"}
### SQLite column types
```ts
import { integer, sqliteTable } from 'drizzle-orm/sqlite-core';
const table = sqliteTable('table', {
id: integer('id')
});
// you can customize integer mode to be number, boolean, timestamp, timestamp_ms
integer('id', { mode: 'number' });
integer('id', { mode: 'boolean' });
integer('id', { mode: 'timestamp_ms' });
integer('id', { mode: 'timestamp' }); // Date
```
::
::
```
::
### Card Style
::stack
::div{class="p-4"}
::tabs{variant="card"}
::div{label="Card Tab"}
### This is a card-style tab
::
::div{label="Tab 2" icon="lucide:atom"}
This is Tab #2
::
```ts [Code Tab]
console.log('Hello World!');
```
::
::
```mdc
::tabs{variant="card"}
::div{label="Card Tab"}
### This is a card-style tab
::
::div{label="Tab 2" icon="lucide:atom"}
This is Tab #2
::
```ts [Code Tab]
console.log('Hello World!');
```
::
```
::
### Line Style
:badge[0.6.4]{variant="outline"}
::stack
::div{class="p-4"}
::tabs{variant="line"}
::div{label="Preview" class="border flex min-h-[200px] w-full justify-center p-10 items-center rounded-lg shadow-xs"}
:badge[Badge]
::
::div{label="Code"}
```tsx
import { Badge } from "@/components/ui/badge"
export function BadgeDemo() {
return <Badge>Badge</Badge>
}
```
::
::
::
```mdc
::tabs{variant="line"}
::div{label="Preview" class="border flex min-h-[200px] w-full justify-center p-10 items-center rounded-lg shadow-xs"}
:badge[Badge]
::
::div{label="Code"}
```tsx
import { Badge } from "@/components/ui/badge"
export function BadgeDemo() {
return <Badge>Badge</Badge>
}
```
::
::
```
::
### Combobox Style
:badge[0.7.5]{variant="outline"}
::stack
::div{class="p-4"}
::tabs{variant="combobox" search-placeholder="Search database..." search-empty="No database found."}
::div{label="PostgreSQL"}
### PostgreSQL column types
```ts
import { integer, pgTable } from 'drizzle-orm/pg-core';
export const table = pgTable('table', {
int: integer('int')
});
```
::
::div{label="MySQL"}
### MySQL column types
```ts
import { int, mysqlTable } from 'drizzle-orm/mysql-core';
const table = mysqlTable('table', {
int: int('int')
});
```
::
::div{label="SQLite"}
### SQLite column types
```ts
import { integer, sqliteTable } from 'drizzle-orm/sqlite-core';
const table = sqliteTable('table', {
id: integer('id')
});
// you can customize integer mode to be number, boolean, timestamp, timestamp_ms
integer('id', { mode: 'number' });
integer('id', { mode: 'boolean' });
integer('id', { mode: 'timestamp_ms' });
integer('id', { mode: 'timestamp' }); // Date
```
::
::
::
```mdc height=300
::tabs{variant="combobox" search-placeholder="Search database..." search-empty="No database found."}
::div{label="PostgreSQL"}
### PostgreSQL column types
```ts
import { integer, pgTable } from 'drizzle-orm/pg-core';
export const table = pgTable('table', {
int: integer('int')
});
```
::
::div{label="MySQL"}
### MySQL column types
```ts
import { int, mysqlTable } from 'drizzle-orm/mysql-core';
const table = mysqlTable('table', {
int: int('int')
});
```
::
::div{label="SQLite"}
### SQLite column types
```ts
import { integer, sqliteTable } from 'drizzle-orm/sqlite-core';
const table = sqliteTable('table', {
id: integer('id')
});
// you can customize integer mode to be number, boolean, timestamp, timestamp_ms
integer('id', { mode: 'number' });
integer('id', { mode: 'boolean' });
integer('id', { mode: 'timestamp_ms' });
integer('id', { mode: 'timestamp' }); // Date
```
::
::
```
::
### Synced Tabs
:badge[0.8.0]{variant="outline"}
:read-more{to="/components/docs/pm"}
::stack
::div{class="p-4 md:p-8"}
#### Scope 1
::tabs{variant="card" sync="your-scope-name"}
::div{label="Card Tab"}
### This is a card-style tab
::
```ts [Code Tab]
console.log('Hello World!');
```
::
::tabs{variant="card" sync="your-scope-name"}
::div{label="Card Tab"}
### This is a card-style tab
::
::div{label="Tab 2" icon="lucide:atom"}
This is Tab #2
::
```ts [Code Tab]
console.log('Hello World!');
```
::
#### Scope 2
::tabs{variant="line" sync="scope2"}
::div{label="Card Tab"}
### This is a card-style tab
::
::div{label="Tab 2" icon="lucide:atom"}
This is Tab #2
::
```ts [Code Tab]
console.log('Hello World!');
```
::
::tabs{variant="separate" sync="scope2"}
::div{label="Card Tab"}
### This is a card-style tab
::
::div{label="Tab 2" icon="lucide:atom"}
This is Tab #2
::
```ts [Code Tab]
console.log('Hello World!');
```
::
::
```mdc height=400
#### Scope 1
::tabs{variant="card" sync="your-scope-name"}
::div{label="Card Tab"}
### This is a card-style tab
::
```ts [Code Tab]
console.log('Hello World!');
```
::
::tabs{variant="card" sync="your-scope-name"}
::div{label="Card Tab"}
### This is a card-style tab
::
::div{label="Tab 2" icon="lucide:atom"}
This is Tab #2
::
```ts [Code Tab]
console.log('Hello World!');
```
::
#### Scope 2
::tabs{variant="line" sync="scope2"}
::div{label="Card Tab"}
### This is a card-style tab
::
::div{label="Tab 2" icon="lucide:atom"}
This is Tab #2
::
```ts [Code Tab]
console.log('Hello World!');
```
::
::tabs{variant="separate" sync="scope2"}
::div{label="Card Tab"}
### This is a card-style tab
::
::div{label="Tab 2" icon="lucide:atom"}
This is Tab #2
::
```ts [Code Tab]
console.log('Hello World!');
```
::
```
::
## Props
::field-group
:field{name="variant" type="'separate' | 'card' | 'line' | 'combobox'" default-value="'separate'"}
:field{name="padded" type="boolean" default-value="true"}
:field{name="disableSearch" type="boolean" default-value="false"}[For combobox variant]
:field{name="searchPlaceholder" type="string" default-value="'Search Tab...'"}[For combobox variant]
:field{name="searchEmpty" type="string" default-value="'No tab found.'"}[For combobox variant]
:field{name="sync" type="string"}[Sync scope]
::

3
content/docs/2.无人自助系统/.navigation.yml Normal file
View File

@@ -0,0 +1,3 @@
title: 无人自助系统
description: 24小时无人自助系统,适合 棋牌室 台球厅 自习室 等场所使用
icon: simple-icons:monica

11
content/docs/2.无人自助系统/1.index.md Normal file
View File

@@ -0,0 +1,11 @@
---
title: 介绍
description: 24小时无人自助系统,适合 棋牌室 台球厅 自习室 等场所使用
navigation:
icon: simple-icons:opencollective
---
::tip
test
::

6
content/docs/99.about.md Normal file
View File

@@ -0,0 +1,6 @@
---
title: 关于
description: Estel Docs 文档系统
date: 2025-07-31
navigation: false
---

11
nuxt.config.ts
View File

@@ -20,7 +20,7 @@ export default defineNuxtConfig({
build: {
markdown: {
toc: {
searchDepth: 1
searchDepth: 2
},
highlight: {
langs:
@@ -42,10 +42,6 @@ export default defineNuxtConfig({
remove: /[$*+~()'"!\-=#?:@.]/g
}
}
},
preview: {
dev: true,
api: 'https://api.nuxt.studio'
}
},
@@ -81,6 +77,11 @@ export default defineNuxtConfig({
sizeLimitKb: 512
}
},
routeRules: {
'/': { static: true },
'/docs/**': { ssr: false },
'/blog/**': { ssr: false }
},
llms: {
domain: 'https://docs.jiwei.xin',
title: 'Estel Docs',