wordIn/src/components/manage/SetList.vue

<template>
    <el-container id="main-container" class="container card">
        <el-header id="header" class="colbox">
            <div class="no">共有{{ Object.keys(wordsets).length }}个单词集合</div>
            <div>
                <el-button @click="export_set" type="success"><box-icon color="white" name='export'
                        size="15px"></box-icon>导出</el-button>
                <el-button @click="import_set" type="warning"><box-icon color="white" name='import'
                        size="15px"></box-icon>导入</el-button>
                <el-button @click="$router.push('/manage/new')" type="primary"><box-icon color="white" name='plus'></box-icon>新建单词本</el-button>
            </div>
        </el-header>
        <el-main id="wordsets-container">
            <div class="colbox" if="sets-container">
                <el-collapse accordion v-model="active_set_class" style="width: 100%;border: none;">
                    <el-collapse-item v-for="(set_class, class_name) in wordsets" :title="class_name" :key="class_name"
                        :name="class_name">
                        <div class="colbox wordclass">
                            <div v-for="(wordset, index) in set_class" :key="index" class="wordset rowbox">
                                <div class="no">
                                    {{ index + 1 }}
                                </div>
                                <div class="title">
                                    {{ wordset.name }}
                                </div>
                                <div style="font-size: 17px;font-weight: 200;">
                                    创建日期：{{ (new Date(wordset.created)).toLocaleString() }}
                                </div>
                                <div class="option">
                                    <box-icon class="btn" name='edit' color="var(--text-color)"
                                        @click="edit(wordset, class_name)"></box-icon>
                                    <box-icon class="btn" name='trash' color="var(--text-color)"
                                        @click="del(class_name, wordset.id, index)"></box-icon>
                                </div>
                            </div>
                        </div>
                    </el-collapse-item>
                </el-collapse>
            </div>
        </el-main>
    </el-container>
</template>

<script>
import { ElNotification, ElMessage, ElMessageBox } from 'element-plus';

export default {
    name: "SetList",
    data() {
        return {
            wordsets:window.wordsets,
            active_set_class: "",
        }
    },
    methods:{
        del(set_class_name, id, index) {
            ElMessageBox.confirm("确定要删除吗？")
                .then(() => {
                    localStorage.removeItem(id);
                    this.wordsets[set_class_name].splice(index, 1);
                    if (!this.wordsets[set_class_name].length) {
                        delete this.wordsets[set_class_name];
                    }
                    localStorage.setItem("wordsets", JSON.stringify(this.wordsets));
                    ElMessage(`已经删除 ${set_class_name} `);
                });
        },
        edit(set, set_class_name) {
            window.editing = {set,set_class_name};
            this.$router.push({
                path:"/manage/edit",
            })
        },
        async export_set() {
            let fileHandle = await window.showSaveFilePicker({
                types: [
                    {
                        description: "JSON file",
                        accept: {
                            'text/json': ['.json'],
                        },
                    },
                ],
            });
            let writestream = await fileHandle.createWritable();
            let data = {
                wordsets: this.wordsets,
                words: {}
            };
            for (let i of Object.values(this.wordsets)) {
                for (let j of i) {
                    let temp = localStorage.getItem(j.id);
                    data.words[j.id] = temp;
                }
            }
            writestream.write(JSON.stringify(data));
            writestream.close();
        },
        async import_set() {
            let [fileHandle] = await window.showOpenFilePicker({
                types: [
                    {
                        description: "JSON file",
                        accept: {
                            'text/json': ['.json'],
                        },
                    },
                ],
            });
            let file = await fileHandle.getFile();
            let data = JSON.parse(await file.text());
            let cnt = 0;
            for (let i of Object.keys(data.wordsets)) {
                for (let j of data.wordsets[i]) {
                    if (!localStorage.getItem(j.id)) {
                        if (!this.wordsets[i]) this.wordsets[i] = [];
                        this.wordsets[i].push(j);
                        localStorage.setItem(j.id, data.words[j.id]);
                        cnt++;
                    }
                }
            }
            localStorage.setItem("wordsets", JSON.stringify(this.wordsets));
            ElNotification({
                type: "success",
                title: "添加成功",
                message: `已添加 ${cnt} 本单词本`
            });
        }
    },
    created() {
        this.active_set_class = Object.keys(this.wordsets)[0];
    }
}
</script>

<style scoped>
.title {
    font-weight: 800;
    color: var(--text-color);
    font-size: 35px;
    flex-grow: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-height: 60px;
}
.option {
    display: flex;
    justify-content: space-around;
    opacity: 0;
    transition: .5s;
}

.wordset:hover .option{
    opacity: 1;
}

#header {
    /* border-bottom: solid 1px #bcbcbc; */
    justify-content: space-between;
    height: 40px;
}

.no {
    font-size: 20px;
    font-weight: 700;
}

#wordsets-container {
    overflow-x: auto;
    height: 100%;
}

#main-container {
    height: 87%;
}

.wordclass {
    flex-wrap: wrap
}

.card div {
    margin-bottom: 10px;
}
</style>