replace some el-button

2026-04-22 16:23:50 +02:00 · 2026-01-11 12:24:58 +09:00
parent 66d8addc9f
commit 2043a321a4
34 changed files with 317 additions and 237 deletions
--- a/src/views/Charts/components/InstanceActivity.vue
+++ b/src/views/Charts/components/InstanceActivity.vue
@@ -21,15 +21,24 @@
            </div>

            <div>
-                <TooltipWrapper :content="t('view.charts.instance_activity.refresh')" side="top"
-                    ><el-button :icon="Refresh" circle style="margin-right: 5px" @click="reloadData"></el-button
-                ></TooltipWrapper>
+                <TooltipWrapper :content="t('view.charts.instance_activity.refresh')" side="top">
+                    <Button
+                        class="rounded-full"
+                        size="icon"
+                        variant="outline"
+                        style="margin-right: 5px"
+                        @click="reloadData">
+                        <RefreshCcw />
+                    </Button>
+                </TooltipWrapper>

                <Popover>
                    <PopoverTrigger asChild>
                        <div>
                            <TooltipWrapper :content="t('view.charts.instance_activity.settings.header')" side="top">
-                                <el-button :icon="Setting" style="margin-right: 5px" circle></el-button>
+                                <Button class="rounded-full" size="icon" variant="outline" style="margin-right: 5px">
+                                    <Settings />
+                                </Button>
                            </TooltipWrapper>
                        </div>
                    </PopoverTrigger>
@@ -132,7 +141,8 @@

 <script setup>
    import { computed, nextTick, onBeforeMount, onBeforeUnmount, onMounted, ref, watch } from 'vue';
-    import { ArrowLeft, ArrowRight, InfoFilled, Refresh, Setting, WarningFilled } from '@element-plus/icons-vue';
+    import { ArrowLeft, ArrowRight, InfoFilled, WarningFilled } from '@element-plus/icons-vue';
+    import { RefreshCcw, Settings } from 'lucide-vue-next';
    import { Button } from '@/components/ui/button';
    import { ButtonGroup } from '@/components/ui/button-group';
    import { storeToRefs } from 'pinia';
--- a/src/views/FriendsLocations/FriendsLocations.vue
+++ b/src/views/FriendsLocations/FriendsLocations.vue
@@ -13,9 +13,9 @@
                    <PopoverTrigger asChild>
                        <div>
                            <TooltipWrapper :content="t('view.charts.instance_activity.settings.header')" side="top">
-                                <el-button style="margin-right: 5px" circle
-                                    ><i class="ri-settings-3-line"></i
-                                ></el-button>
+                                <Button class="rounded-full mr-2" size="icon" variant="outline">
+                                    <Settings />
+                                </Button>
                            </TooltipWrapper>
                        </div>
                    </PopoverTrigger>
@@ -164,6 +164,8 @@
 <script setup>
    import { computed, nextTick, onBeforeMount, onBeforeUnmount, onMounted, ref, watch } from 'vue';
    import { Loading, Search } from '@element-plus/icons-vue';
+    import { Button } from '@/components/ui/button';
+    import { Settings } from 'lucide-vue-next';
    import { storeToRefs } from 'pinia';
    import { useI18n } from 'vue-i18n';

--- a/src/views/Login/Login.vue
+++ b/src/views/Login/Login.vue
@@ -1,16 +1,14 @@
 <template>
    <div style="float: left; margin: 5px; z-index: 3000">
        <TooltipWrapper v-if="!noUpdater" side="top" :content="t('view.login.updater')">
-            <el-button type="default" size="small" :icon="Download" circle @click="showVRCXUpdateDialog"></el-button>
+            <Button class="rounded-full mr-2 text-xs" size="icon-sm" variant="ghost" @click="showVRCXUpdateDialog"
+                ><CircleArrowDown
+            /></Button>
        </TooltipWrapper>
        <TooltipWrapper side="top" :content="t('view.login.proxy_settings')">
-            <el-button
-                type="default"
-                size="small"
-                :icon="Connection"
-                style="margin-left: 5px"
-                circle
-                @click="promptProxySettings"></el-button>
+            <Button class="rounded-full text-xs" size="icon-sm" variant="ghost" @click="promptProxySettings"
+                ><Route
+            /></Button>
        </TooltipWrapper>
    </div>
    <div v-loading="loginForm.loading" class="x-login-container">
@@ -79,16 +77,15 @@
                                clearable></el-input>
                        </el-form-item>
                        <el-form-item>
-                            <el-button native-type="submit" type="primary" style="width: 100%">{{
-                                t('view.login.login')
-                            }}</el-button>
+                            <Button type="submit" size="lg" style="width: 100%">{{ t('view.login.login') }}</Button>
                        </el-form-item>
                    </el-form>
-                    <el-button
-                        type="primary"
+                    <Button
+                        variant="Secondary"
+                        size="lg"
                        style="width: 100%"
                        @click="openExternalLink('https://vrchat.com/register')"
-                        >{{ t('view.login.register') }}</el-button
+                        >{{ t('view.login.register') }}</Button
                    >
                </div>

@@ -113,13 +110,14 @@
                                    <span class="extra" v-text="user.user.username"></span>
                                    <span class="extra" v-text="user.loginParams.endpoint"></span>
                                </div>
-                                <el-button
-                                    type="default"
-                                    size="small"
-                                    :icon="Delete"
+                                <Button
+                                    class="rounded-full"
+                                    size="icon-sm"
+                                    variant="ghost"
                                    style="margin-left: 10px"
-                                    circle
-                                    @click.stop="clickDeleteSavedLogin(user.user.id)"></el-button>
+                                    @click.stop="clickDeleteSavedLogin(user.user.id)"
+                                    ><i class="ri-delete-bin-line h-3 w-3"></i
+                                ></Button>
                            </div>
                        </div>
                    </div>
@@ -149,8 +147,9 @@

 <script setup>
    import { onBeforeMount, onBeforeUnmount, ref, watch } from 'vue';
-    import { Connection, Delete, Download } from '@element-plus/icons-vue';
+    import { CircleArrowDown, Route } from 'lucide-vue-next';
    import { useRoute, useRouter } from 'vue-router';
+    import { Button } from '@/components/ui/button';
    import { storeToRefs } from 'pinia';
    import { useI18n } from 'vue-i18n';

--- a/src/views/PlayerList/components/PhotonEventTable.vue
+++ b/src/views/PlayerList/components/PhotonEventTable.vue
@@ -25,9 +25,9 @@
                clearable
                style="width: 150px"
                @input="photonEventTableFilterChange"></el-input>
-            <el-button @click="emitShowChatboxBlacklist">{{
+            <Button variant="outline" @click="emitShowChatboxBlacklist">{{
                t('view.player_list.photon.chatbox_blacklist')
-            }}</el-button>
+            }}</Button>
            <TooltipWrapper side="bottom" :content="t('view.player_list.photon.status_tooltip')">
                <div style="display: inline-flex; align-items: center; font-size: 14px">
                    <span v-if="ipcEnabled && !photonEventIcon">🟢</span>
@@ -389,6 +389,7 @@

 <script setup>
    import { ArrowRight, Download } from '@element-plus/icons-vue';
+    import { Button } from '@/components/ui/button';
    import { storeToRefs } from 'pinia';
    import { useI18n } from 'vue-i18n';

--- a/src/views/PlayerList/dialogs/ChatboxBlacklistDialog.vue
+++ b/src/views/PlayerList/dialogs/ChatboxBlacklistDialog.vue
@@ -14,18 +14,18 @@
                style="margin-top: 5px"
                @change="saveChatboxBlacklist">
                <template #append>
-                    <el-button
-                        :icon="Delete"
+                    <Button
+                        variant="outline"
                        @click="
                            chatboxBlacklist.splice(index, 1);
                            saveChatboxBlacklist();
                        ">
-                    </el-button>
+                    </Button>
                </template>
            </el-input>
-            <el-button size="small" style="margin-top: 5px" @click="chatboxBlacklist.push('')">
+            <Button size="sm" variant="outline" style="margin-top: 5px" @click="chatboxBlacklist.push('')">
                {{ t('dialog.chatbox_blacklist.add_item') }}
-            </el-button>
+            </Button>
            <br />
            <h2>{{ t('dialog.chatbox_blacklist.user_blacklist') }}</h2>
            <Badge
@@ -55,7 +55,7 @@
 </template>

 <script setup>
-    import { Delete } from '@element-plus/icons-vue';
+    import { Button } from '@/components/ui/button';
    import { storeToRefs } from 'pinia';
    import { useI18n } from 'vue-i18n';

--- a/src/views/Search/Search.vue
+++ b/src/views/Search/Search.vue
@@ -5,15 +5,13 @@
                :model-value="searchText"
                :placeholder="t('view.search.search_placeholder')"
                style="flex: 1"
+                clearable
                @input="updateSearchText"
                @keyup.enter="search"></el-input>
            <TooltipWrapper side="bottom" :content="t('view.search.clear_results_tooltip')">
-                <el-button
-                    type="default"
-                    :icon="Delete"
-                    circle
-                    style="flex: none; margin-left: 10px"
-                    @click="handleClearSearch"></el-button>
+                <Button class="rounded-full mr-2" size="icon-sm" variant="ghost" @click="handleClearSearch"
+                    ><Trash2
+                /></Button>
            </TooltipWrapper>
        </div>
        <el-tabs ref="searchTabRef" style="margin-top: 15px" @tab-click="searchText = ''">
@@ -337,10 +335,11 @@

 <script setup>
    import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
-    import { Back, Delete, Refresh, Right } from '@element-plus/icons-vue';
+    import { Back, Refresh, Right } from '@element-plus/icons-vue';
    import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
    import { Button } from '@/components/ui/button';
    import { ButtonGroup } from '@/components/ui/button-group';
+    import { Trash2 } from 'lucide-vue-next';
    import { ref } from 'vue';
    import { storeToRefs } from 'pinia';
    import { useI18n } from 'vue-i18n';
@@ -374,7 +373,7 @@
    const { showUserDialog, refreshUserDialogAvatars } = useUserStore();
    const { showAvatarDialog, lookupAvatars, cachedAvatars } = useAvatarStore();
    const { cachedWorlds, showWorldDialog } = useWorldStore();
-    const { showGroupDialog, applyGroup } = useGroupStore();
+    const { showGroupDialog } = useGroupStore();
    const { searchText, searchUserResults } = storeToRefs(useSearchStore());
    const { clearSearch, moreSearchUser } = useSearchStore();
    const { cachedConfig } = storeToRefs(useAuthStore());
--- a/src/views/Settings/components/PhotonSettings.vue
+++ b/src/views/Settings/components/PhotonSettings.vue
@@ -35,9 +35,9 @@
            </ToggleGroup>
        </div>
        <div class="options-container-item">
-            <el-button size="small" :icon="Timer" :disabled="!openVR" @click="promptPhotonOverlayMessageTimeout">{{
+            <Button size="sm" variant="outline" :disabled="!openVR" @click="promptPhotonOverlayMessageTimeout">{{
                t('view.settings.advanced.photon.event_hud.message_timeout')
-            }}</el-button>
+            }}</Button>
        </div>
        <div class="options-container-item">
            <Select
@@ -92,15 +92,15 @@
            </ToggleGroup>
        </div>
        <div class="options-container-item">
-            <el-button size="small" :icon="Timer" :disabled="!openVR" @click="promptPhotonLobbyTimeoutThreshold">{{
+            <Button size="sm" variant="outline" :disabled="!openVR" @click="promptPhotonLobbyTimeoutThreshold">{{
                t('view.settings.advanced.photon.timeout_hud.timeout_threshold')
-            }}</el-button>
+            }}</Button>
        </div>
    </div>
 </template>

 <script setup>
-    import { Timer } from '@element-plus/icons-vue';
+    import { Button } from '@/components/ui/button';
    import { storeToRefs } from 'pinia';
    import { useI18n } from 'vue-i18n';

--- a/src/views/Settings/dialogs/ChangelogDialog.vue
+++ b/src/views/Settings/dialogs/ChangelogDialog.vue
@@ -21,20 +21,24 @@
                style="height: 62vh; overflow-y: auto; margin-top: 10px" />
        </div>
        <template #footer>
-            <el-button @click="openExternalLink('https://github.com/vrcx-team/VRCX/releases')">
+            <Button
+                variant="ghost"
+                class="mr-2"
+                @click="openExternalLink('https://github.com/vrcx-team/VRCX/releases')">
                {{ t('dialog.change_log.github') }}
-            </el-button>
-            <el-button @click="openExternalLink('https://patreon.com/Natsumi_VRCX')">
+            </Button>
+            <Button variant="outline" class="mr-2" @click="openExternalLink('https://patreon.com/Natsumi_VRCX')">
                {{ t('dialog.change_log.donate') }}
-            </el-button>
-            <el-button @click="closeDialog">
+            </Button>
+            <Button @click="closeDialog">
                {{ t('dialog.change_log.close') }}
-            </el-button>
+            </Button>
        </template>
    </el-dialog>
 </template>

 <script setup>
+    import { Button } from '@/components/ui/button';
    import { defineAsyncComponent } from 'vue';
    import { storeToRefs } from 'pinia';
    import { useI18n } from 'vue-i18n';
--- a/src/views/Settings/dialogs/LaunchOptionsDialog.vue
+++ b/src/views/Settings/dialogs/LaunchOptionsDialog.vue
@@ -38,16 +38,23 @@
        </template>

        <template #footer>
-            <div style="display: flex">
-                <el-button @click="openExternalLink('https://docs.vrchat.com/docs/launch-options')">
-                    {{ t('dialog.launch_options.vrchat_docs') }}
-                </el-button>
-                <el-button @click="openExternalLink('https://docs.unity3d.com/Manual/CommandLineArguments.html')">
-                    {{ t('dialog.launch_options.unity_manual') }}
-                </el-button>
-                <el-button type="primary" style="margin-left: auto" @click="updateLaunchOptions">
+            <div class="flex items-center justify-between">
+                <div>
+                    <Button
+                        variant="outline"
+                        class="mr-2"
+                        @click="openExternalLink('https://docs.vrchat.com/docs/launch-options')">
+                        {{ t('dialog.launch_options.vrchat_docs') }}
+                    </Button>
+                    <Button
+                        variant="outline"
+                        @click="openExternalLink('https://docs.unity3d.com/Manual/CommandLineArguments.html')">
+                        {{ t('dialog.launch_options.unity_manual') }}
+                    </Button>
+                </div>
+                <Button @click="updateLaunchOptions">
                    {{ t('dialog.launch_options.save') }}
-                </el-button>
+                </Button>
            </div>
        </template>
    </el-dialog>
@@ -55,6 +62,7 @@

 <script setup>
    import { computed, ref } from 'vue';
+    import { Button } from '@/components/ui/button';
    import { storeToRefs } from 'pinia';
    import { toast } from 'vue-sonner';
    import { useI18n } from 'vue-i18n';
--- a/src/views/Settings/dialogs/NotificationPositionDialog.vue
+++ b/src/views/Settings/dialogs/NotificationPositionDialog.vue
@@ -78,15 +78,16 @@

        <template #footer>
            <div style="display: flex">
-                <el-button type="primary" style="margin-left: auto" @click="closeDialog">
+                <Button @click="closeDialog">
                    {{ t('dialog.notification_position.ok') }}
-                </el-button>
+                </Button>
            </div>
        </template>
    </el-dialog>
 </template>

 <script setup>
+    import { Button } from '@/components/ui/button';
    import { storeToRefs } from 'pinia';
    import { useI18n } from 'vue-i18n';

--- a/src/views/Settings/dialogs/PrimaryPasswordDialog.vue
+++ b/src/views/Settings/dialogs/PrimaryPasswordDialog.vue
@@ -25,20 +25,20 @@
            show-password>
        </el-input>
        <template #footer>
-            <el-button
-                type="primary"
+            <Button
                :disabled="
                    enablePrimaryPasswordDialog.password.length === 0 ||
                    enablePrimaryPasswordDialog.password !== enablePrimaryPasswordDialog.rePassword
                "
                @click="handleSetPrimaryPassword()">
                {{ t('dialog.primary_password.ok') }}
-            </el-button>
+            </Button>
        </template>
    </el-dialog>
 </template>

 <script setup>
+    import { Button } from '@/components/ui/button';
    import { storeToRefs } from 'pinia';
    import { useI18n } from 'vue-i18n';

--- a/src/views/Settings/dialogs/TranslationApiDialog.vue
+++ b/src/views/Settings/dialogs/TranslationApiDialog.vue
@@ -86,11 +86,9 @@
        </template>

        <template #footer>
-            <div style="display: flex">
-                <el-button v-if="form.translationApiType === 'openai'" @click="testOpenAiTranslation" plain>
-                    {{ t('dialog.translation_api.test') }}
-                </el-button>
-                <el-button
+            <div class="flex items-center justify-between">
+                <Button
+                    variant="outline"
                    v-if="form.translationApiType === 'google'"
                    @click="
                        openExternalLink(
@@ -98,10 +96,19 @@
                        )
                    ">
                    {{ t('dialog.translation_api.guide') }}
-                </el-button>
-                <el-button type="primary" style="margin-left: auto" @click="saveTranslationApiConfig">
-                    {{ t('dialog.translation_api.save') }}
-                </el-button>
+                </Button>
+                <div>
+                    <Button
+                        variant="secondary"
+                        class="mr-2"
+                        v-if="form.translationApiType === 'openai'"
+                        @click="testOpenAiTranslation">
+                        {{ t('dialog.translation_api.test') }}
+                    </Button>
+                    <Button style="margin-left: auto" @click="saveTranslationApiConfig">
+                        {{ t('dialog.translation_api.save') }}
+                    </Button>
+                </div>
            </div>
        </template>
    </el-dialog>
@@ -110,6 +117,7 @@
 <script setup>
    import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
    import { reactive, watch } from 'vue';
+    import { Button } from '@/components/ui/button';
    import { storeToRefs } from 'pinia';
    import { toast } from 'vue-sonner';
    import { useI18n } from 'vue-i18n';
--- a/src/views/Settings/dialogs/YouTubeApiDialog.vue
+++ b/src/views/Settings/dialogs/YouTubeApiDialog.vue
@@ -17,19 +17,20 @@
        </el-input>

        <template #footer>
-            <div style="display: flex">
-                <el-button @click="openExternalLink('https://smashballoon.com/doc/youtube-api-key/')">
+            <div class="flex items-center justify-between">
+                <Button variant="outline" @click="openExternalLink('https://smashballoon.com/doc/youtube-api-key/')">
                    {{ t('dialog.youtube_api.guide') }}
-                </el-button>
-                <el-button type="primary" style="margin-left: auto" @click="testYouTubeApiKey">
+                </Button>
+                <Button style="margin-left: auto" @click="testYouTubeApiKey">
                    {{ t('dialog.youtube_api.save') }}
-                </el-button>
+                </Button>
            </div>
        </template>
    </el-dialog>
 </template>

 <script setup>
+    import { Button } from '@/components/ui/button';
    import { storeToRefs } from 'pinia';
    import { toast } from 'vue-sonner';
    import { useI18n } from 'vue-i18n';
--- a/src/views/Sidebar/components/FriendItem.vue
+++ b/src/views/Sidebar/components/FriendItem.vue
@@ -38,13 +38,13 @@
        </template>
        <template v-else-if="!friend.ref && !isRefreshFriendsLoading">
            <span>{{ friend.name || friend.id }}</span>
-            <el-button
-                text
-                :icon="Close"
-                size="small"
-                style="margin-left: 5px"
-                @click.stop="$emit('confirm-delete-friend', friend.id)">
-            </el-button>
+            <Button
+                size="sm"
+                variant="ghost"
+                class="mr-1 w-6 h-6 text-xs"
+                @click.stop="$emit('confirm-delete-friend', friend.id)"
+                ><i class="ri-delete-bin-2-line"></i>
+            </Button>
        </template>

        <el-skeleton v-else animated class="skeleton" :throttle="100">
@@ -62,7 +62,8 @@
 </template>

 <script setup>
-    import { Close, Loading, WarningFilled } from '@element-plus/icons-vue';
+    import { Loading, WarningFilled } from '@element-plus/icons-vue';
+    import { Button } from '@/components/ui/button';
    import { computed } from 'vue';
    import { storeToRefs } from 'pinia';
    import { useI18n } from 'vue-i18n';
--- a/src/views/Tools/dialogs/EditInviteMessageDialog.vue
+++ b/src/views/Tools/dialogs/EditInviteMessageDialog.vue
@@ -18,16 +18,15 @@
                style="margin-top: 10px"></el-input>
        </div>
        <template #footer>
-            <el-button @click="closeDialog">{{ t('dialog.edit_invite_message.cancel') }}</el-button>
-            <el-button type="primary" @click="saveEditInviteMessage">{{
-                t('dialog.edit_invite_message.save')
-            }}</el-button>
+            <Button variant="secondary" @click="closeDialog">{{ t('dialog.edit_invite_message.cancel') }}</Button>
+            <Button @click="saveEditInviteMessage">{{ t('dialog.edit_invite_message.save') }}</Button>
        </template>
    </el-dialog>
 </template>

 <script setup>
    import { ref, watch } from 'vue';
+    import { Button } from '@/components/ui/button';
    import { toast } from 'vue-sonner';
    import { useI18n } from 'vue-i18n';