Rewrite README with project overview, tech stack, and usage guide

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-03-10 10:10:28 +08:00
parent fe8a1e8a00
commit 5020d91277

161
README.md
View File

@@ -1,70 +1,161 @@
# The Lucia Project Frontend # The Lucia Project Frontend
## Description The frontend of the Lucia project, a process mining platform for
analyzing, discovering, and comparing business process workflows.
This template should help get you started developing with Vue 3 in Vite. Built with [Vue 3][vue], [Vite][vite], [Pinia][pinia],
This is the frontend of the Lucia project. It is being developed with [Vue 3](https://vuejs.org/) in [Vite](https://vitejs.dev/). and [Tailwind CSS][tailwind].
## Recommended IDE Setup
[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur). ## Features
## Customize configuration - **Files** -- Upload, browse, and manage event log files (CSV).
- **Discover** -- Visualize process maps ([Cytoscape.js][cytoscape]),
analyze performance metrics ([Chart.js][chartjs]), and run
conformance checking against user-defined rules.
- **Compare** -- Side-by-side comparison of process maps and
dashboards.
- **Account Management** -- User account CRUD with role-based
access control.
See [Vite Configuration Reference](https://vitejs.dev/config/).
## Project Setup ## Tech Stack
| Category | Technologies |
|----------|-------------|
| Framework | Vue 3.5, Vue Router 5, Pinia 3 |
| Build | Vite 7, TypeScript 5, Tailwind CSS 4 |
| UI | PrimeVue 4, PrimeIcons, SweetAlert2 |
| Visualization | Cytoscape.js (process maps), Chart.js (charts) |
| HTTP | Axios with JWT refresh token handling |
| Testing | Vitest 4 (unit/component), Cypress 15 (E2E) |
| Linting | ESLint, Prettier |
## Prerequisites
- [Node.js][nodejs] (v18 or later)
- npm
## Getting Started
### Install dependencies
```sh ```sh
npm install npm ci
``` ```
### Compile and Hot-Reload for Development ### Configure environment
Copy `.env` to `.env.local` and set the backend API URL:
```sh
cp .env .env.local
```
```dotenv
# .env.local
VUE_APP_API_URL = "http://localhost:8000"
```
The dev server proxies `/api` requests to this URL.
### Start development server
```sh ```sh
npm run dev npm run dev
``` ```
### Compile and Minify for Production The app will be available at `http://localhost:58249`.
## Testing
### Run unit and component tests
```sh ```sh
npm run build npx vitest run
``` ```
### Run Unit Tests with [Vitest](https://vitest.dev/) ### Run E2E tests
```sh Build first, then run [Cypress][cypress] against the preview
npm run test:unit server:
```
### Run End-to-End Tests with [Cypress](https://www.cypress.io/)
```sh
npm run test:e2e:dev
```
This runs the end-to-end tests against the Vite development server.
It is much faster than the production build.
But it's still recommended to test the production build with `test:e2e` before deploying (e.g. in CI environments):
```sh ```sh
npm run build npm run build
npm run test:e2e npm run test:e2e
``` ```
### Lint with [ESLint](https://eslint.org/) For interactive E2E development with the Vite dev server:
```sh ```sh
npm run lint npm run test:e2e:dev
``` ```
## Copyright
Copyright 2022-2024 DSP, inc. All rights reserved.
This software is proprietary. You may obtain, use, copy, edit or update this software with written agreements from DSP, inc. ## Build for Production
```sh
npm run build
```
Output is in the `dist/` directory. Preview locally with:
```sh
npm run preview
```
## Project Structure
```
src/
├── api/ # Axios client with JWT interceptors
├── assets/ # CSS (Tailwind), static assets
├── components/ # Reusable Vue components
│ ├── Discover/ # Map, Conformance, Performance
│ ├── Compare/ # Comparison sidebar
│ └── File/ # Upload modal
├── module/ # Business logic (alerts, charts, sorting)
├── router/ # Vue Router configuration
├── stores/ # Pinia stores (state management)
├── utils/ # Utility functions (emitter, escaping)
└── views/ # Page-level route components
├── Discover/ # Map, Performance, Conformance
├── Compare/ # Dashboard, MapCompare
├── Files/ # File browser
├── Upload/ # File upload
└── Login/ # Authentication
```
## Copyright
Copyright 2022-2026 DSP, inc. All rights reserved.
This software is proprietary. You may obtain, use, copy, edit or
update this software with written agreements from DSP, inc.
## Authors ## Authors
Chia Yin
chiayinin@gmail.com - Chia-Yin Kuo (chiayin.kuo@dsp.im)
2024/3/29 - imacat (imacat.yang@dsp.im)
## Acknowledgments
Code quality improvements assisted by [Claude Code][claude-code].
[vue]: https://vuejs.org/
[vite]: https://vitejs.dev/
[pinia]: https://pinia.vuejs.org/
[tailwind]: https://tailwindcss.com/
[cytoscape]: https://js.cytoscape.org/
[chartjs]: https://www.chartjs.org/
[nodejs]: https://nodejs.org/
[cypress]: https://www.cypress.io/
[claude-code]: https://claude.ai/claude-code