diff --git a/package.json b/package.json
index 8f6330a5..0cc88f09 100644
--- a/package.json
+++ b/package.json
@@ -30,14 +30,17 @@
     "element-plus": "^2.2.6",
     "fuse.js": "^6.5.3",
     "is-electron": "^2.2.0",
+    "localforage": "^1.10.0",
+    "lodash": "^4.17.21",
     "monaco-editor": "^0.33.0",
     "object-hash": "^2.2.0",
     "pinia": "^2.0.14",
     "ua-parser-js": "^1.0.2",
-    "vue": "^3.2.36",
+    "vue": "^3.2.41",
     "vue-echarts": "^6.1.0",
     "vue-i18n": "9",
-    "vue-router": "4"
+    "vue-router": "4",
+    "vuedraggable": "^4.1.0"
   },
   "devDependencies": {
     "@babel/core": "^7.16.10",
@@ -47,6 +50,8 @@
     "@iconify-json/fa6-regular": "^1.1.3",
     "@iconify-json/fa6-solid": "^1.1.4",
     "@tauri-apps/cli": "^1.0.0-rc.8",
+    "@types/events": "^3.0.0",
+    "@types/object-hash": "^2.2.1",
     "@typescript-eslint/eslint-plugin": "^5.4.0",
     "@typescript-eslint/parser": "^5.4.0",
     "@vue/cli-plugin-babel": "~5.0.0",
diff --git a/src/components.d.ts b/src/components.d.ts
index d57bc71e..36c6fcce 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -73,6 +73,8 @@ declare module '@vue/runtime-core' {
     IEpArrowRight: typeof import('~icons/ep/arrow-right')['default']
     IEpCheck: typeof import('~icons/ep/check')['default']
     IEpCpu: typeof import('~icons/ep/cpu')['default']
+    IEpFolderChecked: typeof import('~icons/ep/folder-checked')['default']
+    IEpFolderRemove: typeof import('~icons/ep/folder-remove')['default']
     IEpHelpFilled: typeof import('~icons/ep/help-filled')['default']
     IEpHistogram: typeof import('~icons/ep/histogram')['default']
     IEpHomeFilled: typeof import('~icons/ep/home-filled')['default']
@@ -83,6 +85,8 @@ declare module '@vue/runtime-core' {
     IEpQuestionFilled: typeof import('~icons/ep/question-filled')['default']
     IEpSearch: typeof import('~icons/ep/search')['default']
     IEpSetting: typeof import('~icons/ep/setting')['default']
+    IEpSort: typeof import('~icons/ep/sort')['default']
+    IEpUser: typeof import('~icons/ep/user')['default']
     IFa6SolidCircleQuestion: typeof import('~icons/fa6-solid/circle-question')['default']
     IFa6SolidLink: typeof import('~icons/fa6-solid/link')['default']
     IFa6SolidTerminal: typeof import('~icons/fa6-solid/terminal')['default']
diff --git a/src/components/display/PresetItem.vue b/src/components/display/PresetItem.vue
index 2098acfd..6375d1f5 100644
--- a/src/components/display/PresetItem.vue
+++ b/src/components/display/PresetItem.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="item br-3" @click="$emit('click')">
+    <div class="item br-3">
         <div class="header">
             <span class="fs-12">{{ props.name }}</span>
             <div v-if="toolbar" class="buttons flex-row">
@@ -156,7 +156,7 @@ const tfData = computed(() => {
             }
         }
     }
-    
+
 }
 
 .c-avatar, .w-avatar, .tf-avatar {
@@ -165,4 +165,4 @@ const tfData = computed(() => {
     width: 64px;
     border: 1px solid #e9e9e9;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/misc/ClickEditLabel.vue b/src/components/misc/ClickEditLabel.vue
index cd609443..0605f919 100644
--- a/src/components/misc/ClickEditLabel.vue
+++ b/src/components/misc/ClickEditLabel.vue
@@ -1,7 +1,8 @@
 <template>
     <div class="root">
         <input
-            :value="value"
+            :value="content"
+            @input.stop="onInput"
             @click="edit = true"
             @blur="onBlur"
             :style="inputStyle"
@@ -15,20 +16,28 @@
 export default {
     name: "ClickEditLabel",
     props: {
-        "value": {},
-        "fontsize": {},
+        value: {},
+        fontsize: {},
         editable: { default: true }
     },
     data() {
         return {
             edit: false,
+            content: this.value,
+        }
+    },
+    watch: {
+        value(newValue) {
+            this.content = newValue
         }
     },
     methods: {
+        onInput(e) {
+            this.content = e.target.value
+        },
         onBlur(e) {
-            let text = e.target.value;
-            this.edit = false;
-            this.$emit("input", text);
+            this.edit = false
+            this.$emit("input", this.content)
         }
     },
     computed: {
@@ -89,4 +98,4 @@ export default {
 }
 
 
-</style>
\ No newline at end of file
+</style>
diff --git a/src/i18n/locales/en.js b/src/i18n/locales/en.js
index 2620a906..6578638b 100644
--- a/src/i18n/locales/en.js
+++ b/src/i18n/locales/en.js
@@ -26,11 +26,13 @@ export default {
         nav: "Navigation",
         home: "Home",
         repo: "My Repo",
+        account: "Account",
         artifact: "Artifact",
         kumi: "Artifact Group",
         preset: "Preset",
         compute: "Computation",
         calculate: "Calculator",
+        sequenceOptimize: "Sequence Optimize",
         teamOptimize: "Team Optimize",
         potential: "Artifact Potential",
         monaDB: "Mona DB",
@@ -1267,6 +1269,22 @@ export default {
         Physical: "Physical",
         None: "None",
     },
+    accountPage: {
+        title: "Accounts and Syncing",
+        syncButton: "Sync with a local directory",
+        syncedButton: "Synced with the local directory",
+        addAccount: "Add an account",
+        chooseSyncBase: "Choose sync target",
+        browserBase: "Based on the browser storage",
+        fileBase: "Based on the local directory",
+        lastModifiedAt: "last modified at ",
+        confirmDelete: "Sure to delete?",
+        delete: "delete",
+        newAccountName: "New Account",
+        deletingAccount: "Deleting the account",
+        switchingAccount: "Switching accounts",
+        cancelSyncing: "Synchronization canceled",
+    },
     artPage: {
         shareDesc: "Use share link to import artifacts, expires in 1 day",
         deleteUnseen: "delete unseen artifacts",
@@ -1847,6 +1865,24 @@ export default {
         Geo: "Geo Res",
         Physical: "Physical Res",
     },
+    sequencePage: {
+        applyPresetDialogTitle: "Apply Preset",
+        selectArtifact: "Select Artifact",
+        importSequence: "Import Sequence",
+        saveSequence: "Save Sequence",
+        startCalculation: "Start Calc.",
+        stopCalculation: "Stop Calc.",
+        saveToDirectory: "Save to Directory",
+        import: "Import",
+        compare: "Compare",
+        comparing: "Comparing",
+        cancel: "Cancel",
+        member: "Member",
+        details: "Details",
+        calculateThis: "Calculate This",
+        calculateThisAndBelow: "Calculate This and Below",
+        addMember: "Add Member",
+    },
     teamPage: {
         start: "Start",
         add: "Add Member",
@@ -2100,4 +2136,4 @@ export default {
         Resonance: "Resonance",
         Common: "Custom",
     }
-}
\ No newline at end of file
+}
diff --git a/src/i18n/locales/zh-cn.js b/src/i18n/locales/zh-cn.js
index 03202f9c..c96313ee 100644
--- a/src/i18n/locales/zh-cn.js
+++ b/src/i18n/locales/zh-cn.js
@@ -26,11 +26,13 @@ export default {
         nav: "导航",
         home: "首页",
         repo: "我的仓库",
+        account: "账号",
         artifact: "圣遗物",
         kumi: "圣遗物套装",
         preset: "计算预设",
         compute: "计算",
         calculate: "计算器",
+        sequenceOptimize: "队列优化",
         teamOptimize: "多人优化",
         potential: "圣遗物潜力",
         monaDB: "莫娜数据库",
@@ -1267,6 +1269,22 @@ export default {
         advanced: "进阶属性",
         ele: "元素属性",
     },
+    accountPage: {
+        title: "账号与同步",
+        syncButton: "同步本地目录",
+        syncedButton: "已同步本地目录",
+        addAccount: "添加账号",
+        chooseSyncBase: "选择同步基准",
+        browserBase: "以浏览器存储为准",
+        fileBase: "以本地目录为准",
+        lastModifiedAt: "最后修改于",
+        confirmDelete: "确定删除吗？",
+        delete: "删除",
+        newAccountName: "新账号",
+        deletingAccount: "删除账号中",
+        switchingAccount: "切换账号中",
+        cancelSyncing: "取消同步",
+    },
     artPage: {
         shareDesc: "通过分享链接可以快速导入圣遗物，有效期为一天",
         deleteUnseen: "删除不存在的圣遗物",
@@ -1849,6 +1867,24 @@ export default {
         Geo: "岩抗",
         Physical: "物抗",
     },
+    sequencePage: {
+        applyPresetDialogTitle: "导入预设",
+        selectArtifact: "选择圣遗物",
+        importSequence: "导入序列",
+        saveSequence: "保存序列",
+        startCalculation: "开始计算",
+        stopCalculation: "中止计算",
+        saveToDirectory: "存至收藏夹",
+        import: "导入",
+        compare: "对比",
+        comparing: "对比中",
+        cancel: "取消",
+        member: "成员",
+        details: "角色详情",
+        calculateThis: "计算这个",
+        calculateThisAndBelow: "计算这个及以下",
+        addMember: "添加成员",
+    },
     teamPage: {
         start: "开始计算",
         add: "添加成员",
@@ -2102,4 +2138,4 @@ export default {
         Resonance: "元素共鸣",
         Common: "自定义",
     }
-}
\ No newline at end of file
+}
diff --git a/src/pages/AccountPage/AccountPage.vue b/src/pages/AccountPage/AccountPage.vue
new file mode 100644
index 00000000..3c7515bb
--- /dev/null
+++ b/src/pages/AccountPage/AccountPage.vue
@@ -0,0 +1,255 @@
+<template>
+    <div>
+        <el-dialog
+            :title="t('accountPage.chooseSyncBase')"
+            width="30%"
+            v-model="showSyncDialog"
+            @closed="handleSyncDialogClosed"
+        >
+            <div>
+                <el-button
+                    @click="selectSyncType('local')"
+                >
+                    {{ t('accountPage.browserBase') }} ( {{ t('accountPage.lastModifiedAt') + new Date(localLastModified).toLocaleString()}} )
+                </el-button>
+            </div>
+            <div style="margin-top: 10px;">
+                <el-button
+                @click="selectSyncType('file')"
+                >
+                    {{ t('accountPage.fileBase') }} ( {{ t('accountPage.lastModifiedAt') + new Date(fileLastModified).toLocaleString()}} )
+                </el-button>
+            </div>
+        </el-dialog>
+
+        <div class="top-things">
+            <el-row>
+                <el-col :span="6">
+                    <span>{{ t('accountPage.title') }}</span>
+                </el-col>
+                <el-col :span="18">
+                    <div style="float: right">
+                        <el-button
+                            type="primary"
+                            size="small"
+                            :icon="IconEpSort"
+                            :disabled="accountStore.syncStatus.value !== 'no sync'"
+                            @click="handleSync"
+                        >
+                            {{ t('accountPage', accountStore.syncStatus.value === 'no sync' ? 'syncButton' : 'syncedButton') }}
+                        </el-button>
+                    </div>
+                </el-col>
+            </el-row>
+            <el-divider></el-divider>
+        </div>
+
+        <div class="toolbar">
+            <el-button
+                type="primary"
+                :icon="IconEpPlus"
+                size="small"
+                @click="addAccount"
+            >
+                {{ t('accountPage.addAccount') }}
+            </el-button>
+        </div>
+
+        <div class="body">
+            <div
+                v-for="{id, name} in accountStore.allAccounts"
+                :key="id"
+                class="item is-active"
+                :class="{ active: id === accountStore.currentAccountId.value }"
+                @click="handleChangeAccount(id)"
+            >
+                <click-edit-label
+                    :value="name"
+                    @input="newName => handleChangeName(id, name, newName)"
+                    fontsize="16px"
+                    :editable="true"
+                    style="display: inline-block;"
+                ></click-edit-label>
+                <div class="buttons flex-row">
+                    <el-popconfirm
+                        :title="t('accountPage.confirmDelete')"
+                        @confirm="handleDeleteAccount(id)"
+                    >
+                        <template #reference>
+                            <el-button
+                                v-show="id !== accountStore.currentAccountId.value"
+                                :icon="IconEpDelete"
+                                type="danger"
+                                link
+                                size="default"
+                                circle
+                                class="button"
+                                :title="t('accountPage.delete')"
+                                @click.stop=""
+                            ></el-button>
+                        </template>
+                    </el-popconfirm>
+                    <!-- <el-button
+                        icon="el-icon-download"
+                        type="text"
+                        size="medium"
+                        circle
+                        @click="handleDownload(name, item)"
+                        class="button"
+                        title="导出"
+                    ></el-button> -->
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ElMessage } from "element-plus"
+import ClickEditLabel from "@c/misc/ClickEditLabel"
+import IconEpPlus from "~icons/ep/plus"
+import IconEpSort from "~icons/ep/sort"
+import IconEpDelete from "~icons/ep/delete"
+import {useI18n} from "@/i18n/i18n"
+
+import { useAccountStore, deleteAccount, changeAccount, reload } from "@/store/pinia/account"
+import storeBackend, { BackendMeta } from "@/store/backend"
+
+// i18n
+const { t } = useI18n()
+
+const accountStore = useAccountStore()
+
+function addAccount() {
+    accountStore.addAccount(t('accountPage.newAccountName'))
+}
+
+async function handleDeleteAccount(id: number) {
+    const loading = ElLoading.service({
+        lock: true,
+        text: t('accountPage.deletingAccount')
+    })
+    await deleteAccount(id)
+    loading.close()
+}
+
+async function handleChangeAccount(id: number) {
+    if (id === accountStore.currentAccountId.value) {
+        return
+    }
+    const loading = ElLoading.service({
+        lock: true,
+        text: t('accountPage.switchingAccount')
+    })
+    await changeAccount(id)
+    loading.close()
+}
+
+function handleChangeName(id: number, oldName: string, newName: string) {
+    if (newName !== oldName && newName !== '') {
+        accountStore.changeAccountName(id, newName)
+    }
+}
+
+
+const showSyncDialog = ref(false)
+const localLastModified = ref(0)
+const fileLastModified = ref(0)
+const selectSyncType = ref<((t: 'local' | 'file') => void) | null>(null)
+const handleSyncDialogClosed = ref<(() => void) | null>(null)
+
+function querySyncType(localMeta: BackendMeta | null, fileMeta: BackendMeta | null) {
+    return new Promise<string>((resolve, reject) => {
+        if (!fileMeta) {
+            resolve('local')
+            return
+        }
+        if (!localMeta) {
+            resolve('')
+            return
+        }
+        if (localMeta.lastModified === fileMeta.lastModified) {
+            resolve('')
+            return
+        }
+        localLastModified.value = localMeta.lastModified
+        fileLastModified.value = fileMeta.lastModified
+        let resolved = false
+        selectSyncType.value = (type) => {
+            resolved = true
+            showSyncDialog.value = false
+            resolve(type)
+        };
+        handleSyncDialogClosed.value = () => {
+            if (!resolved) {
+                storeBackend.disconnectFileBackend()
+                reject(Error(t('accountPage.cancelSyncing')))
+            }
+        }
+        showSyncDialog.value = true
+    })
+}
+
+async function handleSync() {
+    const metas = await storeBackend.prompt()
+    if (!metas) {
+        alert(t('accountPage.cancelSyncing'))
+        ElMessage.error(t('accountPage.cancelSyncing'))  // TODO: not work
+        return
+    }
+    let type: string
+    try {
+        type = await querySyncType(metas[0], metas[1])
+    } catch (err) {
+        storeBackend.disconnectFileBackend()
+        alert(t('accountPage.cancelSyncing'))
+        ElMessage.error({ message: t('accountPage.cancelSyncing') })
+        return
+    }
+    await storeBackend.sync(type)
+    await reload()
+    accountStore.syncStatus.value = 'synced'
+}
+
+</script>
+
+<style lang="scss" scoped>
+.body {
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.toolbar {
+    margin-bottom: 20px;
+}
+
+$height: 60px;
+
+.item {
+    height: $height;
+    width: 100%;
+    padding-left: 20px;
+    cursor: pointer;
+    line-height: $height;
+    color: #303133;
+    transition: 200ms;
+
+    &.active {
+        color: #409EFF;
+        background: #ecf5ff;
+    }
+
+    &:hover {
+        background: #ecf5ff;
+    }
+
+    .buttons {
+        float: right;
+        height: $height;
+
+        .button {
+            margin: 0;
+        }
+    }
+}
+</style>
diff --git a/src/pages/AccountPage/index.js b/src/pages/AccountPage/index.js
new file mode 100644
index 00000000..e749861e
--- /dev/null
+++ b/src/pages/AccountPage/index.js
@@ -0,0 +1 @@
+export { default } from "./AccountPage"
diff --git a/src/pages/MainPage/SideBar.vue b/src/pages/MainPage/SideBar.vue
index fa20c7af..413d5ace 100644
--- a/src/pages/MainPage/SideBar.vue
+++ b/src/pages/MainPage/SideBar.vue
@@ -1,10 +1,11 @@
 <template>
     <div class="root">
         <el-menu
-            default-active="intro"
+            :default-active="doRoute ? $route.fullPath : '/intro'"
             style="border: none"
-            @select="handleSelect"
+            @select="doRoute ? undefined : handleSelect($event)"
             :mode="mode"
+            :router="doRoute"
         >
             <el-menu-item index="/intro">
                 <el-icon><i-ep-home-filled></i-ep-home-filled></el-icon>
@@ -14,6 +15,17 @@
                 <el-icon><i-ep-setting></i-ep-setting></el-icon>
                 <span>{{ t("nav.setup") }}</span>
             </el-menu-item>
+            <el-menu-item index="/account">
+                <el-icon><i-ep-user /></el-icon>
+                {{ t("nav.account") }} ( {{ currentAccountName }} )
+                <div class="sync-icon">
+                    <el-icon>
+                        <i-ep-folder-checked v-if="syncStatus === 'synced'" />
+                        <i-ep-sort v-else-if="syncStatus === 'syncing'" />
+                        <i-ep-folder-remove v-else/>
+                    </el-icon>
+                </div>
+            </el-menu-item>
 
             <el-menu-item-group>
                 <template #title>
@@ -41,6 +53,10 @@
                     <el-icon><i-ep-cpu /></el-icon>
                     {{ t("nav.calculate") }}
                 </el-menu-item>
+                <el-menu-item index="/sequential-optimization">
+                    <el-icon><i-ep-cpu /></el-icon>
+                    {{ t("nav.sequenceOptimize") }}
+                </el-menu-item>
                 <el-menu-item index="/team-optimization">
                     <el-icon><i-ep-cpu /></el-icon>
                     {{ t("nav.teamOptimize") }}
@@ -95,6 +111,7 @@
 <script lang="ts">
 import { defineComponent } from "vue"
 import {useI18n} from "@/i18n/i18n"
+import { useAccountStore } from "@/store/pinia/account"
 
 export default defineComponent({
     name: "SideBar",
@@ -123,18 +140,17 @@ export default defineComponent({
     },
     methods: {
         handleSelect(index: string) {
-            if (this.doRoute) {
-                this.$router.push(index)
-            } else {
-                this.$emit("select", index)
-            }
+            this.$emit("select", index)
         }
     },
     setup() {
         const { t } = useI18n()
+        const accountStore = useAccountStore()
 
         return {
-            t
+            t,
+            syncStatus: accountStore.syncStatus,
+            currentAccountName: accountStore.currentAccountName,
         }
     }
 })
@@ -142,4 +158,12 @@ export default defineComponent({
 
 <style scoped>
 
-</style>
\ No newline at end of file
+.item {
+    padding: 0 32px;
+}
+
+.sync-icon {
+    width: 100%;
+    text-align: right;
+}
+</style>
diff --git a/src/pages/NewArtifactPlanPage/ApplyPresetDialog.vue b/src/pages/NewArtifactPlanPage/ApplyPresetDialog.vue
new file mode 100644
index 00000000..afc785eb
--- /dev/null
+++ b/src/pages/NewArtifactPlanPage/ApplyPresetDialog.vue
@@ -0,0 +1,104 @@
+<template>
+    <el-dialog
+        :title="t('sequencePage.applyPresetDialogTitle')"
+        v-model="visible"
+        width="80%"
+    >
+        <div class="body">
+            <preset-item
+                v-for="entry in presetsAllFlat"
+                :key="entry.name"
+                :toolbar="false"
+                :item="entry.item"
+                :name="entry.name"
+                class="hand item"
+                @click="handleClick(entry.name)"
+            ></preset-item>
+        </div>
+    </el-dialog>
+</template>
+
+<!-- <script>
+import PresetItem from "@c/display/PresetItem";
+
+import { mapGetters } from "vuex";
+
+export default {
+    name: "ApplyPresetDialog",
+    components: {
+        PresetItem,
+    },
+    data() {
+        return {
+            visible: false,
+        }
+    },
+    methods: {
+        open() {
+            this.visible = true;
+        },
+
+        handleClick(name) {
+            this.visible = false;
+            this.$emit("selected", name);
+        }
+    },
+    computed: {
+        ...mapGetters("presets", {
+            presetsAllFlat: "allFlat"
+        }),
+    }
+}
+</script> -->
+
+<script setup lang="ts">
+import PresetItem from "@/components/display/PresetItem.vue"
+import {usePresetStore} from "@/store/pinia/preset"
+import {useI18n} from "@/i18n/i18n"
+
+const { t } = useI18n()
+
+const presetStore = usePresetStore()
+const presetsAllFlat = presetStore.allFlat
+
+const emit = defineEmits<{
+    (e: 'selected', name: string): void
+}>()
+
+const visible = ref(false)
+
+function open() {
+    visible.value = true
+}
+
+function handleClick(name: string) {
+    visible.value = false
+    emit('selected', name)
+}
+
+defineExpose({
+    open,
+})
+</script>
+
+<style scoped lang="scss">
+.active {
+    background: #12345611;
+}
+
+.footer {
+    display: flex;
+    flex-direction: row-reverse;
+}
+
+.body {
+    display: grid;
+    gap: 4px;
+    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
+    grid-auto-rows: min-content;
+
+    .item {
+        width: 100%;
+    }
+}
+</style>
diff --git a/src/pages/NewArtifactPlanPage/NewArtifactPlanPage.vue b/src/pages/NewArtifactPlanPage/NewArtifactPlanPage.vue
index 8d49b162..a617281c 100644
--- a/src/pages/NewArtifactPlanPage/NewArtifactPlanPage.vue
+++ b/src/pages/NewArtifactPlanPage/NewArtifactPlanPage.vue
@@ -697,6 +697,7 @@ import SimpleLoading from "@/components/loading/SimpleLoading.vue"
 import SimpleError from "@/components/loading/SimpleError.vue"
 import {useRoute} from "vue-router"
 import {useI18n} from "@/i18n/i18n"
+import {useAccountStore} from "@/store/pinia/account"
 
 import {ElMessage} from "element-plus"
 import "element-plus/es/components/message/style/css"
@@ -706,6 +707,7 @@ import SelectElementType from "@/components/select/SelectElementType.vue";
 const presetStore = usePresetStore()
 const artifactStore = useArtifactStore()
 const kumiStore = useKumiStore()
+const accountStore = useAccountStore()
 
 // mona
 const mona = await useMona()
@@ -1534,6 +1536,13 @@ function handleOptimizeArtifact() {
         loading.close()
     })
 }
+
+watch(() => accountStore.currentAccountId.value, () => {
+    optimizationResults.value = []
+    optimizationResultIndex.value = 0
+    miscCurrentPresetName.value = null
+    artifactIds.value = [-1, -1, -1, -1, -1]
+})
 </script>
 
 <style lang="scss" scoped>
@@ -1652,7 +1661,7 @@ function handleOptimizeArtifact() {
         .detail-left {
             width: 64px;
             margin-right: 16px;
-            
+
             img {
                 height: 64px;
                 width: 64px;
@@ -1740,4 +1749,4 @@ function handleOptimizeArtifact() {
         width: 100%;
     }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/pages/SequentialOptimizationPage/SequentialOptimizationPage.vue b/src/pages/SequentialOptimizationPage/SequentialOptimizationPage.vue
new file mode 100644
index 00000000..1c13c26e
--- /dev/null
+++ b/src/pages/SequentialOptimizationPage/SequentialOptimizationPage.vue
@@ -0,0 +1,650 @@
+<template>
+    <div>
+        <apply-preset-dialog ref="applyPresetDialog" @selected="addPreset"></apply-preset-dialog>
+
+        <el-dialog :title="t('sequencePage.selectArtifact')" :width="deviceIsPC ? '80%' : '90%'" v-model="showSelectArtifactDialog">
+            <select-artifact :position="selectArtifactSlot" @select="handleSelectArtifact"></select-artifact>
+        </el-dialog>
+
+        <el-row style="margin-bottom: 12px">
+            <el-col :span="12">
+                <el-button size="default" :icon="IconEpFolderOpened" @click="handleClickImportSequence">{{ t('sequencePage.importSequence') }}</el-button>
+                <el-button type="primary" size="default" :icon="IconEpFolderChecked" :disabled="!sequenceDirty"
+                    @click="handleClickSaveSequence">{{ t('sequencePage.saveSequence') }}</el-button>
+                <el-divider direction="vertical"></el-divider>
+                <el-button v-if="!cancelOptimizeArtifact" type="primary" size="default" :icon="IconEpCpu"
+                    @click="handleClickStart">{{ t('sequencePage.startCalculation') }}</el-button>
+                <el-button v-if="cancelOptimizeArtifact" type="danger" size="default" :icon="IconEpWarningOutline"
+                    @click="cancelOptimizeArtifact">{{ t('sequencePage.stopCalculation') }}</el-button>
+            </el-col>
+            <el-col :span="12">
+                <div style="float: right">
+                    <el-button-group>
+                        <el-button type="primary" size="default" :icon="IconEpStarOn"
+                            @click="handleClickSaveToDirectory">
+                            {{ t('sequencePage.saveToDirectory') }}
+                        </el-button>
+                        <el-dropdown trigger="click" @command="handleClickImportFromDirectory">
+                            <el-button size="default" :icon="IconEpDownload">{{ t('sequencePage.import') }}</el-button>
+                            <template #dropdown>
+                                <el-dropdown-menu>
+                                    <el-dropdown-item v-for="item in directories" :key="item.id" :command="item.id">
+                                        {{ item.title }}
+                                    </el-dropdown-item>
+                                </el-dropdown-menu>
+                            </template>
+                        </el-dropdown>
+                        <el-dropdown trigger="click" @command="handleClickCompareWithDirectory">
+                            <el-button size="default" :icon="IconEpDocumentCopy">
+                                {{ t(`sequencePage.${oldDirectoryId !== null ? 'comparing' : 'compare'}`) }}
+                            </el-button>
+                            <template #dropdown>
+                                <el-dropdown-menu>
+                                    <el-dropdown-item v-for="item in directories" :key="item.id" :command="item.id"
+                                        :class="{ 'directory-active': oldDirectoryId == item.id }">
+                                        {{ item.title }}
+                                    </el-dropdown-item>
+                                    <el-dropdown-item v-if="oldDirectoryId !== null" divided command="cancel">
+                                        {{ t('sequencePage.cancel') }}
+                                    </el-dropdown-item>
+                                </el-dropdown-menu>
+                            </template>
+                        </el-dropdown>
+                    </el-button-group>
+                </div>
+            </el-col>
+        </el-row>
+
+        <!-- https://github.com/SortableJS/vue.draggable.next/issues/159 -->
+        <!-- don't add tag="transition-group" -->
+        <draggable :component-data="{
+            type: 'transition-group',
+            name: !dragging ? 'flip-list' : null
+        }" :list="sequenceData" handle=".member-item" :animation="300" :disabled="false" ghostClass="ghost"
+            @start="dragging = true" @end="dragging = false" item-key="id">
+            <template #item="{ element: { id, name, arts }, index }">
+                <el-row :gutter="16">
+                    <el-col :md="6" :sm="24" class="mona-scroll-hidden left member-item">
+                        <div style="display: flex; justify-content: space-between; align-items: center"
+                            class="member-header">
+                            <p class="team-title">{{ t('sequencePage.member') }} {{ index + 1 }}</p>
+                            <div>
+                                <el-button circle size="small" link :icon="IconEpArrowUp" :disabled="index === 0"
+                                    @click="handleUpMember(index)" style="color: white"></el-button>
+                                <el-button circle size="small" link :icon="IconEpArrowDown"
+                                    :disabled="index === sequenceData.length - 1" @click="handleDownMember(index)"
+                                    style="color: white"></el-button>
+                                <el-button circle size="small" link :icon="IconEpDelete"
+                                    @click="handleDeleteMember(index)" style="color: white"></el-button>
+                            </div>
+                        </div>
+
+                        <div style="display: flex; justify-content: space-between; align-items: center">
+                            <preset-item :toolbar="false" :item="presets[index].item" :name="name" style="width: 100%;">
+                            </preset-item>
+                        </div>
+                    </el-col>
+
+                    <el-col :md="18" :sm="24" :id="id" class="mona-scroll-hidden right result-item">
+                        <div class="result-item-top">
+                            <div>
+                                <el-button size="small" :icon="IconEpView" @click="handleRedirectToCalculator(index)">
+                                    {{ t('sequencePage.details') }}</el-button>
+                                <el-button size="small" :icon="IconEpSmoking"
+                                    @click="handleStartCompute(index, index + 1)">{{ t('sequencePage.calculateThis') }}</el-button>
+                                <el-button size="small" :icon="IconEpCaretBottom" @click="handleStartCompute(index)">
+                                    {{ t('sequencePage.calculateThisAndBelow') }}</el-button>
+                            </div>
+                            <div class="result-item-buttons">
+                            </div>
+                        </div>
+                        <div class="result-item-content">
+                            <div v-for="(artId, artIndex) in arts" :key="artIndex" class="artifact-item-or-button">
+                                <artifact-display v-if="artifactsById.get(artId)" :item="artifactsById.get(artId)"
+                                    selectable :buttons="true" :delete-button="true"
+                                    @delete="handleRemoveArtifact(index, artIndex)"
+                                    @toggle="handleToggleArtifact(artId)"
+                                    @click="handleGotoSelectArtifact(index, artIndex)" class="artifact-display"
+                                    :class="{ differ: oldDirectory.has(name) && artId !== oldDirectory.get(name)[artIndex] }">
+                                </artifact-display>
+                                <add-button v-else @click="handleGotoSelectArtifact(index, artIndex)"
+                                    class="add-button"></add-button>
+                            </div>
+                        </div>
+                    </el-col>
+                </el-row>
+            </template>
+        </draggable>
+        <el-row :key="'this-is-a-unique-key-for-add-button!!!!'" :gutter="16">
+            <el-col :md="6" :sm="24" class="mona-scroll-hidden left member-item">
+                <add-button :msg="t('sequencePage.addMember')" @click="applyPresetDialog!.open()" style="height: 7vw; width: 100%">
+                </add-button>
+            </el-col>
+        </el-row>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ElMessage, ElMessageBox } from "element-plus"
+import draggable from "vuedraggable"
+import IconEpFolderOpened from "~icons/ep/folder-opened"
+import IconEpFolderChecked from "~icons/ep/folder-checked"
+import IconEpCpu from "~icons/ep/cpu"
+import IconEpWarningOutline from "~icons/ep/warning"
+import IconEpStarOn from "~icons/ep/star"
+import IconEpDownload from "~icons/ep/download"
+import IconEpDocumentCopy from "~icons/ep/document-copy"
+import IconEpArrowUp from "~icons/ep/arrow-up"
+import IconEpArrowDown from "~icons/ep/arrow-down"
+import IconEpDelete from "~icons/ep/delete"
+import IconEpView from "~icons/ep/view"
+import IconEpSmoking from "~icons/ep/smoking"
+import IconEpCaretBottom from "~icons/ep/caret-bottom"
+import ArtifactDisplay from "@/components/display/ArtifactDisplay.vue"
+import PresetItem from "@/components/display/PresetItem.vue"
+import AddButton from "@/components/misc/AddButton.vue"
+import ApplyPresetDialog from "../NewArtifactPlanPage/ApplyPresetDialog.vue"
+import SelectArtifact from "@/components/select/SelectArtifact.vue"
+
+import objectHash from "object-hash"
+import { useMona } from "@/wasm/mona"
+import { convertArtifact } from "@/utils/converter"
+import { deepCopy } from "@/utils/common"
+import { wasmSingleOptimize } from "@/wasm/single_optimize"
+import { convertPresetToWasmInterface } from "@/utils/preset"
+import { deviceIsPC } from "@/utils/device"
+import { usePresetStore } from "@/store/pinia/preset"
+import type { ArtifactPosition } from "@/types/artifact"
+import { useArtifactStore } from "@/store/pinia/artifact"
+import { useKumiStore } from "@/store/pinia/kumi"
+import { useSequenceStore } from "@/store/pinia/sequence"
+import { useAccountStore } from "@/store/pinia/account"
+import { useRouter } from "vue-router"
+import {useI18n} from "@/i18n/i18n"
+
+const { t } = useI18n()
+const artifactStore = useArtifactStore()
+const artifactsById = artifactStore.artifacts
+const presetStore = usePresetStore()
+const kumiStore = useKumiStore()
+const sequenceStore = useSequenceStore()
+const accountStore = useAccountStore()
+const router = useRouter()
+
+// sequence management
+interface SequenceItem {
+    name: string,
+    id: string,
+    arts: number[],
+}
+
+const sequenceData = reactive<SequenceItem[]>([])
+
+function genUniqueId() {
+    return 'arts' + String(Math.floor(Math.random() * 1e8))
+}
+
+const applyPresetDialog = ref<InstanceType<typeof ApplyPresetDialog> | null>(null)
+
+function defaultSeqItem(name: string) {
+    return {
+        name,
+        id: genUniqueId(),
+        arts: [-1, -1, -1, -1, -1],
+    }
+}
+
+function addPreset(name: string) {
+    console.log(name)
+    sequenceData.push(defaultSeqItem(name))
+}
+
+function swap(arr: any[], i: number, j: number) {
+    const temp = arr[i]
+    arr[i] = arr[j]
+    arr[j] = temp
+}
+
+function handleUpMember(index: number) {
+    swap(sequenceData, index, index - 1)
+}
+
+function handleDownMember(index: number) {
+    swap(sequenceData, index, index + 1)
+}
+
+function handleDeleteMember(index: number) {
+    sequenceData.splice(index, 1)
+}
+
+const presetNames = computed(() => sequenceData.map(item => item.name))
+const presets = computed(() => presetNames.value.map(name => presetStore.presets.value[name]))
+
+const presetValid = computed(() => presets.value.every(preset => preset))
+watch(() => presetValid.value, valid => {
+    if (!valid) {
+        for (let i = sequenceData.length - 1; i >= 0; i--) {
+            if (!presets.value[i]) {
+                sequenceData.splice(i, 1)
+            }
+        }
+    }
+})
+
+// sequence management: save or restore the sequence data
+const savedSequenceHash = ref<string | null>(null)
+const sequenceDirty = computed(() => {
+    const hash = objectHash(presetNames.value)
+    return hash !== savedSequenceHash.value
+})
+
+function handleClickSaveSequence() {
+    sequenceStore.sequence.value = presetNames.value.slice()
+    savedSequenceHash.value = objectHash(presetNames.value)
+    ElMessage.info('保存序列成功')
+}
+
+function handleClickImportSequence() {
+    const newData = sequenceStore.sequence.value.map(defaultSeqItem)
+    sequenceData.splice(0, sequenceData.length, ...newData)
+    savedSequenceHash.value = objectHash(presetNames.value)
+}
+
+// watch: {
+//     "$store.state.accounts.currentAccountId"() {
+//         this.sequenceData = []
+//     },
+// },
+
+// dragging
+const dragging = ref(false)
+
+// optimization
+const cancelOptimizeArtifact = ref<(() => void) | null>(null)
+
+function getFilteredArtifactsWasm(excludeResults: number[][]) {
+    let results = []
+    for (let artifact of artifactStore.artifacts.value.values()) {
+        if (artifact.level >= 16) {
+            results.push(artifact)
+        }
+    }
+    let used = new Set()
+    for (let artIds of excludeResults) {
+        for (let artId of artIds) {
+            used.add(artId)
+        }
+    }
+    return results.filter(a => !a.omit && !used.has(a.id)).map(convertArtifact)
+}
+
+async function handleStartCompute(start: number, end?: number) {
+    if (end === undefined) {
+        end = presets.value.length
+    }
+    const canStart = presets.value.slice(start, end).every(x => x)
+    if (!canStart) {
+        ElMessage.error("计算范围内有计算预设已被删除")
+        return
+    }
+
+    for (let i = start; i < end; i++) {
+        const item = sequenceData[i]
+        item.arts = [-1, -1, -1, -1, -1]
+        const singleInterface = deepCopy({
+            ...convertPresetToWasmInterface(presets.value[i].item),
+            // max_result_num: 1,
+        })
+        const loading = ElLoading.service({
+            target: '#' + item.id,
+            lock: true,
+            text: "莫娜占卜中",
+            // background: 'rgba(0, 0, 0, 0.7)',
+        })
+        const usedArts = sequenceData.slice(0, i).map(({ arts }) => arts)
+        const availableArts = getFilteredArtifactsWasm(usedArts)
+        const [promise, cancel] = wasmSingleOptimize(singleInterface, availableArts, 120000, true)
+        cancelOptimizeArtifact.value = cancel
+        let results
+        try {
+            results = await promise;
+        } catch (e) {
+            ElMessage.error(e as string)
+            break
+        } finally {
+            cancelOptimizeArtifact.value = null
+            loading.close()
+        }
+        if (results.length === 0) {
+            ElMessage.error("没有符合条件的圣遗物")
+            break
+        }
+        item.arts = artifactObjectToArray(results[0])
+    }
+}
+
+async function handleClickStart() {
+    if (sequenceDirty.value) {
+        try {
+            await ElMessageBox.confirm("是否保存序列？", "警告", {
+                confirmButtonText: "确定",
+                cancelButtonText: "取消",
+                type: 'warning'
+            })
+            handleClickSaveSequence()
+        } catch (e) {
+        }
+    }
+    await handleStartCompute(0)
+}
+
+function handleRedirectToCalculator(index: number) {
+    const item = sequenceData[index]
+    if (oldDirectory.value.has(item.name)) {
+        router.push({
+            name: "calculate",
+            params: {
+                presetName: item.name,
+                artifactGroups: JSON.stringify([item.arts, oldDirectory.value.get(item.name)])
+            }
+        })
+    } else {
+        router.push({
+            name: "calculate",
+            params: {
+                presetName: item.name,
+                artifacts: JSON.stringify(item.arts),
+            }
+        })
+    }
+}
+
+// select artifact
+const showSelectArtifactDialog = ref(false)
+const selectArtifactSlot = ref<ArtifactPosition>("flower")
+const handleSelectArtifact = ref<((artId: number) => void)>(() => { })
+
+function handleRemoveArtifact(index: number, artIndex: number) {
+    sequenceData[index].arts[artIndex] = -1
+}
+
+function handleToggleArtifact(id: number) {
+    artifactStore.toggleArtifact(id)
+}
+
+const index2SlotName: ArtifactPosition[] = ["flower", "feather", "sand", "cup", "head"]
+function handleGotoSelectArtifact(index: number, artIndex: number) {
+    const slotName = index2SlotName[artIndex]
+    selectArtifactSlot.value = slotName
+    handleSelectArtifact.value = id => {
+        sequenceData[index].arts[artIndex] = id
+        showSelectArtifactDialog.value = false
+        handleSelectArtifact.value = () => { }
+    }
+    showSelectArtifactDialog.value = true
+}
+
+////////////////////////////////////
+// save, import and compare kumis
+
+function artifactObjectToArray(art: Record<string, number>) {
+    return [
+        art.flower || -1,
+        art.feather || -1,
+        art.sand || -1,
+        art.goblet || art.cup || -1,
+        art.head || -1,
+    ]
+}
+
+function getArtifactsFromDirectory(dirId: number | null) {
+    //preset in page includes name artID & arts,
+    //while preset in dir use id, title & artifactIds
+    //get array of kumisID by dirID
+    if (dirId === null) {
+        return new Map()
+    }
+    const kumiArr = kumiStore.kumisByDirId.value[dirId]
+    //order arts and transform kumisID to map
+    const orderedArtsMap = new Map()
+    for (const kumi of kumiArr) {
+        const tempOrderdArtsSeq: Record<string, number> = {}
+        for (const artId of kumi.artifactIds!) {
+            let art = artId && artifactStore.artifacts.value.get(artId)
+            if (art) {
+                tempOrderdArtsSeq[art.position] = art.id
+            }
+        }
+        orderedArtsMap.set(kumi.title, artifactObjectToArray(tempOrderdArtsSeq))
+    }
+
+    return orderedArtsMap
+}
+
+function handleClickSaveToDirectory() {
+    const dirName = new Date().toLocaleString()
+    const dirId = kumiStore.createDir(dirName)
+    for (const item of sequenceData) {
+        const kumiId = kumiStore.createKumi(dirId, item.name)!
+        for (const artifactId of item.arts) {
+            if (artifactId >= 0) {
+                kumiStore.addArtifact(kumiId, artifactId)
+            }
+        }
+    }
+    ElMessage.success({ message: `已保存到"${dirName}"收藏夹` })
+}
+
+const oldDirectoryId = ref<number | null>(null)
+const oldDirectory = computed(() => getArtifactsFromDirectory(oldDirectoryId.value))
+
+const directories = kumiStore.dirs
+function handleClickImportFromDirectory(dirId: number) {
+    const artsMap = getArtifactsFromDirectory(dirId)
+    //iterate sequenceData
+    for (const item of sequenceData) {
+        if (artsMap.has(item.name)) {
+            item.arts = artsMap.get(item.name)
+        }
+    }
+}
+
+function handleClickCompareWithDirectory(dirId: number | 'cancel') {
+    oldDirectoryId.value = dirId === 'cancel' ? null : dirId
+}
+
+// watch account change
+watch(() => accountStore.currentAccountId.value, () => {
+    sequenceData.splice(0, sequenceData.length)
+})
+</script>
+
+<style scoped lang="scss">
+@media (min-width: 992px) {
+    // .left, .right {
+    //     height: calc(100vh - 2 * 24px);
+    // }
+}
+
+@media (max-width: 992px) {
+    .el-select {
+        width: 100%;
+    }
+
+    //.left {
+    //    margin-bottom: 12px;
+    //}
+}
+
+.member-item {
+    margin-bottom: 16px;
+    //box-shadow: 0 0 10px 1px #00000011;
+    //padding: 12px;
+
+    &:last-of-type {
+        margin-bottom: 64px;
+    }
+
+    .member-header {
+        //background-color: rgb(236, 245, 255);
+        background-color: #409EFF;
+        padding: 0 8px;
+        height: 32px;
+        //border-radius: 3px;
+    }
+
+    .team-title {
+        font-size: 0.9rem;
+        font-weight: bold;
+        //color: #606166;
+        color: white;
+        margin: 0;
+
+        //border-left: 2px solid #409EFF;
+        //padding-left: 12px;
+    }
+}
+
+.common-title2 {
+    font-size: 12px;
+    color: #666666;
+}
+
+
+
+.result-item {
+    margin-bottom: 12px;
+
+    &:last-of-type {
+        margin-bottom: 0;
+    }
+
+    .result-item-top {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        height: 36px;
+        border-bottom: 1px solid #00000011;
+
+        .result-item-title {
+            font-size: 12px;
+        }
+
+        .result-item-buttons {
+            display: flex;
+            align-items: center;
+        }
+    }
+
+    .result-item-content {
+        //padding-top: 12px;
+        //display: flex;
+        //flex-wrap: wrap;
+        //gap: 12px;
+        display: grid;
+        gap: 4px;
+        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+
+        // .artifact-item-or-button {
+        //     .add-button {
+        //         width: 100%;
+        //         height: 100%;
+        //     }
+        //     .artifact-display {
+        //         width: 100%;
+        //         box-sizing: border-box;
+        //         &.differ {
+        //             box-shadow: 2px 2px 3px #888888;
+        //             :first-child {
+        //                 background-color: rgb(217, 236, 255);
+        //             }
+        //         }
+        //     }
+        // }
+        .artifact-item-or-button {
+            .add-button {
+                width: 100%;
+                height: 100%;
+                min-height: 7vw;
+            }
+
+            .artifact-display {
+                overflow: hidden;
+                // border-radius: 5px;
+                width: 100%;
+                box-sizing: border-box;
+                z-index: 0;
+
+                &.differ {
+                    @keyframes hint {
+                        0% {
+                            opacity: 0;
+                            transform: none;
+                        }
+
+                        50% {
+                            opacity: 1;
+                            transform: none;
+                        }
+
+                        100% {
+                            opacity: 0;
+                            transform: none;
+                        }
+                    }
+
+                    &::before {
+                        content: '';
+                        position: absolute;
+                        z-index: -2;
+                        left: -50%;
+                        top: -50%;
+                        width: 200%;
+                        height: 200%;
+                        background-color: rgb(148, 199, 251);
+                        background-repeat: no-repeat;
+                        background-position: 0 0;
+                        animation: hint 1.5s linear infinite;
+                    }
+
+                    &::after {
+                        content: '';
+                        position: absolute;
+                        z-index: -1;
+                        left: 2px;
+                        top: 2px;
+                        width: calc(100% - 4px);
+                        height: calc(100% - 4px);
+                        background: rgb(255, 255, 255);
+                    }
+                }
+
+            }
+        }
+    }
+}
+
+.flip-list-move {
+    transition: transform 0.3s;
+}
+
+.flip-list-enter-from,
+.flip-list-leave-to {
+    opacity: 0;
+    transform: translateY(30px);
+    transition: transform 0.3s;
+}
+
+.flip-list-leave-active {
+    position: absolute;
+}
+
+.ghost {
+    opacity: 0.5;
+    background: #c8ebfb;
+}
+
+.directory-active {
+    color: #66b1ff;
+}
+</style>
diff --git a/src/pages/SequentialOptimizationPage/SequentialOptimizationWrapper.vue b/src/pages/SequentialOptimizationPage/SequentialOptimizationWrapper.vue
new file mode 100644
index 00000000..6bb581b8
--- /dev/null
+++ b/src/pages/SequentialOptimizationPage/SequentialOptimizationWrapper.vue
@@ -0,0 +1,20 @@
+<template>
+    <sequential-optimization-page></sequential-optimization-page>
+</template>
+
+<script setup lang="ts">
+import SimpleLoading from "@/components/loading/SimpleLoading.vue"
+import SimpleError from "@/components/loading/SimpleError.vue"
+
+const SequentialOptimizationPage = defineAsyncComponent({
+    loader: () => import(
+        /* webpackChunkName: "sequential-optimization-page" */
+        /* webpackPrefetch: true */
+        "./SequentialOptimizationPage.vue"
+    ),
+    errorComponent: SimpleError,
+    loadingComponent: SimpleLoading,
+    delay: 0,
+    timeout: 60000
+})
+</script>
diff --git a/src/pages/SequentialOptimizationPage/index.js b/src/pages/SequentialOptimizationPage/index.js
new file mode 100644
index 00000000..1a0d2c93
--- /dev/null
+++ b/src/pages/SequentialOptimizationPage/index.js
@@ -0,0 +1 @@
+export { default } from "./SequentialOptimizationWrapper"
diff --git a/src/pages/SetupPage/SetupPage.vue b/src/pages/SetupPage/SetupPage.vue
index 00f97ba0..45e13eb2 100644
--- a/src/pages/SetupPage/SetupPage.vue
+++ b/src/pages/SetupPage/SetupPage.vue
@@ -22,7 +22,7 @@
                         {{ t("setupPage.storage") }}
                     </div>
                 </template>
-                <el-popconfirm @confirm="handleClearLocaleStorage" :title="t('setupPage.confirmClear')">
+                <el-popconfirm @confirm="handleClearLocalStorage" :title="t('setupPage.confirmClear')">
                     <template #reference>
                         <el-button type="danger" :icon="IconEpDelete">{{ t("setupPage.clear") }}</el-button>
                     </template>
@@ -33,15 +33,16 @@
 </template>
 
 <script setup lang="ts">
+import localforage from "localforage"
 import {useI18n} from "@/i18n/i18n"
-
 import IconEpDelete from "~icons/ep/delete"
 
 const { t, setLocale, locale } = useI18n()
 
 
-function handleClearLocaleStorage() {
+function handleClearLocalStorage() {
     localStorage.clear()
+    localforage.clear()
 }
 
 async function handleSetLocale(lang: string) {
@@ -69,4 +70,4 @@ async function handleSetLocale(lang: string) {
     //    width: 36px;
     //}
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/pages/TeamOptimizationPage/TeamOptimizationPage.vue b/src/pages/TeamOptimizationPage/TeamOptimizationPage.vue
index 92d655d1..f5f74593 100644
--- a/src/pages/TeamOptimizationPage/TeamOptimizationPage.vue
+++ b/src/pages/TeamOptimizationPage/TeamOptimizationPage.vue
@@ -139,6 +139,7 @@ import AttributePanel from "@/components/display/AttributePanel"
 import {useArtifactStore} from "@/store/pinia/artifact"
 import type {IArtifact} from "@/types/artifact"
 import {usePresetStore} from "@/store/pinia/preset"
+import {useAccountStore} from "@/store/pinia/account"
 import {useMona} from "@/wasm/mona"
 import {deepCopy} from "@/utils/common"
 
@@ -153,6 +154,7 @@ const { t } = useI18n()
 
 const artifactStore = useArtifactStore()
 const presetStore = usePresetStore()
+const accountStore = useAccountStore()
 
 const mona = await useMona()
 
@@ -322,6 +324,13 @@ function handleClickStart() {
         loading.close()
     })
 }
+
+watch(() => accountStore.currentAccountId.value, () => {
+    presetNames.value = [null]
+    weights.value = [0]
+    results.value = []
+    resultIndex.value = 0
+})
 </script>
 
 <style scoped lang="scss">
@@ -411,4 +420,4 @@ function handleClickStart() {
         grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
     }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/router/router.js b/src/router/router.js
index a40ad121..1093c69e 100644
--- a/src/router/router.js
+++ b/src/router/router.js
@@ -1,10 +1,12 @@
 import NewArtifactPlanPage from "@page/NewArtifactPlanPage"
+import SequentialOptimizationPage from "@page/SequentialOptimizationPage"
 import TeamOptimizationPage from "@page/TeamOptimizationPage"
 import NewArtifactPotentialPage from "@page/NewArtifactPotentialPage"
 import CharacterDBPage from "@page/CharacterDBPage"
 import CharacterInfo from "@page/CharacterDBPage/CharacterInfo"
 import MonaPlaygroundPage from "@page/MonaPlaygroundPage"
 import ArtifactsPage from "@page/ArtifactsPage"
+import AccountPage from "@page/AccountPage"
 import CalcBestArtifactSetPage from "@/pages/CalcBestArtifactSetPage"
 // import ExternalLinkPage from "@/pages/about/ExternalLinkPage"
 import SetupPage from "@page/SetupPage"
@@ -75,6 +77,14 @@ const routes = [
             keepAlive: true,
         }
     },
+    {
+        path: "/sequential-optimization",
+        component: SequentialOptimizationPage,
+        meta: {
+            title: "队列优化",
+            keepAlive: true,
+        }
+    },
     {
         path: "/artifacts-kumi",
         component: KumiPage,
@@ -99,6 +109,15 @@ const routes = [
             title: "首页",
         }
     },
+    {
+        path: "/account",
+        component: AccountPage,
+        name: "account",
+        meta: {
+            keepAlive: true,
+            title: "账号",
+        }
+    },
     {
         path: "/artifacts",
         component: ArtifactsPage,
@@ -200,4 +219,4 @@ router.beforeEach(async (to, from, next) => {
     }
 })
 
-export default router;
\ No newline at end of file
+export default router;
diff --git a/src/store/backend.ts b/src/store/backend.ts
new file mode 100644
index 00000000..d902aa95
--- /dev/null
+++ b/src/store/backend.ts
@@ -0,0 +1,402 @@
+import localforage from "localforage"
+
+const BACKEND_META_KEY = 'backend_meta'
+const BACKEND_VERSION = 1
+
+export interface BackendMeta {
+    version: number;
+    lastModified: number;
+}
+
+function genMeta(): BackendMeta {
+    return {
+        version: BACKEND_VERSION,
+        lastModified: new Date().getTime(),
+    }
+}
+
+/**
+ * 假设这个存储是足够快的
+ */
+class LocalBackend {
+    // localforage apis all return Promise
+
+    // clear = localforage.clear.bind(localforage)
+    // getItem = localforage.getItem.bind(localforage)
+    // setItem = localforage.setItem.bind(localforage)
+    // removeItem = localforage.removeItem.bind(localforage)
+
+    exportContent(): Promise<[[string, any][], BackendMeta]> {
+        const content = [] as [string, any][]
+        let meta: BackendMeta
+        return localforage.iterate((value, key) => {
+            if (key === BACKEND_META_KEY) {
+                meta = value as BackendMeta
+            } else {
+                content.push([key, value])
+            }
+        }).then(() => [content, meta])
+    }
+
+    async importContent(content: [string, any][], meta: BackendMeta) {
+        await localforage.clear()
+        for (const [key, value] of content) {
+            await localforage.setItem(key, value)
+        }
+        await localforage.setItem(BACKEND_META_KEY, meta)
+    }
+
+    async getMeta(): Promise<BackendMeta | null> {
+        return await localforage.getItem(BACKEND_META_KEY)
+    }
+
+    async getItem(key: string) {
+        const content = await localforage.getItem(key)
+        return typeof content === 'string' ? JSON.parse(content) : content
+    }
+
+    async setItem(key: string, value: any, meta: BackendMeta) {
+        await localforage.setItem(key, value)
+        await localforage.setItem(BACKEND_META_KEY, meta)
+    }
+
+    async removeItem(key: string, meta: BackendMeta) {
+        await localforage.removeItem(key)
+        await localforage.setItem(BACKEND_META_KEY, meta)
+    }
+}
+
+class ModifiedExternallyError extends Error {}
+
+/**
+ * 1. 文件读写API速度较慢，但同一时间可能有多个写请求，因此有写优化（仅保留最后一次写）
+ * 2. 考虑到文件可能会被外部修改（云盘同步），内部在内存维护一个元数据以及一个元数据文件的handle
+ *    每次写之前检查两个元数据的一致性，若不一致立刻断开连接
+ * 3. 写的API返回promise，但如果后续有新的写入，这次写入可能被忽略
+ * 4. 提供一个等待所有写完成的接口（须保证接口返回前无新的写请求）
+ * 5. 读的API返回的是对该key的所有写完成之后的内容
+ */
+class FileBackend {
+    private dirHandle: any = null
+    private metaFileHandle: any = null
+    private meta: BackendMeta | null = null
+    private keyWriteSequence: Map<string, Promise<void>> = new Map()
+
+    private async clear() {
+        this.metaFileHandle = null
+        const promises = []
+        for await (const name of this.dirHandle.keys()) {
+            promises.push(this.dirHandle.removeEntry(name))
+        }
+        await Promise.all(promises)
+    }
+
+    private async readMeta(): Promise<BackendMeta | null> {
+        if (!this.metaFileHandle) {
+            return null
+        }
+        try {
+            const file = await this.metaFileHandle.getFile()
+            return JSON.parse(await file.text())
+        } catch (err: any) {
+            if (err.name !== 'NotFoundError') {
+                this.metaFileHandle = null
+                console.error(err)
+            }
+            return null
+        }
+    }
+
+    private async checkMeta() {
+        const meta = await this.readMeta()
+        if (!(this.meta?.version === meta?.version && this.meta?.lastModified === meta?.lastModified)) {
+            throw new ModifiedExternallyError()
+        }
+    }
+
+    private async updateMeta(meta: BackendMeta) {
+        if (!this.metaFileHandle) {
+            this.metaFileHandle = await this.dirHandle!.getFileHandle(BACKEND_META_KEY + '.json', { create: true })
+        }
+        const writable = await this.metaFileHandle.createWritable()
+        await writable.write(JSON.stringify(meta))
+        await writable.close()
+        this.meta = Object.assign({}, meta)
+    }
+
+    private async write(key: string, value: string) {
+        const filename = key + '.json'
+        const fileHandle = await this.dirHandle!.getFileHandle(filename, { create: true })
+        const writable = await fileHandle.createWritable()
+        await writable.write(value)
+        await writable.close()
+    }
+
+    private async delete(key: string) {
+        const filename = key + '.json'
+        try {
+            const fileHandle = await this.dirHandle!.getFileHandle(filename)
+            await fileHandle.remove()
+        } catch (err: any) {
+            if (err.name !== 'NotFoundError') {
+                console.error(err)
+            }
+        }
+    }
+
+    async prompt() {
+        if (this.dirHandle !== null) {
+            return true
+        }
+        try {
+            this.dirHandle = await (window as any).showDirectoryPicker({
+                mode: 'readwrite'
+            })
+        } catch (err) {
+            return false
+        }
+        try {
+            this.metaFileHandle = await this.dirHandle.getFileHandle(BACKEND_META_KEY + '.json')
+            this.meta = await this.readMeta()
+        } catch (err) {
+            this.metaFileHandle = null
+            this.meta = null
+        }
+        return true
+    }
+
+    disconnect() {
+        this.dirHandle = null
+    }
+
+    connected() {
+        return this.dirHandle !== null
+    }
+
+    async allWritten() {
+        if (!this.dirHandle) {
+            throw new Error('The file backend is not connected')
+        }
+        while (this.keyWriteSequence.size > 0) {
+            await Promise.all(Array.from(this.keyWriteSequence.values()))
+        }
+    }
+
+    async exportContent(): Promise<[[string, any][], BackendMeta]> {
+        await this.allWritten()
+        const promises = []
+        for await (const entry of this.dirHandle.values()) {
+            const promise = (entry.getFile() as Promise<File>)
+                .then(file => file.text())
+                .then(text => [entry.name.slice(0, -5), JSON.parse(text)] as [string, any])
+            promises.push(promise)
+        }
+        const result = await Promise.all(promises)
+        let meta: BackendMeta
+        const content = result.filter((value) => {
+            if (value[0] === BACKEND_META_KEY) {
+                meta = value[1]
+                return false
+            } else {
+                return true
+            }
+        })
+        return [content, meta!]
+    }
+
+    async importContent(content: [string, any][], meta: BackendMeta) {
+        if (!this.dirHandle) {
+            throw new Error('file backend is not connected')
+        }
+        await this.clear()
+        await Promise.all(content.map(value => this.write(value[0], JSON.stringify(value[1]))))
+        await this.updateMeta(meta)
+    }
+
+    async getMeta() {
+        await this.allWritten()
+        return await this.readMeta()
+    }
+
+    async getItem(key: string) {
+        if (!this.dirHandle) {
+            throw new Error('file backend is not connected')
+        }
+        while (true) {
+            const seq = this.keyWriteSequence.get(key)
+            if (seq) {
+                await seq
+            } else {
+                break
+            }
+        }
+        const filename = key + '.json'
+        try {
+            const fileHandle = await this.dirHandle.getFileHandle(filename)
+            const file = await fileHandle.getFile()
+            return JSON.parse(await file.text())
+        } catch (err: any) {
+            if (err.name !== 'NotFoundError') {
+                console.error(err)
+            }
+            return null
+        }
+    }
+
+    private pushIntoWriteSequence(key: string, func: () => Promise<void>, meta: BackendMeta) {
+        if (!this.dirHandle) {
+            throw new Error('file backend is not connected')
+        }
+        let lastPromise = this.keyWriteSequence.get(key) ?? Promise.resolve()
+        const thisPromise = lastPromise
+            .then(() => {
+                if (this.keyWriteSequence.get(key) === thisPromise) {
+                    return this.checkMeta()
+                        .then(() => func())
+                        .then(() => this.updateMeta(meta))
+                        .then(() => {
+                            if (this.keyWriteSequence.get(key) === thisPromise) {
+                                this.keyWriteSequence.delete(key)
+                            }
+                        })
+                }
+            })
+        this.keyWriteSequence.set(key, thisPromise)
+        return thisPromise
+    }
+
+    setItem(key: string, value: any, meta: BackendMeta) {
+        const fileValue = JSON.stringify(value)
+        return this.pushIntoWriteSequence(key, () => this.write(key, fileValue), meta)
+    }
+
+    removeItem(key: string, meta: BackendMeta) {
+        return this.pushIntoWriteSequence(key, () => this.delete(key), meta)
+    }
+}
+
+function isWindowActive() {
+    return new Promise((resolve, reject) => {
+        let timeoutHandle: number
+        let animeHandle = window.requestAnimationFrame(() => {
+            window.clearTimeout(timeoutHandle)
+            resolve(true)
+        })
+        timeoutHandle = window.setTimeout(() => {
+            window.cancelAnimationFrame(animeHandle)
+            resolve(false)
+        }, 50)
+    })
+}
+
+class MixedBackend {
+    constructor(
+        private fileBackend = new FileBackend(),
+        private localBackend = new LocalBackend(),
+        private callbacks: Record<string, Function> = {}
+    ) {}
+
+    on(event: string, callback: Function) {
+        this.callbacks[event] = callback
+    }
+
+    disconnectFileBackend() {
+        this.fileBackend.disconnect()
+        this.callbacks['cancelFileBackend']?.apply(undefined)
+    }
+
+    async prompt() {
+        if (!(await this.fileBackend.prompt())) {
+            return null
+        }
+        return [
+            await this.localBackend.getMeta(),
+            await this.fileBackend.getMeta(),
+        ]
+    }
+
+    async sync(type: string) {
+        if (type === 'local') {
+            await this.fileBackend.importContent(...await this.localBackend.exportContent())
+        } else if (type === 'file') {
+            await this.localBackend.importContent(...await this.fileBackend.exportContent())
+        }
+    }
+
+    async allReady() {
+        if (this.fileBackend.connected()) {
+            await this.fileBackend.allWritten()
+        }
+    }
+
+    // startConsistencyCheck() {
+    //     if (this.consistencyCheckHandle) {
+    //         return
+    //     }
+    //     this.consistencyCheckHandle = window.setInterval(async () => {
+    //         if (await isWindowActive()) {
+    //             this.checkFileUpdate()
+    //         }
+    //     }, 5000)
+    // }
+
+    private async checkConsistency() {
+        if (!this.fileBackend.connected()) {
+            return
+        }
+        const localMeta = await this.localBackend.getMeta()
+        const fileMeta = await this.fileBackend.getMeta()
+        if (localMeta?.version === fileMeta?.version && localMeta?.lastModified === fileMeta?.lastModified) {
+            return
+        }
+        console.log('localMeta', localMeta)
+        console.log('fileMeta', fileMeta)
+        alert('由于不知道的原因，本地目录与浏览器存储状态不一致，已停止与本地目录同步。\n' +
+            '你可以手动重新同步。\n' +
+            'Due to an unknown reason, local directory is inconsistent with the browser storage, synchronization has been stopped.\n' +
+            'You can restart synchronization manually.')
+        this.fileBackend.disconnect()
+        this.callbacks['cancelFileBackend']?.apply(undefined)
+        // TODO: check version
+    }
+
+    async getItem(key: string) {
+        return await this.localBackend.getItem(key)
+    }
+
+    async setItem(key: string, value: any) {
+        await this.checkConsistency()
+        const meta = genMeta()
+        await this.localBackend.setItem(key, value, meta)
+        try {
+            if (this.fileBackend.connected()) {
+                await this.fileBackend.setItem(key, value, meta)
+            }
+        } catch (err) {
+            if (err instanceof ModifiedExternallyError) {
+                alert('本地目录已被外部程序修改，已停止与本地目录同步。\n你可以手动重新同步。')
+                this.fileBackend.disconnect()
+                this.callbacks['cancelFileBackend']?.apply(undefined)
+            }
+        }
+    }
+
+    async removeItem(key: string) {
+        await this.checkConsistency()
+        const meta = genMeta()
+        await this.localBackend.removeItem(key, meta)
+        try {
+            if (this.fileBackend.connected()) {
+                await this.fileBackend.removeItem(key, meta)
+            }
+        } catch (err) {
+            if (err instanceof ModifiedExternallyError) {
+                alert('本地目录已被外部程序修改，已停止与本地目录同步。\n你可以手动重新同步。')
+                this.fileBackend.disconnect()
+                this.callbacks['cancelFileBackend']?.apply(undefined)
+            }
+        }
+    }
+}
+
+export default new MixedBackend()
diff --git a/src/store/pinia/account.ts b/src/store/pinia/account.ts
new file mode 100644
index 00000000..424898d8
--- /dev/null
+++ b/src/store/pinia/account.ts
@@ -0,0 +1,236 @@
+import { computed, reactive, ref, watch, toRaw } from "vue"
+import { deepCopy } from "@/utils/common"
+import backend from "../backend"
+import { useArtifactStore, watchContent as artifactWatchContent } from "./artifact"
+import { useKumiStore, watchContent as kumiWatchContent } from "./kumi"
+import { usePresetStore, watchContent as presetWatchContent } from "./preset"
+import { useSequenceStore, watchContent as sequenceWatchContent } from "./sequence"
+
+interface Account {
+    id: number;
+    name: string;
+}
+
+function createAccountStore() {
+    const syncStatus = ref<'no sync' | 'syncing' | 'synced'>('no sync')
+
+    const currentAccountId = ref<number>(1)
+    const allAccounts = reactive<Account[]>([{
+        id: 1,
+        name: 'default'
+    }])
+    let nextId = 2;
+
+    function initNextId() {
+        nextId = 0;
+        for (const { id } of allAccounts) {
+            nextId = Math.max(nextId, id);
+        }
+        nextId++;
+    }
+
+    function init(payload: { currentAccountId: number, allAccounts: Account[] } | null) {
+        if (payload) {
+            currentAccountId.value = payload.currentAccountId
+            allAccounts.splice(0, allAccounts.length, ...payload.allAccounts)
+            initNextId()
+        } else {
+            currentAccountId.value = 1
+            allAccounts.splice(0, allAccounts.length, {
+                id: 1,
+                name: 'default'
+            })
+        }
+    }
+
+    function addAccount(name: string) {
+        allAccounts.push({
+            id: nextId++,
+            name,
+        })
+    }
+
+    function deleteAccount(id: number) {
+        for (let i = 0; i < allAccounts.length; i++) {
+            if (allAccounts[i].id === id) {
+                allAccounts.splice(i, 1)
+                break
+            }
+        }
+    }
+
+    function changeAccountName(id: number, name: string) {
+        for (const account of allAccounts) {
+            if (account.id === id) {
+                account.name = name;
+                break;
+            }
+        }
+    }
+
+    const currentAccountName = computed(() => {
+        return allAccounts.find(a => a.id === currentAccountId.value)?.name
+    })
+
+    return {
+        syncStatus,
+
+        currentAccountId,
+        allAccounts,
+        currentAccountName,
+
+        init,
+        addAccount,
+        deleteAccount,
+        changeAccountName,
+    }
+}
+
+const accountStore = createAccountStore()
+
+export const useAccountStore = () => accountStore
+
+
+const artifactStore = useArtifactStore()
+const presetStore = usePresetStore()
+const kumiStore = useKumiStore()
+const sequenceStore = useSequenceStore()
+
+let loadingAccountData = false
+
+function nextTick() {
+    return new Promise((resolve) => {
+        setTimeout(resolve, 0)
+    })
+}
+
+async function loadAccountData() {
+    loadingAccountData = true
+    const id = accountStore.currentAccountId.value
+    const artKey = `mona_account_artifacts_${id}`
+    artifactStore.init(await backend.getItem(artKey))
+    const presetKey = `mona_account_presets_${id}`
+    presetStore.init(await backend.getItem(presetKey))
+    const kumiKey = `mona_account_kumi_${id}`
+    kumiStore.init(await backend.getItem(kumiKey))
+    const seqKey = `mona_account_sequence_${id}`
+    sequenceStore.init(await backend.getItem(seqKey))
+    await nextTick()
+    loadingAccountData = false
+}
+
+export async function changeAccount(id: number) {
+    await backend.allReady()
+    accountStore.currentAccountId.value = id
+    await nextTick()
+    await loadAccountData()
+}
+
+export async function deleteAccount(id: number) {
+    if (id === accountStore.currentAccountId.value) {
+        // this should not happen, but add a guard here
+        return
+    }
+    accountStore.deleteAccount(id)
+    const artKey = `mona_account_artifacts_${id}`
+    await backend.removeItem(artKey)
+    const presetKey = `mona_account_presets_${id}`
+    await backend.removeItem(presetKey)
+    const kumiKey = `mona_account_kumi_${id}`
+    await backend.removeItem(kumiKey)
+    const seqKey = `mona_account_sequence_${id}`
+    await backend.removeItem(seqKey)
+}
+
+export async function reload() {
+    loadingAccountData = true
+    accountStore.init(await backend.getItem('mona_accounts') as any)
+    await loadAccountData()
+}
+
+async function initBackendFromLocalStorage() {
+    backend.setItem('mona_accounts', deepCopy(accountWatchContent()))
+    const artString = localStorage.getItem('artifacts')
+    await backend.setItem('mona_account_artifacts_1', artString && JSON.parse(artString))
+    const kumiString = localStorage.getItem('kumi2')
+    await backend.setItem('mona_account_kumi_1', kumiString && JSON.parse(kumiString))
+    const presetString = localStorage.getItem('presets5')
+    await backend.setItem('mona_account_presets_1', presetString && JSON.parse(presetString))
+}
+
+/**
+ * localStorage scheme (version 1):
+ * mona_meta: { version: 1 }
+ * mona_accounts: { currentAccountId: Number, allAccounts: [{ id: Number, name: String }, ...] }
+ * mona_account_artifacts_<id>: { flower: {...}, ... }
+ * mona_account_presets_<id>: { ... }
+ * mona_account_kumi_<id>: { ... }
+ */
+const VERSION_STORAGE = 1
+
+interface MonaMeta {
+    version: number
+}
+
+async function init_store() {
+    let metaData = await backend.getItem('mona_meta') as MonaMeta
+    if (!metaData) {
+        // load old data
+        // _store.commit('artifacts/oldInit');
+        // _store.commit('presets/oldInit');
+        // _store.commit('kumi/oldInit');
+
+        metaData = {
+            version: VERSION_STORAGE,
+        }
+        await backend.setItem('mona_meta', metaData)
+
+        // copy data from localStorage to backend
+        await initBackendFromLocalStorage()
+        await reload()
+    } else {
+        if (metaData.version !== VERSION_STORAGE) {
+            // update local storage here
+        } else {
+            await reload()
+        }
+    }
+}
+
+init_store()
+
+backend.on('cancelFileBackend', () => {
+    accountStore.syncStatus.value = 'no sync'
+})
+
+function updateCurrentAccount(type: string, value: any) {
+    if (loadingAccountData) {
+        return
+    }
+    // console.log('update', type, loadingAccountData)
+    const key = `mona_account_${type}_${accountStore.currentAccountId.value}`
+    backend.setItem(key, deepCopy(value))
+    if (accountStore.syncStatus.value === 'synced') {
+        accountStore.syncStatus.value = 'syncing'
+        backend.allReady().then(() => accountStore.syncStatus.value = 'synced')
+    }
+}
+
+watch(artifactWatchContent, value => updateCurrentAccount('artifacts', value), { deep: true })
+watch(kumiWatchContent, value => updateCurrentAccount('kumi', value), { deep: true })
+watch(presetWatchContent, value => updateCurrentAccount('presets', value), { deep: true })
+watch(sequenceWatchContent, value => updateCurrentAccount('sequence', value), { deep: true })
+
+function accountWatchContent() {
+    return {
+        currentAccountId: accountStore.currentAccountId.value,
+        allAccounts: accountStore.allAccounts,
+    }
+}
+
+watch(accountWatchContent, value => {
+    if (loadingAccountData) {
+        return
+    }
+    backend.setItem('mona_accounts', deepCopy(value))
+}, { deep: true })
diff --git a/src/store/pinia/artifact.ts b/src/store/pinia/artifact.ts
index 36f826ae..0fd2757f 100644
--- a/src/store/pinia/artifact.ts
+++ b/src/store/pinia/artifact.ts
@@ -7,45 +7,37 @@ import {hash as hashArtifact} from "@/utils/artifactHash"
 import {deepCopy} from "@/utils/common"
 import {type ArtifactPosition, type IArtifact, type IArtifactContentOnly} from "@/types/artifact"
 
-const idProvider = new RandomIDProvider()
-
-
-let flower: IArtifact[] = [];
-let feather: IArtifact[] = [];
-let sand: IArtifact[] = [];
-let cup: IArtifact[] = [];
-let head: IArtifact[] = [];
-
-
-let localStoredArtifacts = localStorage.getItem("artifacts");
-if (localStoredArtifacts) {
-    let obj: any = JSON.parse(localStoredArtifacts);
-
-    flower = obj.flower || [];
-    feather = obj.feather || [];
-    sand = obj.sand || [];
-    cup = obj.cup || [];
-    head = obj.head || [];
-
-    let temp = flower.concat(feather).concat(sand).concat(cup).concat(head);
-
-    for (let item of temp) {
-        if (!Object.prototype.hasOwnProperty.call(item, "id")) {
-            item.id = idProvider.generateId()
-        }
-        if (!Object.prototype.hasOwnProperty.call(item, "contentHash")) {
-            item.contentHash = hashArtifact(item)
-        }
-    }
-}
+// let localStoredArtifacts = localStorage.getItem("artifacts");
+// if (localStoredArtifacts) {
+//     let obj: any = JSON.parse(localStoredArtifacts);
+
+//     flower = obj.flower || [];
+//     feather = obj.feather || [];
+//     sand = obj.sand || [];
+//     cup = obj.cup || [];
+//     head = obj.head || [];
+
+//     let temp = flower.concat(feather).concat(sand).concat(cup).concat(head);
+
+//     for (let item of temp) {
+//         if (!Object.prototype.hasOwnProperty.call(item, "id")) {
+//             item.id = idProvider.generateId()
+//         }
+//         if (!Object.prototype.hasOwnProperty.call(item, "contentHash")) {
+//             item.contentHash = hashArtifact(item)
+//         }
+//     }
+// }
 
 const f = () => {
     const artifacts: Ref<Map<number, IArtifact>> = ref(new Map())
     const hashes: Map<string, number> = reactive(new Map())
 
+    const idProvider = new RandomIDProvider()
+
     const incHash = (key: string, value: number): void => {
         if (hashes.has(key)) {
-            let newValue: number = hashes.get(key) as number + value
+            let newValue = hashes.get(key)! + value
             if (newValue > 0) {
                 hashes.set(key, newValue)
             } else {
@@ -58,14 +50,43 @@ const f = () => {
         }
     }
 
-    let temp = flower.concat(feather).concat(sand).concat(cup).concat(head)
-    for (let item of temp) {
-        artifacts.value.set(item.id, item)
-        const hash = item.contentHash
+    function init(payload: any) {
+        let flower: IArtifact[] = [];
+        let feather: IArtifact[] = [];
+        let sand: IArtifact[] = [];
+        let cup: IArtifact[] = [];
+        let head: IArtifact[] = [];
+
+        if (payload) {
+            flower = payload.flower || [];
+            feather = payload.feather || [];
+            sand = payload.sand || [];
+            cup = payload.cup || [];
+            head = payload.head || [];
+
+            let temp = flower.concat(feather).concat(sand).concat(cup).concat(head);
+
+            for (let item of temp) {
+                if (!Object.prototype.hasOwnProperty.call(item, "id")) {
+                    item.id = idProvider.generateId()
+                }
+                if (!Object.prototype.hasOwnProperty.call(item, "contentHash")) {
+                    item.contentHash = hashArtifact(item)
+                }
+            }
+        }
 
-        incHash(hash, 1)
+        artifacts.value.clear()
+        hashes.clear()
+        const temp = flower.concat(feather).concat(sand).concat(cup).concat(head)
+        for (const item of temp) {
+            artifacts.value.set(item.id, item)
+            const hash = item.contentHash
+            incHash(hash, 1)
+        }
     }
 
+
     function getArtifact(id: number): IArtifact | undefined {
         return artifacts.value.get(id)
     }
@@ -175,6 +196,7 @@ const f = () => {
         artifactsCount,
         artifacts20Count,
 
+        init,
         removeArtifact,
         addArtifact,
         unlockAll,
@@ -191,7 +213,21 @@ const f = () => {
 
 const s = f()
 
-watch(() => {
+// watch(() => {
+//     return {
+//         flower: s.artifactsByPosition.value["flower"],
+//         feather: s.artifactsByPosition.value["feather"],
+//         sand: s.artifactsByPosition.value["sand"],
+//         cup: s.artifactsByPosition.value["cup"],
+//         head: s.artifactsByPosition.value["head"]
+//     }
+// }, newValue => {
+//     localStorage.setItem("artifacts", JSON.stringify(newValue))
+// }, {
+//     deep: true
+// })
+
+export function watchContent() {
     return {
         flower: s.artifactsByPosition.value["flower"],
         feather: s.artifactsByPosition.value["feather"],
@@ -199,11 +235,7 @@ watch(() => {
         cup: s.artifactsByPosition.value["cup"],
         head: s.artifactsByPosition.value["head"]
     }
-}, newValue => {
-    localStorage.setItem("artifacts", JSON.stringify(newValue))
-}, {
-    deep: true
-})
+}
 
 export const useArtifactStore = () => {
     return s
@@ -211,4 +243,4 @@ export const useArtifactStore = () => {
 
 // export const useArtifactStore = defineStore("artifact", () => {
 //
-// })
\ No newline at end of file
+// })
diff --git a/src/store/pinia/kumi.ts b/src/store/pinia/kumi.ts
index 4ef90eb1..570d3743 100644
--- a/src/store/pinia/kumi.ts
+++ b/src/store/pinia/kumi.ts
@@ -8,7 +8,7 @@ import { type Ref } from "vue"
 
 const artifactStore = useArtifactStore()
 
-function loadLocalKumiOrDefault(): KumiItem[] {
+function loadKumiOrDefault(payload: any): KumiItem[] {
     let kumi = {
         0: {
             id: 0,
@@ -17,21 +17,17 @@ function loadLocalKumiOrDefault(): KumiItem[] {
             children: []
         }
     }
-    const local_str = localStorage.getItem("kumi2")
-    if (local_str) {
+    if (payload) {
         try {
-            const local = JSON.parse(local_str)
-
-            if (typeof local === "object") {
-                if (local.kumi) {
-                    kumi = local.kumi
+            if (typeof payload === "object") {
+                if (payload.kumi) {
+                    kumi = payload.kumi
                 } else {
-                    kumi = local
+                    kumi = payload
                 }
             } else {
-                return local
+                return payload
             }
-
         } catch (e) {
             console.error(e)
         }
@@ -44,13 +40,17 @@ function loadLocalKumiOrDefault(): KumiItem[] {
 }
 
 function store() {
-    const kumi = ref(loadLocalKumiOrDefault())
+    const kumi = ref(loadKumiOrDefault(null))
     const kumiById: Ref<Map<number, KumiItem>> = ref(new Map())
 
     const idGenerator = new RandomIDProvider()
 
-    for (let item of kumi.value) {
-        kumiById.value.set(item.id, item)
+    function init(payload: any) {
+        kumi.value = loadKumiOrDefault(payload)
+        kumiById.value.clear()
+        for (let item of kumi.value) {
+            kumiById.value.set(item.id, item)
+        }
     }
 
     const dirs = computed((): KumiItem[] => {
@@ -63,7 +63,7 @@ function store() {
         return result
     })
 
-    function createDir(name: string) {
+    function createDir(name: string): number {
         let item: KumiItem = {
             id: idGenerator.generateId(),
             title: name,
@@ -73,6 +73,7 @@ function store() {
 
         kumi.value.push(item)
         kumiById.value.set(item.id, item)
+        return item.id
     }
 
     function deleteDir(id: number) {
@@ -228,6 +229,8 @@ function store() {
 
         itemById,
 
+        init,
+
         createDir,
         deleteDir,
         rename,
@@ -243,11 +246,15 @@ function store() {
 
 const s = store()
 
-watch(() => s.kumi.value, newValue => {
-    localStorage.setItem("kumi2", JSON.stringify(newValue))
-}, {
-    deep: true
-})
+export function watchContent() {
+    return s.kumi.value
+}
+
+// watch(() => s.kumi.value, newValue => {
+//     localStorage.setItem("kumi2", JSON.stringify(newValue))
+// }, {
+//     deep: true
+// })
 
 export function useKumiStore(): ReturnType<typeof store> {
     return s
diff --git a/src/store/pinia/preset.ts b/src/store/pinia/preset.ts
index 181d1e64..3fd5cda4 100644
--- a/src/store/pinia/preset.ts
+++ b/src/store/pinia/preset.ts
@@ -4,24 +4,12 @@ import {type IPreset} from "@/types/preset"
 
 const VERSION = 3
 
-function loadLocalOrDefault() {
-    const local = localStorage.getItem("presets5")
-    if (!local) {
-        return {}
-    }
-
-    let localObj = null
-    try {
-        localObj = JSON.parse(local)
-    } catch (e) {
-        localObj = null
-    }
-
-    if (!localObj) {
+function loadPresetOrDefault(payload: any) {
+    if (!payload) {
         return {}
     } else {
-        for (let name in localObj) {
-            let entry = localObj[name]
+        for (let name in payload) {
+            let entry = payload[name]
             let item = entry.item
 
             try {
@@ -32,7 +20,7 @@ function loadLocalOrDefault() {
             }
         }
 
-        return localObj
+        return payload
     }
 }
 
@@ -43,7 +31,11 @@ export interface PresetEntry {
 }
 
 function f() {
-    const presets: Ref<Record<string, PresetEntry>> = ref(loadLocalOrDefault())
+    const presets: Ref<Record<string, PresetEntry>> = ref(loadPresetOrDefault(null))
+
+    function init(payload: any) {
+        presets.value = loadPresetOrDefault(payload)
+    }
 
     function addOrOverwrite(name: string, item: IPreset) {
         presets.value[name] = {
@@ -72,6 +64,7 @@ function f() {
     return {
         presets,
 
+        init,
         addOrOverwrite,
         deletePreset,
         getPreset,
@@ -83,14 +76,18 @@ function f() {
 
 const s = f()
 
-watch(() => {
+export function watchContent() {
     return s.presets.value
-}, newValue => {
-    localStorage.setItem("presets5", JSON.stringify(newValue))
-}, {
-    deep: true
-})
+}
+
+// watch(() => {
+//     return s.presets.value
+// }, newValue => {
+//     localStorage.setItem("presets5", JSON.stringify(newValue))
+// }, {
+//     deep: true
+// })
 
 export const usePresetStore = () => {
     return s
-}
\ No newline at end of file
+}
diff --git a/src/store/pinia/sequence.ts b/src/store/pinia/sequence.ts
new file mode 100644
index 00000000..8065fe15
--- /dev/null
+++ b/src/store/pinia/sequence.ts
@@ -0,0 +1,38 @@
+import {computed, reactive, ref, watch} from "vue"
+
+function f() {
+    const sequence = ref<string[]>([])
+
+    function init(payload: any) {
+        if (payload) {
+            sequence.value = payload.sequence
+        } else {
+            sequence.value = []
+        }
+    }
+
+    return {
+        sequence,
+        init,
+    }
+}
+
+const s = f()
+
+export function watchContent() {
+    return {
+        sequence: s.sequence.value
+    }
+}
+
+// watch(() => {
+//     return s.sequence.value
+// }, newValue => {
+//     localStorage.setItem("sequence", JSON.stringify(newValue))
+// }, {
+//     deep: true
+// })
+
+export const useSequenceStore = () => {
+    return s
+}
diff --git a/src/wasm/single_optimize.js b/src/wasm/single_optimize.js
deleted file mode 100644
index 2cf3b60b..00000000
--- a/src/wasm/single_optimize.js
+++ /dev/null
@@ -1,29 +0,0 @@
-export function wasmSingleOptimize(optimizeConfig, artifacts, timeout = 300000) {
-    const worker = new Worker(new URL("@worker/optimize_artifact.js", import.meta.url))
-
-    return new Promise((resolve, reject) => {
-        const timer = setTimeout(() => {
-            reject("计算超时")
-        }, timeout)
-
-        worker.onmessage = e => {
-            if (e.data.type === "ready") {
-                worker.postMessage({
-                    optimizeConfig,
-                    artifacts,
-                })
-            } else {
-                const results = e.data.data.results
-                clearTimeout(timer)
-
-                resolve(results)
-            }
-        }
-
-        worker.onerror = () => {
-            reject("计算发生错误")
-        }
-    }).finally(() => {
-        worker.terminate()
-    })
-}
diff --git a/src/wasm/single_optimize.ts b/src/wasm/single_optimize.ts
new file mode 100644
index 00000000..b03b130a
--- /dev/null
+++ b/src/wasm/single_optimize.ts
@@ -0,0 +1,39 @@
+import { IArtifactWasm } from "@/types/artifact"
+
+export function wasmSingleOptimize(optimizeConfig: object, artifacts: IArtifactWasm[], timeout?: number, needCancel?: false): Promise<any>
+export function wasmSingleOptimize(optimizeConfig: object, artifacts: IArtifactWasm[], timeout: number, needCancel: true): [Promise<any>, () => void]
+export function wasmSingleOptimize(optimizeConfig: object, artifacts: IArtifactWasm[], timeout = 120000, needCancel = false): Promise<any> | [Promise<any>, () => void]{
+    const worker = new Worker(new URL("@worker/optimize_artifact.js", import.meta.url))
+    let cancel: (() => void) | null = null
+    let timer: number = -1
+    const promise = new Promise((resolve, reject) => {
+        cancel = () => {
+            reject("计算被中止")
+        }
+
+        timer = setTimeout(() => {
+            reject("计算超时")
+        }, timeout) as unknown as number
+
+        worker.onmessage = e => {
+            if (e.data.type === "ready") {
+                worker.postMessage({
+                    optimizeConfig,
+                    artifacts,
+                })
+            } else {
+                const results = e.data.data.results
+                resolve(results)
+            }
+        }
+
+        worker.onerror = () => {
+            reject("计算发生错误")
+        }
+    }).finally(() => {
+        worker.terminate()
+        clearTimeout(timer)
+    })
+
+    return needCancel ? [promise, cancel!] : promise
+}
diff --git a/yarn.lock b/yarn.lock
index 66e4c5bf..bbff6a11 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1439,6 +1439,11 @@
   resolved "https://registry.yarnpkg.com/@types/estree/-/estree-0.0.51.tgz#cfd70924a25a3fd32b218e5e420e6897e1ac4f40"
   integrity sha512-CuPgU6f3eT/XgKKPqKd/gLZV1Xmvf1a2R5POBOGQa6uv82xpls89HU5zKeVoyR8XzHd1RGNOlQlvUe3CFkjWNQ==
 
+"@types/events@^3.0.0":
+  version "3.0.0"
+  resolved "https://registry.npmmirror.com/@types/events/-/events-3.0.0.tgz#2862f3f58a9a7f7c3e78d79f130dd4d71c25c2a7"
+  integrity sha512-EaObqwIvayI5a8dCzhFrjKzVwKLxjoG9T6Ppd5CEo07LRKfQ8Yokw54r5+Wq7FaBQ+yXRvQAYPrHwya1/UFt9g==
+
 "@types/express-serve-static-core@*", "@types/express-serve-static-core@^4.17.18":
   version "4.17.29"
   resolved "https://registry.yarnpkg.com/@types/express-serve-static-core/-/express-serve-static-core-4.17.29.tgz#2a1795ea8e9e9c91b4a4bbe475034b20c1ec711c"
@@ -1507,6 +1512,11 @@
   resolved "https://registry.yarnpkg.com/@types/normalize-package-data/-/normalize-package-data-2.4.1.tgz#d3357479a0fdfdd5907fe67e17e0a85c906e1301"
   integrity sha512-Gj7cI7z+98M282Tqmp2K5EIsoouUEzbBJhQQzDE3jSIRk6r9gsz0oUokqIUR4u1R3dMHo0pDHM7sNOHyhulypw==
 
+"@types/object-hash@^2.2.1":
+  version "2.2.1"
+  resolved "https://registry.npmmirror.com/@types/object-hash/-/object-hash-2.2.1.tgz#67c169f8f033e0b62abbf81df2d00f4598d540b9"
+  integrity sha512-i/rtaJFCsPljrZvP/akBqEwUP2y5cZLOmvO+JaYnz01aPknrQ+hB5MRcO7iqCUsFaYfTG8kGfKUyboA07xeDHQ==
+
 "@types/parse-json@^4.0.0":
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/@types/parse-json/-/parse-json-4.0.0.tgz#2f8bb441434d163b35fb8ffdccd7138927ffb8c0"
@@ -1897,47 +1907,47 @@
     semver "^7.3.4"
     strip-ansi "^6.0.0"
 
-"@vue/compiler-core@3.2.37":
-  version "3.2.37"
-  resolved "https://registry.yarnpkg.com/@vue/compiler-core/-/compiler-core-3.2.37.tgz#b3c42e04c0e0f2c496ff1784e543fbefe91e215a"
-  integrity sha512-81KhEjo7YAOh0vQJoSmAD68wLfYqJvoiD4ulyedzF+OEk/bk6/hx3fTNVfuzugIIaTrOx4PGx6pAiBRe5e9Zmg==
+"@vue/compiler-core@3.2.41":
+  version "3.2.41"
+  resolved "https://registry.npmmirror.com/@vue/compiler-core/-/compiler-core-3.2.41.tgz#fb5b25f23817400f44377d878a0cdead808453ef"
+  integrity sha512-oA4mH6SA78DT+96/nsi4p9DX97PHcNROxs51lYk7gb9Z4BPKQ3Mh+BLn6CQZBw857Iuhu28BfMSRHAlPvD4vlw==
   dependencies:
     "@babel/parser" "^7.16.4"
-    "@vue/shared" "3.2.37"
+    "@vue/shared" "3.2.41"
     estree-walker "^2.0.2"
     source-map "^0.6.1"
 
-"@vue/compiler-dom@3.2.37":
-  version "3.2.37"
-  resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.2.37.tgz#10d2427a789e7c707c872da9d678c82a0c6582b5"
-  integrity sha512-yxJLH167fucHKxaqXpYk7x8z7mMEnXOw3G2q62FTkmsvNxu4FQSu5+3UMb+L7fjKa26DEzhrmCxAgFLLIzVfqQ==
+"@vue/compiler-dom@3.2.41":
+  version "3.2.41"
+  resolved "https://registry.npmmirror.com/@vue/compiler-dom/-/compiler-dom-3.2.41.tgz#dc63dcd3ce8ca8a8721f14009d498a7a54380299"
+  integrity sha512-xe5TbbIsonjENxJsYRbDJvthzqxLNk+tb3d/c47zgREDa/PCp6/Y4gC/skM4H6PIuX5DAxm7fFJdbjjUH2QTMw==
   dependencies:
-    "@vue/compiler-core" "3.2.37"
-    "@vue/shared" "3.2.37"
+    "@vue/compiler-core" "3.2.41"
+    "@vue/shared" "3.2.41"
 
-"@vue/compiler-sfc@3.2.37":
-  version "3.2.37"
-  resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-3.2.37.tgz#3103af3da2f40286edcd85ea495dcb35bc7f5ff4"
-  integrity sha512-+7i/2+9LYlpqDv+KTtWhOZH+pa8/HnX/905MdVmAcI/mPQOBwkHHIzrsEsucyOIZQYMkXUiTkmZq5am/NyXKkg==
+"@vue/compiler-sfc@3.2.41":
+  version "3.2.41"
+  resolved "https://registry.npmmirror.com/@vue/compiler-sfc/-/compiler-sfc-3.2.41.tgz#238fb8c48318408c856748f4116aff8cc1dc2a73"
+  integrity sha512-+1P2m5kxOeaxVmJNXnBskAn3BenbTmbxBxWOtBq3mQTCokIreuMULFantBUclP0+KnzNCMOvcnKinqQZmiOF8w==
   dependencies:
     "@babel/parser" "^7.16.4"
-    "@vue/compiler-core" "3.2.37"
-    "@vue/compiler-dom" "3.2.37"
-    "@vue/compiler-ssr" "3.2.37"
-    "@vue/reactivity-transform" "3.2.37"
-    "@vue/shared" "3.2.37"
+    "@vue/compiler-core" "3.2.41"
+    "@vue/compiler-dom" "3.2.41"
+    "@vue/compiler-ssr" "3.2.41"
+    "@vue/reactivity-transform" "3.2.41"
+    "@vue/shared" "3.2.41"
     estree-walker "^2.0.2"
     magic-string "^0.25.7"
     postcss "^8.1.10"
     source-map "^0.6.1"
 
-"@vue/compiler-ssr@3.2.37":
-  version "3.2.37"
-  resolved "https://registry.yarnpkg.com/@vue/compiler-ssr/-/compiler-ssr-3.2.37.tgz#4899d19f3a5fafd61524a9d1aee8eb0505313cff"
-  integrity sha512-7mQJD7HdXxQjktmsWp/J67lThEIcxLemz1Vb5I6rYJHR5vI+lON3nPGOH3ubmbvYGt8xEUaAr1j7/tIFWiEOqw==
+"@vue/compiler-ssr@3.2.41":
+  version "3.2.41"
+  resolved "https://registry.npmmirror.com/@vue/compiler-ssr/-/compiler-ssr-3.2.41.tgz#344f564d68584b33367731c04ffc949784611fcb"
+  integrity sha512-Y5wPiNIiaMz/sps8+DmhaKfDm1xgj6GrH99z4gq2LQenfVQcYXmHIOBcs5qPwl7jaW3SUQWjkAPKMfQemEQZwQ==
   dependencies:
-    "@vue/compiler-dom" "3.2.37"
-    "@vue/shared" "3.2.37"
+    "@vue/compiler-dom" "3.2.41"
+    "@vue/shared" "3.2.41"
 
 "@vue/component-compiler-utils@^3.1.0", "@vue/component-compiler-utils@^3.3.0":
   version "3.3.0"
@@ -1967,53 +1977,53 @@
   dependencies:
     vue-eslint-parser "^8.0.0"
 
-"@vue/reactivity-transform@3.2.37":
-  version "3.2.37"
-  resolved "https://registry.yarnpkg.com/@vue/reactivity-transform/-/reactivity-transform-3.2.37.tgz#0caa47c4344df4ae59f5a05dde2a8758829f8eca"
-  integrity sha512-IWopkKEb+8qpu/1eMKVeXrK0NLw9HicGviJzhJDEyfxTR9e1WtpnnbYkJWurX6WwoFP0sz10xQg8yL8lgskAZg==
+"@vue/reactivity-transform@3.2.41":
+  version "3.2.41"
+  resolved "https://registry.npmmirror.com/@vue/reactivity-transform/-/reactivity-transform-3.2.41.tgz#9ff938877600c97f646e09ac1959b5150fb11a0c"
+  integrity sha512-mK5+BNMsL4hHi+IR3Ft/ho6Za+L3FA5j8WvreJ7XzHrqkPq8jtF/SMo7tuc9gHjLDwKZX1nP1JQOKo9IEAn54A==
   dependencies:
     "@babel/parser" "^7.16.4"
-    "@vue/compiler-core" "3.2.37"
-    "@vue/shared" "3.2.37"
+    "@vue/compiler-core" "3.2.41"
+    "@vue/shared" "3.2.41"
     estree-walker "^2.0.2"
     magic-string "^0.25.7"
 
-"@vue/reactivity@3.2.37":
-  version "3.2.37"
-  resolved "https://registry.yarnpkg.com/@vue/reactivity/-/reactivity-3.2.37.tgz#5bc3847ac58828e2b78526e08219e0a1089f8848"
-  integrity sha512-/7WRafBOshOc6m3F7plwzPeCu/RCVv9uMpOwa/5PiY1Zz+WLVRWiy0MYKwmg19KBdGtFWsmZ4cD+LOdVPcs52A==
+"@vue/reactivity@3.2.41":
+  version "3.2.41"
+  resolved "https://registry.npmmirror.com/@vue/reactivity/-/reactivity-3.2.41.tgz#0ad3bdf76d76822da1502dc9f394dafd02642963"
+  integrity sha512-9JvCnlj8uc5xRiQGZ28MKGjuCoPhhTwcoAdv3o31+cfGgonwdPNuvqAXLhlzu4zwqavFEG5tvaoINQEfxz+l6g==
   dependencies:
-    "@vue/shared" "3.2.37"
+    "@vue/shared" "3.2.41"
 
-"@vue/runtime-core@3.2.37":
-  version "3.2.37"
-  resolved "https://registry.yarnpkg.com/@vue/runtime-core/-/runtime-core-3.2.37.tgz#7ba7c54bb56e5d70edfc2f05766e1ca8519966e3"
-  integrity sha512-JPcd9kFyEdXLl/i0ClS7lwgcs0QpUAWj+SKX2ZC3ANKi1U4DOtiEr6cRqFXsPwY5u1L9fAjkinIdB8Rz3FoYNQ==
+"@vue/runtime-core@3.2.41":
+  version "3.2.41"
+  resolved "https://registry.npmmirror.com/@vue/runtime-core/-/runtime-core-3.2.41.tgz#775bfc00b3fadbaddab77138f23322aee3517a76"
+  integrity sha512-0LBBRwqnI0p4FgIkO9q2aJBBTKDSjzhnxrxHYengkAF6dMOjeAIZFDADAlcf2h3GDALWnblbeprYYpItiulSVQ==
   dependencies:
-    "@vue/reactivity" "3.2.37"
-    "@vue/shared" "3.2.37"
+    "@vue/reactivity" "3.2.41"
+    "@vue/shared" "3.2.41"
 
-"@vue/runtime-dom@3.2.37":
-  version "3.2.37"
-  resolved "https://registry.yarnpkg.com/@vue/runtime-dom/-/runtime-dom-3.2.37.tgz#002bdc8228fa63949317756fb1e92cdd3f9f4bbd"
-  integrity sha512-HimKdh9BepShW6YozwRKAYjYQWg9mQn63RGEiSswMbW+ssIht1MILYlVGkAGGQbkhSh31PCdoUcfiu4apXJoPw==
+"@vue/runtime-dom@3.2.41":
+  version "3.2.41"
+  resolved "https://registry.npmmirror.com/@vue/runtime-dom/-/runtime-dom-3.2.41.tgz#cdf86be7410f7b15c29632a96ce879e5b4c9ab92"
+  integrity sha512-U7zYuR1NVIP8BL6jmOqmapRAHovEFp7CSw4pR2FacqewXNGqZaRfHoNLQsqQvVQ8yuZNZtxSZy0FFyC70YXPpA==
   dependencies:
-    "@vue/runtime-core" "3.2.37"
-    "@vue/shared" "3.2.37"
+    "@vue/runtime-core" "3.2.41"
+    "@vue/shared" "3.2.41"
     csstype "^2.6.8"
 
-"@vue/server-renderer@3.2.37":
-  version "3.2.37"
-  resolved "https://registry.yarnpkg.com/@vue/server-renderer/-/server-renderer-3.2.37.tgz#840a29c8dcc29bddd9b5f5ffa22b95c0e72afdfc"
-  integrity sha512-kLITEJvaYgZQ2h47hIzPh2K3jG8c1zCVbp/o/bzQOyvzaKiCquKS7AaioPI28GNxIsE/zSx+EwWYsNxDCX95MA==
+"@vue/server-renderer@3.2.41":
+  version "3.2.41"
+  resolved "https://registry.npmmirror.com/@vue/server-renderer/-/server-renderer-3.2.41.tgz#ca64552c05878f94e8d191ac439141c06c0fb2ad"
+  integrity sha512-7YHLkfJdTlsZTV0ae5sPwl9Gn/EGr2hrlbcS/8naXm2CDpnKUwC68i1wGlrYAfIgYWL7vUZwk2GkYLQH5CvFig==
   dependencies:
-    "@vue/compiler-ssr" "3.2.37"
-    "@vue/shared" "3.2.37"
+    "@vue/compiler-ssr" "3.2.41"
+    "@vue/shared" "3.2.41"
 
-"@vue/shared@3.2.37":
-  version "3.2.37"
-  resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.2.37.tgz#8e6adc3f2759af52f0e85863dfb0b711ecc5c702"
-  integrity sha512-4rSJemR2NQIo9Klm1vabqWjD8rs/ZaJSzMxkMNeJS6lHiUjjUeYFbooN19NgFjztubEKh3WlZUeOLVdbbUWHsw==
+"@vue/shared@3.2.41":
+  version "3.2.41"
+  resolved "https://registry.npmmirror.com/@vue/shared/-/shared-3.2.41.tgz#fbc95422df654ea64e8428eced96ba6ad555d2bb"
+  integrity sha512-W9mfWLHmJhkfAmV+7gDjcHeAWALQtgGT3JErxULl0oz6R6+3ug91I7IErs93eCFhPCZPHBs4QJS7YWEV7A3sxw==
 
 "@vue/vue-loader-v15@npm:vue-loader@^15.9.7":
   version "15.9.8"
@@ -4139,6 +4149,11 @@ ignore@^5.2.0:
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.2.0.tgz#6d3bac8fa7fe0d45d9f9be7bac2fc279577e345a"
   integrity sha512-CmxgYGiEPCLhfLnpPp1MoRmifwEIOgjcHXxOBjv7mY96c+eWScsOP9c112ZyLdWHi0FxHjI+4uVhKYp/gcdRmQ==
 
+immediate@~3.0.5:
+  version "3.0.6"
+  resolved "https://registry.npmmirror.com/immediate/-/immediate-3.0.6.tgz#9db1dbd0faf8de6fbe0f5dd5e56bb606280de69b"
+  integrity sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==
+
 immutable@^4.0.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/immutable/-/immutable-4.1.0.tgz#f795787f0db780183307b9eb2091fcac1f6fafef"
@@ -4458,6 +4473,13 @@ levn@^0.4.1:
     prelude-ls "^1.2.1"
     type-check "~0.4.0"
 
+lie@3.1.1:
+  version "3.1.1"
+  resolved "https://registry.npmmirror.com/lie/-/lie-3.1.1.tgz#9a436b2cc7746ca59de7a41fa469b3efb76bd87e"
+  integrity sha512-RiNhHysUjhrDQntfYSfY4MU24coXXdEOgw9WGcKHNeEwffDYbF//u87M1EWaMGzuFoSbqW0C9C6lEEhDOAswfw==
+  dependencies:
+    immediate "~3.0.5"
+
 lilconfig@^2.0.3:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/lilconfig/-/lilconfig-2.0.5.tgz#19e57fd06ccc3848fd1891655b5a447092225b25"
@@ -4496,6 +4518,13 @@ local-pkg@^0.4.1:
   resolved "https://registry.yarnpkg.com/local-pkg/-/local-pkg-0.4.1.tgz#e7b0d7aa0b9c498a1110a5ac5b00ba66ef38cfff"
   integrity sha512-lL87ytIGP2FU5PWwNDo0w3WhIo2gopIAxPg9RxDYF7m4rr5ahuZxP22xnJHIvaLTe4Z9P6uKKY2UHiwyB4pcrw==
 
+localforage@^1.10.0:
+  version "1.10.0"
+  resolved "https://registry.npmmirror.com/localforage/-/localforage-1.10.0.tgz#5c465dc5f62b2807c3a84c0c6a1b1b3212781dd4"
+  integrity sha512-14/H1aX7hzBBmmh7sGPd+AOMkkIrHM3Z1PAyGgZigA1H1p5O5ANnMyWzvpAETtG68/dC4pC0ncy3+PPGzXZHPg==
+  dependencies:
+    lie "3.1.1"
+
 locate-path@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-5.0.0.tgz#1afba396afd676a6d42504d0a67a3a7eb9f62aa0"
@@ -4562,7 +4591,7 @@ lodash.uniq@^4.5.0:
 
 lodash@^4.17.14, lodash@^4.17.20, lodash@^4.17.21:
   version "4.17.21"
-  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
+  resolved "https://registry.npmmirror.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
 
 log-symbols@^4.1.0:
@@ -6047,6 +6076,11 @@ sockjs@^0.3.24:
     uuid "^8.3.2"
     websocket-driver "^0.7.4"
 
+sortablejs@1.14.0:
+  version "1.14.0"
+  resolved "https://registry.npmmirror.com/sortablejs/-/sortablejs-1.14.0.tgz#6d2e17ccbdb25f464734df621d4f35d4ab35b3d8"
+  integrity sha512-pBXvQCs5/33fdN1/39pPL0NZF20LeRbLQ5jtnheIPN9JQAaufGjKdWduZn4U7wCtVuzKhmRkI0DFYHYRbB2H1w==
+
 "source-map-js@>=0.6.2 <2.0.0", source-map-js@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c"
@@ -6695,16 +6729,23 @@ vue-template-es2015-compiler@^1.9.0:
   resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz#1ee3bc9a16ecbf5118be334bb15f9c46f82f5825"
   integrity sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==
 
-vue@^3.2.36:
-  version "3.2.37"
-  resolved "https://registry.yarnpkg.com/vue/-/vue-3.2.37.tgz#da220ccb618d78579d25b06c7c21498ca4e5452e"
-  integrity sha512-bOKEZxrm8Eh+fveCqS1/NkG/n6aMidsI6hahas7pa0w/l7jkbssJVsRhVDs07IdDq7h9KHswZOgItnwJAgtVtQ==
+vue@^3.2.41:
+  version "3.2.41"
+  resolved "https://registry.npmmirror.com/vue/-/vue-3.2.41.tgz#ed452b8a0f7f2b962f055c8955139c28b1c06806"
+  integrity sha512-uuuvnrDXEeZ9VUPljgHkqB5IaVO8SxhPpqF2eWOukVrBnRBx2THPSGQBnVRt0GrIG1gvCmFXMGbd7FqcT1ixNQ==
+  dependencies:
+    "@vue/compiler-dom" "3.2.41"
+    "@vue/compiler-sfc" "3.2.41"
+    "@vue/runtime-dom" "3.2.41"
+    "@vue/server-renderer" "3.2.41"
+    "@vue/shared" "3.2.41"
+
+vuedraggable@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.npmmirror.com/vuedraggable/-/vuedraggable-4.1.0.tgz#edece68adb8a4d9e06accff9dfc9040e66852270"
+  integrity sha512-FU5HCWBmsf20GpP3eudURW3WdWTKIbEIQxh9/8GE806hydR9qZqRRxRE3RjqX7PkuLuMQG/A7n3cfj9rCEchww==
   dependencies:
-    "@vue/compiler-dom" "3.2.37"
-    "@vue/compiler-sfc" "3.2.37"
-    "@vue/runtime-dom" "3.2.37"
-    "@vue/server-renderer" "3.2.37"
-    "@vue/shared" "3.2.37"
+    sortablejs "1.14.0"
 
 watchpack@^2.3.1:
   version "2.4.0"