feat: add admin components for input, metrics, tables, and user forms

- Introduced AdminInput component for standardized input fields.
- Created AdminMetricCard for displaying metrics with customizable tones.
- Added AdminPlaceholderTable for loading states in tables.
- Developed AdminSectionCard for consistent section layouts.
- Implemented AdminSectionShell for organizing admin sections.
- Added AdminSelect for dropdown selections with v-model support.
- Created AdminTable for displaying tabular data with loading and empty states.
- Introduced AdminTextarea for multi-line text input.
- Developed AdminUserFormFields for user creation and editing forms.
- Added useAdminPageHeader composable for managing admin page header state.
This commit is contained in:
2026-03-24 07:08:44 +00:00
parent e854c68ad0
commit b60f65e4d1
100 changed files with 9270 additions and 2204 deletions

View File

@@ -112,7 +112,8 @@
"security": "Security",
"billing": "Billing & Plans",
"notifications": "Notifications",
"player": "Player",
"playerGroup": "Player",
"playerConfigs": "Player Configs",
"domains": "Allowed Domains",
"ads": "Ads & VAST",
"danger": "Danger Zone"
@@ -128,9 +129,9 @@
"title": "Notifications",
"subtitle": "Choose how you want to receive notifications and updates."
},
"player": {
"title": "Player Settings",
"subtitle": "Configure default video player behavior and features."
"preferences": {
"title": "Preferences",
"subtitle": "Manage your account preferences and notification channels."
},
"billing": {
"title": "Billing & Plans",
@@ -144,6 +145,10 @@
"title": "Ads & VAST",
"subtitle": "Create and manage VAST ad templates for your videos."
},
"playerConfigs": {
"title": "Player Configs",
"subtitle": "Create and manage player configurations for your videos."
},
"danger": {
"title": "Danger Zone",
"subtitle": "Irreversible and destructive actions. Be careful!"
@@ -293,6 +298,126 @@
"failedDetail": "Failed to load or update domains."
}
},
"playerConfigs": {
"createConfig": "Create Config",
"infoBanner": "Player configs let you customize playback behavior such as autoplay, loop, controls, and casting features.",
"freePlanTitle": "Free plan limit",
"freePlanMessage": "Free accounts can create and manage 1 player config. After you create one, create is disabled until you delete it.",
"reconciliationTitle": "Too many configs for free plan",
"reconciliationMessage": "Your account still has more than 1 player config from a previous paid plan. Delete extra configs until only 1 remains to edit, enable, or set a default again.",
"readOnlyTitle": "Free plan limit",
"readOnlyMessage": "Free accounts can manage 1 player config. Delete extra configs after downgrade to continue editing.",
"defaultBadge": "Default",
"createdOn": "Created {{date}}",
"emptyTitle": "No player configs yet",
"emptySubtitle": "Create your first config to customize video playback",
"items": {
"autoplay": {
"title": "Autoplay",
"description": "Automatically start videos when loaded"
},
"loop": {
"title": "Loop",
"description": "Repeat video when it ends"
},
"muted": {
"title": "Muted",
"description": "Start videos with sound muted"
},
"showControls": {
"title": "Show Controls",
"description": "Display player controls during playback"
},
"pip": {
"title": "Picture in Picture",
"description": "Enable Picture-in-Picture mode"
},
"airplay": {
"title": "AirPlay",
"description": "Allow streaming to Apple devices via AirPlay"
},
"chromecast": {
"title": "Chromecast",
"description": "Allow casting to Chromecast devices"
},
"encrytionM3u8": {
"title": "HLS Encryption (m3u8)",
"description": "Enable encryption for HLS streams."
}
},
"badges": {
"autoplay": "Autoplay",
"loop": "Loop",
"muted": "Muted",
"controls": "Controls",
"pip": "PiP",
"airplay": "AirPlay",
"chromecast": "Chromecast",
"encrytionM3u8": "Encrypted HLS",
"logo": "Logo"
},
"state": {
"enabled": "enabled",
"disabled": "disabled"
},
"actions": {
"default": "Default",
"setDefault": "Set Default"
},
"table": {
"name": "Name",
"settings": "Settings"
},
"dialog": {
"editTitle": "Edit Config",
"createTitle": "Create Player Config",
"name": "Config Name",
"namePlaceholder": "e.g., Mobile Player, Desktop Player",
"description": "Description",
"descriptionPlaceholder": "Brief description for this config",
"playbackOptions": "Playback Options",
"castingOptions": "Casting Options",
"advancedOptions": "Advanced Options",
"logoUrl": "Logo URL",
"logoUrlPlaceholder": "https://example.com/logo.png",
"logoUrlHint": "Optional logo image shown in the player overlay.",
"defaultLabel": "Default Config",
"defaultCheckbox": "Use this config as default for new videos",
"defaultHint": "When enabled, newly created videos will automatically use this active config.",
"defaultDisabledHint": "Please enable this config before setting it as default.",
"update": "Update",
"create": "Create"
},
"confirm": {
"deleteMessage": "Are you sure you want to delete \"{name}\"?",
"deleteHeader": "Delete Config",
"deleteAccept": "Delete",
"deleteReject": "Cancel"
},
"toast": {
"nameRequiredSummary": "Name required",
"nameRequiredDetail": "Please enter a config name.",
"updatedSummary": "Config updated",
"updatedDetail": "Player config has been updated.",
"createdSummary": "Config created",
"createdDetail": "Player config has been created.",
"enabledSummary": "Config enabled",
"disabledSummary": "Config disabled",
"defaultUpdatedSummary": "Default updated",
"defaultUpdatedDetail": "{name} is now the default config for new videos.",
"upgradeRequiredSummary": "Config limit reached",
"upgradeRequiredDetail": "Free accounts can only have 1 player config.",
"limitSummary": "Config limit reached",
"limitDetail": "Free accounts can only have 1 player config.",
"reconciliationSummary": "Delete extra configs",
"reconciliationDetail": "Delete extra player configs until only 1 remains to continue managing them on the free plan.",
"toggleDetail": "{name} has been {state}.",
"deletedSummary": "Config deleted",
"deletedDetail": "Player config has been removed.",
"failedSummary": "Action failed",
"failedDetail": "Failed to load or update player configs."
}
},
"adsVast": {
"createTemplate": "Create Template",
"infoBanner": "VAST (Video Ad Serving Template) is an XML schema for serving ad tags to video players.",
@@ -629,6 +754,13 @@
"toast": {
"dismissAria": "Dismiss"
},
"network": {
"offline": {
"title": "You're offline",
"description": "Your internet connection appears to be unavailable. Check your network and we'll reconnect automatically when you're back online.",
"action": "Try again"
}
},
"overview": {
"welcome": {
"title": "Hello, {{name}}",
@@ -638,7 +770,27 @@
"totalVideos": "Total Videos",
"totalViews": "Total Views",
"storageUsed": "Storage Used",
"trendVsLastMonth": "vs last month"
"trendVsLastMonth": "vs last month",
"unlimited": "Unlimited"
},
"admin-quickActions": {
"title": "Admin Quick Actions",
"manageUsers": {
"title": "Manage Users",
"description": "View and manage all user accounts"
},
"viewReports": {
"title": "View Reports",
"description": "Access detailed analytics and reports"
},
"systemSettings": {
"title": "System Settings",
"description": "Configure system-wide settings and preferences"
},
"billingOverview": {
"title": "Billing Overview",
"description": "Monitor billing and subscription details"
}
},
"quickActions": {
"title": "Quick Actions",
@@ -1008,7 +1160,7 @@
"description": "Content delivered from 200+ PoPs worldwide. Automatic region selection ensures the lowest latency for every viewer."
},
"live": {
"title": "Live Streaming API",
"title": "Streaming API",
"description": "Scale to millions of concurrent viewers with ultra-low latency. RTMP ingest and HLS playback supported natively.",
"status": "Live Status",
"onAir": "On Air",

View File

@@ -112,7 +112,8 @@
"security": "Bảo mật",
"billing": "Thanh toán & Gói",
"notifications": "Thông báo",
"player": "Trình phát",
"playerGroup": "Trình phát",
"playerConfigs": "Cấu hình trình phát",
"domains": "Tên miền được phép",
"ads": "Quảng cáo & VAST",
"danger": "Vùng nguy hiểm"
@@ -128,9 +129,9 @@
"title": "Thông báo",
"subtitle": "Chọn cách bạn muốn nhận thông báo và cập nhật."
},
"player": {
"title": "Cài đặt trình phát",
"subtitle": "Cấu hình hành vinh năng mặc định của trình phát video."
"preferences": {
"title": "Tùy chọn",
"subtitle": "Quản lý các tùy chọn tài khoảnnh thông báo của bạn."
},
"billing": {
"title": "Thanh toán & Gói",
@@ -144,6 +145,10 @@
"title": "Quảng cáo & VAST",
"subtitle": "Tạo và quản lý mẫu quảng cáo VAST cho video."
},
"playerConfigs": {
"title": "Cấu hình trình phát",
"subtitle": "Tạo và quản lý cấu hình trình phát cho video."
},
"danger": {
"title": "Vùng nguy hiểm",
"subtitle": "Hành động không thể hoàn tác và có tính phá hủy. Hãy cẩn thận!"
@@ -293,6 +298,126 @@
"failedDetail": "Không thể tải hoặc cập nhật danh sách tên miền."
}
},
"playerConfigs": {
"createConfig": "Tạo cấu hình",
"infoBanner": "Cấu hình trình phát cho phép tùy chỉnh hành vi phát video như tự động phát, lặp, hiển thị điều khiển và các tính năng casting.",
"freePlanTitle": "Giới hạn gói free",
"freePlanMessage": "Tài khoản free có thể tạo và quản lý 1 player config. Sau khi đã có 1 config, bạn cần xóa nó trước khi tạo config mới.",
"reconciliationTitle": "Có quá nhiều config cho gói free",
"reconciliationMessage": "Tài khoản của bạn vẫn còn hơn 1 player config từ gói paid trước đó. Hãy xóa bớt cho đến khi chỉ còn 1 config để có thể sửa, bật/tắt hoặc đặt mặc định trở lại.",
"readOnlyTitle": "Giới hạn gói free",
"readOnlyMessage": "Tài khoản free có thể quản lý 1 player config. Sau khi downgrade, hãy xóa bớt config dư để tiếp tục chỉnh sửa.",
"defaultBadge": "Mặc định",
"createdOn": "Tạo ngày {{date}}",
"emptyTitle": "Chưa có cấu hình",
"emptySubtitle": "Tạo config đầu tiên để tùy chỉnh trải nghiệm phát video",
"items": {
"autoplay": {
"title": "Tự phát",
"description": "Tự động phát video khi tải xong"
},
"loop": {
"title": "Lặp lại",
"description": "Phát lại video khi kết thúc"
},
"muted": {
"title": "Tắt tiếng",
"description": "Bắt đầu video với âm thanh tắt"
},
"showControls": {
"title": "Hiển thị điều khiển",
"description": "Hiển thị thanh điều khiển phát video"
},
"pip": {
"title": "Picture in Picture",
"description": "Bật chế độ Picture-in-Picture"
},
"airplay": {
"title": "AirPlay",
"description": "Cho phép phát tới thiết bị Apple qua AirPlay"
},
"chromecast": {
"title": "Chromecast",
"description": "Cho phép cast tới thiết bị Chromecast"
},
"encrytionM3u8": {
"title": "Mã hóa HLS (m3u8)",
"description": "Bật mã hóa cho luồng HLS."
}
},
"badges": {
"autoplay": "Tự phát",
"loop": "Lặp",
"muted": "Tắt tiếng",
"controls": "Điều khiển",
"pip": "PiP",
"airplay": "AirPlay",
"chromecast": "Chromecast",
"encrytionM3u8": "HLS mã hóa",
"logo": "Logo"
},
"state": {
"enabled": "bật",
"disabled": "tắt"
},
"actions": {
"default": "Mặc định",
"setDefault": "Đặt mặc định"
},
"table": {
"name": "Tên",
"settings": "Cài đặt"
},
"dialog": {
"editTitle": "Sửa cấu hình",
"createTitle": "Tạo cấu hình trình phát",
"name": "Tên cấu hình",
"namePlaceholder": "ví dụ: Mobile Player, Desktop Player",
"description": "Mô tả",
"descriptionPlaceholder": "Mô tả ngắn cho cấu hình này",
"playbackOptions": "Tùy chọn phát lại",
"castingOptions": "Tùy chọn casting",
"advancedOptions": "Tùy chọn nâng cao",
"logoUrl": "URL logo",
"logoUrlPlaceholder": "https://example.com/logo.png",
"logoUrlHint": "Logo tùy chọn hiển thị trong lớp phủ của trình phát.",
"defaultLabel": "Cấu hình mặc định",
"defaultCheckbox": "Dùng cấu hình này mặc định cho video mới",
"defaultHint": "Khi bật, video mới tạo sẽ tự động dùng cấu hình đang active này.",
"defaultDisabledHint": "Hãy bật cấu hình này trước khi đặt làm mặc định.",
"update": "Cập nhật",
"create": "Tạo"
},
"confirm": {
"deleteMessage": "Bạn có chắc muốn xóa \"{name}\"?",
"deleteHeader": "Xóa cấu hình",
"deleteAccept": "Xóa",
"deleteReject": "Hủy"
},
"toast": {
"nameRequiredSummary": "Thiếu tên cấu hình",
"nameRequiredDetail": "Vui lòng nhập tên cấu hình.",
"updatedSummary": "Đã cập nhật cấu hình",
"updatedDetail": "Cấu hình trình phát đã được cập nhật.",
"createdSummary": "Đã tạo cấu hình",
"createdDetail": "Cấu hình trình phát đã được tạo.",
"enabledSummary": "Đã bật cấu hình",
"disabledSummary": "Đã tắt cấu hình",
"defaultUpdatedSummary": "Đã cập nhật mặc định",
"defaultUpdatedDetail": "{name} hiện là cấu hình mặc định cho video mới.",
"upgradeRequiredSummary": "Đã đạt giới hạn cấu hình",
"upgradeRequiredDetail": "Tài khoản free chỉ có thể có 1 player config.",
"limitSummary": "Đã đạt giới hạn cấu hình",
"limitDetail": "Tài khoản free chỉ có thể có 1 player config.",
"reconciliationSummary": "Hãy xóa bớt config",
"reconciliationDetail": "Hãy xóa các player config dư cho đến khi chỉ còn 1 config để tiếp tục quản lý trên gói free.",
"toggleDetail": "{name} đã được {state}.",
"deletedSummary": "Đã xóa cấu hình",
"deletedDetail": "Cấu hình trình phát đã được gỡ bỏ.",
"failedSummary": "Thao tác thất bại",
"failedDetail": "Không thể tải hoặc cập nhật cấu hình trình phát."
}
},
"adsVast": {
"createTemplate": "Tạo mẫu",
"infoBanner": "VAST (Video Ad Serving Template) là schema XML dùng để phân phối ad tags cho trình phát video.",
@@ -628,6 +753,13 @@
"toast": {
"dismissAria": "Đóng"
},
"network": {
"offline": {
"title": "Bạn đang ngoại tuyến",
"description": "Có vẻ như kết nối internet đã bị ngắt. Hãy kiểm tra mạng, ứng dụng sẽ tự kết nối lại khi bạn có mạng trở lại.",
"action": "Thử lại"
}
},
"overview": {
"welcome": {
"title": "Xin chào, {{name}}",
@@ -637,7 +769,23 @@
"totalVideos": "Tổng số video",
"totalViews": "Tổng lượt xem",
"storageUsed": "Dung lượng đã dùng",
"trendVsLastMonth": "so với tháng trước"
"trendVsLastMonth": "so với tháng trước",
"unlimited": "Không giới hạn"
},
"admin-quickActions": {
"title": "Thao tác nhanh cho quản trị viên",
"manageUsers": {
"title": "Quản lý người dùng",
"description": "Xem và quản lý tất cả người dùng"
},
"viewReports": {
"title": "Xem báo cáo",
"description": "Phân tích hiệu suất hệ thống và hoạt động của người dùng"
},
"systemSettings": {
"title": "Cài đặt hệ thống",
"description": "Cấu hình cài đặt và tùy chọn của hệ thống"
}
},
"quickActions": {
"title": "Thao tác nhanh",
@@ -1007,7 +1155,7 @@
"description": "Nội dung được phân phối từ hơn 200 PoP trên toàn thế giới. Tự động chọn vùng để có độ trễ thấp nhất cho mọi người xem."
},
"live": {
"title": "Live Streaming API",
"title": "Streaming API",
"description": "Mở rộng tới hàng triệu người xem đồng thời với độ trễ cực thấp. Hỗ trợ RTMP ingest và HLS playback sẵn có.",
"status": "Trạng thái trực tiếp",
"onAir": "Đang phát",