admin/verify
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add comprehensive i18n support across all pages

Browse Source 
- Add i18n support to admin sidebar, breadcrumbs, and nav-footer
- Add i18n support to admin pages: system-settings, users, versions, risk-control, sessions, cloud-variables, cloud-constants
- Add i18n support to auth pages: login, register
- Add i18n support to install and profile pages
- Add i18n support to agent pages: dashboard, finance, users, apps, cards
- Replace all hard-coded Chinese text with i18n translation keys
- Add comprehensive translation keys to zh.json and en.json
- Fix date formatting to use locale-agnostic toLocaleDateString()
- Pass t function as parameter for i18n in non-component files
This commit is contained in:
admin
2026-05-07 23:06:58 +08:00
parent f1f2a9dc9d
commit c816f4d85c
26 changed files with 1817 additions and 658 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/pages/agent/apps/[id].vue
+12 -10
View File
@@ -1,10 +1,12 @@
<script setup lang="ts">
import { AlertCircle, Box, Loader2 } from 'lucide-vue-next'
import { onMounted, ref } from 'vue'
import { useI18n } from 'vue-i18n'
import { useRoute } from 'vue-router'
import api from '@/services/api'
const { t } = useI18n()
const route = useRoute()
const loading = ref(true)
@@ -19,7 +21,7 @@ onMounted(async () => {
cardTypes.value = data?.cardTypes || []
}
catch (error) {
console.error('获取应用详情失败:', error)
console.error('Load app detail failed:', error)
}
finally {
loading.value = false
@@ -43,21 +45,21 @@ onMounted(async () => {
{{ app.name }}
</h1>
<p class="text-muted-foreground">
{{ app.description || '暂无描述' }}
{{ app.description || t('agent.apps.detail.noDescription') }}
</p>
</div>
</div>
<UiCard>
<UiCardHeader>
<UiCardTitle>可用卡类</UiCardTitle>
<UiCardTitle>{{ t('agent.apps.detail.availableCardTypes') }}</UiCardTitle>
<UiCardDescription>
您可以为此应用生成以下类型的卡密
{{ t('agent.apps.detail.cardTypeDesc') }}
</UiCardDescription>
</UiCardHeader>
<UiCardContent>
<div v-if="cardTypes.length === 0" class="text-center py-8 text-muted-foreground">
暂无可用卡类
{{ t('agent.apps.detail.noCardTypes') }}
</div>
<div v-else class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
<UiCard v-for="ct in cardTypes" :key="ct.id" class="bg-muted/50">
@@ -68,11 +70,11 @@ onMounted(async () => {
</UiCardHeader>
<UiCardContent>
<div class="flex items-center justify-between text-sm">
<span class="text-muted-foreground">时长</span>
<span>{{ ct.duration_days }} 天</span>
<span class="text-muted-foreground">{{ t('agent.apps.detail.duration') }}</span>
<span>{{ ct.duration_days }} {{ t('agent.apps.detail.days') }}</span>
</div>
<div class="flex items-center justify-between text-sm mt-2">
<span class="text-muted-foreground">价格</span>
<span class="text-muted-foreground">{{ t('agent.apps.detail.price') }}</span>
<span class="font-medium">¥{{ ct.price }}</span>
</div>
<UiButton
@@ -81,7 +83,7 @@ onMounted(async () => {
as-child
>
<router-link :to="`/agent/cards/create?app_id=${app.id}&card_type_id=${ct.id}`">
生成卡密
{{ t('agent.apps.detail.generateCards') }}
</router-link>
</UiButton>
</UiCardContent>
@@ -93,7 +95,7 @@ onMounted(async () => {
<div v-else class="text-center py-12 text-muted-foreground">
<AlertCircle class="size-16 mx-auto mb-4 opacity-30" />
<p>应用不存在或无权访问</p>
<p>{{ t('agent.apps.detail.notFound') }}</p>
</div>
</div>
</template>
frontend/src/pages/agent/apps/index.vue
+11 -8
View File
@@ -1,9 +1,12 @@
<script setup lang="ts">
import { Box, Boxes, Loader2 } from 'lucide-vue-next'
import { onMounted, ref } from 'vue'
import { useI18n } from 'vue-i18n'
import api from '@/services/api'
const { t } = useI18n()
interface App {
id: number
name: string
@@ -22,7 +25,7 @@ onMounted(async () => {
apps.value = data || []
}
catch (error) {
console.error('获取应用列表失败:', error)
console.error('Load apps failed:', error)
}
finally {
loading.value = false
@@ -30,7 +33,7 @@ onMounted(async () => {
})
function formatDate(dateStr: string) {
return new Date(dateStr).toLocaleDateString('zh-CN')
return new Date(dateStr).toLocaleDateString()
}
</script>
@@ -39,10 +42,10 @@ function formatDate(dateStr: string) {
<div class="flex items-center justify-between">
<div>
<h1 class="text-2xl font-bold">
应用管理
{{ t('agent.apps.title') }}
</h1>
<p class="text-muted-foreground">
管理您授权的应用
{{ t('agent.apps.description') }}
</p>
</div>
</div>
@@ -55,7 +58,7 @@ function formatDate(dateStr: string) {
<div v-else-if="apps.length === 0" class="text-center py-12 text-muted-foreground">
<Boxes class="size-16 mx-auto mb-4 opacity-30" />
<p>暂无授权应用</p>
<p>{{ t('agent.apps.noApps') }}</p>
</div>
<div v-else class="divide-y">
@@ -73,14 +76,14 @@ function formatDate(dateStr: string) {
{{ app.name }}
</h3>
<p class="text-sm text-muted-foreground">
{{ app.description || '暂无描述' }}
{{ app.description || t('agent.apps.noDescription') }}
</p>
</div>
</div>
<div class="flex items-center gap-4">
<div class="text-right">
<p class="text-sm font-medium">
{{ app.card_types_count }} 种卡类
{{ app.card_types_count }} {{ t('agent.apps.cardTypesCount') }}
</p>
<p class="text-xs text-muted-foreground">
{{ formatDate(app.created_at) }}
@@ -88,7 +91,7 @@ function formatDate(dateStr: string) {
</div>
<UiButton variant="outline" size="sm" as-child>
<router-link :to="`/agent/apps/${app.id}`">
查看
{{ t('agent.apps.view') }}
</router-link>
</UiButton>
</div>
frontend/src/pages/agent/cards/create.vue
+25 -23
View File
@@ -1,11 +1,13 @@
<script setup lang="ts">
import { Loader2 } from 'lucide-vue-next'
import { computed, onMounted, ref } from 'vue'
import { useI18n } from 'vue-i18n'
import { useRoute, useRouter } from 'vue-router'
import { toast } from 'vue-sonner'
import api from '@/services/api'
const { t } = useI18n()
const route = useRoute()
const router = useRouter()
@@ -43,21 +45,21 @@ onMounted(async () => {
}
}
catch (error) {
console.error('获取数据失败:', error)
console.error('Load data failed:', error)
}
})
async function handleGenerate() {
if (!form.value.app_id) {
toast.error('请选择应用')
toast.error(t('agent.cards.create.selectApp'))
return
}
if (!form.value.card_type_id) {
toast.error('请选择卡类')
toast.error(t('agent.cards.create.selectCardType'))
return
}
if (form.value.quantity < 1 || form.value.quantity > 100) {
toast.error('生成数量需要在 1-100 之间')
toast.error(t('agent.cards.create.quantityRange'))
return
}
@@ -69,17 +71,17 @@ async function handleGenerate() {
quantity: form.value.quantity,
})
toast.success(`成功生成 ${data.codes.length} 张卡密`)
toast.success(t('agent.cards.create.generateSuccess', { count: data.codes.length }))
const codesText = data.codes.join('\n')
await navigator.clipboard.writeText(codesText)
toast.success('卡密已复制到剪贴板')
toast.success(t('agent.cards.create.copiedToClipboard'))
router.push('/agent/cards')
}
catch (error: any) {
console.error('生成卡密失败:', error)
toast.error(error.message || '生成失败')
console.error('Generate cards failed:', error)
toast.error(error.message || t('agent.cards.create.generateFailed'))
}
finally {
loading.value = false
@@ -91,26 +93,26 @@ async function handleGenerate() {
<div class="space-y-6">
<div>
<h1 class="text-2xl font-bold">
生成卡密
{{ t('agent.cards.create.title') }}
</h1>
<p class="text-muted-foreground">
为授权应用生成卡密
{{ t('agent.cards.create.description') }}
</p>
</div>
<UiCard class="max-w-xl">
<UiCardHeader>
<UiCardTitle>生成设置</UiCardTitle>
<UiCardTitle>{{ t('agent.cards.create.generateSettings') }}</UiCardTitle>
<UiCardDescription>
选择应用和卡类，设置生成数量
{{ t('agent.cards.create.settingsDesc') }}
</UiCardDescription>
</UiCardHeader>
<UiCardContent class="space-y-6">
<div class="space-y-2">
<UiLabel>选择应用</UiLabel>
<UiLabel>{{ t('agent.cards.create.selectAppLabel') }}</UiLabel>
<UiSelect v-model="form.app_id">
<UiSelectTrigger>
<UiSelectValue placeholder="请选择应用" />
<UiSelectValue :placeholder="t('agent.cards.create.selectAppPlaceholder')" />
</UiSelectTrigger>
<UiSelectContent>
<UiSelectItem v-for="app in apps" :key="app.id" :value="String(app.id)">
@@ -121,36 +123,36 @@ async function handleGenerate() {
</div>
<div v-if="form.app_id" class="space-y-2">
<UiLabel>选择卡类</UiLabel>
<UiLabel>{{ t('agent.cards.create.selectCardTypeLabel') }}</UiLabel>
<UiSelect v-model="form.card_type_id">
<UiSelectTrigger>
<UiSelectValue placeholder="请选择卡类" />
<UiSelectValue :placeholder="t('agent.cards.create.selectCardTypePlaceholder')" />
</UiSelectTrigger>
<UiSelectContent>
<UiSelectItem v-for="ct in availableCardTypes" :key="ct.id" :value="String(ct.id)">
{{ ct.name }} - {{ ct.duration_days }}天 - ¥{{ ct.price }}
{{ ct.name }} - {{ ct.duration_days }}{{ t('agent.apps.detail.days') }} - ¥{{ ct.price }}
</UiSelectItem>
</UiSelectContent>
</UiSelect>
</div>
<div class="space-y-2">
<UiLabel>生成数量</UiLabel>
<UiLabel>{{ t('agent.cards.create.quantity') }}</UiLabel>
<UiInput
v-model.number="form.quantity"
type="number"
:min="1"
:max="100"
placeholder="请输入生成数量"
:placeholder="t('agent.cards.create.quantityPlaceholder')"
/>
<p class="text-xs text-muted-foreground">
单次最多生成 100 张卡密
{{ t('agent.cards.create.quantityHint') }}
</p>
</div>
<div v-if="totalPrice > 0" class="p-4 rounded-lg bg-muted/50">
<div class="flex items-center justify-between">
<span class="text-muted-foreground">预计费用</span>
<span class="text-muted-foreground">{{ t('agent.cards.create.estimatedCost') }}</span>
<span class="text-xl font-bold">¥{{ totalPrice.toFixed(2) }}</span>
</div>
</div>
@@ -158,7 +160,7 @@ async function handleGenerate() {
<div class="flex gap-3">
<UiButton variant="outline" as-child>
<router-link to="/agent/cards">
取消
{{ t('agent.cards.create.cancel') }}
</router-link>
</UiButton>
<UiButton
@@ -166,7 +168,7 @@ async function handleGenerate() {
@click="handleGenerate"
>
<Loader2 v-if="loading" class="mr-2 h-4 w-4 animate-spin" />
{{ loading ? '生成中...' : '生成卡密' }}
{{ loading ? t('agent.cards.create.generating') : t('agent.cards.create.generateBtn') }}
</UiButton>
</div>
</UiCardContent>
frontend/src/pages/agent/cards/index.vue
+20 -17
View File
@@ -1,9 +1,12 @@
<script setup lang="ts">
import { Key, Loader2, Plus } from 'lucide-vue-next'
import { onMounted, ref } from 'vue'
import { useI18n } from 'vue-i18n'
import api from '@/services/api'
const { t } = useI18n()
interface Card {
id: number
code: string
@@ -23,7 +26,7 @@ onMounted(async () => {
cards.value = data || []
}
catch (error) {
console.error('获取卡密列表失败:', error)
console.error('Load cards failed:', error)
}
finally {
loading.value = false
@@ -33,15 +36,15 @@ onMounted(async () => {
function formatDate(dateStr: string | null) {
if (!dateStr)
return '-'
return new Date(dateStr).toLocaleDateString('zh-CN')
return new Date(dateStr).toLocaleDateString()
}
function getStatusBadge(status: string) {
const map: Record<string, { label: string, class: string }> = {
unused: { label: '未使用', class: 'bg-green-500/10 text-green-500' },
used: { label: '已使用', class: 'bg-blue-500/10 text-blue-500' },
expired: { label: '已过期', class: 'bg-red-500/10 text-red-500' },
disabled: { label: '已禁用', class: 'bg-gray-500/10 text-gray-500' },
unused: { label: t('agent.cards.unused'), class: 'bg-green-500/10 text-green-500' },
used: { label: t('agent.cards.used'), class: 'bg-blue-500/10 text-blue-500' },
expired: { label: t('agent.cards.expired'), class: 'bg-red-500/10 text-red-500' },
disabled: { label: t('agent.cards.disabled'), class: 'bg-gray-500/10 text-gray-500' },
}
return map[status] || { label: status, class: '' }
}
@@ -52,16 +55,16 @@ function getStatusBadge(status: string) {
<div class="flex items-center justify-between">
<div>
<h1 class="text-2xl font-bold">
卡密管理
{{ t('agent.cards.title') }}
</h1>
<p class="text-muted-foreground">
管理您生成的卡密
{{ t('agent.cards.description') }}
</p>
</div>
<UiButton as-child>
<router-link to="/agent/cards/create">
<Plus class="mr-2 h-4 w-4" />
生成卡密
{{ t('agent.cards.generateCards') }}
</router-link>
</UiButton>
</div>
@@ -74,10 +77,10 @@ function getStatusBadge(status: string) {
<div v-else-if="cards.length === 0" class="text-center py-12 text-muted-foreground">
<Key class="size-16 mx-auto mb-4 opacity-30" />
<p>暂无卡密记录</p>
<p>{{ t('agent.cards.noCards') }}</p>
<UiButton class="mt-4" as-child>
<router-link to="/agent/cards/create">
生成卡密
{{ t('agent.cards.generateCards') }}
</router-link>
</UiButton>
</div>
@@ -87,22 +90,22 @@ function getStatusBadge(status: string) {
<thead class="bg-muted/50">
<tr>
<th class="px-4 py-3 text-left text-sm font-medium">
卡密
{{ t('agent.cards.cardCode') }}
</th>
<th class="px-4 py-3 text-left text-sm font-medium">
应用
{{ t('agent.cards.app') }}
</th>
<th class="px-4 py-3 text-left text-sm font-medium">
卡类
{{ t('agent.cards.cardType') }}
</th>
<th class="px-4 py-3 text-left text-sm font-medium">
状态
{{ t('agent.cards.status') }}
</th>
<th class="px-4 py-3 text-left text-sm font-medium">
创建时间
{{ t('agent.cards.createTime') }}
</th>
<th class="px-4 py-3 text-left text-sm font-medium">
使用时间
{{ t('agent.cards.useTime') }}
</th>
</tr>
</thead>
frontend/src/pages/agent/finance/index.vue
+14 -11
View File
@@ -1,9 +1,12 @@
<script setup lang="ts">
import { ArrowDownLeft, ArrowUpRight, Loader2, Receipt, RotateCcw } from 'lucide-vue-next'
import { onMounted, ref } from 'vue'
import { useI18n } from 'vue-i18n'
import api from '@/services/api'
const { t } = useI18n()
interface Transaction {
id: number
type: string
@@ -24,7 +27,7 @@ onMounted(async () => {
transactions.value = data?.transactions || []
}
catch (error) {
console.error('获取财务数据失败:', error)
console.error('Load finance data failed:', error)
}
finally {
loading.value = false
@@ -32,14 +35,14 @@ onMounted(async () => {
})
function formatDate(dateStr: string) {
return new Date(dateStr).toLocaleString('zh-CN')
return new Date(dateStr).toLocaleString()
}
function getTypeLabel(type: string) {
const map: Record<string, string> = {
recharge: '充值',
consume: '消费',
refund: '退款',
recharge: t('agent.finance.recharge'),
consume: t('agent.finance.consume'),
refund: t('agent.finance.refund'),
}
return map[type] || type
}
@@ -58,10 +61,10 @@ function getTypeClass(type: string) {
<div class="space-y-6">
<div>
<h1 class="text-2xl font-bold">
财务管理
{{ t('agent.finance.title') }}
</h1>
<p class="text-muted-foreground">
查看您的账户余额和交易记录
{{ t('agent.finance.description') }}
</p>
</div>
@@ -69,7 +72,7 @@ function getTypeClass(type: string) {
<UiCard>
<UiCardHeader class="pb-2">
<UiCardTitle class="text-sm font-medium">
账户余额
{{ t('agent.finance.accountBalance') }}
</UiCardTitle>
</UiCardHeader>
<UiCardContent>
@@ -82,7 +85,7 @@ function getTypeClass(type: string) {
<UiCard>
<UiCardHeader>
<UiCardTitle>交易记录</UiCardTitle>
<UiCardTitle>{{ t('agent.finance.transactionRecords') }}</UiCardTitle>
</UiCardHeader>
<UiCardContent class="p-0">
<div v-if="loading" class="flex items-center justify-center py-12">
@@ -91,7 +94,7 @@ function getTypeClass(type: string) {
<div v-else-if="transactions.length === 0" class="text-center py-12 text-muted-foreground">
<Receipt class="size-16 mx-auto mb-4 opacity-30" />
<p>暂无交易记录</p>
<p>{{ t('agent.finance.noTransactions') }}</p>
</div>
<div v-else class="divide-y">
@@ -125,7 +128,7 @@ function getTypeClass(type: string) {
{{ tx.type === 'recharge' || tx.type === 'refund' ? '+' : '-' }}¥{{ tx.amount.toFixed(2) }}
</p>
<p class="text-xs text-muted-foreground">
余额: ¥{{ tx.balance.toFixed(2) }}
{{ t('agent.finance.balance') }}: ¥{{ tx.balance.toFixed(2) }}
</p>
</div>
</div>
frontend/src/pages/agent/index.vue
+22 -19
View File
@@ -1,9 +1,12 @@
<script setup lang="ts">
import { Boxes, CreditCard, DollarSign, Key, Plus, Users } from 'lucide-vue-next'
import { onMounted, ref } from 'vue'
import { useI18n } from 'vue-i18n'
import api from '@/services/api'
const { t } = useI18n()
const loading = ref(true)
const stats = ref({
totalApps: 0,
@@ -38,7 +41,7 @@ onMounted(async () => {
}
}
catch (error) {
console.error('获取统计数据失败:', error)
console.error('Load stats failed:', error)
}
finally {
loading.value = false
@@ -50,10 +53,10 @@ onMounted(async () => {
<div class="space-y-6">
<div>
<h1 class="text-2xl font-bold">
控制台
{{ t('agent.dashboard.title') }}
</h1>
<p class="text-muted-foreground">
欢迎回来，查看您的业务概况
{{ t('agent.dashboard.welcomeBack') }}
</p>
</div>
@@ -61,7 +64,7 @@ onMounted(async () => {
<UiCard>
<UiCardHeader class="flex flex-row items-center justify-between pb-2">
<UiCardTitle class="text-sm font-medium">
授权应用
{{ t('agent.dashboard.authorizedApps') }}
</UiCardTitle>
<Boxes class="size-4 text-muted-foreground" />
</UiCardHeader>
@@ -70,7 +73,7 @@ onMounted(async () => {
{{ stats.totalApps }}
</div>
<p class="text-xs text-muted-foreground">
已授权的应用数量
{{ t('agent.dashboard.authorizedAppsCount') }}
</p>
</UiCardContent>
</UiCard>
@@ -78,7 +81,7 @@ onMounted(async () => {
<UiCard>
<UiCardHeader class="flex flex-row items-center justify-between pb-2">
<UiCardTitle class="text-sm font-medium">
卡密总数
{{ t('agent.dashboard.totalCards') }}
</UiCardTitle>
<Key class="size-4 text-muted-foreground" />
</UiCardHeader>
@@ -87,7 +90,7 @@ onMounted(async () => {
{{ stats.totalCards.toLocaleString() }}
</div>
<p class="text-xs text-muted-foreground">
今日生成: {{ stats.todayCards }}
{{ t('agent.dashboard.todayGenerated') }}: {{ stats.todayCards }}
</p>
</UiCardContent>
</UiCard>
@@ -95,7 +98,7 @@ onMounted(async () => {
<UiCard>
<UiCardHeader class="flex flex-row items-center justify-between pb-2">
<UiCardTitle class="text-sm font-medium">
用户总数
{{ t('agent.dashboard.totalUsers') }}
</UiCardTitle>
<Users class="size-4 text-muted-foreground" />
</UiCardHeader>
@@ -104,7 +107,7 @@ onMounted(async () => {
{{ stats.totalUsers.toLocaleString() }}
</div>
<p class="text-xs text-muted-foreground">
累计注册用户
{{ t('agent.dashboard.totalUsersDesc') }}
</p>
</UiCardContent>
</UiCard>
@@ -112,7 +115,7 @@ onMounted(async () => {
<UiCard>
<UiCardHeader class="flex flex-row items-center justify-between pb-2">
<UiCardTitle class="text-sm font-medium">
累计收入
{{ t('agent.dashboard.totalRevenue') }}
</UiCardTitle>
<DollarSign class="size-4 text-muted-foreground" />
</UiCardHeader>
@@ -121,7 +124,7 @@ onMounted(async () => {
¥{{ stats.totalRevenue.toFixed(2) }}
</div>
<p class="text-xs text-muted-foreground">
今日: ¥{{ stats.todayRevenue.toFixed(2) }}
{{ t('agent.dashboard.todayRevenue') }}: ¥{{ stats.todayRevenue.toFixed(2) }}
</p>
</UiCardContent>
</UiCard>
@@ -130,31 +133,31 @@ onMounted(async () => {
<div class="grid gap-6 lg:grid-cols-2">
<UiCard>
<UiCardHeader>
<UiCardTitle>快捷操作</UiCardTitle>
<UiCardTitle>{{ t('agent.dashboard.quickActions') }}</UiCardTitle>
</UiCardHeader>
<UiCardContent class="grid gap-4 sm:grid-cols-2">
<router-link to="/agent/cards/create">
<UiButton variant="outline" class="w-full h-20 flex-col gap-2">
<Plus class="size-5" />
<span>生成卡密</span>
<span>{{ t('agent.dashboard.generateCards') }}</span>
</UiButton>
</router-link>
<router-link to="/agent/apps">
<UiButton variant="outline" class="w-full h-20 flex-col gap-2">
<Boxes class="size-5" />
<span>应用管理</span>
<span>{{ t('agent.dashboard.appManagement') }}</span>
</UiButton>
</router-link>
<router-link to="/agent/users">
<UiButton variant="outline" class="w-full h-20 flex-col gap-2">
<Users class="size-5" />
<span>用户管理</span>
<span>{{ t('agent.dashboard.userManagement') }}</span>
</UiButton>
</router-link>
<router-link to="/agent/finance">
<UiButton variant="outline" class="w-full h-20 flex-col gap-2">
<CreditCard class="size-5" />
<span>财务管理</span>
<span>{{ t('agent.dashboard.financeManagement') }}</span>
</UiButton>
</router-link>
</UiCardContent>
@@ -162,7 +165,7 @@ onMounted(async () => {
<UiCard>
<UiCardHeader>
<UiCardTitle>最近生成卡密</UiCardTitle>
<UiCardTitle>{{ t('agent.dashboard.recentCards') }}</UiCardTitle>
</UiCardHeader>
<UiCardContent>
<div v-if="recentCards.length > 0" class="space-y-4">
@@ -176,13 +179,13 @@ onMounted(async () => {
</p>
</div>
<UiBadge :variant="card.status === 'unused' ? 'default' : 'secondary'">
{{ card.status === 'unused' ? '未使用' : '已使用' }}
{{ card.status === 'unused' ? t('agent.dashboard.unused') : t('agent.dashboard.used') }}
</UiBadge>
</div>
</div>
<div v-else class="text-center py-8 text-muted-foreground">
<Key class="size-12 mx-auto mb-2 opacity-30" />
<p>暂无卡密记录</p>
<p>{{ t('agent.dashboard.noCards') }}</p>
</div>
</UiCardContent>
</UiCard>
frontend/src/pages/agent/users/index.vue
+14 -11
View File
@@ -1,9 +1,12 @@
<script setup lang="ts">
import { Loader2, Users } from 'lucide-vue-next'
import { onMounted, ref } from 'vue'
import { useI18n } from 'vue-i18n'
import api from '@/services/api'
const { t } = useI18n()
interface User {
id: number
username: string
@@ -22,7 +25,7 @@ onMounted(async () => {
users.value = data || []
}
catch (error) {
console.error('获取用户列表失败:', error)
console.error('Load users failed:', error)
}
finally {
loading.value = false
@@ -32,7 +35,7 @@ onMounted(async () => {
function formatDate(dateStr: string | null) {
if (!dateStr)
return '-'
return new Date(dateStr).toLocaleDateString('zh-CN')
return new Date(dateStr).toLocaleDateString()
}
</script>
@@ -40,10 +43,10 @@ function formatDate(dateStr: string | null) {
<div class="space-y-6">
<div>
<h1 class="text-2xl font-bold">
用户管理
{{ t('agent.users.title') }}
</h1>
<p class="text-muted-foreground">
管理您应用下的用户
{{ t('agent.users.description') }}
</p>
</div>
@@ -55,7 +58,7 @@ function formatDate(dateStr: string | null) {
<div v-else-if="users.length === 0" class="text-center py-12 text-muted-foreground">
<Users class="size-16 mx-auto mb-4 opacity-30" />
<p>暂无用户记录</p>
<p>{{ t('agent.users.noUsers') }}</p>
</div>
<div v-else class="overflow-x-auto">
@@ -63,19 +66,19 @@ function formatDate(dateStr: string | null) {
<thead class="bg-muted/50">
<tr>
<th class="px-4 py-3 text-left text-sm font-medium">
用户名
{{ t('agent.users.username') }}
</th>
<th class="px-4 py-3 text-left text-sm font-medium">
邮箱
{{ t('agent.users.email') }}
</th>
<th class="px-4 py-3 text-left text-sm font-medium">
状态
{{ t('agent.users.status') }}
</th>
<th class="px-4 py-3 text-left text-sm font-medium">
注册时间
{{ t('agent.users.registerTime') }}
</th>
<th class="px-4 py-3 text-left text-sm font-medium">
最后登录
{{ t('agent.users.lastLogin') }}
</th>
</tr>
</thead>
@@ -92,7 +95,7 @@ function formatDate(dateStr: string | null) {
:class="user.status === 'active' ? 'bg-green-500/10 text-green-500' : ''"
variant="outline"
>
{{ user.status === 'active' ? '正常' : user.status }}
{{ user.status === 'active' ? t('agent.users.active') : user.status }}
</UiBadge>
</td>
<td class="px-4 py-3 text-sm text-muted-foreground">