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/src/views/Accounts.vue

@@ -0,0 +1,111 @@
+<template>
+  <div class="accounts-page">
+    <el-card class="page-header">
+      <h1>{{ $t('accounts.title') }}</h1>
+      <p>{{ $t('accounts.subtitle') }}</p>
+    </el-card>
+
+    <el-row :gutter="20">
+      <el-col :span="24">
+        <el-card>
+          <el-table :data="accounts" style="width: 100%" v-loading="loading">
+            <el-table-column prop="phoneNumber" :label="$t('accounts.phoneNumber')" />
+            <el-table-column prop="status" :label="$t('accounts.status')">
+              <template #default="{ row }">
+                <el-tag :type="getStatusType(row.status)">
+                  {{ row.status }}
+                </el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column prop="lastUsed" :label="$t('accounts.lastUsed')" />
+            <el-table-column prop="messagesSent" :label="$t('accounts.messagesSent')" />
+            <el-table-column :label="$t('accounts.actions')" width="200">
+              <template #default="{ row }">
+                <el-button size="small" @click="viewDetails(row)">
+                  {{ $t('common.view') }}
+                </el-button>
+                <el-button 
+                  size="small" 
+                  :type="row.status === 'active' ? 'danger' : 'success'"
+                  @click="toggleStatus(row)"
+                >
+                  {{ row.status === 'active' ? $t('common.disable') : $t('common.enable') }}
+                </el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import { ElMessage } from 'element-plus'
+import api from '@/api'
+
+const loading = ref(false)
+const accounts = ref([])
+
+const loadAccounts = async () => {
+  loading.value = true
+  try {
+    const response = await api.accounts.getList()
+    accounts.value = response.data
+  } catch (error) {
+    ElMessage.error('Failed to load accounts')
+  } finally {
+    loading.value = false
+  }
+}
+
+const getStatusType = (status) => {
+  const types = {
+    active: 'success',
+    inactive: 'info',
+    banned: 'danger',
+    restricted: 'warning'
+  }
+  return types[status] || 'info'
+}
+
+const viewDetails = (account) => {
+  // Navigate to account details
+}
+
+const toggleStatus = async (account) => {
+  try {
+    const newStatus = account.status === 'active' ? 'inactive' : 'active'
+    await api.accounts.updateStatus(account.id, newStatus)
+    ElMessage.success('Account status updated')
+    loadAccounts()
+  } catch (error) {
+    ElMessage.error('Failed to update account status')
+  }
+}
+
+onMounted(() => {
+  loadAccounts()
+})
+</script>
+
+<style lang="scss" scoped>
+.accounts-page {
+  padding: 20px;
+}
+
+.page-header {
+  margin-bottom: 20px;
+  
+  h1 {
+    margin: 0 0 10px 0;
+    color: var(--el-text-color-primary);
+  }
+  
+  p {
+    margin: 0;
+    color: var(--el-text-color-regular);
+  }
+}
+</style>