4dkankan
/
4dkankan_bim


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126
							<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>配置国际化</title>
    </head>
    <link rel="stylesheet" href="./css/index.css" />
    <body>
        <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
        <div id="app">
            <div class="locales-setting">
                <div>
                    <div class="save">
                        <select v-model="locale" @change="onLocaleChange">
                            <option value="zh">中文</option>
                            <option value="en">英文</option>
                            <option value="kr">韩文</option>
                            <option value="fr">法语</option>
                            <option value="ja">日语</option>
                        </select>
                        <button @click="onSave">保存</button>
                    </div>

                    <aside>
                        <ul>
                            <li v-for="menu in menus" @click="onModuleChange(menu.name)" :class="{ active: menu.name == module }">{{ menu.text }}</li>
                        </ul>
                    </aside>
                    <main>
                        <ul>
                            <li v-for="locale in locales">
                                <div>{{ locale.key }}：</div>
                                <div><input type="text" @input="onChangeVal(locale)" v-model="locale.value" /></div>
                            </li>
                        </ul>
                    </main>
                </div>
            </div>
            <div class="showbox" v-if="loading">
                <div class="loader">
                    <svg class="circular" viewBox="25 25 50 50">
                        <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10" />
                    </svg>
                </div>
            </div>
        </div>

        <script>
            const { createApp } = Vue
            createApp({
                data() {
                    return {
                        locale: 'zh',
                        locales: [],
                        info: {},
                        menus: [],
                        module: 'home',
                        respone: null,
                        loading: false,
                    }
                },
                methods: {
                    async onSave() {
                        this.loading = true

                        let params = this.respone
                        fetch('http://192.168.0.130:9091/save', {
                            method: 'post',
                            headers: {
                                'Content-Type': 'application/x-www-form-urlencoded',
                            },
                            body: `q=${JSON.stringify(params)}&locale=${this.locale}`,
                        })
                            .then(async res => {
                                this.loading = false

                                let json = await res.json()
                                alert('保存成功')
                            })
                            .catch(err => {
                                this.loading = false
                                alert('保存失败，请联系管理员')
                            })
                    },
                    onChangeVal(item) {
                        this.respone[this.module][item.key] = item.value
                    },
                    async onLocaleChange() {
                        this.locales = []
                        this.respone = await this.fetchLocale()
                        this.initData(this.respone)
                    },
                    onModuleChange(name) {
                        this.locales = []
                        this.module = name
                        this.initData(this.respone)
                    },
                    initData(data, init = false) {
                        for (let key in data) {
                            if (key.split('.').pop() == 'name') {
                                if (init) {
                                    this.menus.push({ name: key.split('.')[0], text: data[key] })
                                }
                            } else if (typeof data[key] == 'object' && key == this.module) {
                                this.initData(data[key])
                            } else if (typeof data[key] == 'string') {
                                this.locales.push({ key: key.split('.')[0], value: data[key] })
                            }
                        }
                    },
                    async fetchLocale(locale) {
                        return await (await fetch(`./locales/${this.locale}.json?${Date.now()}`)).json()
                    },
                },
                mounted() {
                    this.fetchLocale('zh').then(res => {
                        this.respone = res
                        this.initData(res, true)
                    })
                },
            }).mount('#app')
        </script>
    </body>
</html>