complete many assets
This commit is contained in:
Jiao77
205
docs/COMPONENTS_GUIDE.md
Normal file
205
docs/COMPONENTS_GUIDE.md
Normal file
@@ -0,0 +1,205 @@
|
||||
# 公用组件使用指南
|
||||
|
||||
本项目新增了三个高质量的公用组件，支持数学公式渲染、磨砂玻璃表格和代码高亮，所有组件都采用了现代化的磨砂玻璃设计风格。
|
||||
|
||||
## 📐 MathFormula - 数学公式组件
|
||||
|
||||
### 功能特点
|
||||
- 支持 KaTeX 渲染，兼容 LaTeX 语法
|
||||
- 行内和块级显示模式
|
||||
- 磨砂玻璃背景效果
|
||||
- 悬停动画效果
|
||||
- 自动错误处理
|
||||
|
||||
### 使用方法
|
||||
|
||||
```astro
|
||||
---
|
||||
import MathFormula from '../components/common/MathFormula.astro';
|
||||
---
|
||||
|
||||
<!-- 行内公式 -->
|
||||
<MathFormula formula="E = mc^2" display={false} />
|
||||
|
||||
<!-- 块级公式 -->
|
||||
<MathFormula
|
||||
formula="\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}"
|
||||
display={true}
|
||||
/>
|
||||
|
||||
<!-- 复杂公式 -->
|
||||
<MathFormula
|
||||
formula="\frac{\partial}{\partial t} \Psi(x,t) = -\frac{i}{\hbar} \hat{H} \Psi(x,t)"
|
||||
display={true}
|
||||
/>
|
||||
```
|
||||
|
||||
### Props 参数
|
||||
|
||||
| 参数 | 类型 | 默认值 | 说明 |
|
||||
|------|------|--------|------|
|
||||
| `formula` | string | - | LaTeX 格式的数学公式 |
|
||||
| `display` | boolean | false | 是否为块级显示 |
|
||||
| `className` | string | '' | 自定义 CSS 类名 |
|
||||
|
||||
## 📊 GlassTable - 磨砂玻璃表格组件
|
||||
|
||||
### 功能特点
|
||||
- 透明磨砂玻璃背景效果
|
||||
- 支持条纹和边框样式
|
||||
- 响应式设计
|
||||
- 悬停行高亮效果
|
||||
- 可自定义表格标题
|
||||
|
||||
### 使用方法
|
||||
|
||||
```astro
|
||||
---
|
||||
import GlassTable from '../components/common/GlassTable.astro';
|
||||
---
|
||||
|
||||
<GlassTable
|
||||
caption="AI算法性能对比"
|
||||
headers={["算法", "准确率", "速度", "内存使用"]}
|
||||
rows={[
|
||||
["YOLO v8", "92.3%", "45 FPS", "256MB"],
|
||||
["ResNet-50", "94.1%", "30 FPS", "512MB"],
|
||||
["EfficientNet", "93.8%", "60 FPS", "128MB"]
|
||||
]}
|
||||
striped={true}
|
||||
bordered={true}
|
||||
/>
|
||||
```
|
||||
|
||||
### Props 参数
|
||||
|
||||
| 参数 | 类型 | 默认值 | 说明 |
|
||||
|------|------|--------|------|
|
||||
| `headers` | string[] | [] | 表头数组 |
|
||||
| `rows` | (string\|number\|boolean)[][] | [] | 表格数据行 |
|
||||
| `caption` | string | - | 表格标题 |
|
||||
| `className` | string | '' | 自定义 CSS 类名 |
|
||||
| `striped` | boolean | false | 是否显示条纹 |
|
||||
| `bordered` | boolean | true | 是否显示边框 |
|
||||
|
||||
### 特殊样式类
|
||||
|
||||
在表格单元格中可以使用以下特殊样式类：
|
||||
|
||||
- `.highlight-cell` - 高亮单元格（绿色）
|
||||
- `.warning-cell` - 警告单元格（黄色）
|
||||
- `.error-cell` - 错误单元格（红色）
|
||||
|
||||
## 💻 CodeBlock - 代码高亮组件
|
||||
|
||||
### 功能特点
|
||||
- 支持多种编程语言语法高亮
|
||||
- 磨砂玻璃背景效果
|
||||
- 可选行号显示
|
||||
- 一键复制代码功能
|
||||
- 代码标题和语言标签
|
||||
- 自动语法检测
|
||||
|
||||
### 使用方法
|
||||
|
||||
```astro
|
||||
---
|
||||
import CodeBlock from '../components/common/CodeBlock.astro';
|
||||
---
|
||||
|
||||
<CodeBlock
|
||||
title="React Hook 示例"
|
||||
language="javascript"
|
||||
showLineNumbers={true}
|
||||
copyable={true}
|
||||
code={`function useFetch(url) {
|
||||
const [data, setData] = useState(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
fetch(url)
|
||||
.then(res => res.json())
|
||||
.then(setData)
|
||||
.finally(() => setLoading(false));
|
||||
}, [url]);
|
||||
|
||||
return { data, loading };
|
||||
}`}
|
||||
/>
|
||||
```
|
||||
|
||||
### Props 参数
|
||||
|
||||
| 参数 | 类型 | 默认值 | 说明 |
|
||||
|------|------|--------|------|
|
||||
| `code` | string | - | 源代码内容 |
|
||||
| `language` | string | 'javascript' | 编程语言 |
|
||||
| `title` | string | - | 代码块标题 |
|
||||
| `showLineNumbers` | boolean | false | 是否显示行号 |
|
||||
| `className` | string | '' | 自定义 CSS 类名 |
|
||||
| `copyable` | boolean | true | 是否显示复制按钮 |
|
||||
|
||||
### 支持的语言
|
||||
|
||||
支持所有 Prism.js 的语言，常用的包括：
|
||||
- `javascript`, `typescript`, `jsx`, `tsx`
|
||||
- `python`, `java`, `csharp`, `cpp`
|
||||
- `html`, `css`, `scss`, `json`
|
||||
- `bash`, `sql`, `yaml`, `markdown`
|
||||
|
||||
## 🎨 设计特点
|
||||
|
||||
所有组件都采用了统一的设计语言：
|
||||
|
||||
### 磨砂玻璃效果
|
||||
- 半透明背景：`rgba(255, 255, 255, 0.1)`
|
||||
- 背景模糊：`backdrop-filter: blur(15px)`
|
||||
- 边框：`1px solid rgba(255, 255, 255, 0.2)`
|
||||
- 圆角：`border-radius: 1rem`
|
||||
|
||||
### 交互动画
|
||||
- 悬停时背景变亮
|
||||
- 轻微上移效果：`translateY(-2px)`
|
||||
- 阴影加深增强立体感
|
||||
- 平滑过渡：`transition: all 0.3s ease`
|
||||
|
||||
### 响应式设计
|
||||
- 移动端适配
|
||||
- 触摸友好的交互区域
|
||||
- 自适应字体和间距
|
||||
|
||||
## 📝 示例页面
|
||||
|
||||
访问 `/components-demo` 查看所有组件的完整使用示例，包括：
|
||||
- 各种数学公式的渲染效果
|
||||
- 不同样式的表格展示
|
||||
- 多种编程语言的代码高亮
|
||||
- 组件之间的组合使用
|
||||
|
||||
## 🚀 快速开始
|
||||
|
||||
1. 导入需要的组件：
|
||||
```astro
|
||||
---
|
||||
import MathFormula from '../components/common/MathFormula.astro';
|
||||
import GlassTable from '../components/common/GlassTable.astro';
|
||||
import CodeBlock from '../components/common/CodeBlock.astro';
|
||||
---
|
||||
```
|
||||
|
||||
2. 在模板中使用组件：
|
||||
```astro
|
||||
<MathFormula formula="x = \frac{-b \pm \sqrt{b^2-4ac}}{2a}" display={true} />
|
||||
|
||||
<GlassTable
|
||||
headers={["姓名", "年龄", "职业"]}
|
||||
rows={[["张三", "25", "工程师"]]}
|
||||
/>
|
||||
|
||||
<CodeBlock
|
||||
language="python"
|
||||
code="print('Hello, World!')"
|
||||
/>
|
||||
```
|
||||
|
||||
这些组件完美融入了网站的整体设计风格，提供了专业级的内容展示能力！
|
||||
95
docs/TYPESCRIPT_WARNINGS_FIXES.md
Normal file
95
docs/TYPESCRIPT_WARNINGS_FIXES.md
Normal file
@@ -0,0 +1,95 @@
|
||||
# TypeScript 警告修复说明
|
||||
|
||||
## 修复的问题
|
||||
|
||||
### 1. ✅ 已修复：`Property 'CodeHighlight' may not exist on type 'Window'`
|
||||
**问题原因：** TypeScript 不知道 `window.CodeHighlight` 这个自定义属性的存在。
|
||||
|
||||
**解决方案：**
|
||||
- 创建了 `src/types/global.d.ts` 文件来扩展 Window 接口
|
||||
- 添加了全局类型声明支持自定义属性
|
||||
|
||||
### 2. ⚠️ 残留警告：`document.execCommand('copy') is deprecated`
|
||||
**问题原因：** `document.execCommand` 是已废弃的 API。
|
||||
|
||||
**现状：**
|
||||
- 已优化为优先使用现代的 `navigator.clipboard` API
|
||||
- 只在不支持 Clipboard API 的环境中降级使用 `execCommand`
|
||||
- 这是向后兼容的必要措施，警告可以忽略
|
||||
|
||||
**代码实现：**
|
||||
```javascript
|
||||
// 优先使用现代 API
|
||||
if (navigator.clipboard && window.isSecureContext) {
|
||||
await navigator.clipboard.writeText(text);
|
||||
} else {
|
||||
// 降级到传统方法（会有警告但功能正常）
|
||||
document.execCommand('copy');
|
||||
}
|
||||
```
|
||||
|
||||
### 3. ✅ 已修复：`'line' is declared but its value is never read`
|
||||
**问题原因：** forEach 回调中的 `line` 参数未被使用。
|
||||
|
||||
**解决方案：** 将未使用的参数重命名为 `_`
|
||||
```javascript
|
||||
// 修复前
|
||||
lines.forEach((line, index) => {
|
||||
// line 未被使用
|
||||
});
|
||||
|
||||
// 修复后
|
||||
lines.forEach((_, index) => {
|
||||
// 使用 _ 表示未使用的参数
|
||||
});
|
||||
```
|
||||
|
||||
### 4. ✅ 已修复：`'nav' is declared but its value is never read`
|
||||
**问题原因：** 获取了 DOM 元素但未使用。
|
||||
|
||||
**解决方案：** 删除了未使用的变量声明
|
||||
|
||||
### 5. ✅ 已修复：`'navigationItems' is declared but its value is never read`
|
||||
**问题原因：** Props 中定义了但未在组件中使用。
|
||||
|
||||
**解决方案：** 从 Props 解构中移除未使用的属性
|
||||
|
||||
### 6. ✅ 已修复：`Math.random().toString(36).substr(2, 9)` - substr is deprecated
|
||||
**问题原因：** `substr` 方法已被废弃。
|
||||
|
||||
**解决方案：** 替换为现代的 `substring` 方法
|
||||
```javascript
|
||||
// 修复前
|
||||
Math.random().toString(36).substr(2, 9)
|
||||
|
||||
// 修复后
|
||||
Math.random().toString(36).substring(2, 11)
|
||||
```
|
||||
|
||||
## 构建结果
|
||||
|
||||
现在的构建输出：
|
||||
- ✅ **0 错误**
|
||||
- ⚠️ **1 个警告**（`execCommand` 废弃警告 - 可安全忽略）
|
||||
- 💡 **3 个提示**（来自其他文件的轻微问题）
|
||||
|
||||
## 关于剩余警告的说明
|
||||
|
||||
最后剩余的 `document.execCommand` 警告是预期的，因为：
|
||||
|
||||
1. **兼容性需求**：需要支持旧版浏览器
|
||||
2. **安全限制**：Clipboard API 只在 HTTPS 环境下工作
|
||||
3. **降级策略**：这是一个合理的 progressive enhancement 实现
|
||||
|
||||
如果你希望完全消除这个警告，可以：
|
||||
- 使用 `// @ts-ignore` 注释
|
||||
- 或者移除降级支持（但会影响旧浏览器兼容性）
|
||||
|
||||
## 最佳实践
|
||||
|
||||
1. **类型安全**：为所有自定义全局变量创建类型声明
|
||||
2. **现代 API**：优先使用新的 Web API，适当降级
|
||||
3. **未使用变量**：使用 `_` 前缀或直接删除
|
||||
4. **废弃方法**：及时更新到推荐的替代方案
|
||||
|
||||
项目现在拥有更好的 TypeScript 类型安全性和更少的警告！
|
||||
Reference in New Issue
Block a user