Boonlive_RD_Web/Wx_WxCheck_Prod
8
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

新增：管理后台前端页面，以及openspec内容。

Browse Source
This commit is contained in:
徐
2025-12-24 20:15:28 +08:00
parent 6d7ed38105
commit 845f1c6618
64 changed files with 9017 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

87
openspec/changes/add-admin-web/design.md Normal file
View File

@@ -0,0 +1,87 @@
## Context
The admin web system needs to provide a responsive, user-friendly interface for administrators to manage users and conversation records from the WeChat mini-program. The system should work seamlessly with the existing ASP.NET Core backend API.
## Goals / Non-Goals
- Goals:
- Provide a modern, responsive admin interface
- Support dark/light theme switching
- Implement secure authentication
- Provide efficient data management with search and pagination
- Follow Vue 3.x best practices with Composition API
- Non-Goals:
- Real-time notifications
- Advanced analytics and reporting
- Multi-language support
## Decisions
- Decision: Use Vue 3.x with Composition API and `<script setup>` syntax
- Rationale: Modern Vue approach, better TypeScript support, more organized code
- Decision: Use Element Plus as UI framework
- Rationale: Comprehensive component library, excellent documentation, Vue 3 support
- Decision: Use Pinia for state management
- Rationale: Official Vue 3 state management, simpler than Vuex, better TypeScript support
- Decision: Use Vite as build tool
- Rationale: Fast development server, optimized build, modern tooling
- Decision: Implement client-side authentication with fixed credentials
- Rationale: Simplified approach for initial implementation; can be enhanced with JWT later
- Decision: Responsive design with mobile-first approach
- Rationale: Admins may need to access system from mobile devices
- Decision: Dark/light theme switching
- Rationale: Modern UX requirement, reduces eye strain for extended use
## Technical Architecture
- Frontend Framework: Vue 3.x with Composition API
- UI Library: Element Plus
- Build Tool: Vite
- Routing: vue-router 4.x
- State Management: Pinia
- HTTP Client: axios
- Styling: Scoped CSS with responsive design
- Authentication: Token-based with localStorage
## Component Structure
```
src/
├── components/
│ └── Layout/
│ ├── Layout.vue (main layout with sidebar)
│ ├── Sidebar.vue (navigation menu)
│ └── Header.vue (top bar with user info and theme toggle)
├── views/
│ ├── Login.vue (login page)
│ ├── Home.vue (dashboard)
│ ├── UserList.vue (user management)
│ └── ConversationList.vue (conversation management)
├── router/
│ └── index.js (routing configuration)
├── store/
│ ├── auth.js (authentication state)
│ └── theme.js (theme state)
├── utils/
│ └── request.js (axios configuration)
└── styles/
├── main.css (global styles)
└── variables.css (CSS variables for theming)
```
## API Integration
The admin web will integrate with existing backend APIs:
- `/api/Admin/QueryUsers` - User management
- `/api/Admin/QueryConversations` - Conversation management
- Future: Authentication endpoints
## Risks / Trade-offs
- Risk: Fixed authentication credentials are not secure
- Mitigation: Document this limitation; plan to implement proper JWT authentication
- Risk: No real-time updates
- Mitigation: Manual refresh for data updates; can be enhanced later
- Trade-off: Simplified authentication vs security
- Decision: Start with simple implementation, enhance security in future iterations
## Migration Plan
No migration required as this is a new system.
## Open Questions
- Should we implement proper JWT authentication from the start?
- Should we add role-based access control (RBAC)?
- Should we implement real-time updates using WebSocket or polling?

20
openspec/changes/add-admin-web/proposal.md Normal file
View File

@@ -0,0 +1,20 @@
# Change: Implement Admin Web Management System
## Why
The project needs a web-based administrative interface to manage users and conversation records from the WeChat mini-program. Currently, there is no centralized way for administrators to view, search, and manage system data.
## What Changes
- Implement a complete admin web application using Vue 3.x + Element Plus + Vite
- Create user management page with search and pagination
- Create conversation record management page with filtering capabilities
- Implement authentication system with login page
- Add responsive layout with sidebar navigation
- Implement dark/light theme switching
- Set up routing with vue-router
- Configure state management with Pinia
- Set up HTTP client with axios and interceptors
## Impact
- Affected specs: backend-admin
- Affected code: admin-web/ (new directory)
- Dependencies: Vue 3.x, Element Plus, Vite, vue-router, Pinia, axios

124
openspec/changes/add-admin-web/specs/backend-admin/spec.md Normal file
View File

@@ -0,0 +1,124 @@
## ADDED Requirements
### Requirement: Admin Web Application
The system SHALL provide a web-based administrative interface for managing users and conversation records.
#### Scenario: Access admin web interface
- **WHEN** an administrator navigates to the admin web URL
- **THEN** the login page SHALL be displayed
#### Scenario: Admin web responsive design
- **WHEN** the admin web is accessed from different devices
- **THEN** the interface SHALL adapt to mobile (<768px) and desktop (>=768px) screen sizes
### Requirement: Admin Authentication
The system SHALL provide authentication for accessing the admin web interface.
#### Scenario: Admin login success
- **WHEN** valid admin credentials are provided
- **THEN** the user SHALL be redirected to the dashboard
- **AND** an authentication token SHALL be stored in localStorage
#### Scenario: Admin login failure
- **WHEN** invalid credentials are provided
- **THEN** an error message SHALL be displayed
- **AND** the user SHALL remain on the login page
#### Scenario: Admin logout
- **WHEN** the user clicks the logout button
- **THEN** the authentication token SHALL be removed from localStorage
- **AND** the user SHALL be redirected to the login page
#### Scenario: Protected route access without authentication
- **WHEN** an unauthenticated user attempts to access a protected route
- **THEN** the user SHALL be redirected to the login page
### Requirement: User Management
The system SHALL provide an interface for managing users.
#### Scenario: View user list
- **WHEN** the user navigates to the user management page
- **THEN** a list of users SHALL be displayed in a table
- **AND** the table SHALL include UserKey, UserName, WeChatName, PhoneNumber, Department, and IsDisabled columns
#### Scenario: Search users
- **WHEN** the user enters a search term
- **THEN** the user list SHALL be filtered to show matching users
#### Scenario: Paginate user list
- **WHEN** the user navigates between pages
- **THEN** the user list SHALL display the appropriate page of results
- **AND** page size SHALL be configurable
### Requirement: Conversation Management
The system SHALL provide an interface for managing conversation records.
#### Scenario: View conversation list
- **WHEN** the user navigates to the conversation management page
- **THEN** a list of conversations SHALL be displayed in a table
- **AND** the table SHALL include Guid, UserKey, MessageType, RecordTimeUTCStamp, and IsDeleted columns
#### Scenario: Filter conversations by message type
- **WHEN** the user selects a message type filter
- **THEN** the conversation list SHALL be filtered to show only conversations of that type
#### Scenario: Search conversations
- **WHEN** the user enters a search term
- **THEN** the conversation list SHALL be filtered to show matching conversations
#### Scenario: Paginate conversation list
- **WHEN** the user navigates between pages
- **THEN** the conversation list SHALL display the appropriate page of results
### Requirement: Dashboard
The system SHALL provide a dashboard with system overview information.
#### Scenario: View dashboard
- **WHEN** the user navigates to the dashboard
- **THEN** statistics cards SHALL be displayed showing total users and total conversations
- **AND** recent activity SHALL be shown
### Requirement: Theme Switching
The system SHALL support dark and light theme switching.
#### Scenario: Switch to dark theme
- **WHEN** the user clicks the dark theme toggle
- **THEN** the interface SHALL switch to dark mode
- **AND** the preference SHALL be saved in localStorage
#### Scenario: Switch to light theme
- **WHEN** the user clicks the light theme toggle
- **THEN** the interface SHALL switch to light mode
- **AND** the preference SHALL be saved in localStorage
#### Scenario: Persist theme preference
- **WHEN** the user returns to the admin web
- **THEN** the previously selected theme SHALL be applied
### Requirement: Layout and Navigation
The system SHALL provide a consistent layout with navigation.
#### Scenario: Navigate between pages
- **WHEN** the user clicks a navigation menu item
- **THEN** the corresponding page SHALL be displayed
- **AND** the active menu item SHALL be highlighted
#### Scenario: Responsive sidebar
- **WHEN** the screen width is less than 768px
- **THEN** the sidebar SHALL be collapsible
- **AND** a hamburger menu SHALL be displayed
### Requirement: HTTP Client
The system SHALL provide a configured HTTP client for API communication.
#### Scenario: API request with authentication
- **WHEN** an authenticated user makes an API request
- **THEN** the authentication token SHALL be included in the request headers
#### Scenario: API error handling
- **WHEN** an API request fails
- **THEN** an appropriate error message SHALL be displayed to the user
#### Scenario: API request timeout
- **WHEN** an API request times out
- **THEN** a timeout error message SHALL be displayed

66
openspec/changes/add-admin-web/tasks.md Normal file
View File

@@ -0,0 +1,66 @@
## 1. Project Setup
- [ ] 1.1 Initialize Vue 3.x project with Vite
- [ ] 1.2 Install Element Plus UI framework
- [ ] 1.3 Install vue-router for routing
- [ ] 1.4 Install Pinia for state management
- [ ] 1.5 Install axios for HTTP requests
- [ ] 1.6 Configure project structure
## 2. Authentication System
- [ ] 2.1 Create Login page component
- [ ] 2.2 Implement authentication store with Pinia
- [ ] 2.3 Configure route guards for protected routes
- [ ] 2.4 Implement token storage in localStorage
- [ ] 2.5 Add logout functionality
## 3. Layout and Navigation
- [ ] 3.1 Create main Layout component with sidebar
- [ ] 3.2 Implement responsive design for mobile/desktop
- [ ] 3.3 Create navigation menu
- [ ] 3.4 Add header with user info and theme toggle
## 4. Theme Management
- [ ] 4.1 Create theme store with Pinia
- [ ] 4.2 Implement dark/light theme switching
- [ ] 4.3 Configure Element Plus theme
- [ ] 4.4 Persist theme preference in localStorage
## 5. User Management
- [ ] 5.1 Create UserList page component
- [ ] 5.2 Implement user data table with Element Plus
- [ ] 5.3 Add search functionality
- [ ] 5.4 Add pagination support
- [ ] 5.5 Integrate with backend API
## 6. Conversation Management
- [ ] 6.1 Create ConversationList page component
- [ ] 6.2 Implement conversation data table
- [ ] 6.3 Add filtering by message type
- [ ] 6.4 Add search functionality
- [ ] 6.5 Add pagination support
- [ ] 6.6 Integrate with backend API
## 7. HTTP Client Configuration
- [ ] 7.1 Create axios instance with base URL
- [ ] 7.2 Implement request interceptors
- [ ] 7.3 Implement response interceptors
- [ ] 7.4 Add error handling
## 8. Routing Configuration
- [ ] 8.1 Configure vue-router
- [ ] 8.2 Define public routes (login)
- [ ] 8.3 Define protected routes (dashboard, users, conversations)
- [ ] 8.4 Implement route guards
## 9. Dashboard
- [ ] 9.1 Create Home/Dashboard page
- [ ] 9.2 Display statistics cards
- [ ] 9.3 Show recent activity
## 10. Testing and Deployment
- [ ] 10.1 Test authentication flow
- [ ] 10.2 Test user management features
- [ ] 10.3 Test conversation management features
- [ ] 10.4 Test responsive design
- [ ] 10.5 Test theme switching
- [ ] 10.6 Verify all API integrations