feat: enhance modal functionality and integrate new components

- Added keyframes and animation for a smooth scale-in effect in the Tailwind configuration.
- Updated Image component to improve quality handling and style definitions.
- Introduced WordViewer and WordViewerModal components for document viewing capabilities.
- Enhanced Modal component to support embedded mode with customizable position and dimensions.
- Integrated IframeModal across various pages for user assistance and content display.
- Updated Content and Menu pages to utilize new components and improve user interaction.
- Added utility function to retrieve public paths for resources.

src/components/ALERT_USAGE.md

@@ -0,0 +1,147 @@
+# Alert 组件使用说明
+
+## 简介
+
+`Alert` 是一个通用的提示框组件，类似于 Ant Design 的 Alert，用于向用户显示重要的提示信息。
+
+## 特性
+
+- 🎨 支持 4 种类型：`warning`、`info`、`success`、`error`
+- 🎭 可选显示/隐藏图标
+- ❌ 可选是否可关闭
+- 🎯 居中模态显示
+- ✨ 优雅的动画效果
+
+## 基本用法
+
+```tsx
+import { Alert } from "@/components";
+
+function MyComponent() {
+  const [showAlert, setShowAlert] = useState(false);
+
+  return (
+    <Alert
+      isOpen={showAlert}
+      onClose={() => setShowAlert(false)}
+      message="这是一条提示信息"
+      type="warning"
+    />
+  );
+}
+```
+
+## API
+
+### Props
+
+| 参数     | 说明           | 类型                                          | 默认值      | 必填 |
+| -------- | -------------- | --------------------------------------------- | ----------- | ---- |
+| isOpen   | 是否显示 Alert | `boolean`                                     | -           | ✅   |
+| onClose  | 关闭回调函数   | `() => void`                                  | -           | ✅   |
+| message  | 提示内容       | `string \| ReactNode`                         | -           | ✅   |
+| type     | 提示类型       | `'warning' \| 'info' \| 'success' \| 'error'` | `'warning'` | ❌   |
+| showIcon | 是否显示图标   | `boolean`                                     | `true`      | ❌   |
+| closable | 是否可关闭     | `boolean`                                     | `true`      | ❌   |
+
+## 示例
+
+### 警告提示
+
+```tsx
+<Alert
+  isOpen={showWarning}
+  onClose={() => setShowWarning(false)}
+  message="该名师工作室数字睿教正在筹划中"
+  type="warning"
+/>
+```
+
+### 成功提示
+
+```tsx
+<Alert
+  isOpen={showSuccess}
+  onClose={() => setShowSuccess(false)}
+  message="操作成功！"
+  type="success"
+/>
+```
+
+### 错误提示
+
+```tsx
+<Alert
+  isOpen={showError}
+  onClose={() => setShowError(false)}
+  message="操作失败，请稍后重试"
+  type="error"
+/>
+```
+
+### 信息提示
+
+```tsx
+<Alert
+  isOpen={showInfo}
+  onClose={() => setShowInfo(false)}
+  message="这是一条普通信息"
+  type="info"
+/>
+```
+
+### 自定义内容
+
+```tsx
+<Alert
+  isOpen={showCustom}
+  onClose={() => setShowCustom(false)}
+  message={
+    <div>
+      <h3 className="text-lg font-bold">自定义标题</h3>
+      <p className="text-sm mt-1">这是自定义的内容</p>
+    </div>
+  }
+  type="info"
+/>
+```
+
+### 不可关闭的提示
+
+```tsx
+<Alert
+  isOpen={showPermanent}
+  onClose={() => {}}
+  message="这是一条不可关闭的提示"
+  type="info"
+  closable={false}
+/>
+```
+
+### 无图标提示
+
+```tsx
+<Alert
+  isOpen={showNoIcon}
+  onClose={() => setShowNoIcon(false)}
+  message="这是一条没有图标的提示"
+  type="info"
+  showIcon={false}
+/>
+```
+
+## 样式说明
+
+每种类型都有对应的颜色主题：
+
+- **warning**: 黄色系（适用于警告信息）
+- **info**: 蓝色系（适用于一般信息）
+- **success**: 绿色系（适用于成功提示）
+- **error**: 红色系（适用于错误提示）
+
+## 注意事项
+
+1. Alert 组件会创建一个全屏半透明遮罩层
+2. 点击遮罩层可以关闭 Alert（当 `closable` 为 `true` 时）
+3. Alert 的 z-index 为 50，确保在大多数元素之上
+4. 支持动画效果，通过 `animate-scale-in` 类实现