AstrBot/dashboard/src/views/PlatformPage.vue

<template>
    <v-card style="height: 100%;">
        <v-card-text style="padding: 32px; height: 100%;">

            <v-menu>
                <template v-slot:activator="{ props }">
                    <v-btn class="flex-grow-1" variant="tonal" @click="new_platform_dialog = true" size="large"
                        rounded="lg" v-bind="props" color="primary">
                        <template v-slot:default>
                            <v-icon>mdi-plus</v-icon>
                            新增平台适配器
                        </template>
                    </v-btn>
                </template>
                <v-list @update:selected="addFromDefaultConfigTmpl($event)">
                    <v-list-item
                        v-for="(item, index) in metadata['platform_group']['metadata']['platform'].config_template"
                        :key="index" rounded="xl" :value="index">
                        <v-list-item-title>{{ index }}</v-list-item-title>
                    </v-list-item>
                </v-list>
            </v-menu>
            <v-row style="margin-top: 16px;">
                <v-col v-for="(platform, index) in config_data['platform']" :key="index" cols="12" md="6" lg="3">
                    <v-card class="fade-in"
                        style="margin-bottom: 16px; min-height: 200px; display: flex; justify-content: space-between; flex-direction: column;">
                        <v-card-title class="d-flex justify-space-between align-center">
                            <span class="text-h4">{{ platform.id }}</span>
                            <v-switch color="primary" hide-details density="compact" v-model="platform['enable']"
                                @update:modelValue="platformStatusChange(platform)"></v-switch>
                        </v-card-title>
                        <v-card-text>
                            <div>
                                <span style="font-size:12px">适配器类型: </span>
                                <v-chip size="small" color="primary" text>{{ platform.type }}</v-chip>
                            </div>
                        </v-card-text>
                        <v-card-actions class="d-flex justify-end">
                            <v-btn color="error" text @click="deletePlatform(platform.id);">
                                删除
                            </v-btn>
                            <v-btn color="blue-darken-1" text
                                @click="updatingMode = true; showPlatformCfg = true; newSelectedPlatformConfig = platform; newSelectedPlatformName = platform.id">
                                配置
                            </v-btn>
                        </v-card-actions>
                    </v-card>
                </v-col>
            </v-row>
            <v-dialog v-model="showPlatformCfg" width="700">
                <v-card>
                    <v-card-title>
                        <span class="text-h4">{{ newSelectedPlatformName }} 配置</span>
                    </v-card-title>
                    <v-card-text>
                        <AstrBotConfig :iterable="newSelectedPlatformConfig"
                            :metadata="metadata['platform_group']['metadata']" metadataKey="platform" />
                    </v-card-text>
                    <v-card-actions>
                        <v-spacer></v-spacer>
                        <v-btn color="blue-darken-1" variant="text" @click="newPlatform" :loading="loading">
                            保存
                        </v-btn>
                    </v-card-actions>
                </v-card>
            </v-dialog>


            <v-btn style="margin-top: 16px" class="flex-grow-1" variant="tonal"  size="large" rounded="lg" color="gray" @click="showConsole = !showConsole">
                <template v-slot:default>
                    <v-icon>mdi-console-line</v-icon>
                    {{ showConsole ? '隐藏' : '显示' }}日志
                </template>
            </v-btn>

            <div v-if="showConsole" style="margin-top: 32px; ">
                <ConsoleDisplayer style="background-color: #fff; height: 300px"></ConsoleDisplayer>
            </div>

        </v-card-text>
    </v-card>

    <v-snackbar :timeout="3000" elevation="24" :color="save_message_success" v-model="save_message_snack">
        {{ save_message }}
    </v-snackbar>
    <WaitingForRestart ref="wfr"></WaitingForRestart>
</template>
<script>

import axios from 'axios';
import AstrBotConfig from '@/components/shared/AstrBotConfig.vue';
import WaitingForRestart from '@/components/shared/WaitingForRestart.vue';
import ConsoleDisplayer from '@/components/shared/ConsoleDisplayer.vue';

export default {
    name: 'PlatformPage',
    components: {
        AstrBotConfig,
        WaitingForRestart,
        ConsoleDisplayer
    },
    data() {
        return {
            config_data: {},
            fetched: false,
            metadata: {},
            showPlatformCfg: false,

            newSelectedPlatformName: '',
            newSelectedPlatformConfig: {},
            updatingMode: false,

            loading: false,

            save_message_snack: false,
            save_message: "",
            save_message_success: "",

            showConsole: false,
        }
    },

    mounted() {
        this.getConfig();
    },

    methods: {
        getConfig() {
            // 获取配置
            axios.get('/api/config/get').then((res) => {
                this.config_data = res.data.data.config;
                this.fetched = true
                this.metadata = res.data.data.metadata;
            }).catch((err) => {
                this.save_message = err;
                this.save_message_snack = true;
                this.save_message_success = "error";
            });
        },

        addFromDefaultConfigTmpl(index) {
            // 从默认配置模板中添加
            console.log(index);
            this.newSelectedPlatformName = index[0];
            this.showPlatformCfg = true;
            this.updatingMode = false;
            this.newSelectedPlatformConfig = this.metadata['platform_group']['metadata']['platform'].config_template[index[0]];
        },

        newPlatform() {
            // 新建或者更新平台
            this.loading = true;
            if (this.updatingMode) {
                axios.post('/api/config/platform/update', {
                    id: this.newSelectedPlatformName,
                    config: this.newSelectedPlatformConfig
                }).then((res) => {
                    this.loading = false;
                    this.showPlatformCfg = false;
                    this.getConfig();
                    this.$refs.wfr.check();
                    this.save_message = res.data.message;
                    this.save_message_snack = true;
                    this.save_message_success = "success";
                }).catch((err) => {
                    this.loading = false;
                    this.save_message = err;
                    this.save_message_snack = true;
                    this.save_message_success = "error";
                });
                this.updatingMode = false;
            } else {
                axios.post('/api/config/platform/new', this.newSelectedPlatformConfig).then((res) => {
                    this.loading = false;
                    this.showPlatformCfg = false;
                    this.getConfig();
                    this.save_message = res.data.message;
                    this.save_message_snack = true;
                    this.save_message_success = "success";
                }).catch((err) => {
                    this.loading = false;
                    this.save_message = err;
                    this.save_message_snack = true;
                    this.save_message_success = "error";
                });
            }
        },

        deletePlatform(platform_id) {
            // 删除平台
            axios.post('/api/config/platform/delete', { id: platform_id }).then((res) => {
                this.getConfig();
                this.$refs.wfr.check();
                this.save_message = res.data.message;
                this.save_message_snack = true;
                this.save_message_success = "success";
            }).catch((err) => {
                this.save_message = err;
                this.save_message_snack = true;
                this.save_message_success = "error";
            });
        },

        platformStatusChange(platform) {
            // 平台状态改变
            axios.post('/api/config/platform/update', {
                id: platform.id,
                config: platform
            }).then((res) => {
                this.getConfig();
                this.$refs.wfr.check();
                this.save_message = res.data.message;
                this.save_message_snack = true;
                this.save_message_success = "success";
            }).catch((err) => {
                this.save_message = err;
                this.save_message_snack = true;
                this.save_message_success = "error";
            });
        }

    }
}

</script>

<style>
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.fade-in {
    animation: fadeIn 0.2s ease-in-out;
}
</style>