fix(frontend): 修复DataTable无限循环和i18n邮箱解析错误

- 修复DataTable组件watch监听actionsExpanded导致的无限循环卡死问题
- 为AccountsView和UsersView添加actionsCount属性启用操作列展开功能
- 修复i18n翻译中邮箱地址的@符号未转义导致的编译错误

frontend/src/components/common/DataTable.vue

@@ -257,9 +257,10 @@ const sortKey = ref<string>('')
 const sortOrder = ref<'asc' | 'desc'>('asc')
 const actionsExpanded = ref(false)
 
-// 数据/列/展开状态变化时重新检查滚动状态
+// 数据/列变化时重新检查滚动状态
+// 注意：不能监听 actionsExpanded，因为 checkActionsColumnWidth 会临时修改它，会导致无限循环
 watch(
-  [() => props.data.length, () => props.columns, actionsExpanded],
+  [() => props.data.length, () => props.columns],
   async () => {
     await nextTick()
     checkScrollable()
@@ -268,6 +269,12 @@ watch(
   { flush: 'post' }
 )
 
+// 单独监听展开状态变化，只更新滚动状态
+watch(actionsExpanded, async () => {
+  await nextTick()
+  checkScrollable()
+})
+
 const handleSort = (key: string) => {
   if (sortKey.value === key) {
     sortOrder.value = sortOrder.value === 'asc' ? 'desc' : 'asc'

frontend/src/i18n/locales/en.ts

@@ -1351,12 +1351,12 @@ export default {
         port: 'SMTP Port',
         portPlaceholder: '587',
         username: 'SMTP Username',
-        usernamePlaceholder: 'your-email@gmail.com',
+        usernamePlaceholder: "your-email{'@'}gmail.com",
         password: 'SMTP Password',
         passwordPlaceholder: '********',
         passwordHint: 'Leave empty to keep existing password',
         fromEmail: 'From Email',
-        fromEmailPlaceholder: 'noreply@example.com',
+        fromEmailPlaceholder: "noreply{'@'}example.com",
         fromName: 'From Name',
         fromNamePlaceholder: 'Sub2API',
         useTls: 'Use TLS',
@@ -1366,7 +1366,7 @@ export default {
         title: 'Send Test Email',
         description: 'Send a test email to verify your SMTP configuration',
         recipientEmail: 'Recipient Email',
-        recipientEmailPlaceholder: 'test@example.com',
+        recipientEmailPlaceholder: "test{'@'}example.com",
         sendTestEmail: 'Send Test Email',
         sending: 'Sending...',
         enterRecipientHint: 'Please enter a recipient email address'

frontend/src/i18n/locales/zh.ts

@@ -1549,12 +1549,12 @@ export default {
         port: 'SMTP 端口',
         portPlaceholder: '587',
         username: 'SMTP 用户名',
-        usernamePlaceholder: 'your-email@gmail.com',
+        usernamePlaceholder: "your-email{'@'}gmail.com",
         password: 'SMTP 密码',
         passwordPlaceholder: '********',
         passwordHint: '留空以保留现有密码',
         fromEmail: '发件人邮箱',
-        fromEmailPlaceholder: 'noreply@example.com',
+        fromEmailPlaceholder: "noreply{'@'}example.com",
         fromName: '发件人名称',
         fromNamePlaceholder: 'Sub2API',
         useTls: '使用 TLS',
@@ -1564,7 +1564,7 @@ export default {
         title: '发送测试邮件',
         description: '发送测试邮件以验证 SMTP 配置',
         recipientEmail: '收件人邮箱',
-        recipientEmailPlaceholder: 'test@example.com',
+        recipientEmailPlaceholder: "test{'@'}example.com",
         sendTestEmail: '发送测试邮件',
         sending: '发送中...',
         enterRecipientHint: '请输入收件人邮箱地址'

frontend/src/views/admin/AccountsView.vue

@@ -165,7 +165,7 @@
         </div>
       </div>
 
-      <DataTable :columns="columns" :data="accounts" :loading="loading">
+      <DataTable :columns="columns" :data="accounts" :loading="loading" :actions-count="6">
           <template #cell-select="{ row }">
             <input
               type="checkbox"

frontend/src/views/admin/UsersView.vue

@@ -85,7 +85,7 @@
 
       <!-- Users Table -->
       <template #table>
-        <DataTable :columns="columns" :data="users" :loading="loading">
+        <DataTable :columns="columns" :data="users" :loading="loading" :actions-count="7">
           <template #cell-email="{ value }">
             <div class="flex items-center gap-2">
               <div