mirror of
https://github.com/Powerful-517/yys-editor.git
synced 2026-06-13 14:14:56 +00:00
feat: add onmyoji-flow migration prompt
This commit is contained in:
+60
@@ -9,6 +9,9 @@ import {TabPaneName, TabsPaneContext} from "element-plus";
|
|||||||
import YysRank from "@/components/YysRank.vue";
|
import YysRank from "@/components/YysRank.vue";
|
||||||
|
|
||||||
const filesStore = useFilesStore();
|
const filesStore = useFilesStore();
|
||||||
|
const NEW_PROJECT_URL = 'https://fireschain.org/onmyoji-flow/';
|
||||||
|
const REDIRECT_PROMPT_SESSION_KEY = 'yys-editor.new-project-redirect-prompted';
|
||||||
|
const REDIRECT_PROMPT_DISABLED_KEY = 'yys-editor.new-project-redirect-disabled';
|
||||||
|
|
||||||
const yysRef = ref(null);
|
const yysRef = ref(null);
|
||||||
const width = ref('100%');
|
const width = ref('100%');
|
||||||
@@ -16,6 +19,37 @@ const height = ref('100vh');
|
|||||||
const toolbarHeight = 48; // 工具栏的高度
|
const toolbarHeight = 48; // 工具栏的高度
|
||||||
const windowHeight = ref(window.innerHeight);
|
const windowHeight = ref(window.innerHeight);
|
||||||
const contentHeight = computed(() => `${windowHeight.value - toolbarHeight}px`);
|
const contentHeight = computed(() => `${windowHeight.value - toolbarHeight}px`);
|
||||||
|
const showRedirectPrompt = ref(false);
|
||||||
|
const dontShowRedirectPromptAgain = ref(false);
|
||||||
|
|
||||||
|
const rememberRedirectPromptChoice = () => {
|
||||||
|
if (dontShowRedirectPromptAgain.value) {
|
||||||
|
window.localStorage.setItem(REDIRECT_PROMPT_DISABLED_KEY, 'true');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const showNewProjectRedirectPrompt = () => {
|
||||||
|
if (window.localStorage.getItem(REDIRECT_PROMPT_DISABLED_KEY) === 'true') {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (window.sessionStorage.getItem(REDIRECT_PROMPT_SESSION_KEY) === 'true') {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
window.sessionStorage.setItem(REDIRECT_PROMPT_SESSION_KEY, 'true');
|
||||||
|
showRedirectPrompt.value = true;
|
||||||
|
};
|
||||||
|
|
||||||
|
const goToNewProject = () => {
|
||||||
|
rememberRedirectPromptChoice();
|
||||||
|
window.location.assign(NEW_PROJECT_URL);
|
||||||
|
};
|
||||||
|
|
||||||
|
const stayOnLegacyProject = () => {
|
||||||
|
rememberRedirectPromptChoice();
|
||||||
|
showRedirectPrompt.value = false;
|
||||||
|
};
|
||||||
|
|
||||||
const onResizing = (x, y, width, height) => {
|
const onResizing = (x, y, width, height) => {
|
||||||
width.value = width;
|
width.value = width;
|
||||||
@@ -64,6 +98,7 @@ onMounted(() => {
|
|||||||
window.addEventListener('resize', () => {
|
window.addEventListener('resize', () => {
|
||||||
windowHeight.value = window.innerHeight;
|
windowHeight.value = window.innerHeight;
|
||||||
});
|
});
|
||||||
|
showNewProjectRedirectPrompt();
|
||||||
});
|
});
|
||||||
|
|
||||||
onUnmounted(() => {
|
onUnmounted(() => {
|
||||||
@@ -112,6 +147,26 @@ const activeFileGroups = computed(() => {
|
|||||||
</el-tabs>
|
</el-tabs>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<el-dialog
|
||||||
|
v-model="showRedirectPrompt"
|
||||||
|
title="前往新版 onmyoji-flow"
|
||||||
|
width="420px"
|
||||||
|
:close-on-click-modal="false"
|
||||||
|
@close="rememberRedirectPromptChoice"
|
||||||
|
>
|
||||||
|
<p class="redirect-prompt-text">
|
||||||
|
yys-editor 已迁移到新项目 onmyoji-flow。新版会继续维护资源与功能,是否现在前往?
|
||||||
|
</p>
|
||||||
|
<el-checkbox v-model="dontShowRedirectPromptAgain">
|
||||||
|
以后不再提示
|
||||||
|
</el-checkbox>
|
||||||
|
<template #footer>
|
||||||
|
<span class="dialog-footer">
|
||||||
|
<el-button @click="stayOnLegacyProject">继续使用旧版</el-button>
|
||||||
|
<el-button type="primary" @click="goToNewProject">前往新版</el-button>
|
||||||
|
</span>
|
||||||
|
</template>
|
||||||
|
</el-dialog>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@@ -157,4 +212,9 @@ const activeFileGroups = computed(() => {
|
|||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.redirect-prompt-text {
|
||||||
|
margin: 0 0 16px;
|
||||||
|
line-height: 1.7;
|
||||||
|
color: #303133;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
@@ -1,6 +1,9 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="toolbar">
|
<div class="toolbar">
|
||||||
<div>
|
<div>
|
||||||
|
<el-button class="new-project-link" type="success" icon="Promotion" @click="goToNewProject">
|
||||||
|
前往新版
|
||||||
|
</el-button>
|
||||||
<el-button icon="Upload" type="primary" @click="handleImport">{{ t('import') }}</el-button>
|
<el-button icon="Upload" type="primary" @click="handleImport">{{ t('import') }}</el-button>
|
||||||
<el-button icon="Download" type="primary" @click="handleExport">{{ t('export') }}</el-button>
|
<el-button icon="Download" type="primary" @click="handleExport">{{ t('export') }}</el-button>
|
||||||
<el-button icon="Share" type="primary" @click="prepareCapture">{{ t('prepareCapture') }}</el-button>
|
<el-button icon="Share" type="primary" @click="prepareCapture">{{ t('prepareCapture') }}</el-button>
|
||||||
@@ -87,10 +90,15 @@ import {useGlobalMessage} from "@/ts/useGlobalMessage";
|
|||||||
|
|
||||||
const filesStore = useFilesStore();
|
const filesStore = useFilesStore();
|
||||||
const { showMessage } = useGlobalMessage();
|
const { showMessage } = useGlobalMessage();
|
||||||
|
const NEW_PROJECT_URL = 'https://fireschain.org/onmyoji-flow/';
|
||||||
|
|
||||||
// 获取当前的 i18n 实例
|
// 获取当前的 i18n 实例
|
||||||
const {t} = useI18n();
|
const {t} = useI18n();
|
||||||
|
|
||||||
|
const goToNewProject = () => {
|
||||||
|
window.location.assign(NEW_PROJECT_URL);
|
||||||
|
};
|
||||||
|
|
||||||
// 定义响应式数据
|
// 定义响应式数据
|
||||||
const state = reactive({
|
const state = reactive({
|
||||||
previewImage: null, // 用于存储预览图像的数据URL
|
previewImage: null, // 用于存储预览图像的数据URL
|
||||||
@@ -393,6 +401,11 @@ const handleClose = (done) => {
|
|||||||
z-index: 100;
|
z-index: 100;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.new-project-link {
|
||||||
|
font-weight: 700;
|
||||||
|
box-shadow: 0 0 0 2px rgba(82, 196, 26, 0.18);
|
||||||
|
}
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|||||||
Reference in New Issue
Block a user