commit d22dde58fce844968884a3d61966a93bc7157e63 Author: Guwan Date: Thu Jul 31 00:42:47 2025 +0800 fix: 111 diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..2cc52f6 --- /dev/null +++ b/.gitignore @@ -0,0 +1,28 @@ +.DS_Store +node_modules +/dist + + +# local env files +.env.local +.env.*.local + +# Log files +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* + +# Editor directories and files +.idea +.vscode +*.suo +*.ntvs* +*.njsproj +*.sln +*.sw? + +package-lock.json +yarn.lock + +**/cert/ diff --git a/CHANGELOG.md b/CHANGELOG.md new file mode 100644 index 0000000..cb97481 --- /dev/null +++ b/CHANGELOG.md @@ -0,0 +1,296 @@ +# 项目改动日志 + +## 版本: v1.2.0 - 界面全面美化与作业管理 (2024-01-30) + +### 🎉 新增功能 + +#### 1. 小学作业管理系统 +- **完整的作业管理界面** - 基于AboutView重构 +- **作业统计面板** - 4个统计卡片展示完成情况 +- **作业列表管理** - 支持筛选、添加、完成、删除操作 +- **预设作业内容** - 包含数学、语文、英语、科学四个科目 +- **响应式设计** - 适配不同屏幕尺寸的美观界面 + +#### 2. 美观对话框系统 +- **精美提示框** - 复杂功能展示的大型对话框 +- **简单提示框** - 轻量级确认对话框 +- **美化表单对话框** - 添加作业的高级表单界面 + +### 🎨 界面美化升级 + +#### 1. 数据表格全面美化 +- **渐变表头** - 蓝紫色渐变背景，白色文字 +- **圆角设计** - 12px圆角，现代化外观 +- **悬停效果** - 行悬停时轻微放大和彩色阴影 +- **图标装饰** - 日期、姓名、邮箱列都添加了对应图标 +- **操作按钮美化** - 渐变色按钮，悬停上浮效果 +- **标签美化** - 部门标签使用圆角胶囊设计 + +#### 2. 添加作业对话框美化 +- **渐变头部设计** - 蓝紫色渐变 + 脉冲动画图标 +- **表单输入美化** - 圆角输入框，悬停和聚焦效果 +- **科目选择器** - 带图标的选项设计 +- **难度按钮组** - 渐变激活状态，悬停动画 +- **底部按钮** - 渐变背景，上浮动画效果 + +#### 3. 作业管理界面设计 +- **渐变背景** - 整体页面使用柔和渐变 +- **统计卡片** - 彩色图标 + 悬停上浮效果 +- **作业项目** - 左侧彩色边框，悬停右移效果 +- **科目标签** - 每个科目不同的渐变色彩 +- **筛选按钮** - 活跃状态高亮显示 + +### 🔧 交互体验提升 + +#### 1. 导航系统完善 +- **路由跳转** - 菜单项正确连接到对应页面 +- **自动高亮** - 根据当前路由自动高亮菜单项 +- **前进后退支持** - 浏览器导航按钮正确更新菜单状态 + +#### 2. 用户反馈系统 +- **消息提示** - 所有操作都有即时反馈 +- **状态变化** - 作业完成状态实时更新 +- **视觉反馈** - 按钮点击、悬停的视觉效果 + +#### 3. 表格交互增强 +- **行点击事件** - 点击表格行显示信息提示 +- **按钮防冲突** - 操作按钮阻止行点击事件冒泡 +- **图标表意** - 每列都有对应的图标说明 + +### 📱 响应式设计改进 + +#### 1. 作业管理页面 +- **弹性布局** - 统计卡片自适应排列 +- **移动端优化** - 小屏幕下的合理间距 +- **卡片悬停** - 不同设备的交互适配 + +#### 2. 对话框适配 +- **居中显示** - 所有对话框完美居中 +- **宽度自适应** - 根据内容和屏幕自动调整 +- **触摸友好** - 移动设备上的操作体验 + +### 🎯 样式系统重构 + +#### 1. 全局宽度优化 (已完成) +- **移除宽度限制** - 应用可以使用全屏宽度 +- **响应式间距** - 不同屏幕尺寸的合适内边距 +- **布局优化** - 移除网格限制，使用正常流布局 + +#### 2. 组件样式统一 +- **颜色主题** - 统一的蓝紫色主题色彩 +- **圆角标准** - 12-16px的统一圆角规范 +- **阴影层次** - 不同深度的阴影效果 +- **动画规范** - 0.3s的统一过渡时间 + +### 🛠️ 技术优化 + +#### 1. Vue 3 组合式API应用 +- **响应式数据** - 使用ref和computed管理状态 +- **生命周期** - 合理使用watch监听路由变化 +- **类型支持** - TypeScript类型定义完善 + +#### 2. ElementPlus深度定制 +- **样式穿透** - 使用:deep()修改组件内部样式 +- **主题定制** - 覆盖默认样式实现个性化设计 +- **组件扩展** - 在ElementPlus基础上增强功能 + +### 📦 新增依赖和配置 +```json +{ + "features": { + "作业管理": "完整的学生作业管理系统", + "表格美化": "全面美化的数据表格组件", + "对话框美化": "多种风格的美观对话框", + "导航增强": "完善的路由导航系统" + } +} +``` + +### 🚀 用户体验提升 +- **视觉冲击力** - 现代化的渐变色彩和动画效果 +- **操作便捷性** - 直观的图标和清晰的交互反馈 +- **功能完整性** - 从数据展示到作业管理的完整流程 +- **响应速度** - 流畅的动画和即时的状态更新 + +### 🎨 设计亮点 +1. **色彩搭配** - 蓝紫色主题 + 功能性彩色图标 +2. **动画效果** - 悬停上浮、脉冲动画、渐变过渡 +3. **层次结构** - 通过阴影和颜色建立清晰的视觉层次 +4. **一致性** - 统一的设计语言和交互模式 + +### 📋 功能清单 +- ✅ 用户数据表格美化 +- ✅ 作业管理系统完成 +- ✅ 多种风格对话框 +- ✅ 导航路由修复 +- ✅ 响应式布局优化 +- ✅ 交互动画增强 +- ✅ 主题色彩统一 + +### 🎯 下一步计划 +- [ ] 添加设置页面功能 +- [ ] 数据持久化存储 +- [ ] 用户权限管理 +- [ ] 暗黑模式支持 +- [ ] 国际化多语言 +- [ ] 移动端App化 +- [ ] 数据导出功能 + +--- + +## 版本: v1.0.0 - ElementPlus 集成 (2024-01-30) + +### 🎉 新增功能 + +#### 1. ElementPlus 组件库集成 +- **安装依赖包** + - `element-plus` - Vue 3 的企业级 UI 组件库 + - `@element-plus/icons-vue` - ElementPlus 官方图标库 + +#### 2. 全新的用户界面设计 +- **导航栏**: 使用 ElementPlus 水平菜单组件 +- **卡片布局**: 响应式卡片展示系统特性 +- **数据表格**: 完整的用户管理表格，支持编辑和删除 +- **表单组件**: 带验证的用户添加表单 +- **统计面板**: 数据统计和进度展示 +- **时间线**: 系统通知时间线展示 + +### 🔧 文件修改详情 + +#### 1. `src/main.ts` - 应用入口配置 +```typescript +// 新增内容: +import ElementPlus from 'element-plus' +import 'element-plus/dist/index.css' +import * as ElementPlusIconsVue from '@element-plus/icons-vue' + +// 注册所有 ElementPlus 图标 +for (const [key, component] of Object.entries(ElementPlusIconsVue)) { + app.component(key, component) +} + +app.use(ElementPlus) +``` + +#### 2. `src/App.vue` - 主应用组件重构 +- **移除原有**: `HelloWorld` 组件引用 +- **新增组件**: + - `el-menu` - 水平导航菜单 + - `el-card` - 欢迎卡片和功能展示 + - `el-button` - 各种类型的按钮组件 + - `el-alert` - 成功提示组件 + - `el-row/el-col` - 响应式栅格布局 + - `el-icon` - 图标组件集成 + +#### 3. `src/views/HomeView.vue` - 首页完全重构 +- **移除**: `TheWelcome` 组件 +- **新增功能模块**: + + **数据表格模块**: + - `el-table` - 用户数据展示表格 + - `el-tag` - 部门标签显示 + - 编辑和删除操作按钮 + + **用户管理模块**: + - `el-dialog` - 添加用户对话框 + - `el-form` - 表单组件与验证 + - `el-input` - 输入框组件 + - `el-select` - 下拉选择器 + - 完整的表单验证规则 + + **统计面板模块**: + - `el-statistic` - 数据统计组件 + - `el-progress` - 进度条显示 + - `el-steps` - 项目步骤展示 + - `el-timeline` - 系统通知时间线 + +### 🎨 样式系统重构 + +#### 1. `src/assets/main.css` - 全局样式优化 +**问题修复**: 界面宽度受限问题 + +**修改前**: +```css +#app { + max-width: 1280px; /* 限制最大宽度 */ + margin: 0 auto; + padding: 2rem; +} + +@media (min-width: 1024px) { + #app { + display: grid; + grid-template-columns: 1fr 1fr; /* 强制两列布局 */ + padding: 0 2rem; + } +} +``` + +**修改后**: +```css +#app { + width: 100%; /* 使用全屏宽度 */ + min-height: 100vh; /* 最小高度为视窗高度 */ + margin: 0; + padding: 0; +} + +@media (min-width: 1024px) { + #app { + display: block; /* 正常块级布局 */ + width: 100%; + padding: 0; + } +} +``` + +#### 2. 组件样式优化 +- **App.vue**: 减少内边距，添加响应式设计 +- **HomeView.vue**: 优化容器宽度，确保表格全宽显示 + +### 📱 响应式设计改进 +- **移动端**: 优化小屏幕显示效果 +- **桌面端**: 充分利用大屏幕空间 +- **自适应**: 不同尺寸下的合适内边距 + +### 🛠️ 开发体验提升 +- **TypeScript 支持**: 完整的类型定义 +- **组件复用**: 模块化的组件结构 +- **代码规范**: 统一的编码风格 +- **注释完善**: 详细的中文注释 + +### 📦 依赖变更 +```json +{ + "dependencies": { + "element-plus": "^2.x.x", + "@element-plus/icons-vue": "^2.x.x" + } +} +``` + +### 🚀 使用说明 +1. **安装依赖**: `npm install` +2. **启动开发**: `npm run dev` +3. **构建生产**: `npm run build` + +### 🔧 主要组件功能 +- **导航菜单**: 支持页面切换和路由跳转 +- **用户管理**: 完整的增删改查操作 +- **数据展示**: 美观的表格和统计图表 +- **表单验证**: 实时验证和错误提示 +- **消息反馈**: 操作成功/失败的消息提示 + +### 📋 技术栈 +- **Vue 3**: 最新的响应式框架 +- **TypeScript**: 类型安全的JavaScript超集 +- **ElementPlus**: 企业级UI组件库 +- **Vue Router**: 官方路由管理器 +- **Pinia**: 现代化状态管理 +- **Vite**: 快速的构建工具 + +--- + +**开发者**: AI Assistant +**最新更新**: 2024-01-30 +**当前版本**: v1.2.0 \ No newline at end of file diff --git a/README.md b/README.md new file mode 100644 index 0000000..3d95bf3 --- /dev/null +++ b/README.md @@ -0,0 +1,33 @@ +# my-vue3-app + +This template should help get you started developing with Vue 3 in Vite. + +## Recommended IDE Setup + +[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur). + +## Type Support for `.vue` Imports in TS + +TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) to make the TypeScript language service aware of `.vue` types. + +## Customize configuration + +See [Vite Configuration Reference](https://vite.dev/config/). + +## Project Setup + +```sh +npm install +``` + +### Compile and Hot-Reload for Development + +```sh +npm run dev +``` + +### Type-Check, Compile and Minify for Production + +```sh +npm run build +``` diff --git a/env.d.ts b/env.d.ts new file mode 100644 index 0000000..11f02fe --- /dev/null +++ b/env.d.ts @@ -0,0 +1 @@ +/// diff --git a/index.html b/index.html new file mode 100644 index 0000000..9e5fc8f --- /dev/null +++ b/index.html @@ -0,0 +1,13 @@ + + + + + + + Vite App + + +
+ + + diff --git a/package.json b/package.json new file mode 100644 index 0000000..cf85619 --- /dev/null +++ b/package.json @@ -0,0 +1,35 @@ +{ + "name": "my-vue3-app", + "version": "0.0.0", + "private": true, + "type": "module", + "engines": { + "node": "^20.19.0 || >=22.12.0" + }, + "scripts": { + "dev": "vite", + "build": "run-p type-check \"build-only {@}\" --", + "preview": "vite preview", + "build-only": "vite build", + "type-check": "vue-tsc --build" + }, + "dependencies": { + "@element-plus/icons-vue": "^2.3.1", + "element-plus": "^2.10.4", + "pinia": "^3.0.3", + "vue": "^3.5.18", + "vue-router": "^4.5.1" + }, + "devDependencies": { + "@tsconfig/node22": "^22.0.2", + "@types/node": "^22.16.5", + "@vitejs/plugin-vue": "^6.0.1", + "@vitejs/plugin-vue-jsx": "^5.0.1", + "@vue/tsconfig": "^0.7.0", + "npm-run-all2": "^8.0.4", + "typescript": "~5.8.0", + "vite": "^7.0.6", + "vite-plugin-vue-devtools": "^8.0.0", + "vue-tsc": "^3.0.4" + } +} diff --git a/public/favicon.ico b/public/favicon.ico new file mode 100644 index 0000000..df36fcf Binary files /dev/null and b/public/favicon.ico differ diff --git a/src/App.vue b/src/App.vue new file mode 100644 index 0000000..bf1f2b4 --- /dev/null +++ b/src/App.vue @@ -0,0 +1,214 @@ + + + + + diff --git a/src/assets/base.css b/src/assets/base.css new file mode 100644 index 0000000..e69de29 diff --git a/src/assets/logo.svg b/src/assets/logo.svg new file mode 100644 index 0000000..7565660 --- /dev/null +++ b/src/assets/logo.svg @@ -0,0 +1 @@ + diff --git a/src/assets/main.css b/src/assets/main.css new file mode 100644 index 0000000..1da8425 --- /dev/null +++ b/src/assets/main.css @@ -0,0 +1,38 @@ +@import './base.css'; + +#app { + /* 移除最大宽度限制，让界面可以使用全屏宽度 */ + width: 100%; + min-height: 100vh; + margin: 0; + padding: 0; + font-weight: normal; +} + +a, +.green { + text-decoration: none; + color: hsla(160, 100%, 37%, 1); + transition: 0.4s; + padding: 3px; +} + +@media (hover: hover) { + a:hover { + background-color: hsla(160, 100%, 37%, 0.2); + } +} + +@media (min-width: 1024px) { + body { + margin: 0; + padding: 0; + } + + #app { + /* 移除网格布局，使用正常的块级布局 */ + display: block; + width: 100%; + padding: 0; + } +} diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue new file mode 100644 index 0000000..d174cf8 --- /dev/null +++ b/src/components/HelloWorld.vue @@ -0,0 +1,41 @@ + + + + + diff --git a/src/components/TheWelcome.vue b/src/components/TheWelcome.vue new file mode 100644 index 0000000..6092dff --- /dev/null +++ b/src/components/TheWelcome.vue @@ -0,0 +1,94 @@ + + + diff --git a/src/components/WelcomeItem.vue b/src/components/WelcomeItem.vue new file mode 100644 index 0000000..6d7086a --- /dev/null +++ b/src/components/WelcomeItem.vue @@ -0,0 +1,87 @@ + + + diff --git a/src/components/icons/IconCommunity.vue b/src/components/icons/IconCommunity.vue new file mode 100644 index 0000000..2dc8b05 --- /dev/null +++ b/src/components/icons/IconCommunity.vue @@ -0,0 +1,7 @@ + diff --git a/src/components/icons/IconDocumentation.vue b/src/components/icons/IconDocumentation.vue new file mode 100644 index 0000000..6d4791c --- /dev/null +++ b/src/components/icons/IconDocumentation.vue @@ -0,0 +1,7 @@ + diff --git a/src/components/icons/IconEcosystem.vue b/src/components/icons/IconEcosystem.vue new file mode 100644 index 0000000..c3a4f07 --- /dev/null +++ b/src/components/icons/IconEcosystem.vue @@ -0,0 +1,7 @@ + diff --git a/src/components/icons/IconSupport.vue b/src/components/icons/IconSupport.vue new file mode 100644 index 0000000..7452834 --- /dev/null +++ b/src/components/icons/IconSupport.vue @@ -0,0 +1,7 @@ + diff --git a/src/components/icons/IconTooling.vue b/src/components/icons/IconTooling.vue new file mode 100644 index 0000000..660598d --- /dev/null +++ b/src/components/icons/IconTooling.vue @@ -0,0 +1,19 @@ + + diff --git a/src/main.ts b/src/main.ts new file mode 100644 index 0000000..acb5e64 --- /dev/null +++ b/src/main.ts @@ -0,0 +1,26 @@ +import './assets/main.css' + +import { createApp } from 'vue' +import { createPinia } from 'pinia' + +// 引入ElementPlus +import ElementPlus from 'element-plus' +import 'element-plus/dist/index.css' +// 引入ElementPlus图标 +import * as ElementPlusIconsVue from '@element-plus/icons-vue' + +import App from './App.vue' +import router from './router' + +const app = createApp(App) + +// 注册ElementPlus图标 +for (const [key, component] of Object.entries(ElementPlusIconsVue)) { + app.component(key, component) +} + +app.use(createPinia()) +app.use(router) +app.use(ElementPlus) + +app.mount('#app') diff --git a/src/router/index.ts b/src/router/index.ts new file mode 100644 index 0000000..3e49915 --- /dev/null +++ b/src/router/index.ts @@ -0,0 +1,23 @@ +import { createRouter, createWebHistory } from 'vue-router' +import HomeView from '../views/HomeView.vue' + +const router = createRouter({ + history: createWebHistory(import.meta.env.BASE_URL), + routes: [ + { + path: '/', + name: 'home', + component: HomeView, + }, + { + path: '/about', + name: 'about', + // route level code-splitting + // this generates a separate chunk (About.[hash].js) for this route + // which is lazy-loaded when the route is visited. + component: () => import('../views/AboutView.vue'), + }, + ], +}) + +export default router diff --git a/src/stores/counter.ts b/src/stores/counter.ts new file mode 100644 index 0000000..b6757ba --- /dev/null +++ b/src/stores/counter.ts @@ -0,0 +1,12 @@ +import { ref, computed } from 'vue' +import { defineStore } from 'pinia' + +export const useCounterStore = defineStore('counter', () => { + const count = ref(0) + const doubleCount = computed(() => count.value * 2) + function increment() { + count.value++ + } + + return { count, doubleCount, increment } +}) diff --git a/src/views/AboutView.vue b/src/views/AboutView.vue new file mode 100644 index 0000000..eeb246e --- /dev/null +++ b/src/views/AboutView.vue @@ -0,0 +1,970 @@ + + + + + diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue new file mode 100644 index 0000000..0f8cc54 --- /dev/null +++ b/src/views/HomeView.vue @@ -0,0 +1,938 @@ + + + + + diff --git a/tsconfig.app.json b/tsconfig.app.json new file mode 100644 index 0000000..913b8f2 --- /dev/null +++ b/tsconfig.app.json @@ -0,0 +1,12 @@ +{ + "extends": "@vue/tsconfig/tsconfig.dom.json", + "include": ["env.d.ts", "src/**/*", "src/**/*.vue"], + "exclude": ["src/**/__tests__/*"], + "compilerOptions": { + "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo", + + "paths": { + "@/*": ["./src/*"] + } + } +} diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 0000000..66b5e57 --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,11 @@ +{ + "files": [], + "references": [ + { + "path": "./tsconfig.node.json" + }, + { + "path": "./tsconfig.app.json" + } + ] +} diff --git a/tsconfig.node.json b/tsconfig.node.json new file mode 100644 index 0000000..a83dfc9 --- /dev/null +++ b/tsconfig.node.json @@ -0,0 +1,19 @@ +{ + "extends": "@tsconfig/node22/tsconfig.json", + "include": [ + "vite.config.*", + "vitest.config.*", + "cypress.config.*", + "nightwatch.conf.*", + "playwright.config.*", + "eslint.config.*" + ], + "compilerOptions": { + "noEmit": true, + "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo", + + "module": "ESNext", + "moduleResolution": "Bundler", + "types": ["node"] + } +} diff --git a/vite.config.ts b/vite.config.ts new file mode 100644 index 0000000..d49d708 --- /dev/null +++ b/vite.config.ts @@ -0,0 +1,20 @@ +import { fileURLToPath, URL } from 'node:url' + +import { defineConfig } from 'vite' +import vue from '@vitejs/plugin-vue' +import vueJsx from '@vitejs/plugin-vue-jsx' +import vueDevTools from 'vite-plugin-vue-devtools' + +// https://vite.dev/config/ +export default defineConfig({ + plugins: [ + vue(), + vueJsx(), + vueDevTools(), + ], + resolve: { + alias: { + '@': fileURLToPath(new URL('./src', import.meta.url)) + }, + }, +})