Initial commit: Telegram Management System

Full-stack web application for Telegram management
- Frontend: Vue 3 + Vben Admin
- Backend: NestJS
- Features: User management, group broadcast, statistics

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

marketing-agent/frontend/README.md

@@ -0,0 +1,217 @@
+# Telegram Marketing Agent - Frontend
+
+Modern Vue 3 management interface for the Telegram Marketing Agent System.
+
+## Features
+
+- 🎯 **Campaign Management**: Create, manage, and monitor marketing campaigns
+- 📊 **Real-time Analytics**: Track performance metrics and engagement rates
+- 🧠 **A/B Testing**: Built-in experimentation framework
+- 🤖 **AI Integration**: Claude-powered strategy generation and optimization
+- 🔐 **Compliance Tools**: GDPR/CCPA compliance management
+- 🌍 **Multi-language Support**: English and Chinese interfaces
+- 🎨 **Modern UI**: Built with Element Plus and Tailwind CSS
+
+## Tech Stack
+
+- **Framework**: Vue 3 with Composition API
+- **State Management**: Pinia
+- **Routing**: Vue Router 4
+- **UI Library**: Element Plus
+- **Styling**: Tailwind CSS
+- **Build Tool**: Vite
+- **Charts**: Chart.js with vue-chartjs
+- **HTTP Client**: Axios
+- **Internationalization**: Vue I18n
+
+## Getting Started
+
+### Prerequisites
+
+- Node.js 18+ and npm 8+
+- Backend services running (see main README)
+
+### Installation
+
+```bash
+# Install dependencies
+npm install
+
+# Start development server
+npm run dev
+```
+
+The application will be available at http://localhost:3008
+
+### Environment Configuration
+
+The frontend proxies API requests to the backend. Configure the proxy in `vite.config.js`:
+
+```javascript
+server: {
+  proxy: {
+    '/api': {
+      target: 'http://localhost:3000', // API Gateway URL
+      changeOrigin: true
+    }
+  }
+}
+```
+
+## Project Structure
+
+```
+src/
+├── api/              # API client modules
+│   ├── index.js      # Axios configuration
+│   └── modules/      # API endpoints by domain
+├── assets/           # Static assets
+├── components/       # Reusable components
+├── locales/          # i18n translations
+├── router/           # Vue Router configuration
+├── stores/           # Pinia stores
+├── utils/            # Utility functions
+├── views/            # Page components
+├── App.vue           # Root component
+├── main.js           # Application entry
+└── style.css         # Global styles
+```
+
+## Key Features
+
+### Campaign Management
+
+- Create campaigns with AI-powered strategy generation
+- Multi-step message sequences with delays
+- Target audience selection by groups and tags
+- Real-time campaign status monitoring
+- Campaign lifecycle management (start, pause, resume, cancel)
+
+### Analytics Dashboard
+
+- Key performance metrics with trend analysis
+- Time-series charts for message and engagement data
+- Campaign performance comparison
+- Real-time activity feed
+- Export reports in multiple formats
+
+### A/B Testing
+
+- Create experiments with multiple variants
+- Statistical significance testing
+- Real-time result monitoring
+- Winner selection and rollout
+
+### Compliance Management
+
+- User consent tracking
+- Data export/deletion requests
+- Audit log viewing
+- GDPR/CCPA compliance status
+
+## Development
+
+### Available Scripts
+
+```bash
+# Development server
+npm run dev
+
+# Production build
+npm run build
+
+# Preview production build
+npm run preview
+
+# Lint and fix
+npm run lint
+
+# Format code
+npm run format
+```
+
+### Code Style
+
+- Use Composition API with `<script setup>`
+- Prefer TypeScript-like prop definitions
+- Use Tailwind for utility classes
+- Use Element Plus components for consistency
+
+### State Management
+
+The application uses Pinia for state management:
+
+```javascript
+// stores/auth.js
+export const useAuthStore = defineStore('auth', () => {
+  const user = ref(null)
+  const token = ref('')
+  
+  // Store logic...
+})
+```
+
+### API Integration
+
+All API calls go through the centralized API client:
+
+```javascript
+import api from '@/api'
+
+// Example usage
+const campaigns = await api.campaigns.getList({
+  page: 1,
+  pageSize: 20
+})
+```
+
+## Building for Production
+
+```bash
+# Build the application
+npm run build
+
+# Files will be in dist/
+# Serve with any static file server
+```
+
+### Nginx Configuration
+
+```nginx
+server {
+    listen 80;
+    server_name your-domain.com;
+    root /var/www/marketing-agent;
+    
+    location / {
+        try_files $uri $uri/ /index.html;
+    }
+    
+    location /api {
+        proxy_pass http://api-gateway:3000;
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+    }
+}
+```
+
+## Security Considerations
+
+- All API requests require authentication
+- JWT tokens stored in localStorage
+- Automatic token refresh on 401 responses
+- CORS configured for production domains
+- Input validation on all forms
+- XSS protection via Vue's template compilation
+
+## Contributing
+
+1. Follow the existing code style
+2. Write meaningful commit messages
+3. Add appropriate error handling
+4. Update translations for new features
+5. Test across different screen sizes
+
+## License
+
+See the main project LICENSE file.