5eecbecd7f
- Portal: wrap .panel-head in matching card (border, radius, shadow) with cyan->purple left accent bar; h2 28px -> 20px; description right-aligned with vertical divider; top edge now aligns with side-menu & links-panel - Login: switch from absolute-positioned icons to el-input prefix slot; layout brand row (logo + title + uppercase subtitle); add form-title section with gradient bar; consistent cyan focus; gradient button; dashed top divider for back-link; card width 420 -> 460 - Add .gitignore (node_modules, dist, __pycache__, .env, etc.)
156 lines
4.0 KiB
Markdown
156 lines
4.0 KiB
Markdown
# OPS 资源中心
|
|
|
|
一个现代化的内部资源管理门户,用于集中管理运维命令、文档、链接和文件。
|
|
|
|
## 功能特性
|
|
|
|
### 门户展示
|
|
- 🎨 现代化响应式设计
|
|
- 🔍 全局搜索功能,支持按 `/` 快捷键搜索
|
|
- 🏷️ 多维度分类筛选
|
|
- 📋 资源卡片展示,支持一键复制命令
|
|
- 🔗 右侧快捷链接栏
|
|
|
|
### 管理后台
|
|
- 📊 数据仪表盘
|
|
- 📁 分类管理(支持排序、分面选项)
|
|
- 📄 资源管理(支持 4 种类型:命令/链接/文档/文件)
|
|
- 📎 文件上传功能
|
|
- 🔗 侧栏链接管理
|
|
- ⚙️ 站点设置(标题、副标题、公告等)
|
|
- 👥 用户管理(创建、重置密码、删除)
|
|
|
|
## 技术栈
|
|
|
|
### 后端
|
|
- **Flask** - Web 框架
|
|
- **Flask-SQLAlchemy** - ORM
|
|
- **SQLite** - 数据库
|
|
- **JWT** - 身份认证
|
|
- **bcrypt** - 密码加密
|
|
|
|
### 前端
|
|
- **Vue 3** - 前端框架
|
|
- **Element Plus** - UI 组件库
|
|
- **Vite** - 构建工具
|
|
- **Axios** - HTTP 客户端
|
|
|
|
## 快速开始
|
|
|
|
### 环境要求
|
|
- Python 3.8+
|
|
- Node.js 16+
|
|
|
|
### 后端启动
|
|
|
|
```bash
|
|
cd backend
|
|
|
|
# 安装依赖
|
|
pip install -r requirements.txt
|
|
|
|
# 启动服务(开发模式)
|
|
python app.py
|
|
```
|
|
|
|
服务将在 `http://localhost:8090` 启动
|
|
|
|
### 前端启动
|
|
|
|
```bash
|
|
cd frontend
|
|
|
|
# 安装依赖
|
|
npm install
|
|
|
|
# 开发模式
|
|
npm run dev
|
|
|
|
# 构建生产版本
|
|
npm run build
|
|
```
|
|
|
|
## 默认账号
|
|
|
|
- 用户名: `admin`
|
|
- 密码: `admin123`
|
|
|
|
## 项目结构
|
|
|
|
```
|
|
ops-manager/
|
|
├── backend/ # 后端服务
|
|
│ ├── app.py # 应用入口
|
|
│ ├── config.py # 配置文件
|
|
│ ├── models.py # 数据模型
|
|
│ ├── auth.py # 认证相关
|
|
│ ├── routes/ # API 路由
|
|
│ │ ├── portal.py # 门户公开 API
|
|
│ │ ├── admin.py # 管理后台 API
|
|
│ │ └── auth.py # 认证 API
|
|
│ ├── instance/ # 数据库文件(自动创建)
|
|
│ ├── uploads/ # 上传文件目录(自动创建)
|
|
│ └── requirements.txt # Python 依赖
|
|
└── frontend/ # 前端应用
|
|
├── src/
|
|
│ ├── views/ # 页面组件
|
|
│ │ ├── Portal.vue # 门户首页
|
|
│ │ └── admin/ # 管理后台页面
|
|
│ ├── api/index.js # API 封装
|
|
│ ├── router/ # 路由配置
|
|
│ └── styles/ # 样式文件
|
|
├── dist/ # 构建产物(自动创建)
|
|
└── package.json
|
|
```
|
|
|
|
## 资源类型
|
|
|
|
1. **命令 (command)** - 可一键复制的 Shell 命令
|
|
2. **链接 (link)** - 内部/外部链接跳转
|
|
3. **文档 (text)** - 富文本说明文档
|
|
4. **文件 (file)** - 可下载的文件资源
|
|
|
|
## 环境变量
|
|
|
|
| 变量名 | 说明 | 默认值 |
|
|
|--------|------|--------|
|
|
| `OPS_SECRET_KEY` | JWT 加密密钥 | `ops-portal-dev-secret-change-me-32b!` |
|
|
| `OPS_DATABASE_URL` | 数据库连接字符串 | `sqlite:///instance/ops_portal.db` |
|
|
| `OPS_JWT_EXPIRE_HOURS` | JWT 过期时间(小时) | `12` |
|
|
| `OPS_UPLOAD_DIR` | 文件上传目录 | `backend/uploads` |
|
|
| `OPS_UPLOAD_URL_PREFIX` | 文件访问 URL 前缀 | `/uploads` |
|
|
|
|
## 部署建议
|
|
|
|
1. **生产环境**使用 Gunicorn 或 uWSGI 部署后端
|
|
2. 使用 Nginx 反向代理前端静态文件和 API
|
|
3. 配置环境变量 `OPS_SECRET_KEY` 为强随机字符串
|
|
4. 定期备份 SQLite 数据库文件
|
|
|
|
## 开发
|
|
|
|
### 添加新的资源类型
|
|
|
|
1. 在 `backend/models.py` 中更新 `Resource` 模型(如果需要)
|
|
2. 在 `backend/routes/admin.py` 中更新 `RESOURCE_TYPES` 和验证逻辑
|
|
3. 在前端 `Resources.vue` 中添加对应展示样式
|
|
4. 在门户 `Portal.vue` 中添加 badge 样式
|
|
|
|
### 自定义主题
|
|
|
|
主要样式变量定义在 `frontend/src/styles/portal.css` 的 `:root` 块中:
|
|
|
|
```css
|
|
:root {
|
|
--ink: #0a1424; /* 主深色 */
|
|
--cyan: #2dd9f0; /* 主青色 */
|
|
--red: #e5484d; /* 主红色 */
|
|
--paper: #f2f5f9; /* 背景色 */
|
|
/* ... */
|
|
}
|
|
```
|
|
|
|
## License
|
|
|
|
MIT
|