361 lines
11 KiB
Vue
361 lines
11 KiB
Vue
<script setup lang="ts">
|
||
import { onMounted, ref } from 'vue'
|
||
import type { UploadFileInfo } from 'naive-ui'
|
||
import { NAlert, NButton, NCheckbox, NCheckboxGroup, NDivider, NInput, NSpace, NUpload, useMessage } from 'naive-ui'
|
||
import { RoundCardModal, SvgIcon } from '@/components/common'
|
||
import type { IconGroup, ImportJsonResult } from '@/utils/jsonImportExport'
|
||
import { ConfigVersionLowError, FormatError, exportJson, importJsonString } from '@/utils/jsonImportExport'
|
||
import { get as getAbout } from '@/api/system/about'
|
||
import { edit as addGroup, getList as getGroupList } from '@/api/panel/itemIconGroup'
|
||
import { addMultiple as addMultipleIcons, getListByGroupId } from '@/api/panel/itemIcon'
|
||
|
||
import { t } from '@/locales'
|
||
|
||
interface ItemGroup extends Panel.ItemIconGroup {
|
||
items?: Panel.ItemInfo[]
|
||
}
|
||
|
||
const ms = useMessage()
|
||
|
||
const jsonData = ref<string | null>(null)
|
||
const importWarning = ref<string[]>([])
|
||
const importRoundModalShow = ref(false)
|
||
const exportRoundModalShow = ref(false)
|
||
const loading = ref(false)
|
||
const uploadLoading = ref(false)
|
||
const version = ref('') // 当前软件版本
|
||
const debug = ref(false)
|
||
|
||
const importObj = ref<ImportJsonResult | null> (null)
|
||
|
||
const importItems = ref<string[]>(['icons']) // 当前软件版本支持导入导出的项目
|
||
const checkedItems = ref<string[]>(['icons']) // 当前准备导入的项目
|
||
|
||
// 导入图标
|
||
async function importIcons(): Promise<string | null> {
|
||
const groups = importObj.value?.geticons()
|
||
const batchSize = 50
|
||
|
||
if (!groups)
|
||
return null
|
||
|
||
try {
|
||
for (let i = 0; i < groups.length; i++) {
|
||
const element = groups[i]
|
||
|
||
// 创建组得到组id
|
||
const createGroupResponse = await addGroup<Panel.ItemIconGroup>({
|
||
title: element.title,
|
||
sort: element.sort,
|
||
})
|
||
|
||
if (createGroupResponse.code === 0) {
|
||
const groupId = createGroupResponse.data?.id
|
||
|
||
if (groupId) {
|
||
let addIcons: Panel.ItemInfo[] = []
|
||
|
||
// 批量添加子项
|
||
for (let iconI = 0; iconI < element.children.length; iconI++) {
|
||
const iconElement = element.children[iconI]
|
||
|
||
addIcons.push({
|
||
title: iconElement.title,
|
||
sort: iconElement.sort,
|
||
icon: iconElement.icon,
|
||
url: iconElement.url,
|
||
lanUrl: iconElement.lanUrl,
|
||
description: iconElement.description,
|
||
openMethod: iconElement.openMethod,
|
||
itemIconGroupId: groupId,
|
||
})
|
||
|
||
// 每 batchSize 个添加一次
|
||
if (addIcons.length === batchSize || iconI === element.children.length - 1) {
|
||
const response = await addMultipleIcons(addIcons)
|
||
|
||
if (response.code !== 0)
|
||
return response.msg
|
||
|
||
addIcons = []
|
||
}
|
||
}
|
||
}
|
||
}
|
||
else {
|
||
return createGroupResponse.msg
|
||
}
|
||
}
|
||
|
||
return null
|
||
}
|
||
catch (error) {
|
||
if (error instanceof Error)
|
||
return `${t('common.failed')}: ${error.message}`
|
||
else
|
||
return t('common.unknownError')
|
||
}
|
||
}
|
||
|
||
// 导出图标
|
||
async function exportIcons(): Promise<IconGroup[]> {
|
||
const iconGroups: IconGroup[] = []
|
||
|
||
// 获取组数据
|
||
const { code, data } = await getGroupList<Common.ListResponse<ItemGroup[]>>()
|
||
|
||
if (code === 0) {
|
||
// 使用 Promise.all 等待所有异步操作完成
|
||
await Promise.all(data.list.map(async (element) => {
|
||
const group: IconGroup = {
|
||
title: element.title as string,
|
||
sort: element.sort as 0,
|
||
children: [],
|
||
}
|
||
|
||
const res = await getListByGroupId<Common.ListResponse<Panel.ItemInfo[]>>(element.id)
|
||
|
||
if (res.code === 0) {
|
||
for (const iconElement of res.data.list) {
|
||
group.children.push({
|
||
icon: iconElement.icon,
|
||
sort: iconElement.sort || 99999,
|
||
title: iconElement.title,
|
||
url: iconElement.url,
|
||
lanUrl: iconElement.lanUrl || '',
|
||
description: iconElement.description || '',
|
||
openMethod: iconElement.openMethod || 1,
|
||
})
|
||
}
|
||
}
|
||
|
||
iconGroups.push(group)
|
||
}))
|
||
|
||
return iconGroups
|
||
}
|
||
else {
|
||
return []
|
||
}
|
||
}
|
||
|
||
onMounted(() => {
|
||
interface Version {
|
||
versionName: string
|
||
versionCode: number
|
||
}
|
||
|
||
getAbout<Version>().then((res) => {
|
||
if (res.code === 0)
|
||
version.value = res.data.versionName
|
||
})
|
||
})
|
||
|
||
function handleFileChange(options: { file: UploadFileInfo; fileList: Array<UploadFileInfo> }) {
|
||
uploadLoading.value = true
|
||
console.log(options.file.file)
|
||
if (options.file.file) {
|
||
const reader = new FileReader()
|
||
reader.onload = () => {
|
||
if (reader.result) {
|
||
jsonData.value = reader.result as string
|
||
importCheck()
|
||
}
|
||
else {
|
||
ms.error(`${t('common.failed')}: ${t('common.repeatLater')}`)
|
||
}
|
||
uploadLoading.value = false
|
||
}
|
||
reader.readAsText(options.file.file)
|
||
}
|
||
}
|
||
|
||
// 验证导入文件
|
||
function importCheck() {
|
||
importWarning.value = []
|
||
if (jsonData.value) {
|
||
try {
|
||
importObj.value = importJsonString(jsonData.value)
|
||
if (importObj.value) {
|
||
if (!importObj.value.isPassCheckMd5())
|
||
importWarning.value.push(t('apps.exportImport.fileModified'))
|
||
|
||
if (!importObj.value.isPassCheckConfigVersionOld())
|
||
importWarning.value.push(t('apps.exportImport.warnConfigFileLow'))
|
||
|
||
if (!importObj.value.isPassCheckConfigVersionNew())
|
||
importWarning.value.push(t('apps.exportImport.softwareVersionLow'))
|
||
|
||
// （暂时不做）此处可以判断，当前的配置文件是否存在的导入项目（不存在隐藏importItems里面的值）操作变量：importItems
|
||
|
||
// 通过了验证,打开弹窗
|
||
importRoundModalShow.value = !importRoundModalShow.value
|
||
|
||
// console.log(importObj.value.geticons())
|
||
}
|
||
}
|
||
catch (error) {
|
||
if (error instanceof ConfigVersionLowError) {
|
||
ms.error(t('apps.exportImport.errorConfigFileLow'))
|
||
console.error('The configuration file version is too low to be compatible')
|
||
}
|
||
else if (error instanceof FormatError) {
|
||
ms.error(t('apps.exportImport.errorConfigFileFormat'))
|
||
console.error('The format is incorrect and cannot be imported')
|
||
}
|
||
}
|
||
}
|
||
else {
|
||
ms.error(t('apps.exportImport.errorConfigFileFormat'))
|
||
}
|
||
}
|
||
|
||
// 开始导出
|
||
async function handleStartExport() {
|
||
loading.value = true
|
||
// console.log('要导出的项目', checkedItems.value)
|
||
// 获取软件版本号
|
||
const exportResult = exportJson(version.value)
|
||
if (checkedItems.value.includes('icons')) {
|
||
console.log('export icons ...')
|
||
const iconGroups = await exportIcons()
|
||
exportResult.addIconsData(iconGroups)
|
||
console.log('export icons finish', iconGroups)
|
||
}
|
||
|
||
// console.log('导出结果')
|
||
|
||
jsonData.value = exportResult.string()
|
||
exportResult.exportFile()
|
||
loading.value = false
|
||
exportRoundModalShow.value = false
|
||
// ms.success(t('common.success'))
|
||
}
|
||
|
||
// 开始导入
|
||
async function handleStartImport() {
|
||
loading.value = true
|
||
if (checkedItems.value.includes('icons')) {
|
||
console.log('export icons ...')
|
||
const errMsg = await importIcons()
|
||
if (errMsg !== null)
|
||
ms.success(`${t('common.failed')}:${errMsg}`)
|
||
}
|
||
|
||
loading.value = false
|
||
importRoundModalShow.value = false
|
||
ms.success(`${t('common.success')}, ${t('common.refreshPage')}`)
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<div class="pt-2">
|
||
<NAlert type="info" :bordered="false">
|
||
<p>{{ $t('apps.exportImport.tip') }}</p>
|
||
</NAlert>
|
||
<div class="flex justify-center m-[50px]">
|
||
<div class="m-[10px]">
|
||
<NUpload
|
||
accept=".sun-panel.json,.sunpanel.json"
|
||
directory-dnd
|
||
:default-upload="false"
|
||
:show-file-list="false"
|
||
@change="handleFileChange"
|
||
>
|
||
<NButton type="info" size="large" :loading="uploadLoading">
|
||
<template #icon>
|
||
<SvgIcon icon="fa6:solid-file-import" />
|
||
</template>
|
||
{{ $t('apps.exportImport.import') }}
|
||
</NButton>
|
||
</NUpload>
|
||
</div>
|
||
<div class="m-[10px]">
|
||
<NButton type="info" size="large" @click="exportRoundModalShow = !exportRoundModalShow">
|
||
<template #icon>
|
||
<SvgIcon icon="fa6:solid-file-export" />
|
||
</template>
|
||
{{ $t('apps.exportImport.export') }}
|
||
</NButton>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="flex justify-center">
|
||
<a href="https://hslr-s.github.io/sun-panel-tool-page/#/" target="_blank">{{ $t('apps.exportImport.transmuteStandard') }}</a>
|
||
</div>
|
||
|
||
<!-- 调试模式 -->
|
||
<div v-if="debug">
|
||
<NButton @click="importCheck">
|
||
检查导入
|
||
</NButton>
|
||
|
||
<!-- <NButton @click="exportJsonS">
|
||
导出JSON
|
||
</NButton> -->
|
||
|
||
<NButton @click="jsonData = ''">
|
||
清空导入数据
|
||
</NButton>
|
||
|
||
<NInput
|
||
v-model:value="jsonData"
|
||
type="textarea"
|
||
placeholder="基本的 Textarea"
|
||
/>
|
||
|
||
<div v-if="jsonData">
|
||
<h2>JSON 数据</h2>
|
||
<pre>{{ jsonData }}</pre>
|
||
</div>
|
||
</div>
|
||
|
||
<RoundCardModal v-model:show="importRoundModalShow" style="max-width: 400px;" :title=" $t('apps.exportImport.import')">
|
||
<div v-if="importWarning.length > 0">
|
||
<NAlert :title="$t('common.warning')" type="warning">
|
||
<div v-for="(text, index) in importWarning " :key="index">
|
||
{{ text }}
|
||
</div>
|
||
</NAlert>
|
||
</div>
|
||
<NDivider title-placement="left">
|
||
{{ $t('apps.exportImport.selectImportData') }}
|
||
</NDivider>
|
||
|
||
<NSpace justify="center" style="margin-top: 20px;">
|
||
<NCheckboxGroup v-model:value="checkedItems">
|
||
<NCheckbox v-if="importItems.includes('icons')" value="icons" :label="$t('apps.exportImport.moduleIcon')" />
|
||
<NCheckbox v-if="importItems.includes('style')" value="style" :label="$t('apps.exportImport.moduleStyle')" />
|
||
</NCheckboxGroup>
|
||
</NSpace>
|
||
<NSpace justify="center">
|
||
<div class="mt-[50px]">
|
||
<NButton type="success" :disabled="checkedItems.length === 0" :loading="loading" @click="handleStartImport">
|
||
{{ $t('common.continue') }}
|
||
</NButton>
|
||
</div>
|
||
</NSpace>
|
||
</RoundCardModal>
|
||
|
||
<RoundCardModal v-model:show="exportRoundModalShow" style="max-width: 400px;" :title=" $t('apps.exportImport.export')">
|
||
<NDivider title-placement="left">
|
||
{{ $t('apps.exportImport.selectExportData') }}
|
||
</NDivider>
|
||
|
||
<NSpace justify="center" style="margin-top: 20px;">
|
||
<NCheckboxGroup v-model:value="checkedItems">
|
||
<NCheckbox v-if="importItems.includes('icons')" value="icons" :label="$t('apps.exportImport.moduleIcon')" />
|
||
<NCheckbox v-if="importItems.includes('style')" value="style" :label="$t('apps.exportImport.moduleStyle')" />
|
||
</NCheckboxGroup>
|
||
</NSpace>
|
||
<NSpace justify="center">
|
||
<div class="mt-[50px]">
|
||
<NButton type="success" :disabled="checkedItems.length === 0" :loading="loading" @click="handleStartExport">
|
||
{{ $t('common.continue') }}
|
||
</NButton>
|
||
</div>
|
||
</NSpace>
|
||
</RoundCardModal>
|
||
</div>
|
||
</template>
|