docs: update readme

Author: fecommunity

README-zh_CN.md

@@ -1,14 +1,18 @@
 # @fecommunity/reactpress-client
 
-ReactPress Client - Next.js-based frontend for ReactPress CMS with modern UI and responsive design.
+ReactPress Client - Next.js 14 frontend for ReactPress CMS with modern UI and responsive design.
 
 [![NPM Version](https://img.shields.io/npm/v/@fecommunity/reactpress-client.svg)](https://www.npmjs.com/package/@fecommunity/reactpress-client)
 [![License](https://img.shields.io/npm/l/@fecommunity/reactpress-client.svg)](https://github.com/fecommunity/reactpress/blob/master/client/LICENSE)
 [![Node Version](https://img.shields.io/node/v/@fecommunity/reactpress-client.svg)](https://nodejs.org)
+[![TypeScript](https://img.shields.io/badge/%3C%2F%3E-TypeScript-%230074c1.svg)](http://www.typescriptlang.org/)
+[![Next.js](https://img.shields.io/badge/Next.js-14-black)](https://nextjs.org/)
 
 ## Overview
 
-ReactPress Client is a modern, responsive frontend application built with Next.js that serves as the user interface for the ReactPress CMS platform. It provides a rich, interactive experience for content creators and readers alike, featuring a clean design, intuitive navigation, and powerful content management capabilities.
+ReactPress Client is a responsive frontend application built with Next.js 14 that serves as the user interface for the ReactPress CMS platform. It provides a clean design, intuitive navigation, and content management capabilities.
+
+The client is designed with a component-based architecture that promotes reusability and maintainability. It integrates with the ReactPress backend through the [ReactPress Toolkit](../toolkit), providing type-safe API interactions.
 
 ## Quick Start
 
@@ -24,30 +28,32 @@ npx @fecommunity/reactpress-client --pm2
 
 ## Features
 
-- 🚀 **Modern UI/UX** - Built with Ant Design v5 for a polished interface
-- 📱 **Responsive Design** - Works seamlessly on desktop, tablet, and mobile
+- ⚡ **App Router Architecture** with Server Components for optimal SSR
+- 🎨 **Theme System** with light/dark mode switching
 - 🌍 **Internationalization** - Supports Chinese and English languages
-- 🌙 **Dark Mode** - Light and dark theme switching
-- ✍️ **Markdown Editor** - Built-in rich text editor for content creation
-- 📊 **Analytics Dashboard** - Visualize content performance
-- 🔍 **Advanced Search** - Powerful content search capabilities
-- 🖼️ **Media Management** - Upload and manage images and files
-- 📱 **PWA Support** - Installable as a progressive web app
-- ⚡ **Performance Optimized** - Server-side rendering and code splitting
+- 🌙 **Theme Switching** with system preference detection
+- ✍️ **Markdown Editor** with live preview
+- 📊 **Analytics Dashboard** with metrics and visualizations
+- 🔍 **Search** with filtering
+- 🖼️ **Media Management** with drag-and-drop upload
+- 📱 **PWA Support** with offline capabilities
+- ♿ **Accessibility Compliance** - WCAG 2.1 AA standards
+- 🚀 **Performance Optimized** - Code splitting, image optimization, and caching
 
 ## Requirements
 
-- Node.js >= 16.5.0
-- npm or yarn package manager
+- Node.js >= 18.20.4
+- npm or pnpm package manager
 - ReactPress Server running (for API connectivity)
 
 ## Usage Scenarios
 
 ### Standalone Client
 Perfect for:
 - Connecting to remote ReactPress API
+- Headless CMS implementation
 - Custom deployment scenarios
-- Development and testing
+- Microfrontend architecture
 
 ### Full ReactPress Stack
 Use with ReactPress server for complete CMS solution:
@@ -63,14 +69,14 @@ npx @fecommunity/reactpress-client
 
 ReactPress Client includes a comprehensive set of UI components:
 
-- **Admin Dashboard** - Content management interface
-- **Article Editor** - Markdown-based content creation
-- **Comment System** - Reader engagement tools
-- **Media Library** - File management system
-- **User Management** - Account and profile settings
-- **Analytics Views** - Data visualization components
-- **Theme Switcher** - Light/dark mode toggle
-- **Language Selector** - Internationalization controls
+- **Admin Dashboard** - Content management interface with role-based access
+- **Article Editor** - Advanced markdown editor with media embedding
+- **Comment System** - Moderation tools with spam detection
+- **Media Library** - File management
+- **User Management** - Account and profile settings with 2FA
+- **Analytics Views** - Data visualization components with export capabilities
+- **Theme Switcher** - Light/dark mode toggle with system preference detection
+- **Language Selector** - Internationalization controls with RTL support
 
 ## PM2 Support
 
@@ -84,24 +90,27 @@ npx @fecommunity/reactpress-client --pm2
 PM2 features:
 - Automatic process restart on crash
 - Memory monitoring
-- Log management
-- Cluster mode support
-- Process monitoring dashboard
+- Log management with rotation
+- Process management
+- Health checks
 
 ## Configuration
 
 The client connects to the ReactPress server via environment variables:
 
 ```env
 # Server API URL
-SERVER_API_URL=http://localhost:3002
+SERVER_API_URL=https://api.yourdomain.com
 
 # Client URL
-CLIENT_URL=http://localhost:3001
+CLIENT_URL=https://yourdomain.com
 CLIENT_PORT=3001
 
 # Analytics
 GOOGLE_ANALYTICS_ID=your_ga_id
+
+# Security
+NEXT_PUBLIC_CRYPTO_KEY=your_encryption_key
 ```
 
 ## Development
@@ -131,18 +140,15 @@ pnpm run start
 
 ```
 client/
-├── pages/                # Next.js pages
-│   ├── admin/            # Admin dashboard pages
-│   ├── article/          # Article pages
-│   └── ...               # Other page routes
-├── src/
-│   ├── components/       # Reusable UI components
-│   ├── layout/           # Page layouts
-│   ├── providers/        # API and context providers
-│   ├── hooks/            # Custom React hooks
-│   ├── context/          # React context providers
-│   ├── utils/            # Utility functions
-│   └── theme/            # Theme configurations
+├── app/                  # Next.js 14 App Router
+│   ├── (admin)/          # Admin dashboard routes
+│   ├── (public)/         # Public facing routes
+│   └── api/              # API routes
+├── components/           # Reusable UI components
+├── lib/                  # Business logic and utilities
+├── providers/            # React context providers
+├── hooks/                # Custom React hooks
+├── styles/               # Global styles and design tokens
 ├── public/               # Static assets
 └── bin/                  # CLI entry points
 ```
@@ -156,6 +162,7 @@ client/
 | `CLIENT_PORT` | Client port | `3001` |
 | `NEXT_PUBLIC_GA_ID` | Google Analytics ID | - |
 | `NEXT_PUBLIC_SITE_TITLE` | Site title | `ReactPress` |
+| `NEXT_PUBLIC_CRYPTO_KEY` | Encryption key for sensitive data | - |
 
 ## CLI Commands
 
@@ -171,38 +178,99 @@ npx @fecommunity/reactpress-client --pm2
 
 # Specify port
 npx @fecommunity/reactpress-client --port 3001
+
+# Enable verbose logging
+npx @fecommunity/reactpress-client --verbose
 ```
 
-## Customization
+## Integration with ReactPress Toolkit
 
-### Theme Customization
-Modify theme variables in `src/theme/` to customize colors, typography, and spacing.
+The client seamlessly integrates with the ReactPress Toolkit for API interactions:
 
-### Component Extensions
-Create custom components in `src/components/` to extend functionality.
+```typescript
+import { api, types } from '@fecommunity/reactpress-toolkit';
 
-### Page Creation
-Add new pages in `pages/` directory following Next.js routing conventions.
+// Fetch articles with proper typing
+const articles: types.IArticle[] = await api.article.findAll();
+
+// Create new article
+const newArticle = await api.article.create({
+  title: 'My New Article',
+  content: 'Article content here...',
+  // ... other properties
+});
+```
+
+The toolkit provides:
+- Strongly-typed API clients for all modules
+- TypeScript definitions for all data models
+- Utility functions for common operations
+- Built-in authentication and error handling
+- Automatic retry mechanisms for failed requests
+
+## Theme Customization
+
+ReactPress Client supports advanced theme customization:
+
+### Design Token System
+```typescript
+// Custom theme tokens
+const customTokens = {
+  colors: {
+    primary: '#0070f3',
+    secondary: '#7928ca',
+    background: '#ffffff',
+    text: '#000000'
+  },
+  typography: {
+    fontFamily: 'Inter, sans-serif',
+    fontSize: {
+      small: '12px',
+      medium: '16px',
+      large: '20px'
+    }
+  }
+};
+```
+
+### Component-Level Customization
+```typescript
+// Extend existing components
+import { Button } from '@fecommunity/reactpress-components';
+
+const CustomButton = styled(Button)`
+  background-color: ${props => props.theme.colors.primary};
+  border-radius: 8px;
+  padding: 12px 24px;
+`;
+```
 
 ## Performance Optimization
 
-- **Server-Side Rendering** - Improved SEO and initial load performance
-- **Code Splitting** - Automatic route-based code splitting
-- **Image Optimization** - Next.js built-in image optimization
+- **App Router Architecture** - Server Components for optimal SSR
+- **Automatic Code Splitting** - Route-based code splitting
+- **Image Optimization** - Next.js built-in image optimization with automatic format selection
 - **Lazy Loading** - Component and route lazy loading
-- **Caching** - HTTP caching strategies
+- **Caching Strategies** - HTTP caching and in-memory caching
+- **Bundle Analysis** - Built-in bundle analysis tools
 
 ## PWA Support
 
 ReactPress Client is a Progressive Web App with:
-- Offline support
-- Installable on devices
+- Offline support with service workers
+- Installable on devices with native app experience
 - Push notifications (coming soon)
-- App-like experience
+- App-like experience with splash screens
 
 ## Testing
 
 ```bash
+# Run unit tests with Vitest
+pnpm run test
+
+# Run integration tests with Playwright
+pnpm run test:e2e
+
 # Run linting
 pnpm run lint
 
@@ -211,11 +279,31 @@ pnpm run format
 
 # Run type checking
 pnpm run type-check
+
+# Run bundle analysis
+pnpm run analyze
 ```
 
+## Templates
+
+ReactPress Client can be used with various professional templates:
+
+### Hello World Template
+```bash
+npx @fecommunity/reactpress-template-hello-world my-blog
+```
+
+### Twenty Twenty Five Template
+```bash
+npx @fecommunity/reactpress-template-twentytwentyfive my-blog
+```
+
+### Custom Templates
+Create your own templates by extending the client with custom components and pages.
+
 ## Deployment
 
-### Vercel Deployment
+### Vercel Deployment (Recommended)
 
 [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/fecommunity/reactpress)
 
@@ -234,6 +322,7 @@ pnpm run start
 - 📖 [Documentation](https://github.com/fecommunity/reactpress)
 - 🐛 [Issues](https://github.com/fecommunity/reactpress/issues)
 - 💬 [Discussions](https://github.com/fecommunity/reactpress/discussions)
+- 📧 [Support](mailto:[email protected])
 
 ## Contributing
 

README.md

@@ -1,6 +1,6 @@
 {
   "name": "@fecommunity/reactpress-client",
-  "version": "1.0.0-beta.23",
+  "version": "1.0.0",
   "bin": {
     "reactpress-client": "./bin/reactpress-client.js"
   },

client/README.md

@@ -1,9 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:news="http://www.google.com/schemas/sitemap-news/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:mobile="http://www.google.com/schemas/sitemap-mobile/1.0" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1" xmlns:video="http://www.google.com/schemas/sitemap-video/1.1">
-<url><loc>http://localhost:3001</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2025-09-20T12:37:06.121Z</lastmod></url>
-<url><loc>http://localhost:3001/archives</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2025-09-20T12:37:06.121Z</lastmod></url>
-<url><loc>http://localhost:3001/knowledge</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2025-09-20T12:37:06.121Z</lastmod></url>
-<url><loc>http://localhost:3001/login</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2025-09-20T12:37:06.121Z</lastmod></url>
-<url><loc>http://localhost:3001/nav</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2025-09-20T12:37:06.121Z</lastmod></url>
-<url><loc>http://localhost:3001/rss</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2025-09-20T12:37:06.121Z</lastmod></url>
+<url><loc>http://localhost:3001</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2025-09-21T15:49:52.619Z</lastmod></url>
+<url><loc>http://localhost:3001/archives</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2025-09-21T15:49:52.619Z</lastmod></url>
+<url><loc>http://localhost:3001/knowledge</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2025-09-21T15:49:52.619Z</lastmod></url>
+<url><loc>http://localhost:3001/login</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2025-09-21T15:49:52.619Z</lastmod></url>
+<url><loc>http://localhost:3001/nav</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2025-09-21T15:49:52.619Z</lastmod></url>
+<url><loc>http://localhost:3001/rss</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2025-09-21T15:49:52.619Z</lastmod></url>
 </urlset>

client/package.json

@@ -33,6 +33,11 @@ const packages = [
     name: '@fecommunity/reactpress-template-hello-world',
     path: 'templates/hello-world',
     description: 'Hello World template for ReactPress'
+  },
+  {
+    name: '@fecommunity/reactpress-template-twentytwentyfive',
+    path: 'templates/twentytwentyfive',
+    description: 'Twenty Twenty Five blog template for ReactPress'
   }
 ];
 
@@ -276,7 +281,7 @@ function buildPackage(packagePath, packageName) {
       execSync('pnpm run prebuild && pnpm run build', { cwd: path.join(process.cwd(), packagePath), stdio: 'inherit' });
     } else if (packagePath === 'toolkit') {
       execSync('pnpm run build', { cwd: path.join(process.cwd(), packagePath), stdio: 'inherit' });
-    } else if (packagePath === 'templates/hello-world') {
+    } else if (packagePath === 'templates/hello-world' || packagePath === 'templates/twentytwentyfive') {
       // Templates don't need to be built, just validate package.json
       console.log(chalk.gray('  Templates do not require building, skipping...'));
     }