# solo-portal

**Repository Path**: vs/solo-portal

## Basic Information

- **Project Name**: solo-portal
- **Description**: 开箱即用的开源企业门户解决方案 — 包含公司官网、后台管理系统、文档中心，支持深色模式、中英双语、数据持久化
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 1
- **Created**: 2026-05-21
- **Last Updated**: 2026-05-21

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

<p align="center">
  <img src="public/favicon.svg" alt="Alba Logo" width="80" height="80" />
</p>

<h1 align="center">Alba Portal</h1>

<p align="center">
  <strong>🚀 开箱即用的开源企业门户解决方案</strong>
</p>

<p align="center">
  公司官网 · 后台管理 · 文档中心 · 深色模式 · 中英双语
</p>

<p align="center">
  <img src="https://img.shields.io/badge/Vue-3.4-42b883?logo=vue.js" alt="Vue 3" />
  <img src="https://img.shields.io/badge/TypeScript-5.3-3178c6?logo=typescript" alt="TypeScript" />
  <img src="https://img.shields.io/badge/Vite-5.0-646cff?logo=vite" alt="Vite" />
  <img src="https://img.shields.io/badge/Tailwind_CSS-3.4-06b6d4?logo=tailwindcss" alt="Tailwind CSS" />
  <img src="https://img.shields.io/badge/Element_Plus-2.9-409eff?logo=element" alt="Element Plus" />
  <img src="https://img.shields.io/badge/License-MIT-green" alt="MIT License" />
</p>

---

## 📸 预览截图

### 前台官网

<p align="center">
  <img src="src/assets/images/portal-home.png" alt="前台官网首页" width="100%" />
</p>

<p align="center"><em>首页 Hero 区 — 粒子动画背景 + 光标跟随辉光 + 渐变 CTA 按钮</em></p>

<table>
  <tr>
    <td align="center" width="50%">
      <img src="src/assets/images/portal-products.png" alt="产品展示" width="100%" />
      <br/><em>产品展示</em>
    </td>
    <td align="center" width="50%">
      <img src="src/assets/images/portal-news.png" alt="新闻动态" width="100%" />
      <br/><em>新闻动态</em>
    </td>
  </tr>
  <tr>
    <td align="center" width="50%">
      <img src="src/assets/images/portal-about.png" alt="关于我们" width="100%" />
      <br/><em>关于我们</em>
    </td>
    <td align="center" width="50%">
      <img src="src/assets/images/portal-contact.png" alt="联系我们" width="100%" />
      <br/><em>联系我们</em>
    </td>
  </tr>
</table>

### 后台管理系统

<p align="center">
  <img src="src/assets/images/admin-dashboard.png" alt="后台仪表盘" width="100%" />
</p>

<p align="center"><em>仪表盘 — 数据概览卡片 + 快捷操作 + 最近留言</em></p>

<table>
  <tr>
    <td align="center" width="50%">
      <img src="src/assets/images/admin-articles.png" alt="文章管理" width="100%" />
      <br/><em>文章管理</em>
    </td>
    <td align="center" width="50%">
      <img src="src/assets/images/admin-banners.png" alt="轮播图管理" width="100%" />
      <br/><em>轮播图管理</em>
    </td>
  </tr>
</table>

### 文档中心

<p align="center">
  <img src="src/assets/images/docs-home.png" alt="文档中心" width="100%" />
</p>

<p align="center"><em>文档中心 — 侧边栏目录 + Markdown 渲染 + 代码高亮</em></p>

### 深色模式

<table>
  <tr>
    <td align="center" width="50%">
      <img src="src/assets/images/dark-portal.png" alt="深色模式-前台" width="100%" />
      <br/><em>前台深色模式</em>
    </td>
    <td align="center" width="50%">
      <img src="src/assets/images/dark-admin.png" alt="深色模式-后台" width="100%" />
      <br/><em>后台深色模式</em>
    </td>
  </tr>
</table>

---

## ✨ 特性

- 🏢 **公司官网** — 现代化设计，粒子动画背景，滚动揭示动效，响应式布局
- 🎭 **4 套首页模板** — 科技风/极简商务/创意活力/传统企业，后台一键切换
- 🛠️ **后台管理** — 文章/产品/轮播图/留言的完整 CRUD，数据持久化到 localStorage
- 📖 **文档中心** — 9 篇详实文档，Markdown 渲染，侧边栏目录，代码高亮
- 🌙 **深色模式** — 浅色/深色/跟随系统三模式切换，全站适配
- 🌐 **国际化** — 中英双语一键切换，vue-i18n 驱动
- 🎨 **视觉动效** — Canvas 粒子网络、光标跟随辉光、渐变边框、3D 微倾斜
- 📱 **响应式** — 桌面/平板/手机全适配
- 🔍 **SEO 优化** — 动态 meta 标签、Open Graph、Twitter Card
- 🚀 **一键部署** — Docker / Vercel / Netlify / Nginx 多方案支持
- 💾 **数据管理** — JSON 导入导出、一键重置、可对接真实 API

## 🚀 快速开始

### 环境要求

- Node.js >= 18.0
- npm >= 9.0 或 pnpm >= 8.0

### 安装与运行

```bash
# 克隆项目
git clone https://gitee.com/wang-peiao/alba-portal.git
cd alba-portal

# 安装依赖
npm install

# 启动开发服务器
npm run dev
```

启动后访问 `http://localhost:5173` 即可查看网站。

### Docker 一键部署

```bash
# 构建并启动
docker-compose up -d

# 访问 http://localhost:8080
```

### 默认管理员账号

- 用户名：`admin`
- 密码：`admin123`

> ⚠️ 生产环境中请及时修改默认密码！

## 📁 项目结构

```
alba-portal/
├── src/
│   ├── components/          # 通用组件
│   │   ├── common/          # 基础组件（ThemeToggle、LocaleToggle）
│   │   ├── portal/          # 前台组件（ParticleCanvas、CursorGlow、ScrollReveal）
│   │   ├── admin/           # 后台组件
│   │   └── docs/            # 文档组件
│   ├── composables/         # 组合式函数
│   │   ├── useCrud.ts       # 通用 CRUD（localStorage 持久化）
│   │   ├── useAuth.ts       # 认证管理
│   │   └── useScrollAnimation.ts  # 滚动动画
│   ├── i18n/                # 国际化语言包
│   │   ├── zh-CN.ts         # 中文
│   │   └── en-US.ts         # 英文
│   ├── layouts/             # 布局组件
│   │   ├── PortalLayout.vue # 前台布局
│   │   ├── AdminLayout.vue  # 后台布局
│   │   └── DocsLayout.vue   # 文档布局
│   ├── mock/                # 模拟数据
│   ├── router/              # 路由配置
│   ├── stores/              # Pinia 状态管理
│   ├── types/               # TypeScript 类型定义
│   ├── utils/               # 工具函数
│   └── views/               # 页面组件
│       ├── portal/          # 前台页面（7 个）
│       ├── admin/           # 后台页面（12 个）
│       └── docs/            # 文档页面（2 个）
├── tailwind.config.js       # Tailwind CSS 配置
├── vite.config.ts           # Vite 构建配置
└── package.json
```

## 🛠️ 技术栈

| 分类 | 技术 | 说明 |
|------|------|------|
| 核心框架 | Vue 3 + TypeScript | Composition API、`<script setup>` |
| 构建工具 | Vite 5 | 极速 HMR、按需加载 |
| 路由 | Vue Router 4 | 前台/后台/文档三套路由 |
| 状态管理 | Pinia | 轻量级、TypeScript 友好 |
| UI 组件 | Element Plus | 后台管理 UI 框架 |
| 样式 | Tailwind CSS 3 + Sass | 原子化 CSS + 自定义主题 |
| 图标 | Lucide Vue Next | 统一的线性图标风格 |
| 国际化 | vue-i18n | 中英双语 |
| HTTP | Axios | 请求拦截（预留） |

## 📖 文档

详细文档请访问项目的文档中心：启动项目后访问 `/docs` 路径

- [快速开始](/docs/quick-start)
- [项目结构](/docs/project-structure)
- [配置指南](/docs/configuration)
- [部署上线](/docs/deployment)
- [常见问题](/docs/faq)

## 🔧 自定义配置

### 修改主题色

编辑 `tailwind.config.js` 中的 `colors.brand` 配置：

```javascript
colors: {
  brand: {
    500: '#3b82f6', // 修改主色调
  }
}
```

### 对接真实后端

1. 修改 `src/api/request.ts` 中的 `baseURL`
2. 移除 Mock 数据拦截
3. 根据 API 文档调整请求参数和响应处理

## 📦 构建部署

```bash
# 构建生产版本
npm run build

# 本地预览构建结果
npm run preview
```

构建产物输出到 `dist/` 目录，可部署到 Nginx、Vercel、Netlify 等平台。

## 🤝 参与贡献

1. Fork 本仓库
2. 新建分支：`git checkout -b feature/amazing-feature`
3. 提交更改：`git commit -m 'Add some amazing feature'`
4. 推送分支：`git push origin feature/amazing-feature`
5. 提交 Pull Request

## 📄 开源协议

[MIT License](LICENSE) — 可自由使用、修改、商用