4dkankan
/
4dkankan_bim


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184
							<!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>
    <style>
        .locales-setting {
            position: fixed;
            z-index: 20000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            pointer-events: all;
        }
        .locales-setting > div {
            padding: 40px 20px;
            display: flex;
            align-items: flex-start;
            position: absolute;
            left: 30px;
            top: 30px;
            bottom: 30px;
            right: 30px;
            background: #efefef;
            box-shadow: 0 0 8px #666;
        }
        .locales-setting > div aside {
            width: 200px;
            height: 100%;
            border-right: solid 1px #999;
        }
        .locales-setting > div aside li {
            margin-bottom: 10px;
            cursor: pointer;
        }
        .locales-setting > div aside li.active {
            color: #f60;
        }
        .locales-setting > div main {
            flex: 1;
            width: 100%;
            height: 100%;
            overflow: hidden;
            overflow-y: auto;
        }
        .locales-setting > div main li {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
        }
        .locales-setting > div main li input {
            height: 24px;
            border: solid 1px #666;
            width: 100%;
            padding: 0 4px;
        }
        .locales-setting > div main li > div:first-child {
            width: 400px;
            /* text-align: right; */
            padding-right: 3px;
        }
        .locales-setting > div main li > div:last-child {
            width: 100%;
        }
        .locales-setting .save {
            position: absolute;
            right: 5px;
            top: 5px;
        }
        .locales-setting .save select {
            border: solid 1px #666;
            width: 70px;
            height: 24px;
            text-align: center;
            background: #fff;
        }
        .locales-setting .save button {
            border: solid 1px #666;
            width: 70px;
            height: 24px;
            text-align: center;
            background: #fff;
            margin-left: 10px;
        }
    </style>
    <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" v-model="locale.value" /></div>
                            </li>
                        </ul>
                    </main>
                </div>
            </div>
        </div>

        <script>
            const { createApp } = Vue

            createApp({
                data() {
                    return {
                        locale: 'zh',
                        locales: [],
                        info: {},
                        menus: [],
                        module: 'home',
                        respone: null,
                    }
                },
                methods: {
                    async onLocaleChange() {
                        this.locales = []
                        this.respone = await this.fetchLocale()
                        this.initData(this.respone)
                    },
                    onModuleChange(name) {
                        this.locales = []
                        this.module = name
                        console.log(this.module)
                        console.log(this.respone)
                        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) {
                                console.log(this.module)
                                this.initData(data[key])
                            } else if (typeof data[key] == 'string') {
                                this.locales.push({ key: key.split('.')[0], value: data[key] })
                                // if (!this.info[key]) {
                                //     this.info[key] = []
                                // }
                                // this.info[key].push({ key: key.split('.')[0], value: data[key] })
                                // 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)
                    })
                    // this.onLocaleChange()
                },
            }).mount('#app')
        </script>
    </body>
</html>