TDesign Vue Next Starter

The DetailDeploy page provides a dashboard for monitoring deployment trends and managing project lists. It features ECharts-based visualizations for deployment trends and warnings, and a TDesign table for managing project data.

Key Features

• Deployment Trend Monitoring: A real-time line chart (monitorContainer) that updates every 3 seconds.
• Warning Data Visualization: A bar chart (dataContainer) that can be toggled between weekly and monthly views using a t-radio-group.
• Project Management Table: A t-table displaying project names, administrators, and update times, with support for sorting and row operations (Manage and Delete).
• Project Info Dialog: A t-dialog that displays detailed base information for a selected project.

Data Integration

• API: Uses getProjectList from @/api/detail to fetch project data.
• State Management: Integrates with useSettingStore to retrieve chartColors and react to brandTheme changes via changeChartsTheme.
• Localization: Uses the t function for all UI strings (e.g., pages.detailDeploy.projectList.title).

The project uses a module-based routing system where routes are automatically discovered and loaded from the ./src/router/modules/ directory. Routes are categorized into two types based on their file naming convention:

1. Homepage Routes: Any file named homepage.ts within a module folder (e.g., ./modules/user/homepage.ts) is treated as a homepage-related route and exported via homepageRouterList.
2. Fixed Routes: All other .ts files in the modules directory (excluding those named homepage.ts) are treated as standard fixed routes and exported via fixedRouterList.

To add new routes, create a .ts file in a subdirectory of src/router/modules/ and export a RouteRecordRaw object or an array of RouteRecordRaw objects as the default export.

// Example of a new module route: src/router/modules/settings/index.ts
import type { RouteRecordRaw } from 'vue-router';

const route: RouteRecordRaw = {
  path: '/settings',
  name: 'settings',
  component: () => import('@/pages/settings/index.vue'),
};

export default route;

The DetailSecondary component provides a UI for viewing, filtering, and managing notification items using a tabbed interface. It integrates with the useNotificationStore to handle data state.

Key Features

• Tabbed Filtering: Users can switch between 'All' (msgData), 'Unread' (unreadMsg), and 'Read' (readMsg) notifications.
• Read/Unread Toggle: Clicking a message or its action icon toggles the status property of the NotificationItem.
• Deletion: Users can delete a specific notification, which triggers a confirmation dialog.

Data Model

The component operates on NotificationItem objects. Key properties used include:

• id: Unique identifier for the message.
• status: Boolean indicating if the message is unread.
• type: The category of the notification.
• content: The text content of the message.
• quality: Used to determine the theme of the notification tag via NOTIFICATION_TYPES.
• date: The timestamp/date string for the message.