企业官网建设流程全解析

Vue 3 + Vite 实战：从零打造一个高效的工时批量填报系统

一、项目背景

作为程序员，相信大家都有过填报工时的经历。每天都要登录系统，选择项目、填写时长、输入工作内容，一个月下来要操作几十次，费时又费力。为了解决这个痛点，我用 Vue 3 + Vite + Element Plus 开发了一个批量填报工时系统，让填报效率提升 10 倍！

二、技术栈

• Vue 3- 渐进式 JavaScript 框架
• Vite- 新一代前端构建工具
• Element Plus- Vue 3 组件库
• Element Plus Icons- 图标库
• xlsx- Excel 文件处理库

三、项目结构

timesheet-app/ ├── src/ │ ├── components/ │ │ ├── FileCard.vue # 文件卡片组件 │ │ └── SettingsDrawer.vue # 设置抽屉组件 │ ├── App.vue # 主应用组件 │ └── main.js # 应用入口 ├── index.html # HTML 模板 ├── vite.config.js # Vite 配置 └── package.json # 项目依赖

四、核心功能

1. 多种导入方式

系统支持三种导入方式：

• 单个/多个 TXT 文件：文件名格式为20260530.txt或2026-05-30.txt
• 文件夹批量导入：一次性加载整个文件夹下的所有 TXT 文件
• Excel 文件导入：支持 xlsx/xls 格式，列包括：日期、工作内容、时长

functionhandleFileSelect(event){constselectedFiles=Array.from(event.target.files)constnewFiles=[]selectedFiles.forEach(file=>{if(file.name.endsWith('.txt')){constworkDate=parseDateFromFilename(file.name)if(workDate){newFiles.push({file: