replace el-input with InputGroup

src/views/PlayerList/columns.jsx

@@ -156,6 +156,7 @@ export const createColumns = ({
                             class={[
                                 'x-user-status',
                                 'shrink-0',
+                                'mr-1',
                                 status ? statusClass(status) : null
                             ]}
                         ></i>
@@ -339,7 +340,7 @@ export const createColumns = ({
                 const userRef = row.original?.ref;
                 const langs = userRef?.$languages ?? [];
                 return (
-                    <div>
+                    <div class="flex items-center gap-0.5">
                         {langs.map((item) => (
                             <TooltipWrapper
                                 key={item.key}

src/views/PlayerList/components/PhotonEventTable.vue

@@ -19,12 +19,12 @@
                     }}</SelectItem>
                 </SelectContent>
             </Select>
-            <el-input
+            <InputGroupField
                 v-model="photonEventTableFilter"
                 :placeholder="t('view.player_list.photon.search_placeholder')"
                 clearable
                 style="width: 150px"
-                @input="photonEventTableFilterChange"></el-input>
+                @input="photonEventTableFilterChange" />
             <Button variant="outline" @click="emitShowChatboxBlacklist">{{
                 t('view.player_list.photon.chatbox_blacklist')
             }}</Button>
@@ -390,6 +390,7 @@
 <script setup>
     import { ArrowRight, Download } from '@element-plus/icons-vue';
     import { Button } from '@/components/ui/button';
+    import { InputGroupField } from '@/components/ui/input-group';
     import { storeToRefs } from 'pinia';
     import { useI18n } from 'vue-i18n';
 

src/views/PlayerList/dialogs/ChatboxBlacklistDialog.vue

@@ -6,14 +6,14 @@
         width="600px">
         <div v-if="chatboxBlacklistDialog.visible" v-loading="chatboxBlacklistDialog.loading">
             <h2>{{ t('dialog.chatbox_blacklist.keyword_blacklist') }}</h2>
-            <el-input
+            <InputGroupAction
                 v-for="(item, index) in chatboxBlacklist"
                 :key="index"
                 v-model="chatboxBlacklist[index]"
-                size="small"
+                size="sm"
                 style="margin-top: 5px"
                 @change="saveChatboxBlacklist">
-                <template #append>
+                <template #actions>
                     <Button
                         variant="outline"
                         @click="
@@ -22,7 +22,7 @@
                         ">
                     </Button>
                 </template>
-            </el-input>
+            </InputGroupAction>
             <Button size="sm" variant="outline" style="margin-top: 5px" @click="chatboxBlacklist.push('')">
                 {{ t('dialog.chatbox_blacklist.add_item') }}
             </Button>
@@ -56,6 +56,7 @@
 
 <script setup>
     import { Button } from '@/components/ui/button';
+    import { InputGroupAction } from '@/components/ui/input-group';
     import { storeToRefs } from 'pinia';
     import { useI18n } from 'vue-i18n';