|
1 | | -This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app). |
| 1 | +# RustFS Console |
2 | 2 |
|
3 | | -## Getting Started |
| 3 | +A modern, responsive web management console for RustFS distributed file system, built with Next.js 16 (App Router) + React 19 + TypeScript + Tailwind CSS v4 + shadcn/ui. |
4 | 4 |
|
5 | | -First, run the development server: |
| 5 | +## ✨ Features |
| 6 | + |
| 7 | +### Core Features |
| 8 | +- **File Browser** - Visual file/object management interface with upload, download, delete operations |
| 9 | +- **Access Keys Management** - Create and manage service account access keys |
| 10 | +- **Policy Management** - Configure and manage IAM policies for fine-grained access control |
| 11 | +- **User Management** - Create, edit, enable/disable, and delete user accounts |
| 12 | +- **User Groups Management** - Create and manage user groups to simplify permission assignment |
| 13 | + |
| 14 | +### Advanced Features |
| 15 | +- **Import/Export** - Import and export system configurations |
| 16 | +- **Performance Monitoring** - Real-time system status, server information, and performance metrics |
| 17 | +- **Tiered Storage** - Configure and manage tiered storage policies |
| 18 | +- **Event Destinations** - Configure event destinations for event notifications |
| 19 | +- **SSE Settings** - Server-side encryption configuration |
| 20 | +- **License Management** - View and manage system license information |
| 21 | + |
| 22 | +## 🛠️ Tech Stack |
| 23 | + |
| 24 | +### Core Framework |
| 25 | +- **[Next.js 16](https://nextjs.org/)** - React full-stack framework with App Router |
| 26 | +- **[React 19](https://react.dev/)** - UI library |
| 27 | +- **[TypeScript 5](https://www.typescriptlang.org/)** - Type safety |
| 28 | + |
| 29 | +### UI & Styling |
| 30 | +- **[Tailwind CSS v4](https://tailwindcss.com/)** - Utility-first CSS framework |
| 31 | +- **[shadcn/ui](https://ui.shadcn.com/)** - High-quality component library based on Radix UI |
| 32 | +- **[Remix Icon](https://remixicon.com/)** - Icon library |
| 33 | +- **[next-themes](https://github.com/pacocoursey/next-themes)** - Theme switching support |
| 34 | + |
| 35 | +### Data Management |
| 36 | +- **[TanStack Table](https://tanstack.com/table)** - Powerful table component |
| 37 | +- **[TanStack Virtual](https://tanstack.com/virtual)** - Virtual scrolling support |
| 38 | +- **[AWS SDK v3](https://aws.amazon.com/sdk-for-javascript/)** - S3 client integration |
| 39 | + |
| 40 | +### Other Tools |
| 41 | +- **[i18next](https://www.i18next.com/)** - Internationalization support (12 languages) |
| 42 | +- **[Recharts](https://recharts.org/)** - Chart visualization |
| 43 | +- **[Sonner](https://sonner.emilkowal.ski/)** - Toast notifications |
| 44 | +- **[date-fns](https://date-fns.org/)** / **[dayjs](https://day.js.org/)** - Date handling |
| 45 | + |
| 46 | +## 📁 Project Structure |
| 47 | + |
| 48 | +``` |
| 49 | +console/ |
| 50 | +├── app/ # Next.js App Router pages and layouts |
| 51 | +│ ├── (auth)/ # Authentication pages |
| 52 | +│ └── (dashboard)/ # Dashboard pages |
| 53 | +├── components/ # React components |
| 54 | +│ ├── ui/ # shadcn/ui base components |
| 55 | +│ └── ... # Business components |
| 56 | +├── hooks/ # Custom React Hooks |
| 57 | +├── contexts/ # React Context providers |
| 58 | +├── lib/ # Utility functions and library code |
| 59 | +│ └── feedback/ # Global feedback APIs (toast, dialog) |
| 60 | +├── types/ # TypeScript type definitions |
| 61 | +├── i18n/ # Internationalization resource files |
| 62 | +│ └── locales/ # Multi-language files (12 languages) |
| 63 | +├── config/ # Configuration files |
| 64 | +├── public/ # Static assets |
| 65 | +└── tests/ # Test files (mirror source structure) |
| 66 | +``` |
| 67 | + |
| 68 | +## 🚀 Quick Start |
| 69 | + |
| 70 | +### Prerequisites |
| 71 | + |
| 72 | +- **Node.js** >= 20 |
| 73 | +- **pnpm** >= 10.19.0 (recommended to use the version specified in the project) |
| 74 | +- **Docker** - For running RustFS service |
| 75 | + |
| 76 | +### Start RustFS Service |
| 77 | + |
| 78 | +The RustFS service must be started before development. Run it using Docker: |
| 79 | + |
| 80 | +```bash |
| 81 | +# Create data directory |
| 82 | +mkdir rustfs-data |
| 83 | + |
| 84 | +# Run RustFS service |
| 85 | +docker run -p 9000:9000 -p 9001:9001 -v ./rustfs-data:/data rustfs/rustfs:1.0.0-alpha.82 |
| 86 | +``` |
| 87 | + |
| 88 | +The service will start on the following ports: |
| 89 | +- **9000** - API port |
| 90 | +- **9001** - Console port |
| 91 | + |
| 92 | +### Install Dependencies |
| 93 | + |
| 94 | +```bash |
| 95 | +pnpm install |
| 96 | +``` |
| 97 | + |
| 98 | +### Development Mode |
| 99 | + |
| 100 | +**Note**: Before starting the development server, ensure the RustFS service is running (see "Start RustFS Service" section above). |
| 101 | + |
| 102 | +Start the development server (with hot reload): |
6 | 103 |
|
7 | 104 | ```bash |
8 | | -npm run dev |
9 | | -# or |
10 | | -yarn dev |
11 | | -# or |
12 | 105 | pnpm dev |
| 106 | +``` |
| 107 | + |
| 108 | +Visit [http://localhost:3000](http://localhost:3000) to view the application. |
| 109 | + |
| 110 | +### Build for Production |
| 111 | + |
| 112 | +```bash |
| 113 | +pnpm build |
| 114 | +``` |
| 115 | + |
| 116 | +### Run Production Build |
| 117 | + |
| 118 | +```bash |
| 119 | +pnpm start |
| 120 | +``` |
| 121 | + |
| 122 | +## 💻 Development Guide |
| 123 | + |
| 124 | +### Code Quality Checks |
| 125 | + |
| 126 | +Before committing code, ensure all checks pass: |
| 127 | + |
| 128 | +#### 1. Lockfile Sync Check |
| 129 | +```bash |
| 130 | +pnpm install --frozen-lockfile |
| 131 | +``` |
| 132 | +Ensure `pnpm-lock.yaml` is in sync with `package.json`. After modifying `package.json`, you must run `pnpm install` and commit the updated lockfile. |
| 133 | + |
| 134 | +#### 2. TypeScript Type Check |
| 135 | +```bash |
| 136 | +pnpm type-check |
| 137 | +# or |
| 138 | +pnpm build |
| 139 | +``` |
| 140 | + |
| 141 | +#### 3. ESLint Check |
| 142 | +```bash |
| 143 | +pnpm lint |
| 144 | +``` |
| 145 | + |
| 146 | +#### 4. Code Formatting Check |
| 147 | +```bash |
| 148 | +pnpm format:check |
| 149 | +``` |
| 150 | + |
| 151 | +#### 5. Auto-fix Formatting Issues |
| 152 | +```bash |
| 153 | +pnpm lint:fix |
13 | 154 | # or |
14 | | -bun dev |
| 155 | +pnpm format |
15 | 156 | ``` |
16 | 157 |
|
17 | | -Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. |
| 158 | +### Naming Conventions |
| 159 | + |
| 160 | +- **Component files**: Use kebab-case (e.g., `bucket-selector.tsx`) |
| 161 | +- **Component names**: Use PascalCase (e.g., `<BucketSelector />`) |
| 162 | +- **Directory structure**: Group by feature/domain, use plural forms (e.g., `buckets/`, `users/`) |
| 163 | +- **File naming**: Don't repeat directory name in filename (e.g., `buckets/info.tsx` instead of `buckets/bucket-info.tsx`) |
| 164 | + |
| 165 | +### UI Component Usage |
| 166 | + |
| 167 | +- **Declarative UI**: Use base components from `@/components/ui/*` |
| 168 | +- **Imperative feedback**: Use `@/lib/feedback/message` and `@/lib/feedback/dialog` for global toast and dialog prompts |
| 169 | + |
| 170 | +### Testing |
| 171 | + |
| 172 | +When tests are configured: |
| 173 | +- Test files should be placed in `tests/` directory, mirroring source structure |
| 174 | +- Use `*.spec.ts` or `*.test.ts` naming |
| 175 | +- Run tests: `pnpm test:run` |
| 176 | + |
| 177 | +## 🌍 Internationalization |
| 178 | + |
| 179 | +The project supports multiple languages. Currently supported languages: |
| 180 | + |
| 181 | +- 中文(简体)(Chinese Simplified) |
| 182 | +- English (US) |
| 183 | +- Deutsch (DE) |
| 184 | +- Español (ES) |
| 185 | +- Français (FR) |
| 186 | +- Bahasa Indonesia (ID) |
| 187 | +- Italiano (IT) |
| 188 | +- 日本語 (JP) |
| 189 | +- 한국어 (KR) |
| 190 | +- Português (BR) |
| 191 | +- Русский (RU) |
| 192 | +- Türkçe (TR) |
| 193 | + |
| 194 | +Language files are located in the `i18n/locales/` directory. |
| 195 | + |
| 196 | +## 📦 Build & Deployment |
| 197 | + |
| 198 | +### Environment Variables |
| 199 | + |
| 200 | +Configure necessary environment variables according to your deployment environment (e.g., API endpoints, authentication configuration). |
| 201 | + |
| 202 | +### Build Configuration |
| 203 | + |
| 204 | +The project uses Next.js default build configuration. Custom configuration can be done via `next.config.ts`. |
| 205 | + |
| 206 | +### Deployment |
| 207 | + |
| 208 | +The project can be deployed to any platform that supports Next.js: |
| 209 | + |
| 210 | +- **Vercel** (Recommended) - Zero-config deployment |
| 211 | +- **Docker** - Using official Next.js Docker image |
| 212 | +- **Self-hosted** - Run `pnpm build && pnpm start` |
| 213 | + |
| 214 | +## 🤝 Contributing |
| 215 | + |
| 216 | +### Commit Guidelines |
| 217 | + |
| 218 | +- Use conventional commit messages (Conventional Commits) |
| 219 | +- Ensure all code quality checks pass before committing |
| 220 | +- Each PR should include a clear description and related issue links |
| 221 | + |
| 222 | +### Code Review |
18 | 223 |
|
19 | | -You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file. |
| 224 | +- Keep PR scope focused; coordinate large refactors in advance |
| 225 | +- Commit messages and PR titles must be in English |
| 226 | +- UI-related work should include screenshots |
20 | 227 |
|
21 | | -This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel. |
| 228 | +## 📄 License |
22 | 229 |
|
23 | | -## Learn More |
| 230 | +See `public/legal/LICENSE` for license information. |
24 | 231 |
|
25 | | -To learn more about Next.js, take a look at the following resources: |
| 232 | +## 🔗 Resources |
26 | 233 |
|
27 | | -- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. |
28 | | -- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. |
| 234 | +- [Next.js Documentation](https://nextjs.org/docs) |
| 235 | +- [React Documentation](https://react.dev/) |
| 236 | +- [Tailwind CSS Documentation](https://tailwindcss.com/docs) |
| 237 | +- [shadcn/ui Documentation](https://ui.shadcn.com/) |
| 238 | +- [TypeScript Documentation](https://www.typescriptlang.org/docs/) |
29 | 239 |
|
30 | | -You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome! |
| 240 | +## 📝 Development Notes |
31 | 241 |
|
32 | | -## Deploy on Vercel |
| 242 | +- Follow the guidelines in `AGENTS.md` |
| 243 | +- Keep code simple, readable, and maintainable |
| 244 | +- Prefer using existing project tools and patterns |
| 245 | +- Consider internationalization support when adding new features |
| 246 | +- Ensure all changes pass type checking |
33 | 247 |
|
34 | | -The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. |
| 248 | +--- |
35 | 249 |
|
36 | | -Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details. |
| 250 | +**Note**: This is a private project for internal use only. |
0 commit comments