README
🚀 Vue 3 + Supabase 全栈项目展示系统
📋 项目概述
项目定位
一个基于 Vue 3 + TypeScript + Supabase 的现代化个人主页展示系统，包含完整的前端展示和后台管理功能，专为全栈开发工程师打造的专业在线作品展示和管理平台。
在线预览
🌐 在线访问: https://project.zxbdwy.online/v1/
核心特性
- 🏠 完整后台管理系统（项目管理、分类、标签、技能、社交链接等）
- 📁 智能文件上传系统（拖拽上传、进度显示、预览、MinIO集成）
- 🎨 极客风格UI设计（暗色主题、矩阵雨、故障文字、终端交互）
- 🌓 多主题切换（浅色/深色/系统主题自动切换）
- 📱 响应式设计（完美适配桌面端、平板、移动端）
- 🔐 精细权限控制（RLS权限、管理员验证、公开读取）
- 📊 数据可视化面板（统计图表、活动监控、系统状态）
- ⚡ 高性能缓存机制（多层缓存、智能失效、性能优化）
- 🌐 SEO优化（动态meta标签、结构化数据、搜索引擎友好）
- 📝 Markdown支持（项目详情页完整markdown渲染和样式）
- 🦶 动态页脚系统（可配置页脚样式、链接管理、实时预览）
📸 项目截图
以下截图均来自线上部署环境 project.zxbdwy.online/v1，展示真实运行效果。
🌑 深色主题 · 首页 Hero 区
矩阵雨背景 + 故障文字标题 + 技术栈标签，展现极客风格。
🧱 完整首页布局
包含 Hero、PROJECTS 项目展示、SKILLS 技能矩阵、CONTACT 联系方式四大板块。
☀️ 浅色主题切换
一键切换浅色 / 深色 / 系统主题，文字与背景对比度自动适配。
📁 项目展示区
卡片式项目列表，支持封面图、标题、描述、技术标签和分类筛选。
📝 项目详情页 · Markdown 渲染
项目详情页完整支持 Markdown：代码高亮、表格、引用、列表、链接等。
📱 移动端响应式
| 移动端首屏 | 移动端完整页 |
|---|
 | |
技术栈
- 前端框架: Vue 3 + TypeScript + Vite
- UI组件库: Element Plus
- 状态管理: Pinia
- 路由管理: Vue Router
- 数据库: Supabase PostgreSQL
- 认证系统: Supabase Auth
- 文件存储: MinIO (自部署对象存储)
- 缓存系统: Supabase数据库缓存 + 本地缓存双重策略 (无Redis依赖，完全集成)
- 实时同步: Supabase Realtime
- 样式方案: SCSS + CSS Variables
- 图表库: ECharts + Vue-ECharts
- Markdown渲染: markdown-it
- 构建工具: Vite
- 代码规范: ESLint + Prettier
🎯 个人技能展示
后端开发
- 精通Java语法，熟练使用SpringBoot进行开发
- 熟悉MyBatis等开发框架，具备丰富的后端开发经验
- 精通Redis和MongoDB等数据库的集成项目
- 了解微服务架构，如Nacos和Dubbo等
前端开发
- 熟练使用Vue2和Vue3，具备现代化前端开发能力
- 具备使用uni-app进行小程序开发的能力
- 熟悉响应式设计和移动端适配
运维部署
- 能够进行网站部署，使用Nginx进行配置
- 熟悉Docker容器技术，有从项目开发到容器发布的全流程经验
- 具备基础运维能力，能够处理服务器配置和维护
🏗️ 项目架构
系统架构图
┌─────────────────────────────────────────┐
│ Vue 3 前端应用 │
├─────────────────────────────────────────┤
│ 🎨 UI层 (Element Plus + 极客风格) │
│ 🔄 状态管理 (Pinia) │
│ 🌐 路由管理 (Vue Router) │
│ 📁 文件上传 (MinIO SDK) │
│ 📝 Markdown渲染 (markdown-it) │
├─────────────────────────────────────────┤
│ API 接口层 │
│ 🔐 认证 (Supabase Auth) │
│ 📊 数据库 (Supabase PostgreSQL) │
│ 🗄️ 文件存储 (MinIO) │
│ ⚡ 实时同步 (Supabase Realtime) │
└─────────────────────────────────────────┘
核心功能模块
项目展示系统
├── 🏠 前台展示
│ ├── 首页 (Hero Section + 矩阵雨)
│ ├── 项目展示 (筛选、搜索、详情、Markdown)
│ ├── 关于我 (技能雷达图、个人简介)
│ ├── 联系方式 (表单、社交链接)
│ └── 主题切换 (浅色/深色/系统)
├── 🎛️ 后台管理
│ ├── Dashboard (数据统计、图表)
│ ├── 项目管理 (CRUD、批量操作、Markdown编辑)
│ ├── 内容管理 (分类、标签、技能)
│ ├── 文件管理 (MinIO集成)
│ ├── 用户管理 (权限、角色、密码更新)
│ └── 系统设置 (主题、配置)
└── 🔧 系统功能
├── 用户认证 (注册/登录/权限/密码管理)
├── 文件上传 (拖拽、预览、进度)
├── 搜索筛选 (全局搜索、高级筛选)
├── 数据可视化 (图表、统计)
├── Markdown渲染 (代码高亮、表格、引用)
└── SEO优化 (meta标签、结构化数据)
📊 数据库设计
核心表结构
-- 用户档案表
profiles (id, username, full_name, bio, avatar_url, social_links, created_at, updated_at)
-- 项目表
projects (id, title, description, content, demo_url, github_url, featured, status, sort_order, user_id, created_at, updated_at)
-- 分类表
categories (id, name, description, color, icon, sort_order, user_id, created_at, updated_at)
-- 标签表
tags (id, name, color, user_id, created_at, updated_at)
-- 项目分类关联表
project_categories (project_id, category_id)
-- 项目标签关联表
project_tags (project_id, tag_id)
-- 技能表
skills (id, name, category, level, years_experience, projects_count, icon, color, user_id, created_at, updated_at)
-- 社交链接表
social_links (id, name, url, icon, sort_order, user_id, created_at, updated_at)
-- 系统设置表
system_settings (id, key, value, description, type, created_at, updated_at)
🎨 UI设计特色
极客风格元素
- 矩阵雨背景 - 动态代码雨效果
- 故障文字动画 - 标题文字闪烁效果
- 终端风格交互 - 命令行界面元素
- 霓虹光效按钮 - 发光效果和悬停动画
- 电路板纹理 - 背景科技感纹理
主题系统
- 浅色主题 - 清新明亮的界面风格
- 深色主题 - 经典的极客暗色风格
- 系统主题 - 自动跟随系统主题设置
- 平滑过渡 - 主题切换时的动画效果
Markdown渲染
- 代码高亮 - 支持多种编程语言语法高亮
- 表格样式 - 美观的表格展示和悬停效果
- 引用样式 - 优雅的引用块设计
- 链接样式 - 带下划线动画的链接效果
- 响应式设计 - 移动端友好的markdown展示
响应式设计
- 桌面端 (≥1024px) - 完整功能和布局
- 平板端 (768px-1023px) - 适配触摸操作
- 移动端 (<768px) - 简化界面和手势支持
🚀 快速开始
环境要求
- Node.js >= 16.0.0
- pnpm >= 7.0.0
- Supabase 账号
- MinIO 服务 (可选，用于文件存储)
安装依赖
# 克隆项目
git clone <repository-url>
cd project-showcase
# 安装依赖
pnpm install
环境配置
# 复制环境变量模板
cp .env.example .env
# 编辑环境变量
# VITE_SUPABASE_URL=your_supabase_url
# VITE_SUPABASE_ANON_KEY=your_supabase_anon_key
# VITE_MINIO_ENDPOINT=your_minio_endpoint
# VITE_MINIO_ACCESS_KEY=your_minio_access_key
# VITE_MINIO_SECRET_KEY=your_minio_secret_key
开发环境
# 启动开发服务器
pnpm dev
# 类型检查
pnpm type-check
# 代码格式化
pnpm format
# 代码检查
pnpm lint
生产构建
# 构建生产版本
pnpm build
# 预览构建结果
pnpm preview
📁 项目结构
src/
├── components/ # 公共组件
│ ├── common/ # 通用组件
│ ├── ui/ # UI组件
│ └── business/ # 业务组件
├── views/ # 页面组件
│ ├── home/ # 首页
│ ├── projects/ # 项目展示
│ ├── about/ # 关于我
│ ├── contact/ # 联系方式
│ └── admin/ # 后台管理
├── stores/ # Pinia状态管理
├── router/ # 路由配置
├── utils/ # 工具函数
├── types/ # TypeScript类型定义
├── assets/ # 静态资源
├── styles/ # 样式文件
└── composables/ # Vue组合式函数
🔧 开发规范
代码规范
- 使用 TypeScript 进行类型检查
- 遵循 ESLint 和 Prettier 代码规范
- 使用 Vue 3 Composition API
- 组件命名采用 PascalCase
- 文件命名采用 kebab-case
Git 提交规范
- feat: 新功能
- fix: 修复bug
- docs: 文档更新
- style: 代码格式调整
- refactor: 代码重构
- test: 测试相关
- chore: 构建过程或辅助工具的变动
📈 性能优化
前端优化
- 组件懒加载和代码分割
- 图片懒加载和压缩
- 虚拟滚动优化长列表
- Redis多层缓存系统（智能降级、路由级策略）
- 缓存策略和智能失效
- SEO优化和语义化HTML
后端优化
- 数据库索引优化
- RLS权限策略优化
- 文件上传和CDN加速
- 实时数据同步优化
🛠️ 部署指南
前端部署
# 构建生产版本
pnpm build
# 部署到静态服务器
# 将 dist/ 目录内容部署到 Nginx/Apache 等
Supabase 配置
- 创建 Supabase 项目
- 设计数据库表结构
- 配置 RLS 权限策略
- 设置认证和存储
MinIO 配置
- 部署 MinIO 服务
- 创建存储桶
- 配置访问策略
- 集成到前端应用
🚀 项目状态
✅ 已完成 (100%)
📋 待开始 (0%)
🔄 最新改进 (2026-05-26)
- ✅ README 文档可视化升级：新增"项目截图"章节，覆盖深色主题首页、完整首页布局、浅色主题、项目展示区、项目详情页（Markdown 渲染）以及移动端响应式效果
- ✅ 在线预览入口：在项目概述中显式提供线上访问地址 project.zxbdwy.online/v1，方便访客快速体验
- ✅ 截图资源管理：所有截图统一存放于
docs/screenshots/ 目录，文件命名语义化（home-desktop、home-full、home-light、projects-section、project-detail、mobile-home、mobile-home-full）
- ✅ 真实部署环境取材：截图全部基于线上部署环境抓取，确保展示效果与实际访问完全一致
🔄 之前改进 (2025-11-23)
- ✅ 环境配置优化：更新.env和.env.production环境变量配置，确保生产环境配置正确
- ✅ Git忽略规则完善：增强.gitignore配置，确保环境文件和敏感信息被正确忽略
- ✅ 项目详情功能增强：优化项目详情页面展示效果和用户体验
- ✅ 网站预览工具改进：增强websitePreview.ts工具功能，提供更好的预览体验
- ✅ 数据库服务层优化：改进database.ts服务层，提升数据操作效率和稳定性
- ✅ 版本控制规范：执行最新的git提交，记录所有重要变更和功能改进
- ✅ 代码质量保证：确保所有修改符合项目编码规范和最佳实践
🔄 之前改进 (2025-01-21)
- ✅ Admin.vue TypeScript错误修复：解决管理后台活动日志显示的类型错误
- ✅ 变量名匹配修复：修复模板中recentActivities与activities变量名不匹配问题
- ✅ 字段名引用修复：修复ActivityLog类型字段名引用错误：
- activity.type 改为 activity.action_type
- activity.title 改为 activity.description
- ✅ 类型安全增强：确保ActivityLog类型与数据库activity_logs表结构完全一致
- ✅ 活动日志记录完善：为所有数据操作添加完整的活动日志记录
- 项目管理：创建、更新、删除项目的完整追踪
- 分类管理：分类操作的详细记录
- 标签管理：标签变更的完整追踪
- 技能管理：技能操作的详细记录
- 社交链接管理：链接操作的完整追踪
- 系统设置：设置变更的详细记录，包括批量更新
- ✅ 数据变更追踪：所有操作都记录旧数据、新数据和删除数据
- ✅ 操作类型标准化：统一使用create、update、delete操作类型
- ✅ 元数据记录：为每个活动记录提供详细的元数据信息
- ✅ 系统设置数据库错误修复：解决快捷跳转和页脚设置的UUID类型错误
- ✅ 关键错误修复：解决系统设置服务的UUID类型错误
- ✅ SystemSettingsService重构：修复updateSetting方法的逻辑错误
- ✅ 字段映射修正：使用key字段而不是id字段来查找和更新系统设置
- ✅ 删除方法优化：修复deleteSetting方法，使用key字段进行删除
- ✅ 批量更新增强：优化批量更新操作，支持创建不存在的设置项
- ✅ 错误解决：完全解决"invalid input syntax for type uuid"错误
- ✅ ：快捷跳转设置和页脚设置功能恢复正常
📝 更新日志
v1.9.2 (2026-05-26) - README 文档可视化升级
- ✅ 新增"项目截图"章节：在 README.md 中加入完整的可视化展示
- ✅ 七张高质量截图：覆盖深色 / 浅色主题、桌面 / 移动端、列表 / 详情等关键场景
- ✅ 截图资源目录：统一存放于
docs/screenshots/，命名语义化，便于维护
- ✅ 在线预览入口：在项目概述明确标注线上访问地址
- ✅ 基于真实部署：截图全部来自线上部署环境，与实际访问效果完全一致
v1.9.1 (2025-01-21) - 系统设置数据库错误修复
- ✅ 关键错误修复：解决系统设置服务的UUID类型错误
- ✅ SystemSettingsService重构：修复updateSetting方法的逻辑错误
- ✅ 字段映射修正：使用key字段而不是id字段来查找和更新系统设置
- ✅ 功能恢复：快捷跳转设置和页脚设置功能恢复正常
- ✅ 批量更新增强：优化批量更新操作，支持创建不存在的设置项
- ✅ 错误解决：完全解决"invalid input syntax for type uuid"错误
- ✅ 功能恢复：快捷跳转设置和页脚设置功能恢复正常
- ✅ 数据一致性：确保所有系统设置操作都使用正确的字段映射
v1.9.0 (2025-01-21) - 代码优化和页脚管理系统
- ✅ 代码清理：删除项目中的调试输出语句（console.log、console.error等）
- ✅ 性能优化：清理未使用的导入和变量，提升代码执行效率
- ✅ 代码质量提升：移除开发阶段的临时代码和注释
- ✅ 页脚管理系统：创建完整的动态页脚管理功能
- Footer组件：支持多种样式（简洁、详细、极简）
- FooterSettings组件：完整的页脚配置界面
- 动态配置：启用/禁用、样式、颜色、边框等
- 链接管理：添加、编辑、排序、删除页脚链接
- 社交链接：集成社交链接展示和样式配置
- 实时预览：配置更改即时预览效果
- ✅ 系统集成：将FooterSettings集成到SiteSettings管理页面
- ✅ 数据存储：使用system_settings表存储页脚配置
- ✅ 响应式设计：页脚在移动端和桌面端都有良好展示
- ✅ 类型安全：完整的TypeScript类型定义和错误处理
- ✅ 用户体验：直观的管理界面和实时预览功能
v1.8.0 (2025-01-20) - 管理页面图标选择功能集成
- ✅ ProjectForm增强：添加项目图标选择功能，支持从数百个图标中选择
- ✅ SiteSettings增强：添加品牌图标选择功能，可自定义网站左上角图标
- ✅ IconSelector集成：在管理页面全面集成图标选择器组件
- ✅ 数据结构扩展：为项目和系统设置添加图标字段支持
- ✅ 用户体验优化：图标选择界面直观易用，支持搜索和分类筛选
- ✅ 类型安全：完善TypeScript类型定义，确保图标数据类型安全
- ✅ 响应式适配：图标选择功能在移动端和桌面端都有良好体验
- ✅ 数据持久化：图标选择结果正确保存到数据库和缓存系统
v1.7.0 (2025-01-20) - IconSelector组件增强和缓存版本管理
- ✅ 图标库扩展：集成Lucide图标库，支持29个分类和数百个高质量图标
- ✅ 智能搜索：实现图标名称搜索、分类筛选、收藏和最近使用功能
- ✅ 视图模式：支持网格视图和列表视图切换，适应不同使用场景
- ✅ 本地存储：图标收藏和最近使用记录持久化存储
- ✅ 交互增强：添加图标预览、复制名称、悬停效果等微交互
- ✅ 响应式设计：完美适配桌面端和移动端，支持触摸操作
- ✅ 缓存版本管理：实现缓存版本控制机制，支持智能失效和数据一致性
- ✅ 性能优化：优化图标加载性能，支持懒加载和虚拟滚动
- ✅ TypeScript支持：完整的类型定义和类型安全检查
- ✅ 主题适配：支持浅色/深色主题，自动适配系统主题
v1.6.0 (2025-01-20) - Redis错误修复和缓存系统优化
- ✅ 错误修复：解决ioredis连接错误
Cannot read properties of undefined (reading 'charCodeAt')
- ✅ 架构重构：移除Redis依赖，使用Supabase数据库+本地缓存双重策略
- ✅ 缓存优化：创建统一的缓存系统(useCache)，支持智能降级和性能优化
- ✅ 代码简化：删除redisClient.ts，创建supabaseCache.ts和localCache.ts
- ✅ 依赖优化：移除Redis相关npm包（ioredis, redis, @types/redis）
- ✅ API兼容：重构useCache组合式函数，保持完全相同的接口
- ✅ 功能完整：确保所有缓存功能正常工作，性能优化
- ✅ 构建成功：项目构建通过，无TypeScript错误和警告
v1.5.0 (2025-01-20) - Supabase缓存架构重构
- ✅ 架构重构：移除Redis依赖，使用Supabase数据库作为缓存存储
- ✅ 数据库集成：创建cache表结构，支持TTL和自动清理
- ✅ 代码简化：删除redisClient.ts，创建supabaseCache.ts
- ✅ 依赖优化：移除Redis相关npm包（ioredis, redis, @types/redis）
- ✅ API兼容：重构useCache组合式函数，保持完全相同的接口
- ✅ 功能完整：确保所有缓存功能正常工作，性能优化
- ✅ 构建成功：项目构建通过，无TypeScript错误和警告
v1.4.0 (2025-01-20) - 纯Redis缓存机制重构
- ✅ 重构缓存机制，移除所有localStorage降级逻辑，实现纯Redis缓存
- ✅ 重写Redis服务，优化浏览器环境检测，避免不必要的客户端创建
- ✅ 更新缓存组合式函数，简化缓存逻辑，提高可维护性
- ✅ 使用Function构造器替代eval，提高代码安全性
- ✅ 保持API兼容性，确保现有功能正常工作
- ✅ 优化缓存性能，移除复杂的同步逻辑
- ✅ 构建成功，无TypeScript错误和警告
v1.3.0 (2025-01-19) - Redis缓存系统实现
- ✅ 实现完整的Redis缓存服务，支持连接管理、健康检查和自动重连
- ✅ 添加缓存装饰器模式，支持路由级别的缓存策略配置
- ✅ 实现本地缓存降级机制，确保Redis不可用时系统仍能正常工作
- ✅ 更新环境配置，使用Redis数据库10号进行缓存存储
- ✅ 修复TypeScript类型错误和导出冲突，确保代码质量
- ✅ 完善MinIO文件上传服务，支持浏览器兼容性和Uint8Array转换
- ✅ 添加缓存统计和监控功能，支持实时查看缓存状态
- ✅ 实现智能缓存失效机制，支持版本控制和批量清理
- ✅ 优化缓存性能，添加TTL管理和过期清理功能
v1.2.0 (2025-01-19) - 动画效果和用户体验全面优化
- ✅ 简化修改密码功能，移除原密码字段，使用Supabase内置updateUser API
- ✅ 优化矩阵雨背景动画性能，添加帧率控制（30fps）和渐变效果
- ✅ 增强页面切换过渡动画，添加缩放、模糊和平滑过渡效果
- ✅ 创建丰富的按钮动画样式库（基础、霓虹、玻璃态、3D、脉冲、浮动等）
- ✅ 优化故障文字(GlitchText)效果，添加多种故障类型（水平、垂直、裁剪、颜色）
- ✅ 添加卡片3D悬停效果和微交互动画（玻璃态、霓虹、渐变、悬浮、脉冲）
- ✅ 实现自定义滚动条样式，支持多种主题和响应式设计
- ✅ 导入所有动画样式到主应用，提供完整的动画体验
- ✅ 添加减少动画模式支持，提升可访问性
- ✅ 优化触摸设备交互，确保移动端体验
v1.1.0 (2025-01-19) - 系统设置RLS修复和用户体验优化
- ✅ 修复system_settings表RLS策略，允许未认证用户读取系统设置
- ✅ 解决首页系统设置数据获取问题，确保品牌文字正常显示
- ✅ 在用户下拉菜单中添加修改密码选项，提升用户体验
- ✅ 集成ChangePasswordDialog组件到Layout组件
- ✅ 添加handleChangePasswordSuccess处理函数，完善密码修改流程
- ✅ 优化系统设置数据获取逻辑，确保首页正常加载
- ✅ 修复RLS权限策略，平衡安全性和用户体验
v1.0.9 (2025-01-19) - 关键功能修复和增强
- ✅ 修复system_settings表结构，移除user_id字段依赖
- ✅ 为项目详情页添加完整的markdown渲染支持
- ✅ 修复密码更新时的AuthSessionMissingError问题
- ✅ 添加markdown-it依赖和相关样式
- ✅ 优化密码更新流程，增加当前密码验证
- ✅ 完善markdown样式，支持代码高亮、表格、引用等
- ✅ 提升项目详情页的内容展示能力
v1.0.8 (2025-01-19) - 关键功能问题修复
- ✅ 修复项目详情页路由配置，确保正确跳转到
/project/:id
- ✅ 修改项目卡片点击逻辑，支持跳转到项目详情页
- ✅ 修复主题设置全局生效问题，确保主题切换正常工作
- ✅ 重新启用文件上传功能，修复变量名错误和类型定义
- ✅ 优化组件接口类型定义，提高代码质量和类型安全
- ✅ 修复 FileUpload 组件中的变量作用域问题
- ✅ 确保所有核心功能正常运行，用户体验流畅
v1.0.7 (2025-01-19) - 数据库服务关联查询修复
- ✅ 修复
getProjectsWithRelations 方法中的标签查询逻辑错误
- ✅ 正确处理项目与分类的直接关联关系（通过
category_id 字段）
- ✅ 修复项目与标签的中间表关联查询（通过
project_tags 表）
- ✅ 移除不存在的
updateProjectCategories 方法调用，避免运行时错误
- ✅ 优化技能服务的排序字段，使用
created_at 替代不存在的 level 字段
- ✅ 确保所有数据库查询正常工作，项目关联数据正确加载
- ✅ 项目现在可以正常运行在 http://localhost:5174，数据库操作稳定
v1.0.6 (2025-01-19) - 数据库服务错误修复和示例数据添加
- ✅ 修复数据库服务中对不存在表（project_categories、project_tags）的引用错误
- ✅ 优化项目关联数据查询逻辑，使用直接关联而非中间表
- ✅ 添加skills表示例数据（Vue.js、React、Node.js、TypeScript等）
- ✅ 添加categories表示例数据（Web应用、移动应用、桌面应用等）
- ✅ 添加projects表示例数据（个人博客系统）
- ✅ 修复system_settings表数据更新406错误
- ✅ 确保所有管理页面的CRUD操作正常工作
- ✅ 数据库查询性能优化和错误处理改进
- ✅ 项目现在可以正常运行，数据库操作稳定
v1.0.5 (2025-01-19) - 数据库类型不匹配问题修复
- ✅ 修复TypeScript类型定义与实际数据库结构不匹配问题
- ✅ 移除skills表中不存在的color字段引用，使用固定颜色替代
- ✅ 移除social_links表中不存在的name字段引用，添加getLinkName函数从URL提取显示名称
- ✅ 修复所有Vue组件中的类型错误，确保类型安全
- ✅ 优化数据库查询错误处理，优雅处理表不存在情况
- ✅ 所有TypeScript类型检查现在通过，无编译错误
- ✅ 统一数据访问模式，提高代码一致性和可维护性
v1.0.4 (2025-01-19) - 数据库操作错误修复和系统稳定性提升
- ✅ 修复system_settings表的UUID语法错误，移除不必要的user_id字段
- ✅ 修复SocialLinks页面数据结构问题，移除不存在的color字段引用
- ✅ 统一所有管理页面的数据库操作模式，确保数据一致性
- ✅ 修复ProjectForm组件数据结构，正确处理项目关联数据
- ✅ 更新admin/Projects.vue处理新的数据结构和关联表操作
- ✅ 修复TypeScript类型错误和ESLint警告，提升代码质量
- ✅ 确保所有管理页面的CRUD操作正常工作
- ✅ 添加完整的错误处理机制，提高系统稳定性
- ✅ 统一表单验证规则，确保数据完整性
v1.0.3 (2025-01-18) - 加载状态优化和用户体验提升
- ✅ 创建 SkeletonLoader 组件支持多种骨架屏类型（项目卡片、技能卡片、联系方式等）
- ✅ 创建 LoadingSpinner 组件提供统一的加载动画和状态管理
- ✅ 为 Home.vue 添加项目、技能、联系方式的完整加载状态
- ✅ 为 Projects.vue 添加项目列表的加载状态和错误处理机制
- ✅ 为 ProjectDetail.vue 优化加载动画，提升用户体验
- ✅ 修复页面数据加载时的闪烁问题，提供更流畅的用户体验
- ✅ 添加错误重试机制，提高应用稳定性
- ✅ 统一加载状态管理，确保界面一致性
v1.0.2 (2025-01-18) - 数据库查询修复和UI优化
- ✅ 修复 Supabase 查询链式调用的类型问题
- ✅ 解决 query.order is not a function 错误
- ✅ 添加项目占位符图片 (placeholder-project.svg)
- ✅ 完善项目详情页面功能和导航
- ✅ 修复管理页面返回导航功能
- ✅ 修复 el-dropdown 深色主题文字颜色问题
- ✅ 修复 ElMessage 深色主题显示问题
- ✅ 整体UI主题适配检查和优化
- ✅ 更新项目列表和首页的图片路径
- ✅ 应用现在可以正常运行在 http://localhost:5173
v1.0.1 (2024-01-18) - 修复和优化
- ✅ 修复 Element Plus 图标组件的 Vue 警告问题
- ✅ 在 main.ts 中正确导入和注册 Element Plus 及图标
- ✅ 使用 markRaw 包装图标组件避免不必要的响应式开销
- ✅ 修复 Home.vue 和 Admin.vue 中的图标使用问题
- ✅ 修复 ThemeToggle.vue 中的模板语法错误
- ✅ 项目现在可以正常运行，无 Vue 警告
- ✅ 优化组件导入和性能
v1.0.0 (已完成核心功能)
- ✅ 项目初始化和基础架构
- ✅ 用户认证和权限系统
- ✅ 极客风格UI设计系统
- ✅ 主题切换系统 (浅色/深色/系统主题)
- ✅ 矩阵雨背景和故障文字效果
- ✅ 首页和项目展示页面
- ✅ 项目搜索和筛选功能
- ✅ 管理后台Dashboard
- ✅ 响应式设计和移动端适配
- ✅ TypeScript类型安全
- ✅ 代码规范和格式化
- 🚧 MinIO文件上传系统 (待配置)
- 🚧 项目管理CRUD功能 (待开发)
- 🚧 数据可视化面板 (待完善)
- 🚧 性能优化和测试 (待优化)
🤝 贡献指南
- Fork 项目
- 创建特性分支 (
git checkout -b feature/AmazingFeature)
- 提交更改 (
git commit -m 'Add some AmazingFeature')
- 推送到分支 (
git push origin feature/AmazingFeature)
- 打开 Pull Request
📄 许可证
本项目采用 MIT 许可证 - 查看 LICENSE 文件了解详情
📞 联系方式
- 项目地址: [GitHub Repository]
- 个人网站: [Your Website]
- 邮箱: [Your Email]
- GitHub: [Your GitHub]
