style(frontend): 优化 Components 代码风格和结构

- 统一移除语句末尾分号，规范代码格式
- 优化组件类型定义和 props 声明
- 改进组件文档和示例代码
- 提升代码可读性和一致性

frontend/src/components/common/GroupSelector.vue

@@ -2,15 +2,15 @@
   <div>
     <label class="input-label">
       Groups
-      <span class="text-gray-400 font-normal">({{ modelValue.length }} selected)</span>
+      <span class="font-normal text-gray-400">({{ modelValue.length }} selected)</span>
     </label>
     <div
-      class="grid grid-cols-2 gap-1 max-h-32 overflow-y-auto p-2 border border-gray-200 dark:border-dark-600 rounded-lg bg-gray-50 dark:bg-dark-800"
+      class="grid max-h-32 grid-cols-2 gap-1 overflow-y-auto rounded-lg border border-gray-200 bg-gray-50 p-2 dark:border-dark-600 dark:bg-dark-800"
     >
       <label
         v-for="group in filteredGroups"
         :key="group.id"
-        class="flex items-center gap-2 px-2 py-1.5 rounded hover:bg-white dark:hover:bg-dark-700 cursor-pointer transition-colors"
+        class="flex cursor-pointer items-center gap-2 rounded px-2 py-1.5 transition-colors hover:bg-white dark:hover:bg-dark-700"
         :title="`${group.rate_multiplier}x rate · ${group.account_count || 0} accounts`"
       >
         <input
@@ -18,19 +18,19 @@
           :value="group.id"
           :checked="modelValue.includes(group.id)"
           @change="handleChange(group.id, ($event.target as HTMLInputElement).checked)"
-          class="w-3.5 h-3.5 text-primary-500 border-gray-300 dark:border-dark-500 rounded focus:ring-primary-500 shrink-0"
+          class="h-3.5 w-3.5 shrink-0 rounded border-gray-300 text-primary-500 focus:ring-primary-500 dark:border-dark-500"
         />
         <GroupBadge
           :name="group.name"
           :subscription-type="group.subscription_type"
           :rate-multiplier="group.rate_multiplier"
-          class="flex-1 min-w-0"
+          class="min-w-0 flex-1"
         />
-        <span class="text-xs text-gray-400 shrink-0">{{ group.account_count || 0 }}</span>
+        <span class="shrink-0 text-xs text-gray-400">{{ group.account_count || 0 }}</span>
       </label>
       <div
         v-if="filteredGroups.length === 0"
-        class="col-span-2 text-center text-sm text-gray-500 dark:text-gray-400 py-2"
+        class="col-span-2 py-2 text-center text-sm text-gray-500 dark:text-gray-400"
       >
         No groups available
       </div>
@@ -59,13 +59,13 @@ const filteredGroups = computed(() => {
   if (!props.platform) {
     return props.groups
   }
-  return props.groups.filter(g => g.platform === props.platform)
+  return props.groups.filter((g) => g.platform === props.platform)
 })
 
 const handleChange = (groupId: number, checked: boolean) => {
   const newValue = checked
     ? [...props.modelValue, groupId]
-    : props.modelValue.filter(id => id !== groupId)
+    : props.modelValue.filter((id) => id !== groupId)
   emit('update:modelValue', newValue)
 }
 </script>