mirror of
https://github.com/Powerful-517/yys-editor.git
synced 2025-04-27 06:33:25 +00:00
更新公告，水印保存，数据保存提示优化
This commit is contained in:
parent
39e55c2e38
commit
08bb1bdb7f
src
@ -4,13 +4,10 @@
|
||||
<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="Share" type="primary" @click="prepareCapture">{{ t('prepareCapture') }}</el-button>
|
||||
<el-button icon="Setting" type="primary" @click="state.showWatermarkDialog = true">{{
|
||||
t('setWatermark')
|
||||
}}
|
||||
</el-button>
|
||||
<!-- 新增的按钮 -->
|
||||
<el-button type="info" @click="showUpdateLog">更新日志</el-button>
|
||||
<el-button type="warning" @click="showFeedbackForm">问题反馈</el-button>
|
||||
<el-button icon="Setting" type="primary" @click="state.showWatermarkDialog = true">{{ t('setWatermark') }}</el-button>
|
||||
<el-button type="info" @click="loadExample">{{ t('loadExample') }}</el-button>
|
||||
<el-button type="info" @click="showUpdateLog">{{ t('updateLog') }}</el-button>
|
||||
<el-button type="warning" @click="showFeedbackForm">{{ t('feedback') }}</el-button>
|
||||
</div>
|
||||
|
||||
<!-- 更新日志对话框 -->
|
||||
@ -25,7 +22,7 @@
|
||||
</ul>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 更新日志对话框 -->
|
||||
<!-- 问题反馈对话框 -->
|
||||
<el-dialog v-model="state.showFeedbackFormDialog" title="更新日志" width="60%">
|
||||
<span style="font-size: 24px;">备注阴阳师</span>
|
||||
<br/>
|
||||
@ -79,13 +76,17 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {ref, reactive} from 'vue';
|
||||
import {ref, reactive, onMounted} from 'vue';
|
||||
import html2canvas from "html2canvas";
|
||||
import {useI18n} from 'vue-i18n';
|
||||
import updateLogs from "../data/updateLog.json"
|
||||
import filesStoreExample from "../data/filesStoreExample.json"
|
||||
import {useFilesStore} from "@/ts/files";
|
||||
import {ElMessageBox} from "element-plus";
|
||||
import {useGlobalMessage} from "@/ts/useGlobalMessage";
|
||||
|
||||
const filesStore = useFilesStore();
|
||||
const { showMessage } = useGlobalMessage();
|
||||
|
||||
// 获取当前的 i18n 实例
|
||||
const {t} = useI18n();
|
||||
@ -99,18 +100,47 @@ const state = reactive({
|
||||
showFeedbackFormDialog: false, // 控制反馈表单对话框的显示状态
|
||||
});
|
||||
|
||||
const loadExample = () => {
|
||||
ElMessageBox.confirm(
|
||||
'加载样例会覆盖当前数据，是否覆盖？',
|
||||
'提示',
|
||||
{
|
||||
confirmButtonText: '覆盖',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
}
|
||||
).then(() => {
|
||||
filesStore.$patch({fileList: filesStoreExample});
|
||||
showMessage('success', '数据已恢复');
|
||||
}).catch(() => {
|
||||
showMessage('info', '选择了不恢复旧数据');
|
||||
});
|
||||
}
|
||||
|
||||
const CURRENT_APP_VERSION = updateLogs[0].version;
|
||||
const showUpdateLog = () => {
|
||||
state.showUpdateLogDialog = !state.showUpdateLogDialog;
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
const lastVersion = localStorage.getItem('appVersion');
|
||||
|
||||
if (lastVersion !== CURRENT_APP_VERSION) {
|
||||
// 如果版本号不同，则显示更新日志对话框
|
||||
state.showUpdateLogDialog = true;
|
||||
// 更新本地存储中的版本号为当前版本
|
||||
localStorage.setItem('appVersion', CURRENT_APP_VERSION);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
const showFeedbackForm = () => {
|
||||
state.showFeedbackFormDialog = !state.showFeedbackFormDialog;
|
||||
};
|
||||
|
||||
const handleExport = () => {
|
||||
const dataStr = JSON.stringify(filesStore.fileList, null, 2);
|
||||
const blob = new Blob([dataStr], { type: 'application/json;charset=utf-8' });
|
||||
const blob = new Blob([dataStr], {type: 'application/json;charset=utf-8'});
|
||||
const url = URL.createObjectURL(blob);
|
||||
const link = document.createElement('a');
|
||||
link.href = url;
|
||||
@ -132,8 +162,8 @@ const handleImport = () => {
|
||||
const data = JSON.parse(e.target.result as string);
|
||||
if (data[0].visible === true) {
|
||||
// 新版本格式：直接替换 fileList
|
||||
filesStore.$patch({ fileList: data });
|
||||
} else {
|
||||
filesStore.$patch({fileList: data});
|
||||
} else {
|
||||
// 旧版本格式：仅包含 groups 数组
|
||||
const newFile = {
|
||||
label: `File ${filesStore.fileList.length + 1}`,
|
||||
@ -154,18 +184,27 @@ const handleImport = () => {
|
||||
};
|
||||
|
||||
const watermark = reactive({
|
||||
text: '示例水印',
|
||||
fontSize: 30,
|
||||
color: 'rgba(184, 184, 184, 0.3)',
|
||||
angle: -20,
|
||||
rows: 1, // 新增行数
|
||||
cols: 1 // 新增列数
|
||||
text: localStorage.getItem('watermark.text') || '示例水印',
|
||||
fontSize: Number(localStorage.getItem('watermark.fontSize')) || 30,
|
||||
color: localStorage.getItem('watermark.color') || 'rgba(184, 184, 184, 0.3)',
|
||||
angle: Number(localStorage.getItem('watermark.angle')) || -20,
|
||||
rows: Number(localStorage.getItem('watermark.rows')) || 1,
|
||||
cols: Number(localStorage.getItem('watermark.cols')) || 1,
|
||||
});
|
||||
|
||||
const applyWatermarkSettings = () => {
|
||||
// 保存水印设置到 localStorage
|
||||
localStorage.setItem('watermark.text', watermark.text);
|
||||
localStorage.setItem('watermark.fontSize', String(watermark.fontSize));
|
||||
localStorage.setItem('watermark.color', watermark.color);
|
||||
localStorage.setItem('watermark.angle', String(watermark.angle));
|
||||
localStorage.setItem('watermark.rows', String(watermark.rows));
|
||||
localStorage.setItem('watermark.cols', String(watermark.cols));
|
||||
|
||||
state.showWatermarkDialog = false;
|
||||
};
|
||||
|
||||
|
||||
// 计算视觉总高度
|
||||
function calculateVisualHeight(selector) {
|
||||
// 1. 获取所有目标元素
|
||||
|
||||
183
src/data/filesStoreExample.json
Normal file
183
src/data/filesStoreExample.json
Normal file
@ -0,0 +1,183 @@
|
||||
[
|
||||
{
|
||||
"label": "Welcome",
|
||||
"name": "1",
|
||||
"type":"PVE",
|
||||
"visible": true,
|
||||
"groups": [
|
||||
{
|
||||
"shortDescription": "<h1>鬼灵歌姬</h1><h2><em>这是一个演示项目，用于测试显示6个式神的对齐效果</em></h2>",
|
||||
"groupInfo": [
|
||||
{
|
||||
"avatar": "/assets/Shikigami/sp/372.png",
|
||||
"name": "因幡辉夜姬",
|
||||
"rarity": "SP"
|
||||
},
|
||||
{
|
||||
"avatar": "/assets/Shikigami/ssr/356.png",
|
||||
"name": "千姬",
|
||||
"rarity": "SSR"
|
||||
},
|
||||
{
|
||||
"avatar": "/assets/Shikigami/sp/554.png",
|
||||
"name": "纺愿缘结神",
|
||||
"rarity": "SP"
|
||||
},
|
||||
{
|
||||
"avatar": "/assets/Shikigami/ssr/556.png",
|
||||
"name": "天照",
|
||||
"rarity": "SSR"
|
||||
},
|
||||
{
|
||||
"avatar": "/assets/Shikigami/ssr/557.png",
|
||||
"name": "伊邪那美",
|
||||
"rarity": "SSR"
|
||||
},
|
||||
{
|
||||
"avatar": "/assets/Shikigami/sp/367.png",
|
||||
"name": "绘世花鸟卷",
|
||||
"rarity": "SP"
|
||||
}
|
||||
],
|
||||
"details": "<h2><strong>开局因幡普攻主怪后锁二</strong></h2>"
|
||||
},
|
||||
{
|
||||
"shortDescription": "<h1>魂土15秒</h1><p><em>相同式神编辑不同属性</em></p>",
|
||||
"groupInfo": [
|
||||
{
|
||||
"avatar": "/assets/Shikigami/ssr/364.png",
|
||||
"name": "阿修罗",
|
||||
"rarity": "SSR",
|
||||
"properties": {
|
||||
"edit": true,
|
||||
"yuhun": {
|
||||
"yuhunSetEffect": [
|
||||
{
|
||||
"name": "狂骨",
|
||||
"shortName": "狂",
|
||||
"type": "attack",
|
||||
"avatar": "/assets/Yuhun/狂骨.png"
|
||||
},
|
||||
{
|
||||
"name": "荒骷髅",
|
||||
"shortName": "荒",
|
||||
"type": "PVE",
|
||||
"avatar": "/assets/Yuhun/荒骷髅.png"
|
||||
}
|
||||
],
|
||||
"target": "1",
|
||||
"property2": [
|
||||
"Attack"
|
||||
],
|
||||
"property4": [
|
||||
"Attack"
|
||||
],
|
||||
"property6": [
|
||||
"Crit",
|
||||
"CritDamage"
|
||||
]
|
||||
},
|
||||
"levelRequired": "40",
|
||||
"speed": "",
|
||||
"skillRequiredMode": "all",
|
||||
"skillRequired": [
|
||||
"5",
|
||||
"5",
|
||||
"5"
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"avatar": "/assets/Shikigami/ssr/364.png",
|
||||
"name": "阿修罗",
|
||||
"rarity": "SSR",
|
||||
"properties": {
|
||||
"edit": true,
|
||||
"yuhun": {
|
||||
"yuhunSetEffect": [
|
||||
{
|
||||
"name": "狂骨",
|
||||
"shortName": "狂",
|
||||
"type": "attack",
|
||||
"avatar": "/assets/Yuhun/狂骨.png"
|
||||
},
|
||||
{
|
||||
"name": "鬼灵歌伎",
|
||||
"shortName": "歌伎",
|
||||
"type": "PVE",
|
||||
"avatar": "/assets/Yuhun/鬼灵歌伎.png"
|
||||
}
|
||||
],
|
||||
"target": "0",
|
||||
"property2": [
|
||||
"Attack"
|
||||
],
|
||||
"property4": [
|
||||
"Attack"
|
||||
],
|
||||
"property6": [
|
||||
"Crit",
|
||||
"CritDamage"
|
||||
]
|
||||
},
|
||||
"levelRequired": "40",
|
||||
"speed": "",
|
||||
"skillRequiredMode": "all",
|
||||
"skillRequired": [
|
||||
"5",
|
||||
"5",
|
||||
"5"
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"avatar": "/assets/Shikigami/ssr/370.png",
|
||||
"name": "饭笥",
|
||||
"rarity": "SSR"
|
||||
},
|
||||
{
|
||||
"avatar": "/assets/Shikigami/ssr/369.png",
|
||||
"name": "食灵",
|
||||
"rarity": "SSR"
|
||||
},
|
||||
{
|
||||
"avatar": "/assets/Shikigami/r/205.png",
|
||||
"name": "座敷童子",
|
||||
"rarity": "R"
|
||||
}
|
||||
],
|
||||
"details": ""
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"label": "Test",
|
||||
"name": "2",
|
||||
"visible": true,
|
||||
"type":"PVE",
|
||||
"groups": [
|
||||
{
|
||||
"shortDescription": "<h1>御魂·悲鸣</h1><p>这是一个演示项目，用于测试不同标签页的切换效果</p>",
|
||||
"groupInfo": [
|
||||
{},
|
||||
{},
|
||||
{},
|
||||
{},
|
||||
{}
|
||||
],
|
||||
"details": ""
|
||||
},
|
||||
{
|
||||
"shortDescription": "",
|
||||
"groupInfo": [
|
||||
{},
|
||||
{},
|
||||
{},
|
||||
{},
|
||||
{}
|
||||
],
|
||||
"details": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
@ -1,10 +1,10 @@
|
||||
[
|
||||
{
|
||||
"version": "2.2.0",
|
||||
"date": "2025-03-19",
|
||||
"date": "2025-03-21",
|
||||
"changes": [
|
||||
"优化文本编辑显示",
|
||||
"增加缓存机制，支持在未保存的情况下恢复数据"
|
||||
"增加缓存机制，支持在未保存的情况下恢复数据,水印设置信息"
|
||||
]
|
||||
},
|
||||
{
|
||||
|
||||
@ -2,6 +2,9 @@
|
||||
"import": "导入",
|
||||
"export": "导出",
|
||||
"setWatermark": "设置水印",
|
||||
"loadExample": "加载样例",
|
||||
"updateLog":"更新日志",
|
||||
"feedback":"问题反馈",
|
||||
"Copy": "复制",
|
||||
"Paste": "粘贴",
|
||||
"AddGroup": "新增小队",
|
||||
|
||||
219
src/ts/files.ts
219
src/ts/files.ts
@ -4,12 +4,33 @@ import {useGlobalMessage} from "./useGlobalMessage";
|
||||
|
||||
const { showMessage } = useGlobalMessage();
|
||||
|
||||
function getDefaultState() {
|
||||
return {
|
||||
fileList: [{
|
||||
"label": "File 1",
|
||||
"name": "1",
|
||||
"visible": true,
|
||||
"type":"PVE",
|
||||
"groups": [
|
||||
{
|
||||
"shortDescription": "",
|
||||
"groupInfo": [
|
||||
{}, {}, {}, {}, {}
|
||||
],
|
||||
"details": ""
|
||||
}
|
||||
]
|
||||
}],
|
||||
activeFile: "1",
|
||||
};
|
||||
}
|
||||
|
||||
function saveStateToLocalStorage(state) {
|
||||
localStorage.setItem('filesStore', JSON.stringify(state));
|
||||
}
|
||||
|
||||
function clearLocalStorage() {
|
||||
localStorage.clear()
|
||||
function clearFilesStoreLocalStorage() {
|
||||
localStorage.removeItem('filesStore')
|
||||
}
|
||||
|
||||
function loadStateFromLocalStorage() {
|
||||
@ -17,199 +38,17 @@ function loadStateFromLocalStorage() {
|
||||
}
|
||||
|
||||
export const useFilesStore = defineStore('files', {
|
||||
state: () => ({
|
||||
fileList: [
|
||||
{
|
||||
"label": "Welcome",
|
||||
"name": "1",
|
||||
"type":"PVE",
|
||||
"visible": true,
|
||||
"groups": [
|
||||
{
|
||||
"shortDescription": "<h1>鬼灵歌姬</h1><h2><em>这是一个演示项目，用于测试显示6个式神的对齐效果</em></h2>",
|
||||
"groupInfo": [
|
||||
{
|
||||
"avatar": "/assets/Shikigami/sp/372.png",
|
||||
"name": "因幡辉夜姬",
|
||||
"rarity": "SP"
|
||||
},
|
||||
{
|
||||
"avatar": "/assets/Shikigami/ssr/356.png",
|
||||
"name": "千姬",
|
||||
"rarity": "SSR"
|
||||
},
|
||||
{
|
||||
"avatar": "/assets/Shikigami/sp/554.png",
|
||||
"name": "纺愿缘结神",
|
||||
"rarity": "SP"
|
||||
},
|
||||
{
|
||||
"avatar": "/assets/Shikigami/ssr/556.png",
|
||||
"name": "天照",
|
||||
"rarity": "SSR"
|
||||
},
|
||||
{
|
||||
"avatar": "/assets/Shikigami/ssr/557.png",
|
||||
"name": "伊邪那美",
|
||||
"rarity": "SSR"
|
||||
},
|
||||
{
|
||||
"avatar": "/assets/Shikigami/sp/367.png",
|
||||
"name": "绘世花鸟卷",
|
||||
"rarity": "SP"
|
||||
}
|
||||
],
|
||||
"details": "<h2><strong>开局因幡普攻主怪后锁二</strong></h2>"
|
||||
},
|
||||
{
|
||||
"shortDescription": "<h1>魂土15秒</h1><p><em>相同式神编辑不同属性</em></p>",
|
||||
"groupInfo": [
|
||||
{
|
||||
"avatar": "/assets/Shikigami/ssr/364.png",
|
||||
"name": "阿修罗",
|
||||
"rarity": "SSR",
|
||||
"properties": {
|
||||
"edit": true,
|
||||
"yuhun": {
|
||||
"yuhunSetEffect": [
|
||||
{
|
||||
"name": "狂骨",
|
||||
"shortName": "狂",
|
||||
"type": "attack",
|
||||
"avatar": "/assets/Yuhun/狂骨.png"
|
||||
},
|
||||
{
|
||||
"name": "荒骷髅",
|
||||
"shortName": "荒",
|
||||
"type": "PVE",
|
||||
"avatar": "/assets/Yuhun/荒骷髅.png"
|
||||
}
|
||||
],
|
||||
"target": "1",
|
||||
"property2": [
|
||||
"Attack"
|
||||
],
|
||||
"property4": [
|
||||
"Attack"
|
||||
],
|
||||
"property6": [
|
||||
"Crit",
|
||||
"CritDamage"
|
||||
]
|
||||
},
|
||||
"levelRequired": "40",
|
||||
"speed": "",
|
||||
"skillRequiredMode": "all",
|
||||
"skillRequired": [
|
||||
"5",
|
||||
"5",
|
||||
"5"
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"avatar": "/assets/Shikigami/ssr/364.png",
|
||||
"name": "阿修罗",
|
||||
"rarity": "SSR",
|
||||
"properties": {
|
||||
"edit": true,
|
||||
"yuhun": {
|
||||
"yuhunSetEffect": [
|
||||
{
|
||||
"name": "狂骨",
|
||||
"shortName": "狂",
|
||||
"type": "attack",
|
||||
"avatar": "/assets/Yuhun/狂骨.png"
|
||||
},
|
||||
{
|
||||
"name": "鬼灵歌伎",
|
||||
"shortName": "歌伎",
|
||||
"type": "PVE",
|
||||
"avatar": "/assets/Yuhun/鬼灵歌伎.png"
|
||||
}
|
||||
],
|
||||
"target": "0",
|
||||
"property2": [
|
||||
"Attack"
|
||||
],
|
||||
"property4": [
|
||||
"Attack"
|
||||
],
|
||||
"property6": [
|
||||
"Crit",
|
||||
"CritDamage"
|
||||
]
|
||||
},
|
||||
"levelRequired": "40",
|
||||
"speed": "",
|
||||
"skillRequiredMode": "all",
|
||||
"skillRequired": [
|
||||
"5",
|
||||
"5",
|
||||
"5"
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"avatar": "/assets/Shikigami/ssr/370.png",
|
||||
"name": "饭笥",
|
||||
"rarity": "SSR"
|
||||
},
|
||||
{
|
||||
"avatar": "/assets/Shikigami/ssr/369.png",
|
||||
"name": "食灵",
|
||||
"rarity": "SSR"
|
||||
},
|
||||
{
|
||||
"avatar": "/assets/Shikigami/r/205.png",
|
||||
"name": "座敷童子",
|
||||
"rarity": "R"
|
||||
}
|
||||
],
|
||||
"details": ""
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"label": "Test",
|
||||
"name": "2",
|
||||
"visible": true,
|
||||
"type":"PVE",
|
||||
"groups": [
|
||||
{
|
||||
"shortDescription": "<h1>御魂·悲鸣</h1><p>这是一个演示项目，用于测试不同标签页的切换效果</p>",
|
||||
"groupInfo": [
|
||||
{},
|
||||
{},
|
||||
{},
|
||||
{},
|
||||
{}
|
||||
],
|
||||
"details": ""
|
||||
},
|
||||
{
|
||||
"shortDescription": "",
|
||||
"groupInfo": [
|
||||
{},
|
||||
{},
|
||||
{},
|
||||
{},
|
||||
{}
|
||||
],
|
||||
"details": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
activeFile: "1",
|
||||
}),
|
||||
state: () => getDefaultState(),
|
||||
getters: {
|
||||
visibleFiles: (state) => state.fileList.filter(file => file.visible),
|
||||
},
|
||||
actions: {
|
||||
initializeWithPrompt() {
|
||||
const savedState = loadStateFromLocalStorage();
|
||||
if (savedState) {
|
||||
const defaultState = getDefaultState();
|
||||
|
||||
const isSame = JSON.stringify(savedState) === JSON.stringify(defaultState);
|
||||
if (savedState && !isSame) {
|
||||
ElMessageBox.confirm(
|
||||
'检测到有未保存的旧数据，是否恢复？',
|
||||
'提示',
|
||||
@ -223,7 +62,7 @@ export const useFilesStore = defineStore('files', {
|
||||
this.activeFile = savedState.activeFile || "1";
|
||||
showMessage('success', '数据已恢复');
|
||||
}).catch(() => {
|
||||
clearLocalStorage();
|
||||
clearFilesStoreLocalStorage();
|
||||
showMessage('info', '选择了不恢复旧数据');
|
||||
});
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user