mojiahui/buildadmin-webman
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

初始化

Browse Source
This commit is contained in:
zhenhui
2026-03-09 17:35:53 +08:00
commit 74f322b7c2
577 changed files with 57404 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

126
web/src/views/backend/module/components/buy.vue Normal file
View File

@@ -0,0 +1,126 @@
<template>
<div>
<el-dialog v-model="state.dialog.buy" class="buy-dialog" :title="t('module.Confirm order info')" top="20vh" width="28%">
<div v-loading="state.loading.buy">
<el-alert :title="t('module.Module installation warning')" type="error" :center="true" :closable="false" />
<div v-if="!isEmpty(state.buy.info)" class="order-info">
<div class="order-info-item">{{ t('module.Order title') }}：{{ state.buy.info.title }}</div>
<div class="order-info-item">{{ t('module.Order No') }}：{{ state.buy.info.sn }}</div>
<div class="order-info-item">{{ t('module.Purchase user') }}：{{ specificUserName(baAccount) }}</div>
<div class="order-info-item">
{{ t('module.Order price') }}：
<span v-if="!state.buy.info.purchased" class="order-price">
{{ currency(state.buy.info.amount, state.buy.info.pay.money ? 1 : 0) }}
</span>
<span v-else class="order-price">{{ t('module.Purchased, can be installed directly') }}</span>
</div>
<div class="order-footer">
<div class="order-agreement">
<el-checkbox v-model="state.buy.agreement" size="small" label="" />
<span>
{{ t('module.Understand and agree') }}《
<a
href="https://doc.buildadmin.com/guide/other/appendix/templateAgreement.html"
target="_blank"
rel="noopener noreferrer"
>
{{ t('module.Module purchase and use agreement') }}
</a>
》
</span>
</div>
<div class="order-info-buttons">
<template v-if="!state.buy.info.purchased">
<el-button
v-if="state.buy.info.pay.score"
:loading="state.loading.common"
@click="onPay('score')"
v-blur
type="warning"
>
{{ t('module.Point payment') }}
</el-button>
<template v-if="state.buy.info.pay.money">
<el-button :loading="state.loading.common" @click="onPay('balance')" v-blur type="warning">
{{ t('module.Balance payment') }}
</el-button>
<el-button :loading="state.loading.common" @click="onPay('wx')" v-blur type="success">
{{ t('module.Wechat payment') }}
</el-button>
<el-button :loading="state.loading.common" @click="onPay('zfb')" v-blur type="primary">
{{ t('module.Alipay payment') }}
</el-button>
</template>
</template>
<el-button
v-else
:loading="state.loading.common"
@click="onPreInstallModule(state.buy.info.uid, state.buy.info.id, true)"
v-blur
type="warning"
>
{{ t('module.Install now') }}
</el-button>
</div>
</div>
</div>
</div>
</el-dialog>
</div>
</template>
<script setup lang="ts">
import { isEmpty } from 'lodash-es'
import { useI18n } from 'vue-i18n'
import { currency, onPay, onPreInstallModule, specificUserName } from '../index'
import { state } from '../store'
import { useBaAccount } from '/@/stores/baAccount'
const { t } = useI18n()
const baAccount = useBaAccount()
</script>
<style scoped lang="scss">
.order-info {
padding: 10px 0;
.order-info-item {
padding-top: 6px;
}
.order-footer {
padding-top: 20px;
.order-agreement {
display: flex;
align-items: center;
font-size: 12px;
span {
padding-left: 4px;
}
a {
text-decoration: none;
color: var(--el-color-primary);
}
}
.order-info-buttons {
padding-top: 15px;
display: flex;
align-items: center;
justify-content: center;
}
}
}
@media screen and (max-width: 1440px) {
:deep(.buy-dialog) {
--el-dialog-width: 26% !important;
}
}
@media screen and (max-width: 1280px) {
:deep(.buy-dialog) {
--el-dialog-width: 32% !important;
}
}
@media screen and (max-width: 1024px) {
:deep(.buy-dialog) {
--el-dialog-width: 70% !important;
}
}
</style>

73
web/src/views/backend/module/components/commonDialog.vue Normal file
View File

@@ -0,0 +1,73 @@
<template>
<div>
<el-dialog
:close-on-press-escape="state.common.quickClose"
:title="state.common.dialogTitle"
:close-on-click-modal="state.common.quickClose"
v-model="state.dialog.common"
class="common-dialog"
>
<el-scrollbar :height="500">
<!-- 公共dialog形式的loading -->
<div
v-if="state.common.type == 'loading'"
v-loading="true"
:element-loading-text="state.common.loadingTitle ? $t('module.stateTitle ' + state.common.loadingTitle) : ''"
:key="state.common.loadingComponentKey"
class="common-loading"
></div>
<!-- 选择安装版本 -->
<SelectVersion v-if="state.common.type == 'selectVersion'" />
<!-- 安装冲突 -->
<InstallConflict v-if="state.common.type == 'installConflict'" />
<!-- 禁用冲突 -->
<ConfirmFileConflict v-if="state.common.type == 'disableConfirmConflict'" />
<!-- 安装/禁用结束 -->
<CommonDone v-if="state.common.type == 'done'" />
<!-- 上传安装 -->
<UploadInstall v-if="state.common.type == 'uploadInstall'" />
</el-scrollbar>
</el-dialog>
</div>
</template>
<script setup lang="ts">
import { state } from '../store'
import CommonDone from './commonDone.vue'
import SelectVersion from './commonSelectVersion.vue'
import ConfirmFileConflict from './confirmFileConflict.vue'
import InstallConflict from './installConflict.vue'
import UploadInstall from './uploadInstall.vue'
</script>
<style scoped lang="scss">
:deep(.common-dialog) .el-dialog__body {
padding: 10px 20px;
}
.common-dialog {
height: 500px;
}
.common-loading {
height: 400px;
}
@media screen and (max-width: 1440px) {
:deep(.common-dialog) {
--el-dialog-width: 60% !important;
}
}
@media screen and (max-width: 1280px) {
:deep(.common-dialog) {
--el-dialog-width: 80% !important;
}
}
@media screen and (max-width: 1024px) {
:deep(.common-dialog) {
--el-dialog-width: 92% !important;
}
}
</style>

288
web/src/views/backend/module/components/commonDone.vue Normal file
View File

@@ -0,0 +1,288 @@
<template>
<div class="install-done">
<div class="install-done-title">
<span v-if="state.common.moduleState == moduleInstallState.INSTALLED">
{{ t('module.Congratulations, module installation is complete') }}
</span>
<span v-else-if="state.common.moduleState == moduleInstallState.DISABLE">{{ t('module.Module is disabled') }}</span>
<span v-else-if="state.common.moduleState == moduleInstallState.DEPENDENT_WAIT_INSTALL">
{{ t('module.Congratulations, the code of the module is ready') }}
</span>
<span v-else>{{ t('module.Unknown state') }}</span>
</div>
<div class="install-tis-box">
<div v-if="state.common.dependInstallState != 'none'" class="depend-box">
<div class="depend-loading" v-if="state.common.dependInstallState == 'executing'" v-loading="true"></div>
<div class="depend-tis">
<div v-if="state.common.dependInstallState == 'executing'">
<span class="color-red">{{ t('module.Do not refresh the page!') }}</span>
<span v-if="state.common.moduleState == moduleInstallState.DISABLE">
{{ t('module.New adjustment of dependency detected') }}
</span>
<span v-else-if="state.common.moduleState == moduleInstallState.DEPENDENT_WAIT_INSTALL">
{{ t('module.This module adds new dependencies') }}
</span>
<span>，</span>
<span>
{{ t('module.The built-in terminal of the system is automatically installing these dependencies, please wait~') }}
</span>
<span class="span-a" @click="showTerminal">{{ t('module.View progress') }}</span>
</div>
<div v-if="state.common.dependInstallState == 'success'" class="color-green">
{{ t('module.Dependency installation completed~') }}
</div>
<div v-if="state.common.dependInstallState == 'fail'" class="exec-fail color-red">
{{ t('module.Dependency installation fail 1') }}
<span class="span-a" @click="showTerminal">{{ t('module.Dependency installation fail 2') }}</span>
{{ t('module.Dependency installation fail 3') }}
<el-link target="_blank" type="primary" href="https://doc.buildadmin.com/guide/install/manualOperation.html">
{{ t('module.Dependency installation fail 4') }}
</el-link>
</div>
</div>
</div>
<div v-else-if="state.common.moduleState == moduleInstallState.INSTALLED" class="depend-tis">
{{ t('module.This module does not add new dependencies') }}
</div>
<div v-else>{{ t('module.There is no adjustment for system dependency') }}</div>
</div>
<div v-if="state.common.dependInstallState == 'fail'" class="install-tis-box text-align-center">
<div class="install-tis">
{{ t('module.Dependency installation fail 5') }}
<span class="span-a" @click="onConfirmDepend">
{{ t('module.Dependency installation fail 6') }}
</span>
{{ t('module.Dependency installation fail 7') }}
<span class="dependency-installation-fail-tips">
{{ t('module.dependency-installation-fail-tips') }}
</span>
</div>
</div>
<div class="install-tis-box">
<div class="install-tis">
{{ t('module.please') }}
{{ state.common.moduleState == moduleInstallState.DISABLE ? '' : t('module.After installation 1') }}
{{ t('module.Manually clean up the system and browser cache') }}
</div>
</div>
<div class="install-tis-box">
<div class="install-form">
<FormItem
:label="
(state.common.moduleState == moduleInstallState.DISABLE ? '' : t('module.After installation 2')) +
t('module.Automatically execute reissue command?')
"
v-model="form.rebuild"
type="radio"
:input-attr="{
border: true,
content: { 0: t('module.no'), 1: t('module.yes') },
}"
/>
</div>
</div>
<div class="install-tis-box" v-if="hotUpdateState.dirtyFile && state.common.moduleState != moduleInstallState.DISABLE">
<div class="install-form">
<el-form-item :label="t('module.After installation 2') + t('module.Restart Vite hot server')">
<BaInput
v-model="form.reloadHotServer"
type="radio"
:attr="{
class: 'hot-server-input',
border: true,
content: {
0: t('vite.Later') + t('module.Manual restart'),
1: t('module.Restart Now'),
},
}"
/>
<el-popover :width="360" placement="top">
<div>
<div class="el-popover__title">{{ t('vite.Reload hot server title') }}</div>
<div class="reload-hot-server-content">
<p>
<span>{{ t('vite.Reload hot server tips 1') }}</span>
<span>【{{ t(`vite.Close type ${hotUpdateState.closeType}`) }}】</span>
<span>{{ t('vite.Reload hot server tips 2') }}</span>
</p>
<p>{{ t('vite.Reload hot server tips 3') }}</p>
<p>{{ t('module.Restart Vite hot server tips') }}</p>
</div>
</div>
<template #reference>
<div class="block-help hot-server-tips">{{ t('module.detailed information') }}？</div>
</template>
</el-popover>
</el-form-item>
</div>
</div>
<div class="install-done-button-box">
<el-button
v-blur
:disabled="state.common.dependInstallState != 'executing' || state.common.moduleState == moduleInstallState.INSTALLED ? false : true"
size="large"
class="install-done-button"
type="primary"
:loading="state.loading.common"
@click="onSubmitInstallDone"
>
{{ state.common.moduleState == moduleInstallState.DISABLE ? t('Complete') : t('module.End of installation') }}
</el-button>
</div>
</div>
</template>
<script setup lang="ts">
import { ElMessageBox } from 'element-plus'
import { reactive } from 'vue'
import { useI18n } from 'vue-i18n'
import { onRefreshTableData } from '../index'
import { state } from '../store'
import { moduleInstallState } from '../types'
import { dependentInstallComplete } from '/@/api/backend/module'
import BaInput from '/@/components/baInput/index.vue'
import FormItem from '/@/components/formItem/index.vue'
import { taskStatus } from '/@/stores/constant/terminalTaskStatus'
import { useTerminal } from '/@/stores/terminal'
import { hotUpdateState, reloadServer } from '/@/utils/vite'
const { t } = useI18n()
const terminal = useTerminal()
const form = reactive({
rebuild: 0,
reloadHotServer: 0,
})
const showTerminal = () => {
terminal.toggle(true)
}
const onSubmitInstallDone = () => {
state.dialog.common = false
if (form.rebuild == 1) {
terminal.toggle(true)
terminal.addTaskPM('web-build', false, '', (res: number) => {
if (res == taskStatus.Success) {
terminal.toggle(false)
if (form.reloadHotServer == 1 && state.common.moduleState != moduleInstallState.DISABLE) {
reloadServer('modules')
}
}
})
} else if (form.reloadHotServer == 1 && state.common.moduleState != moduleInstallState.DISABLE) {
reloadServer('modules')
}
}
const onConfirmDepend = () => {
ElMessageBox.confirm(t('module.Is the command that failed on the WEB terminal executed manually or in other ways successfully?'), t('Reminder'), {
confirmButtonText: t('module.yes'),
cancelButtonText: t('Cancel'),
type: 'warning',
}).then(() => {
state.loading.common = true
dependentInstallComplete(state.common.uid).then(() => {
onRefreshTableData()
state.loading.common = false
state.common.dependInstallState = 'success'
})
})
}
</script>
<style scoped lang="scss">
.install-done-title {
font-size: var(--el-font-size-extra-large);
color: var(--el-color-success);
text-align: center;
}
.text-align-center {
text-align: center;
}
.install-tis-box {
padding: 20px;
margin: 20px auto;
width: 70%;
border: 1px solid var(--el-border-color-lighter);
border-radius: var(--el-border-radius-base);
display: flex;
align-items: center;
justify-content: center;
.dependency-installation-fail-tips {
display: block;
font-size: var(--el-font-size-extra-small);
text-align: center;
padding-top: 5px;
color: var(--el-text-color-regular);
}
}
.depend-box {
display: flex;
align-items: center;
justify-content: center;
}
.install-tis {
color: var(--el-color-warning);
}
.depend-loading {
width: 30px;
height: 30px;
margin-right: 36px;
}
.span-a {
color: var(--el-color-primary);
cursor: pointer;
&:hover {
color: var(--el-color-primary-light-5);
}
}
.install-form :deep(.ba-input-item-radio) {
margin-bottom: 0;
}
.exec-fail {
display: flex;
}
.color-red {
color: var(--el-color-danger);
}
.color-green {
color: var(--el-color-success);
}
.install-done-button-box {
display: flex;
align-items: center;
justify-content: center;
.install-done-button {
width: 120px;
}
}
.reload-hot-server-content {
font-size: var(--el-font-size-small);
p {
margin-bottom: 6px;
}
}
.hot-server-input {
width: 100%;
}
.hot-server-tips {
width: auto;
cursor: pointer;
}
@media screen and (max-width: 1600px) {
:deep(.install-tis-box) {
width: 76%;
}
}
@media screen and (max-width: 1280px) {
:deep(.install-tis-box) {
width: 80%;
}
}
@media screen and (max-width: 900px) {
:deep(.install-tis-box) {
width: 96%;
flex-wrap: wrap;
}
}
</style>

134
web/src/views/backend/module/components/commonSelectVersion.vue Normal file
View File

@@ -0,0 +1,134 @@
<template>
<div>
<el-table :data="state.common.versions" class="w100" stripe>
<el-table-column property="version" align="center" :label="t('module.Version')" />
<el-table-column property="short_describe" :show-overflow-tooltip="true" align="center" :label="t('module.Description')" />
<el-table-column property="available_system_version_text" align="center" :label="t('module.Available system version')">
<template #default="scope">
<div v-if="scope.row.available_system_version && state.sysVersion">
<div class="available-system-version">
<Icon
v-if="compareVersion(scope.row.available_system_version)"
name="el-icon-CircleCheckFilled"
color="var(--el-color-success)"
size="14"
/>
<Icon v-else name="el-icon-CircleCloseFilled" size="14" color="var(--el-color-danger)" />
<div class="available-system-version-text">{{ scope.row.available_system_version_text }}</div>
</div>
</div>
<div v-else>-</div>
</template>
</el-table-column>
<el-table-column property="createtime_text" align="center" :label="t('Create time')" />
<el-table-column :label="t('module.Install')" align="center" :min-width="140">
<template #default="scope">
<div v-if="scope.row.downloadable">
<div v-if="isLocalModuleVersion(scope.row.version)" class="renewal-text">{{ t('module.Current installed version') }}</div>
<div v-else-if="!compareVersion(scope.row.available_system_version)">{{ t('module.Insufficient system version') }}</div>
<div v-else>
<el-button type="primary" @click="onInstall(scope.row.uid, scope.row.order_id, scope.row.version)">
{{ t('module.Click to install') }}
</el-button>
</div>
</div>
<el-tooltip
v-else
effect="dark"
:content="
t('module.Order expiration time', {
expiration_time: timeFormat(scope.row.order_expiration_time),
create_time: timeFormat(scope.row.createtime),
})
"
placement="top"
>
<div class="renewal">
<div class="renewal-text">{{ t('module.Versions released beyond the authorization period') }}</div>
<el-button @click="onBuy(true)" type="danger">{{ t('module.Renewal') }}</el-button>
</div>
</el-tooltip>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script setup lang="ts">
import { memoize } from 'lodash-es'
import { useI18n } from 'vue-i18n'
import { execInstall, onBuy, showCommonLoading } from '../index'
import { state } from '../store'
import { timeFormat } from '/@/utils/common'
const { t } = useI18n()
const formatSysVersion = memoize((sysVersion: string) => {
// 去掉 sysVersion 开头的 v
sysVersion = sysVersion.replace(/^v/, '')
// 以 . 分割，不足两位的补 0
sysVersion = sysVersion
.split('.')
.map((item) => {
return item.padStart(2, '0')
})
.join('')
return parseInt(sysVersion)
})
const isLocalModuleVersion = (version: string) => {
const localModule = state.installedModule.find((item) => {
return item.uid == state.common.uid
})
if (localModule) {
version = version.replace(/^v/, '')
localModule.version = localModule.version.replace(/^v/, '')
if (version == localModule.version) {
return true
}
}
return false
}
const compareVersion = memoize((version: string): boolean => {
const sysVersion = formatSysVersion(state.sysVersion)
return sysVersion > parseInt(version)
})
const onInstall = (uid: string, id: number, version: string) => {
state.dialog.common = true
state.common.dialogTitle = t('module.Install')
showCommonLoading('download')
// 关闭其他弹窗
state.dialog.baAccount = false
state.dialog.buy = false
state.dialog.goodsInfo = false
execInstall(uid, id, version, state.common.update)
}
</script>
<style scoped lang="scss">
.renewal {
display: flex;
align-items: center;
justify-content: center;
.renewal-text {
font-size: 12px;
margin-right: 6px;
}
}
.available-system-version {
display: flex;
align-items: center;
justify-content: center;
.available-system-version-text {
margin-left: 4px;
}
}
</style>

90
web/src/views/backend/module/components/confirmFileConflict.vue Normal file
View File

@@ -0,0 +1,90 @@
<template>
<div>
<div class="confirm-file-conflict">
<template v-if="state.common.disableConflictFile.length">
<div class="conflict-title">{{ $t('module.File conflict') }}</div>
<el-alert :closable="false" :center="true" :title="$t('module.Update warning')" class="alert-warning" type="warning"></el-alert>
<el-table :data="state.common.disableConflictFile" stripe border :style="{ width: '100%', marginBottom: '20px' }">
<el-table-column prop="file" :label="$t('module.Conflict file')" />
</el-table>
</template>
<template v-if="state.common.disableDependConflict.length > 0">
<div class="conflict-title">{{ $t('module.The module declares the added dependencies') }}</div>
<el-table :data="state.common.disableDependConflict" stripe border style="width: 100%">
<el-table-column prop="env" :label="$t('module.environment')">
<template #default="scope">
<span v-if="scope.row.env">{{ $t('module.env ' + scope.row.env) }}</span>
</template>
</el-table-column>
<el-table-column prop="dependTitle" :label="$t('module.Dependencies')" />
<el-table-column prop="solution" width="200" :label="$t('module.Treatment scheme')" align="center">
<template #default="scope">
<el-select v-model="scope.row.solution">
<el-option :label="$t('Delete')" value="delete"></el-option>
<el-option :label="$t('module.retain')" value="retain"></el-option>
</el-select>
</template>
</el-table-column>
</el-table>
</template>
</div>
<div class="center-buttons">
<el-button
v-blur
class="center-button"
:loading="state.loading.common"
:disabled="state.loading.common"
size="large"
type="primary"
@click="onDisable(true)"
>
{{ $t('module.Confirm to disable the module') }}
</el-button>
<el-button v-blur class="center-button" size="large" @click="cancelDisable()"> {{ $t('Cancel') }} </el-button>
</div>
</div>
</template>
<script setup lang="ts">
import { state } from '../store'
import { onDisable } from '../index'
const cancelDisable = () => {
state.dialog.common = false
state.goodsInfo.enable = true
}
</script>
<style scoped lang="scss">
.confirm-file-conflict {
min-height: 400px;
}
.conflict-alert {
width: 500px;
margin: 0 auto;
}
.alert-warning {
margin: 20px auto;
width: 500px;
}
.depend-conflict-tips {
text-align: center;
}
.text-bold {
font-weight: bold;
}
.conflict-title {
font-size: var(--el-font-size-large);
text-align: center;
margin-bottom: 20px;
}
.center-buttons {
display: flex;
justify-content: center;
margin: 20px auto;
}
.center-button {
width: 120px;
}
</style>

610
web/src/views/backend/module/components/goodsInfo.vue Normal file
View File

@@ -0,0 +1,610 @@
<template>
<div>
<el-dialog v-model="state.dialog.goodsInfo" class="goods-info-dialog" :title="t('module.detailed information')" width="60%">
<el-scrollbar v-loading="state.loading.goodsInfo" :key="state.goodsInfo.uid" :height="500">
<div class="goods-info">
<div class="goods-images">
<el-carousel height="300" v-if="state.goodsInfo.images" indicator-position="outside">
<el-carousel-item class="goods-image-item" v-for="(image, idx) in state.goodsInfo.images" :key="idx">
<el-image fit="contain" :preview-src-list="state.goodsInfo.images" :preview-teleported="true" :src="image"></el-image>
</el-carousel-item>
</el-carousel>
</div>
<div class="goods-basic">
<h4 class="goods-basic-title">{{ state.goodsInfo.title }}</h4>
<div class="goods-tag">
<el-tag v-for="(tag, idx) in state.goodsInfo.tags" :key="idx" :type="tag.type ? tag.type : 'primary'">
{{ tag.name }}
</el-tag>
</div>
<div class="basic-item">
<div class="basic-item-title">{{ t('module.Price') }}</div>
<div class="basic-item-price">
{{
typeof state.goodsInfo.currency_select != 'undefined'
? currency(state.goodsInfo.present_price, state.goodsInfo.currency_select)
: '-'
}}
</div>
</div>
<div class="basic-item">
<div class="basic-item-title">{{ t('module.Last updated') }}</div>
<div class="basic-item-content">{{ state.goodsInfo.updatetime ? timeFormat(state.goodsInfo.updatetime) : '-' }}</div>
</div>
<div class="basic-item">
<div class="basic-item-title">{{ t('module.Published on') }}</div>
<div class="basic-item-content">{{ state.goodsInfo.createtime ? timeFormat(state.goodsInfo.createtime) : '-' }}</div>
</div>
<div v-if="!installButtonState.stateSwitch.includes(state.goodsInfo.state)" class="basic-item">
<div class="basic-item-title">{{ t('module.amount of downloads') }}</div>
<div class="basic-item-content">{{ state.goodsInfo.downloads ? state.goodsInfo.downloads : '-' }}</div>
</div>
<div class="basic-item">
<div class="basic-item-title">{{ t('module.Module classification') }}</div>
<div class="basic-item-content">{{ state.goodsInfo.category ? state.goodsInfo.category.name : '-' }}</div>
</div>
<div class="basic-item">
<div class="basic-item-title">{{ t('module.Module documentation') }}</div>
<div class="basic-item-content">
<el-link
type="primary"
class="basic-item-link"
v-if="state.goodsInfo.docs"
target="_blank"
:href="`https://doc.buildadmin.com/md/${state.goodsInfo.docs.name ? state.goodsInfo.docs.name : state.goodsInfo.docs.id}`"
rel="noopener noreferrer"
>
{{ t('module.Click to access') }}
</el-link>
<span v-else>-</span>
</div>
</div>
<div class="basic-item">
<div class="basic-item-title">{{ t('module.Developer Homepage') }}</div>
<div class="basic-item-content">
<el-link
type="primary"
class="basic-item-link"
v-if="state.goodsInfo.author_url"
target="_blank"
:href="state.goodsInfo.author_url"
rel="noopener noreferrer"
>
{{ t('module.Click to access') }}
</el-link>
<span v-else>-</span>
</div>
</div>
<div v-if="installButtonState.stateSwitch.includes(state.goodsInfo.state)" class="basic-item">
<div class="basic-item-title">{{ t('module.Module status') }}</div>
<div class="basic-item-content">
<el-switch
@change="onChangeState"
:loading="state.loading.common"
:disabled="state.loading.common"
v-model="state.goodsInfo.enable"
/>
</div>
</div>
<div class="basic-buttons">
<el-dropdown
v-if="
(!state.goodsInfo.purchased || installButtonState.InstallNow.includes(state.goodsInfo.state)) &&
state.goodsInfo.demo &&
state.goodsInfo.demo.length > 0
"
>
<el-button class="basic-button-demo" type="primary">
<span class="basic-button-dropdown-span">{{ t('module.View demo') }}</span>
<Icon color="#ffffff" size="16" name="el-icon-ArrowDown" />
</el-button>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item
v-for="(demo, idx) in state.goodsInfo.demo"
:key="idx"
@click="openDemo(demo.link, demo.image ? false : true)"
class="basic-button-dropdown-item"
>
<el-popover
placement="right"
:title="t('module.Code scanning Preview')"
trigger="hover"
:disabled="demo.image ? false : true"
:width="174"
>
<template #reference>
<div class="demo-item-title">
<Icon :name="demo.icon" size="14" color="var(--el-color-primary)" />{{ demo.title }}
</div>
</template>
<div class="demo-image">
<img :src="demo.image" alt="" />
</div>
</el-popover>
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
<el-button
v-if="
!state.goodsInfo.purchased &&
installButtonState.buy.includes(state.goodsInfo.state) &&
state.goodsInfo.type == 'online'
"
@click="onBuy(false)"
v-blur
class="basic-button-item"
type="danger"
>
{{ t('module.Buy now') }}
</el-button>
<el-button
v-if="
(state.goodsInfo.state == moduleInstallState.UNINSTALLED && state.goodsInfo.purchased) ||
state.goodsInfo.state == moduleInstallState.WAIT_INSTALL
"
@click="
onPreInstallModule(
state.goodsInfo.uid,
state.goodsInfo.purchased,
state.goodsInfo.state == moduleInstallState.WAIT_INSTALL ? false : true
)
"
:loading="state.loading.common"
v-blur
class="basic-button-item"
type="success"
>
{{ t('module.Install now') }}
</el-button>
<el-button
v-if="installButtonState.continueInstallation.includes(state.goodsInfo.state)"
@click="onPreInstallModule(state.goodsInfo.uid, state.goodsInfo.purchased, false)"
:loading="state.loading.common"
v-blur
class="basic-button-item"
type="success"
>
{{ t('module.continue installation') }}
</el-button>
<el-button
v-if="installButtonState.alreadyInstalled.includes(state.goodsInfo.state)"
v-blur
:disabled="true"
class="basic-button-item"
>
{{ t('module.installed') }} v{{ state.goodsInfo.version }}
</el-button>
<el-button
v-if="state.goodsInfo.type == 'local' && !installButtonState.alreadyInstalled.includes(state.goodsInfo.state)"
v-blur
:disabled="true"
class="basic-button-item"
>
{{ t('module.Local module') }} v{{ state.goodsInfo.version }}
</el-button>
<el-button
v-if="state.goodsInfo.new_version && installButtonState.updateButton.includes(state.goodsInfo.state)"
@click="onUpdate(state.goodsInfo.uid, state.goodsInfo.purchased)"
v-loading="state.loading.common"
v-blur
class="basic-button-item"
type="success"
>
{{ t('module.to update') }}
</el-button>
<el-button
v-if="installButtonState.stateSwitch.includes(state.goodsInfo.state)"
v-loading="state.loading.common"
@click="unInstall(state.goodsInfo.uid)"
v-blur
class="basic-button-item"
type="danger"
>
{{ t('module.uninstall') }}
</el-button>
</div>
</div>
<div v-if="!isEmpty(state.goodsInfo.developer)" class="goods-developer">
<div class="developer-header">
<el-avatar :size="60" :src="state.goodsInfo.developer.avatar" />
<div class="developer-name">
<h3 class="developer-nickname">{{ state.goodsInfo.developer.nickname }}</h3>
<div class="developer-group">
{{ state.goodsInfo.developer.group ? state.goodsInfo.developer.group : '-' }}
</div>
</div>
</div>
<div v-if="state.goodsInfo.qq" class="developer-contact">
<h4 class="developer-info-title">{{ t('module.Contact developer') }}</h4>
<div class="contact-item">
<a
rel="noopener noreferrer"
target="_blank"
:href="'http://wpa.qq.com/msgrd?v=3&uin=' + state.goodsInfo.qq + '&site=qq&menu=yes'"
>
<span>QQ：{{ state.goodsInfo.qq }}</span>
</a>
</div>
</div>
<div class="developer-recommend">
<h4 class="developer-info-title">{{ t('module.Other works of developers') }}</h4>
<div v-if="state.goodsInfo.developer.goods.length > 0" class="recommend-goods">
<div
v-for="(goods_item, idx) in state.goodsInfo.developer.goods"
:key="idx"
@click="showInfo(goods_item.uid)"
class="recommend-goods-item"
>
<el-image fit="contain" class="recommend-goods-logo" :src="goods_item.logo"> </el-image>
<div class="recommend-goods-title">{{ goods_item.title }}</div>
</div>
</div>
<div v-else class="data-empty">{{ t('module.There are no more works') }}</div>
</div>
</div>
</div>
<div class="goods-detail ba-markdown" v-html="state.goodsInfo.detail_editor"></div>
<div class="goods-version">
<h1>{{ t('module.Update Log') }}</h1>
<div class="version-timeline" v-if="state.goodsInfo.version_log">
<el-timeline>
<el-timeline-item
v-for="(version, idx) in state.goodsInfo.version_log"
:key="idx"
:timestamp="timeFormat(version.createtime)"
placement="top"
:color="idx == 0 ? 'var(--el-color-success)' : ''"
>
<el-card class="version-card" shadow="hover">
<template #header>
<div class="version-card-header">
<h2>{{ version.title }}</h2>
<span class="version-short-describe">{{ version.short_describe }}</span>
</div>
</template>
<div
class="version-detail ba-markdown"
v-html="version.describe ? version.describe : t('module.No detailed update log')"
></div>
</el-card>
</el-timeline-item>
</el-timeline>
</div>
<div v-else class="empty-update-log">{{ $t('module.No detailed update log') }}</div>
</div>
</el-scrollbar>
</el-dialog>
<Buy />
<Pay />
</div>
</template>
<script setup lang="ts">
import { ElMessageBox } from 'element-plus'
import { isEmpty } from 'lodash-es'
import { useI18n } from 'vue-i18n'
import { currency, onBuy, onDisable, onEnable, onPreInstallModule, onRefreshTableData, showInfo } from '../index'
import { state } from '../store'
import { moduleInstallState } from '../types'
import Buy from './buy.vue'
import Pay from './pay.vue'
import { getInstallState, postUninstall } from '/@/api/backend/module'
import { useBaAccount } from '/@/stores/baAccount'
import { timeFormat } from '/@/utils/common'
const installButtonState = {
InstallNow: [moduleInstallState.UNINSTALLED, moduleInstallState.WAIT_INSTALL],
continueInstallation: [moduleInstallState.CONFLICT_PENDING, moduleInstallState.DEPENDENT_WAIT_INSTALL],
alreadyInstalled: [moduleInstallState.INSTALLED],
stateSwitch: [
moduleInstallState.INSTALLED,
moduleInstallState.CONFLICT_PENDING,
moduleInstallState.DEPENDENT_WAIT_INSTALL,
moduleInstallState.DISABLE,
],
updateButton: [moduleInstallState.WAIT_INSTALL, moduleInstallState.INSTALLED, moduleInstallState.DISABLE],
buy: [moduleInstallState.UNINSTALLED],
}
const { t } = useI18n()
const openDemo = (url: string, open: boolean) => {
if (!open || !url) return
window.open(url)
}
const onChangeState = () => {
if (state.goodsInfo.enable) {
onEnable(state.goodsInfo.uid)
} else {
state.common.disableParams = {
uid: state.goodsInfo.uid,
state: 0,
}
onDisable()
}
}
const unInstall = (uid: string) => {
state.loading.common = true
postUninstall(uid)
.then(() => {
onRefreshTableData()
state.dialog.goodsInfo = false
})
.finally(() => {
state.loading.common = false
})
}
const onUpdate = (uid: string, order: number) => {
// 无有效订单
if (!order) {
ElMessageBox.confirm(t('module.No module purchase order was found'), t('Reminder'), {
confirmButtonText: t('Confirm'),
cancelButtonText: t('Cancel'),
type: 'warning',
})
.then(() => {
onBuy(true)
})
.catch(() => {})
return
}
// 未登录
const baAccount = useBaAccount()
if (!baAccount.token) {
state.dialog.baAccount = true
return
}
state.loading.common = true
getInstallState(uid)
.then((res) => {
if (res.data.state == moduleInstallState.DISABLE) {
onPreInstallModule(uid, order, true, true)
} else {
ElMessageBox.confirm(t('module.You need to disable this module before updating Do you want to disable it now?'), t('Reminder'), {
confirmButtonText: t('module.Disable and update'),
cancelButtonText: t('Cancel'),
type: 'warning',
})
.then(() => {
state.common.disableParams = {
uid: uid,
state: 0,
update: 1,
}
onDisable()
})
.catch(() => {})
}
})
.finally(() => {
state.loading.common = false
})
}
</script>
<style scoped lang="scss">
:deep(.goods-info-dialog) .el-dialog__body {
padding: 0px 20px;
}
.demo-image,
.demo-image img {
width: 150px;
height: 150px;
}
.demo-item-title {
display: flex;
align-items: center;
.icon {
margin-right: 6px;
}
}
.goods-info {
display: flex;
position: relative;
.goods-images {
max-width: 41%;
width: 300px;
.goods-image-item {
display: flex;
align-items: center;
justify-content: center;
}
:deep(.el-carousel__indicators) {
line-height: 10px;
.el-carousel__indicator {
padding: 0 var(--el-carousel-indicator-padding-horizontal);
}
}
}
.goods-basic {
position: relative;
.goods-basic-title {
padding-bottom: 20px;
}
flex: 1;
padding: 0 10px;
.basic-item {
display: flex;
align-items: center;
padding: 4px 0;
.basic-item-title {
font-size: var(--el-font-size-base);
color: var(--el-text-color-secondary);
width: 80px;
}
.basic-item-price {
font-size: 16px;
color: var(--el-color-danger);
}
.basic-item-content {
font-size: var(--el-font-size-base);
color: var(--el-text-color-regular);
}
}
.basic-button-dropdown-span {
padding-right: 6px;
}
.basic-buttons {
padding-top: 6px;
}
.basic-button-demo {
margin-right: 10px;
}
}
.goods-developer {
width: 20%;
border-left: 1px solid var(--ba-bg-color);
padding: 10px;
position: absolute;
right: 0;
.developer-header {
display: flex;
align-items: center;
justify-content: center;
.developer-name {
padding-left: 10px;
flex: 1;
.developer-group {
padding-top: 5px;
font-size: var(--el-font-size-extra-small);
color: var(--el-text-color-secondary);
}
}
}
.developer-info-title {
color: var(--el-text-color-secondary);
padding-top: 15px;
line-height: 20px;
text-align: center;
}
.contact-item {
cursor: pointer;
padding-left: 10px;
line-height: 30px;
text-align: center;
a {
color: var(--el-color-primary);
text-decoration: none;
}
}
.recommend-goods-item {
display: flex;
align-items: center;
margin: 4px 0;
cursor: pointer;
padding: 6px;
&:hover {
background-color: var(--ba-bg-color);
}
.recommend-goods-logo {
width: 42px;
border-radius: var(--el-border-radius-base);
}
.recommend-goods-title {
flex: 1;
margin-left: 6px;
font-size: var(--el-font-size-small);
display: block;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
line-height: 15px;
height: 28px;
}
}
.developer-recommend {
.data-empty {
font-size: var(--el-font-size-extra-small);
color: var(--el-text-color-secondary);
text-align: center;
padding: 6px;
}
}
}
.el-carousel__item:nth-child(2n) {
background-color: #99a9bf;
}
.basic-item-link {
font-size: var(--el-font-size-small);
}
}
.basic-button-item {
--el-loading-spinner-size: 22px;
}
.goods-detail {
width: 80%;
}
.goods-version {
width: 80%;
h1 {
margin: 1.4em 0 0.8em;
font-weight: 700;
font-size: var(--el-font-size-large);
text-transform: uppercase;
color: var(--el-color-primary);
}
.version-timeline {
padding-left: 2px;
:deep(.el-card__body) {
padding: 10px 20px 20px 20px;
}
}
.version-card {
border: 1px solid var(--el-color-info-light-9);
}
.version-card-header {
display: flex;
justify-content: space-between;
align-items: center;
}
}
.empty-update-log {
display: flex;
justify-content: center;
color: var(--el-color-info);
}
/* 商品详情弹窗-s */
@media screen and (max-width: 1440px) {
:deep(.goods-info-dialog) {
--el-dialog-width: 65% !important;
}
}
@media screen and (max-width: 1280px) {
:deep(.goods-info-dialog) {
--el-dialog-width: 80% !important;
}
}
@media screen and (max-width: 1024px) {
:deep(.goods-info-dialog) {
--el-dialog-width: 92% !important;
}
}
/* 商品详情弹窗-e */
@media screen and (max-width: 865px) {
.goods-info .goods-developer {
display: none;
}
}
@media screen and (max-width: 540px) {
.goods-info {
flex-wrap: wrap;
.goods-images {
max-width: 100%;
width: 100%;
}
}
.goods-detail {
padding-top: 15px;
}
}
</style>

93
web/src/views/backend/module/components/installConflict.vue Normal file
View File

@@ -0,0 +1,93 @@
<template>
<div>
<div class="install-conflict">
<template v-if="state.common.fileConflict.length > 0">
<div class="install-title">{{ $t('module.File conflict') }}</div>
<el-table :data="state.common.fileConflict" stripe border :style="{ width: '100%' }">
<el-table-column prop="newFile" :label="$t('module.new file')" />
<el-table-column prop="oldFile" :label="$t('module.Existing files')" />
<el-table-column prop="solution" width="200" :label="$t('module.Treatment scheme')" align="center">
<template #default="scope">
<el-select v-model="scope.row.solution">
<el-option :label="$t('module.Backup and overwrite existing files')" value="cover"></el-option>
<el-option :label="$t('module.Discard new file')" value="discard"></el-option>
</el-select>
</template>
</el-table-column>
</el-table>
</template>
<template v-if="state.common.dependConflict.length > 0">
<div class="install-title">{{ $t('module.Dependency conflict') }}</div>
<el-table :data="state.common.dependConflict" stripe border style="width: 100%">
<el-table-column prop="env" :label="$t('module.environment')">
<template #default="scope">
<span v-if="scope.row.env">{{ $t('module.env ' + scope.row.env) }}</span>
</template>
</el-table-column>
<el-table-column prop="newDepend" :label="$t('module.New dependency')" />
<el-table-column prop="oldDepend" :label="$t('module.Existing dependencies')" />
<el-table-column prop="solution" width="200" :label="$t('module.Treatment scheme')" align="center">
<template #default="scope">
<el-select v-model="scope.row.solution">
<el-option :label="$t('module.Overwrite existing dependencies')" value="cover"></el-option>
<el-option :label="$t('module.Do not use new dependencies')" value="discard"></el-option>
</el-select>
</template>
</el-table-column>
</el-table>
</template>
</div>
<el-button
v-blur
class="install-done-button"
:loading="state.loading.common"
:disabled="state.loading.common"
size="large"
type="primary"
@click="onSubmitConflictHandle"
>
{{ $t('Confirm') }}
</el-button>
</div>
</template>
<script setup lang="ts">
import { state } from '../store'
import { execInstall } from '../index'
const onSubmitConflictHandle = () => {
state.loading.common = true
let fileConflict: anyObj = {},
dependConflict: anyObj = {}
for (const key in state.common.fileConflict) {
fileConflict[state.common.fileConflict[key].oldFile] = state.common.fileConflict[key]['solution']
}
for (const key in state.common.dependConflict) {
if (typeof dependConflict[state.common.dependConflict[key].env] == 'undefined') {
dependConflict[state.common.dependConflict[key].env] = {}
}
dependConflict[state.common.dependConflict[key].env][state.common.dependConflict[key].depend] = state.common.dependConflict[key]['solution']
}
execInstall(state.common.uid, 0, '', false, {
dependConflict: dependConflict,
fileConflict: fileConflict,
conflictHandle: true,
})
}
</script>
<style scoped lang="scss">
.install-conflict {
min-height: 400px;
}
.install-title {
font-size: var(--el-font-size-large);
text-align: center;
padding: 20px;
}
.install-done-button {
display: block;
margin: 20px auto;
width: 120px;
}
</style>

150
web/src/views/backend/module/components/pay.vue Normal file
View File

@@ -0,0 +1,150 @@
<template>
<div>
<el-dialog
v-model="state.dialog.pay"
:close-on-press-escape="false"
:close-on-click-modal="false"
:destroy-on-close="true"
class="pay-dialog"
top="20vh"
width="680px"
>
<div>
<div class="header-box">
<img
class="pay-logo"
:src="'https://buildadmin.com/static/images/' + (state.common.payType == 'wx' ? 'wechat-pay.png' : 'alipay.png')"
alt=""
/>
</div>
<div class="pay-box">
<div class="left">
<div class="order-info">
<div class="order-info-items">{{ t('module.Order title') }}：{{ state.payInfo.info.title }}</div>
<div class="order-info-items">{{ t('module.Order No') }}：{{ state.payInfo.info.sn }}</div>
<div class="order-info-items">{{ t('module.Purchase user') }}：{{ specificUserName(baAccount) }}</div>
<div class="order-info-items">
<span>{{ t('module.Order price') }}：</span>
<span class="rmb-symbol">
￥<span class="amount">{{ state.payInfo.info.amount }}</span>
</span>
</div>
</div>
<div class="pay_qr">
<QrcodeVue v-if="state.common.payType == 'wx'" :value="state.payInfo.pay.code_url" :size="220" :margin="0" level="H" />
<iframe
v-if="state.common.payType == 'zfb'"
:srcdoc="state.payInfo.pay.code_url"
frameborder="no"
border="0"
marginwidth="0"
marginheight="0"
scrolling="no"
width="220"
height="220"
style="overflow: hidden"
>
</iframe>
<div v-if="state.payInfo.pay.status == 'success'" class="pay-success">
<Icon name="fa fa-check" color="var(--el-color-success)" size="30" />
</div>
</div>
<el-alert class="qr-tips" :closable="false" type="success" center>
<div class="qr-tips-content">
<Icon color="var(--el-color-success)" :name="state.common.payType == 'wx' ? 'fa fa-wechat' : 'fa fa-buysellads'" />
<span v-if="state.common.payType == 'wx'">{{ t('module.Use WeChat to scan QR code for payment') }}</span>
<span v-if="state.common.payType == 'zfb'">{{ t('module.Use Alipay to scan QR code for payment') }}</span>
</div>
</el-alert>
</div>
<div class="right">
<img
class="pay-logo"
:src="'https://buildadmin.com/static/images/screenshot-' + (state.common.payType == 'wx' ? 'wechat.png' : 'alipay.png')"
alt=""
/>
</div>
</div>
</div>
</el-dialog>
</div>
</template>
<script setup lang="ts">
import QrcodeVue from 'qrcode.vue'
import { useI18n } from 'vue-i18n'
import { specificUserName } from '../index'
import { state } from '../store'
import { useBaAccount } from '/@/stores/baAccount'
const { t } = useI18n()
const baAccount = useBaAccount()
</script>
<style scoped lang="scss">
:deep(.pay-dialog) .el-dialog__body {
padding: var(--el-dialog-padding-primary);
padding-top: 0;
}
.header-box {
.pay-logo {
height: 30px;
user-select: none;
}
padding-bottom: 10px;
border-bottom: 1px solid var(--el-border-color-lighter);
}
.pay-box {
display: flex;
.right {
margin-left: auto;
}
}
.order-info {
padding: 15px 0;
.order-info-items {
line-height: 24px;
.rmb-symbol {
color: var(--el-color-danger);
font-size: 13px;
}
.amount {
color: var(--el-color-danger);
font-size: 16px;
}
}
}
.pay_qr {
display: flex;
margin-bottom: 25px;
justify-content: center;
position: relative;
.pay-success {
border-radius: 50%;
border: 3px solid rgba($color: #67c23a, $alpha: 0.8);
padding: 5px;
position: absolute;
left: calc(50% - 15px);
top: calc(50% - 15px);
}
}
.qr-tips {
margin-top: 15px;
.qr-tips-content {
.icon {
margin-right: 5px;
}
display: flex;
align-items: center;
justify-content: center;
}
}
@media screen and (max-width: 700px) {
:deep(.pay-dialog) {
--el-dialog-width: 96% !important;
}
.pay-box .right {
display: none;
}
}
</style>

125
web/src/views/backend/module/components/tableHeader.vue Normal file
View File

@@ -0,0 +1,125 @@
<template>
<div>
<el-alert class="ba-table-alert" v-if="state.table.remark" :title="state.table.remark" type="info" show-icon />
<div class="modules-header">
<div class="table-header-buttons">
<el-button :title="$t('Refresh')" @click="onRefreshTableData" v-blur color="#40485b" type="info">
<Icon name="fa fa-refresh" color="#ffffff" size="14" />
</el-button>
<el-button-group class="ml10">
<el-button @click="uploadInstall" :title="t('module.Upload zip package for installation')" v-blur type="primary">
<Icon name="fa fa-upload" color="#ffffff" size="14" />
<span class="table-header-operate-text">{{ t('module.Upload installation') }}</span>
</el-button>
<el-button
@click="localModules"
:class="state.table.onlyLocal ? 'local-active' : ''"
:title="t('module.Uploaded / installed modules')"
v-blur
type="primary"
>
<Icon name="fa fa-desktop" color="#ffffff" size="14" />
<span class="table-header-operate-text">{{ t('module.Local module') }}</span>
</el-button>
</el-button-group>
<el-button-group class="ml10 publish-module-button-group">
<el-button @click="navigateTo('https://doc.buildadmin.com/senior/module/start.html')" v-blur type="success">
<Icon name="fa fa-cloud-upload" color="#ffffff" size="14" />
<span class="table-header-operate-text">{{ t('module.Publishing module') }}</span>
</el-button>
<el-button @click="navigateTo('https://doc.buildadmin.com/guide/other/appendix/getPoints.html')" v-blur type="success">
<Icon name="fa fa-rocket" color="#ffffff" size="14" />
<span class="table-header-operate-text">{{ t('module.Get points') }}</span>
</el-button>
</el-button-group>
<el-button v-blur class="ml10 ba-account-button" @click="onShowBaAccount" type="success">
<Icon name="fa fa-user-o" color="#ffffff" size="14" />
<span class="table-header-operate-text">{{ t('layouts.Member information') }}</span>
</el-button>
</div>
<div class="table-search">
<el-input
v-model="state.table.params.quickSearch"
class="xs-hidden"
@input="onSearchInput"
:placeholder="t('module.Search is actually very simple')"
/>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { debounce } from 'lodash-es'
import { useI18n } from 'vue-i18n'
import { loadData, onRefreshTableData } from '../index'
import { state } from '../store'
const { t } = useI18n()
const localModules = () => {
state.table.onlyLocal = !state.table.onlyLocal
loadData()
}
const onShowBaAccount = () => {
state.dialog.baAccount = true
}
const onSearchInput = debounce(() => {
state.table.modulesEbak[state.table.params.activeTab] = undefined
loadData()
}, 500)
const navigateTo = (url: string) => {
window.open(url, '_blank')
}
const uploadInstall = () => {
state.dialog.common = true
state.common.quickClose = true
state.common.dialogTitle = t('module.Upload installation')
state.common.type = 'uploadInstall'
}
</script>
<style scoped lang="scss">
.ml10 {
margin-left: 10px;
}
.ba-table-alert {
border: none;
}
.modules-header {
display: flex;
align-items: center;
padding: 10px;
margin-bottom: 10px;
background-color: var(--ba-bg-color-overlay);
border-radius: var(--el-border-radius-base);
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.table-header-operate-text {
padding-left: 6px;
}
.table-search {
margin-left: auto;
}
.local-active {
border-color: var(--el-button-active-border-color);
background-color: var(--el-button-active-bg-color);
}
@media screen and (max-width: 1300px) {
.ba-account-button {
display: block;
margin: 10px 0 0 0;
}
}
@media screen and (max-width: 1100px) {
.publish-module-button-group {
display: block;
margin: 10px 0 0 0;
}
}
</style>

168
web/src/views/backend/module/components/tabs.vue Normal file
View File

@@ -0,0 +1,168 @@
<template>
<div>
<el-tabs
v-loading="state.loading.table"
:element-loading-text="$t('module.Loading')"
v-model="state.table.params.activeTab"
type="border-card"
class="store-tabs"
@tab-change="onTabChange"
>
<el-tab-pane v-for="cat in state.table.category" :name="cat.id.toString()" :key="cat.id" :label="cat.name" class="store-tab-pane">
<template v-if="state.table.modules[state.table.params.activeTab] && state.table.modules[state.table.params.activeTab].length > 0">
<el-row :gutter="15" class="goods">
<el-col
:xs="12"
:sm="8"
:md="8"
:lg="6"
:xl="4"
v-for="item in state.table.modules[state.table.params.activeTab]"
:key="item.uid"
class="goods-col"
>
<div @click="showInfo(item.uid)" class="goods-item suspension">
<el-image
loading="lazy"
fit="cover"
class="goods-img"
:src="item.logo ? item.logo : fullUrl('/static/images/local-module-logo.png')"
/>
<div class="goods-footer">
<div class="goods-tag" v-if="item.tags && item.tags.length > 0">
<el-tag v-for="(tag, idx) in item.tags" :type="tag.type ? tag.type : 'primary'" :key="idx">
{{ tag.name }}
</el-tag>
</div>
<div class="goods-title">
{{ item.title }}
</div>
<div class="goods-data">
<span class="download-count">
<Icon name="fa fa-download" color="#c0c4cc" size="13" /> {{ item.downloads ? item.downloads : '-' }}
</span>
<span v-if="item.state === moduleInstallState.UNINSTALLED" class="goods-price">
<span class="original-price">{{ currency(item.original_price, item.currency_select) }}</span>
<span class="current-price">{{ currency(item.present_price, item.currency_select) }}</span>
</span>
<div v-else class="goods-price">
<el-tag effect="dark" :type="item.stateTag.type ? item.stateTag.type : 'primary'">
{{ item.stateTag.text }}
</el-tag>
</div>
</div>
</div>
</div>
</el-col>
</el-row>
</template>
<el-empty v-else class="modules-empty" :description="$t('module.No more')" />
</el-tab-pane>
</el-tabs>
</div>
</template>
<script setup lang="ts">
import { currency, loadData, showInfo } from '../index'
import { state } from '../store'
import { moduleInstallState } from '../types'
import { fullUrl } from '/@/utils/common'
const onTabChange = () => {
loadData()
}
</script>
<style scoped lang="scss">
.suspension:hover {
z-index: 1;
}
.goods-item {
display: block;
margin-bottom: 15px;
padding-bottom: 40px;
position: relative;
border-radius: var(--el-border-radius-base);
background-color: var(--el-fill-color-extra-light);
box-shadow: var(--el-box-shadow-light);
cursor: pointer;
}
.goods-img {
display: block;
border-radius: var(--el-border-radius-base);
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.modules-empty {
width: 100%;
}
.goods-footer {
display: block;
overflow: hidden;
padding: 10px 10px 0 10px;
.goods-tag {
min-height: 60px;
}
.goods-title {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding-top: 6px;
font-size: 14px;
line-height: 18px;
}
.goods-data {
display: flex;
width: calc(100% - 20px);
position: absolute;
bottom: 0;
align-items: baseline;
padding: 10px 0;
.download-count {
color: var(--el-text-color-placeholder);
}
.goods-price {
margin-left: auto;
}
.original-price {
font-size: 13px;
color: var(--el-text-color-placeholder);
text-decoration: line-through;
}
.current-price {
font-size: 16px;
color: var(--el-color-danger);
padding-left: 6px;
}
}
}
.el-tabs--border-card {
border: none;
box-shadow: var(--el-box-shadow-light);
border-radius: var(--el-border-radius-base);
}
.el-tabs--border-card :deep(.el-tabs__header) {
background-color: var(--ba-bg-color);
border-bottom: none;
border-radius: var(--el-border-radius-base);
}
.el-tabs--border-card :deep(.el-tabs__item.is-active) {
border: 1px solid transparent;
}
.el-tabs--border-card :deep(.el-tabs__nav-wrap) {
border-radius: var(--el-border-radius-base);
}
:deep(.store-tabs) .el-tabs__content {
padding: 15px 15px 0 15px;
min-height: 350px;
}
@media screen and (max-width: 520px) {
.goods {
.goods-col {
max-width: 100%;
flex-basis: 100%;
}
}
}
</style>

71
web/src/views/backend/module/components/uploadInstall.vue Normal file
View File

@@ -0,0 +1,71 @@
<template>
<div class="upload-install">
<div class="tips">
<div class="title">{{ $t('module.Local upload warning') }}</div>
<div class="tip-item">1. {{ $t('module.The module can modify and add system files') }}</div>
<div class="tip-item">2. {{ $t('module.The module can execute sql commands and codes') }}</div>
<div class="tip-item">3. {{ $t('module.The module can install new front and rear dependencies') }}</div>
</div>
<el-upload class="upload-module" :show-file-list="false" accept=".zip" drag :auto-upload="false" @change="uploadModule">
<template v-if="state.uploadState == 'wait-file'">
<Icon size="50px" color="#909399" name="el-icon-UploadFilled" />
<div class="el-upload__text">
{{ $t('module.Drag the module package file here') }} <em>{{ $t('module.Click me to upload') }}</em>
</div>
</template>
<el-result v-else icon="success" :sub-title="$t('module.Uploaded, installation is about to start, please wait')"></el-result>
</el-upload>
</div>
</template>
<script setup lang="ts">
import type { UploadFile } from 'element-plus'
import { reactive } from 'vue'
import { onPreInstallModule } from '../index'
import { upload } from '/@/api/backend/module'
import { fileUpload } from '/@/api/common'
const state = reactive({
uploadState: 'wait-file',
})
const uploadModule = (file: UploadFile) => {
if (!file || !file.raw) return
let fd = new FormData()
fd.append('file', file.raw!)
fileUpload(fd, {}, true).then((res) => {
if (res.code == 1) {
upload(res.data.file.url)
.then((res) => {
state.uploadState = 'success'
onPreInstallModule(res.data.info.uid, 0, false, res.data.info.update ? true : false)
})
.catch(() => {
state.uploadState = 'wait-file'
})
}
})
}
</script>
<style scoped lang="scss">
.tips {
padding: 20px;
background-color: var(--el-bg-color-page);
border-radius: var(--el-border-radius-base);
max-width: 400px;
margin: 0 auto;
color: var(--el-color-danger);
.title {
font-size: var(--el-font-size-medium);
padding-bottom: 6px;
}
.tip-item {
font-size: var(--el-font-size-base);
}
}
.upload-module {
max-width: 460px;
margin: 40px auto;
}
</style>

604
web/src/views/backend/module/index.ts Normal file
View File

@@ -0,0 +1,604 @@
import { ElNotification } from 'element-plus'
import { isArray } from 'lodash-es'
import { state } from './store'
import { moduleInstallState, type moduleState } from './types'
import {
changeState,
createOrder,
getInstallState,
index,
info,
modules,
payCheck,
payOrder,
postInstallModule,
preDownload,
} from '/@/api/backend/module'
import { i18n } from '/@/lang/index'
import router from '/@/router/index'
import { useBaAccount } from '/@/stores/baAccount'
import { SYSTEM_ZINDEX } from '/@/stores/constant/common'
import { taskStatus } from '/@/stores/constant/terminalTaskStatus'
import type { UserInfo } from '/@/stores/interface'
import { useTerminal } from '/@/stores/terminal'
import { fullUrl } from '/@/utils/common'
import { uuid } from '/@/utils/random'
import { changeListenDirtyFileSwitch, closeHotUpdate } from '/@/utils/vite'
export const loadData = () => {
state.loading.table = true
if (!state.table.indexLoaded) {
loadIndex().then(() => {
getModules()
})
} else {
getModules()
}
}
export const onRefreshTableData = () => {
state.table.indexLoaded = false
for (const key in state.table.modulesEbak) {
state.table.modulesEbak[key] = undefined
}
loadData()
}
const loadIndex = () => {
return index().then((res) => {
state.table.indexLoaded = true
state.sysVersion = res.data.sysVersion
state.nuxtVersion = res.data.nuxtVersion
state.installedModule = res.data.installed
const installedModuleUids: string[] = []
const installedModuleVersions: { uid: string; version: string }[] = []
if (res.data.installed) {
state.installedModule.forEach((item) => {
installedModuleUids.push(item.uid)
installedModuleVersions.push({
uid: item.uid,
version: item.version,
})
})
state.installedModuleUids = installedModuleUids
state.installedModuleVersions = installedModuleVersions
}
})
}
const getModules = () => {
if (typeof state.table.modulesEbak[state.table.params.activeTab] != 'undefined') {
state.table.modules[state.table.params.activeTab] = modulesOnlyLocalHandle(state.table.modulesEbak[state.table.params.activeTab])
state.loading.table = false
return
}
const params: anyObj = {}
for (const key in state.table.params) {
if (state.table.params[key] != '') {
params[key] = state.table.params[key]
}
}
const moduleUids: string[] = []
params['installed'] = state.installedModuleVersions
params['sysVersion'] = state.sysVersion
modules(params)
.then((res) => {
if (params.activeTab == 'all') {
res.data.rows.forEach((item: anyObj) => {
moduleUids.push(item.uid)
})
state.installedModule.forEach((item) => {
if (moduleUids.indexOf(item.uid) === -1) {
if (state.table.params.quickSearch) {
if (item.title.includes(state.table.params.quickSearch)) res.data.rows.push(item)
} else {
res.data.rows.push(item)
}
}
})
}
state.table.remark = res.data.remark
state.table.modulesEbak[params.activeTab] = res.data.rows.map((item: anyObj) => {
const idx = state.installedModuleUids.indexOf(item.uid)
if (idx !== -1) {
item.state = state.installedModule[idx].state
item.title = state.installedModule[idx].title
item.version = state.installedModule[idx].version
item.website = state.installedModule[idx].website
item.stateTag = moduleStatus(item.state)
if (!isArray(item.tags)) item.tags = []
item.tags.push({
name: `${i18n.global.t('module.installed')} v${state.installedModule[idx].version}`,
type: 'primary',
})
} else {
item.state = 0
}
if (item.new_version && item.tags) {
item.tags.push({
name: i18n.global.t('module.New version'),
type: 'danger',
})
}
return item
})
state.table.modules[params.activeTab] = modulesOnlyLocalHandle(state.table.modulesEbak[params.activeTab])
state.table.category = res.data.category
})
.finally(() => {
state.loading.table = false
})
}
export const showInfo = (uid: string) => {
state.dialog.goodsInfo = true
state.loading.goodsInfo = true
const localItem = state.installedModule.find((item) => {
return item.uid == uid
})
info({
uid: uid,
localVersion: localItem?.version,
sysVersion: state.sysVersion,
})
.then((res) => {
if (localItem) {
if (res.data.info.type == 'local') {
res.data.info = localItem
res.data.info.images = [fullUrl('/static/images/local-module-logo.png')]
res.data.info.type = 'local' // 纯本地模块
} else {
res.data.info.type = 'online'
res.data.info.state = localItem.state
res.data.info.version = localItem.version
}
res.data.info.enable = localItem.state === moduleInstallState.DISABLE ? false : true
} else {
res.data.info.state = 0
res.data.info.type = 'online'
}
state.goodsInfo = res.data.info
})
.catch((err) => {
if (loginExpired(err)) {
state.dialog.goodsInfo = false
}
})
.finally(() => {
state.loading.goodsInfo = false
})
}
/**
* 支付订单
* @param renew 是否是续费订单
*/
export const onBuy = (renew = false) => {
state.dialog.buy = true
state.loading.buy = true
createOrder({
goods_id: state.goodsInfo.id,
})
.then((res) => {
state.loading.buy = false
state.buy.renew = renew
state.buy.info = res.data.info
})
.catch((err) => {
state.dialog.buy = false
state.loading.buy = false
loginExpired(err)
})
}
export const onPay = (payType: 'score' | 'wx' | 'balance' | 'zfb') => {
state.common.payType = payType
state.loading.common = true
payOrder(state.buy.info.id, payType)
.then((res) => {
// 关闭其他弹窗
state.dialog.buy = false
state.dialog.goodsInfo = false
if (payType == 'wx' || payType == 'zfb') {
// 显示支付二维码
state.dialog.pay = true
state.payInfo = res.data
// 轮询获取支付状态
const timer = setInterval(() => {
payCheck(state.payInfo.info.sn)
.then(() => {
state.payInfo.pay.status = 'success'
clearInterval(timer)
if (state.buy.renew) {
showInfo(res.data.info.uid)
} else {
onPreInstallModule(res.data.info.uid, res.data.info.id, true)
}
state.dialog.pay = false
})
.catch(() => {})
}, 3000)
} else {
if (state.buy.renew) {
showInfo(res.data.info.uid)
} else {
onPreInstallModule(res.data.info.uid, res.data.info.id, true)
}
}
})
.catch((err) => {
loginExpired(err)
})
.finally(() => {
state.loading.common = false
})
}
export const showCommonLoading = (loadingTitle: moduleState['common']['loadingTitle']) => {
state.common.type = 'loading'
state.common.loadingTitle = loadingTitle
state.common.loadingComponentKey = uuid()
}
/**
* 模块预安装
*/
export const onPreInstallModule = (uid: string, id: number, needGetInstallableVersion: boolean, update: boolean = false) => {
state.dialog.common = true
showCommonLoading('init')
state.common.dialogTitle = i18n.global.t('module.Install')
const nextStep = (moduleState: number) => {
if (needGetInstallableVersion) {
// 获取模块版本列表
showCommonLoading('getInstallableVersion')
preDownload({
uid,
orderId: id,
sysVersion: state.sysVersion,
nuxtVersion: state.nuxtVersion,
installed: state.installedModuleUids,
})
.then((res) => {
state.common.uid = uid
state.common.update = update
state.common.type = 'selectVersion'
state.common.dialogTitle = i18n.global.t('module.Select Version')
state.common.versions = res.data.versions
// 关闭其他弹窗
state.dialog.baAccount = false
state.dialog.buy = false
state.dialog.goodsInfo = false
})
.catch((res) => {
if (loginExpired(res)) return
state.dialog.common = false
})
} else {
// 立即安装（上传安装、继续安装）
showCommonLoading(moduleState === moduleInstallState.UNINSTALLED ? 'download' : 'install')
execInstall(uid, id, '', update)
// 关闭其他弹窗
state.dialog.baAccount = false
state.dialog.buy = false
state.dialog.goodsInfo = false
}
}
if (update) {
nextStep(moduleInstallState.DISABLE)
} else {
// 获取安装状态
getInstallState(uid).then((res) => {
if (
res.data.state === moduleInstallState.INSTALLED ||
res.data.state === moduleInstallState.DISABLE ||
res.data.state === moduleInstallState.DIRECTORY_OCCUPIED
) {
ElNotification({
type: 'error',
message:
res.data.state === moduleInstallState.INSTALLED || res.data.state === moduleInstallState.DISABLE
? i18n.global.t('module.Installation cancelled because module already exists!')
: i18n.global.t('module.Installation cancelled because the directory required by the module is occupied!'),
})
state.dialog.common = false
return
}
nextStep(res.data.state)
})
}
}
/**
* 执行安装请求，还包含启用、安装时的冲突处理
*/
export const execInstall = (uid: string, id: number, version: string = '', update: boolean = false, extend: anyObj = {}) => {
postInstallModule(uid, id, version, update, extend)
.then(() => {
state.common.dialogTitle = i18n.global.t('module.Installation complete')
state.common.moduleState = moduleInstallState.INSTALLED
state.common.type = 'done'
onRefreshTableData()
})
.catch((res) => {
if (loginExpired(res)) return
if (res.code == -1) {
state.common.uid = res.data.uid
state.common.type = 'installConflict'
state.common.dialogTitle = i18n.global.t('module.A conflict is found Please handle it manually')
state.common.fileConflict = res.data.fileConflict
state.common.dependConflict = res.data.dependConflict
} else if (res.code == -2) {
state.common.type = 'done'
state.common.uid = res.data.uid
state.common.dialogTitle = i18n.global.t('module.Wait for dependent installation')
state.common.moduleState = moduleInstallState.DEPENDENT_WAIT_INSTALL
state.common.waitInstallDepend = res.data.wait_install
state.common.dependInstallState = 'executing'
const terminal = useTerminal()
if (res.data.wait_install.includes('npm_dependent_wait_install')) {
terminal.addTaskPM('web-install', true, 'module-install:' + res.data.uid, (res: number) => {
terminalTaskExecComplete(res, 'npm_dependent_wait_install')
})
}
if (res.data.wait_install.includes('nuxt_npm_dependent_wait_install')) {
terminal.addTaskPM('nuxt-install', true, 'module-install:' + res.data.uid, (res: number) => {
terminalTaskExecComplete(res, 'nuxt_npm_dependent_wait_install')
})
}
if (res.data.wait_install.includes('composer_dependent_wait_install')) {
terminal.addTask('composer.update', true, 'module-install:' + res.data.uid, (res: number) => {
terminalTaskExecComplete(res, 'composer_dependent_wait_install')
})
}
} else if (res.code == 0) {
ElNotification({
type: 'error',
message: res.msg,
zIndex: SYSTEM_ZINDEX,
})
state.dialog.common = false
onRefreshTableData()
}
})
.finally(() => {
state.loading.common = false
})
}
const terminalTaskExecComplete = (res: number, type: string) => {
if (res == taskStatus.Success) {
state.common.waitInstallDepend = state.common.waitInstallDepend.filter((depend: string) => {
return depend != type
})
if (state.common.waitInstallDepend.length == 0) {
state.common.dependInstallState = 'success'
// 仅在命令全部执行完毕才刷新数据
if (router.currentRoute.value.name === 'moduleStore/moduleStore') {
onRefreshTableData()
}
}
} else {
const terminal = useTerminal()
terminal.toggle(true)
state.common.dependInstallState = 'fail'
// 有命令执行失败了，刷新一次数据
if (router.currentRoute.value.name === 'moduleStore/moduleStore') {
onRefreshTableData()
}
}
// 连续安装模块的情况中，首个模块的命令执行完毕时，自动启动了热更新
if (router.currentRoute.value.name === 'moduleStore/moduleStore') {
closeHotUpdate('modules')
}
}
export const onDisable = (confirmConflict = false) => {
state.loading.common = true
// 拼装依赖处理方案
if (confirmConflict) {
const dependConflict: anyObj = {}
for (const key in state.common.disableDependConflict) {
if (state.common.disableDependConflict[key]['solution'] != 'delete') {
continue
}
if (typeof dependConflict[state.common.disableDependConflict[key].env] == 'undefined') {
dependConflict[state.common.disableDependConflict[key].env] = []
}
dependConflict[state.common.disableDependConflict[key].env].push(state.common.disableDependConflict[key].depend)
}
state.common.disableParams['confirmConflict'] = 1
state.common.disableParams['dependConflictSolution'] = dependConflict
}
changeState(state.common.disableParams)
.then(() => {
ElNotification({
type: 'success',
message: i18n.global.t('module.The operation succeeds Please clear the system cache and refresh the browser ~'),
zIndex: SYSTEM_ZINDEX,
})
state.dialog.common = false
onRefreshTableData()
})
.catch((res) => {
if (res.code == -1) {
state.dialog.common = true
state.common.dialogTitle = i18n.global.t('module.Deal with conflict')
state.common.type = 'disableConfirmConflict'
state.common.disableDependConflict = res.data.dependConflict
if (res.data.conflictFile && res.data.conflictFile.length) {
const conflictFile = []
for (const key in res.data.conflictFile) {
conflictFile.push({
file: res.data.conflictFile[key],
})
}
state.common.disableConflictFile = conflictFile
}
} else if (res.code == -2) {
state.dialog.common = true
const commandsData = {
type: 'disable',
commands: res.data.wait_install,
}
state.common.uid = state.goodsInfo.uid
execCommand(commandsData)
} else if (res.code == -3) {
// 更新
onPreInstallModule(state.goodsInfo.uid, state.goodsInfo.purchased, true, true)
} else {
ElNotification({
type: 'error',
message: res.msg,
zIndex: SYSTEM_ZINDEX,
})
if (state.common.disableParams && state.common.disableParams.uid) {
showInfo(state.common.disableParams.uid)
} else {
onRefreshTableData()
}
}
})
.finally(() => {
state.loading.common = false
})
}
export const onEnable = (uid: string) => {
state.loading.common = true
changeState({
uid: uid,
state: 1,
})
.then(() => {
state.dialog.common = true
showCommonLoading('init')
state.common.dialogTitle = i18n.global.t('Enable')
execInstall(uid, 0)
state.dialog.goodsInfo = false
})
.catch((res) => {
ElNotification({
type: 'error',
message: res.msg,
zIndex: SYSTEM_ZINDEX,
})
state.loading.common = false
})
}
export const loginExpired = (res: ApiResponse) => {
const baAccount = useBaAccount()
if (res.code == 301 || res.code == 408) {
baAccount.removeToken()
state.dialog.baAccount = true
return true
}
return false
}
const modulesOnlyLocalHandle = (modules: anyObj) => {
if (!state.table.onlyLocal) return modules
return modules.filter((item: anyObj) => {
return item.installed
})
}
export const execCommand = (data: anyObj) => {
if (data.type == 'disable') {
state.dialog.common = true
state.common.type = 'done'
state.common.dialogTitle = i18n.global.t('module.Wait for dependent installation')
state.common.moduleState = moduleInstallState.DISABLE
state.common.dependInstallState = 'executing'
const terminal = useTerminal()
data.commands.forEach((item: anyObj) => {
state.common.waitInstallDepend.push(item.type)
if (item.pm) {
if (item.command == 'web-install') {
changeListenDirtyFileSwitch(false)
}
terminal.addTaskPM(item.command, true, '', (res: number) => {
terminalTaskExecComplete(res, item.type)
if (item.command == 'web-install') {
changeListenDirtyFileSwitch(true)
}
})
} else {
terminal.addTask(item.command, true, '', (res: number) => {
terminalTaskExecComplete(res, item.type)
})
}
})
}
}
export const specificUserName = (userInfo: Partial<UserInfo>) => {
return userInfo.nickname + '（' + (userInfo.email || userInfo.mobile || 'ID:' + userInfo.id) + '）'
}
export const currency = (price: number, val: number) => {
if (typeof price == 'undefined' || typeof val == 'undefined') {
return '-'
}
if (val == 0) {
return parseInt(price.toString()) + i18n.global.t('Integral')
} else {
return '￥' + price
}
}
export const moduleStatus = (state: number) => {
switch (state) {
case moduleInstallState.INSTALLED:
return {
type: '',
text: i18n.global.t('module.installed'),
}
case moduleInstallState.WAIT_INSTALL:
return {
type: 'success',
text: i18n.global.t('module.Wait for installation'),
}
case moduleInstallState.CONFLICT_PENDING:
return {
type: 'danger',
text: i18n.global.t('module.Conflict pending'),
}
case moduleInstallState.DEPENDENT_WAIT_INSTALL:
return {
type: 'warning',
text: i18n.global.t('module.Dependency to be installed'),
}
case moduleInstallState.DISABLE:
return {
type: 'warning',
text: i18n.global.t('Disable'),
}
default:
return {
type: 'info',
text: i18n.global.t('Unknown'),
}
}
}

45
web/src/views/backend/module/index.vue Normal file
View File

@@ -0,0 +1,45 @@
<template>
<div class="default-main ba-table-box">
<TableHeader />
<Tabs />
<GoodsInfo />
<CommonDialog />
<BaAccountDialog v-model="state.dialog.baAccount" :login-callback="() => (state.dialog.baAccount = false)" />
</div>
</template>
<script setup lang="ts">
import { onActivated, onDeactivated, onMounted, onUnmounted } from 'vue'
import CommonDialog from './components/commonDialog.vue'
import GoodsInfo from './components/goodsInfo.vue'
import TableHeader from './components/tableHeader.vue'
import Tabs from './components/tabs.vue'
import { loadData } from './index'
import { state } from './store'
import BaAccountDialog from '/@/layouts/backend/components/baAccount.vue'
import { closeHotUpdate, openHotUpdate } from '/@/utils/vite'
defineOptions({
name: 'moduleStore/moduleStore',
})
onMounted(() => {
loadData()
closeHotUpdate('modules')
})
onActivated(() => {
closeHotUpdate('modules')
})
onDeactivated(() => {
openHotUpdate('modules')
})
onUnmounted(() => {
openHotUpdate('modules')
})
</script>
<style scoped lang="scss">
:deep(.goods-tag) .el-tag {
margin: 0 6px 6px 0;
}
</style>

63
web/src/views/backend/module/store.ts Normal file
View File

@@ -0,0 +1,63 @@
import { reactive } from 'vue'
import { uuid } from '/@/utils/random'
import type { moduleState } from './types'
export const state = reactive<moduleState>({
loading: {
buy: false,
table: true,
common: false,
install: false,
goodsInfo: false,
},
dialog: {
buy: false,
pay: false,
common: false,
goodsInfo: false,
baAccount: false,
},
table: {
remark: '',
modules: [],
modulesEbak: [],
category: [],
onlyLocal: false,
indexLoaded: false,
params: {
quickSearch: '',
activeTab: 'all',
},
},
payInfo: {},
goodsInfo: {},
buy: {
info: {},
renew: false,
agreement: true,
},
common: {
uid: '',
moduleState: 0,
quickClose: false,
type: 'loading',
dialogTitle: '',
fileConflict: [],
dependConflict: [],
loadingTitle: 'init',
loadingComponentKey: uuid(),
waitInstallDepend: [],
dependInstallState: 'none',
disableConflictFile: [],
disableDependConflict: [],
disableParams: {},
payType: 'wx',
update: false,
versions: [],
},
sysVersion: '',
nuxtVersion: '',
installedModule: [],
installedModuleUids: [],
installedModuleVersions: [],
})

78
web/src/views/backend/module/types.ts Normal file
View File

@@ -0,0 +1,78 @@
export enum moduleInstallState {
UNINSTALLED,
INSTALLED,
WAIT_INSTALL,
CONFLICT_PENDING,
DEPENDENT_WAIT_INSTALL,
DIRECTORY_OCCUPIED,
DISABLE,
}
export interface moduleInfo {
uid: string
title: string
version: string
state: number
website: string
stateTag: {
type: string
text: string
}
}
export interface moduleState {
loading: {
buy: boolean
table: boolean
common: boolean
install: boolean
goodsInfo: boolean
}
dialog: {
buy: boolean
pay: boolean
common: boolean
goodsInfo: boolean
baAccount: boolean
}
table: {
remark: string
modules: anyObj
modulesEbak: anyObj
category: anyObj
onlyLocal: boolean
indexLoaded: boolean
params: anyObj
}
payInfo: anyObj
goodsInfo: anyObj
buy: {
info: anyObj
renew: boolean
agreement: boolean
}
common: {
uid: string
moduleState: number
quickClose: boolean
type: 'loading' | 'installConflict' | 'done' | 'disableConfirmConflict' | 'uploadInstall' | 'selectVersion'
dialogTitle: string
fileConflict: anyObj[]
dependConflict: anyObj[]
loadingTitle: 'init' | 'download' | 'install' | 'getInstallableVersion'
loadingComponentKey: string
waitInstallDepend: string[]
dependInstallState: 'none' | 'executing' | 'success' | 'fail'
disableConflictFile: { file: string }[]
disableDependConflict: anyObj[]
disableParams: anyObj
payType: 'score' | 'wx' | 'balance' | 'zfb'
update: boolean
versions: anyObj[]
}
sysVersion: string
nuxtVersion: string
installedModule: moduleInfo[]
installedModuleUids: string[]
installedModuleVersions: { uid: string; version: string }[]
}