feat:模块安装等待热重载提示

2024-11-22 07:04:24 +00:00 · 2022-08-30 03:01:25 +08:00 · 2022-08-30 03:01:25 +08:00 · 37425ce477
commit 37425ce477
parent 0a027b9d9d
5 changed files with 107 additions and 69 deletions
--- a/extend/ba/module/Manage.php
+++ b/extend/ba/module/Manage.php
@ -121,7 +121,7 @@ class Manage
            // 删除下载的zip
            @unlink($zipFile);

-            // 设置为安装中状态
+            // 设置为待安装状态
            $this->setInfo([
                'state' => self::WAIT_INSTALL,
            ]);
@ -141,65 +141,23 @@ class Manage

    public function enable(string $trigger)
    {
-        $info = $this->getInfo();
-        if ($info['state'] == self::WAIT_INSTALL || $info['state'] == self::CONFLICT_PENDING) {
-            $this->conflictHandle($trigger);
-            $info = $this->getInfo();
-        }
+        $this->conflictHandle($trigger);
+        $this->dependUpdateHandle();

        // 执行启用脚本
        Server::execEvent($this->uid, 'enable');
-
-        if ($info['state'] == self::DEPENDENT_WAIT_INSTALL) {
-            $waitInstall = [];
-            if (isset($info['composer_dependent_wait_install'])) {
-                $waitInstall[] = 'composer_dependent_wait_install';
-            }
-            if (isset($info['npm_dependent_wait_install'])) {
-                $waitInstall[] = 'npm_dependent_wait_install';
-            }
-            if ($waitInstall) {
-                throw new moduleException('dependent wait install', -2, [
-                    'uid'          => $this->uid,
-                    'state'        => self::DEPENDENT_WAIT_INSTALL,
-                    'wait_install' => $waitInstall,
-                    'fullreload'   => $info['fullreload'],
-                ]);
-            } else {
-                $this->setInfo([
-                    'state' => self::INSTALLED,
-                ]);
-            }
-        }
-    }
-
-    public function dependentInstallComplete(string $type)
-    {
-        $info = $this->getInfo();
-        if ($info['state'] == self::DEPENDENT_WAIT_INSTALL) {
-            if ($type == 'npm') {
-                unset($info['npm_dependent_wait_install']);
-            }
-            if ($type == 'composer') {
-                unset($info['composer_dependent_wait_install']);
-            }
-            if ($type == 'all') {
-                unset($info['npm_dependent_wait_install'], $info['composer_dependent_wait_install']);
-            }
-            if (!isset($info['npm_dependent_wait_install']) && !isset($info['composer_dependent_wait_install'])) {
-                $info['state'] = self::INSTALLED;
-            }
-            $this->setInfo([], $info);
-        }
    }

    /**
     * 处理依赖和文件冲突，并完成与前端的冲突处理交互
-     * @throws moduleException
+     * @throws moduleException|Exception
     */
-    public function conflictHandle(string $trigger)
+    public function conflictHandle(string $trigger): bool
    {
-
+        $info = $this->getInfo();
+        if ($info['state'] != self::WAIT_INSTALL && $info['state'] != self::CONFLICT_PENDING) {
+            return false;
+        }
        $fileConflict   = Server::getFileList($this->modulesDir, true);// 文件冲突
        $dependConflict = Server::dependConflictCheck($this->modulesDir);// 依赖冲突
        $installFiles   = Server::getFileList($this->modulesDir);// 待安装文件
@ -293,7 +251,6 @@ class Manage
        }

        if ($depends) {
-            $info     = $this->getInfo();
            $npm      = false;
            $composer = false;
            foreach ($depends as $key => $item) {
@ -363,6 +320,53 @@ class Manage
                }
            }
        }
+        return true;
+    }
+
+    public function dependUpdateHandle()
+    {
+        $info = $this->getInfo();
+        if ($info['state'] == self::DEPENDENT_WAIT_INSTALL) {
+            $waitInstall = [];
+            if (isset($info['composer_dependent_wait_install'])) {
+                $waitInstall[] = 'composer_dependent_wait_install';
+            }
+            if (isset($info['npm_dependent_wait_install'])) {
+                $waitInstall[] = 'npm_dependent_wait_install';
+            }
+            if ($waitInstall) {
+                throw new moduleException('dependent wait install', -2, [
+                    'uid'          => $this->uid,
+                    'state'        => self::DEPENDENT_WAIT_INSTALL,
+                    'wait_install' => $waitInstall,
+                    'fullreload'   => $info['fullreload'],
+                ]);
+            } else {
+                $this->setInfo([
+                    'state' => self::INSTALLED,
+                ]);
+            }
+        }
+    }
+
+    public function dependentInstallComplete(string $type)
+    {
+        $info = $this->getInfo();
+        if ($info['state'] == self::DEPENDENT_WAIT_INSTALL) {
+            if ($type == 'npm') {
+                unset($info['npm_dependent_wait_install']);
+            }
+            if ($type == 'composer') {
+                unset($info['composer_dependent_wait_install']);
+            }
+            if ($type == 'all') {
+                unset($info['npm_dependent_wait_install'], $info['composer_dependent_wait_install']);
+            }
+            if (!isset($info['npm_dependent_wait_install']) && !isset($info['composer_dependent_wait_install'])) {
+                $info['state'] = self::INSTALLED;
+            }
+            $this->setInfo([], $info);
+        }
    }

    public function checkPackage(): bool
--- a/web/src/lang/pages/en/module.ts
+++ b/web/src/lang/pages/en/module.ts
@ -2,9 +2,6 @@ export default {
    'stateTitle init': 'Module installer initialization...',
    'stateTitle download': 'Downloading module...',
    'stateTitle install': 'Installing module...',
-    'stateTitle handleConflicts': 'Processing conflicts...',
-    'stateTitle installDepend': 'Installing dependencies, please check the terminal window...',
-    'stateTitle installRepublish': 'Republishing, please check the terminal window...',
    'env require': 'Composer',
    'env require-dev': 'Composer-dev',
    'env dependencies': 'NPM',
--- a/web/src/lang/pages/zh-cn/module.ts
+++ b/web/src/lang/pages/zh-cn/module.ts
@ -2,9 +2,6 @@ export default {
    'stateTitle init': '模块安装器初始化...',
    'stateTitle download': '正在下载模块...',
    'stateTitle install': '正在安装模块...',
-    'stateTitle handleConflicts': '正在处理冲突...',
-    'stateTitle installDepend': '正在安装依赖，请查看终端窗口...',
-    'stateTitle installRepublish': '正在重新发布，请查看终端窗口...',
    'env require': '后端依赖（composer）',
    'env require-dev': '后端开发环境依赖（composer）',
    'env dependencies': '前端依赖（NPM）',
--- a/web/src/views/backend/module/components/install.vue
+++ b/web/src/views/backend/module/components/install.vue
@ -18,8 +18,21 @@
                ></div>
                <InstallConflict v-if="state.install.state == moduleInstallState.CONFLICT_PENDING" />
                <InstallDone
-                    v-if="state.install.state == moduleInstallState.INSTALLED || state.install.state == moduleInstallState.DEPENDENT_WAIT_INSTALL"
+                    v-if="
+                        !state.waitFullReload &&
+                        (state.install.state == moduleInstallState.INSTALLED || state.install.state == moduleInstallState.DEPENDENT_WAIT_INSTALL)
+                    "
                />
+                <div v-if="state.waitFullReload" class="install-wait-full-reload">
+                    <div v-loading="true" element-loading-text="WEB文件已更新，等待热重载..." class="wait-full-reload-loading"></div>
+                    <div class="full-reload-tips">
+                        若您未在
+                        <el-link target="_blank" type="primary" href="https://wonderful-code.gitee.io/guide/other/developerMustSee.html#开发环境">
+                            开发环境
+                        </el-link>
+                        下，请<el-link type="primary" @click="nonDevMode">点击我</el-link>继续完成安装
+                    </div>
+                </div>
            </el-scrollbar>
        </el-dialog>
    </div>
@ -31,11 +44,19 @@ import { INSTALL_MODULE_TEMP } from '/@/stores/constant/cacheKey'
 import InstallConflict from '/@/views/backend/module/components/installConflict.vue'
 import InstallDone from '/@/views/backend/module/components/installDone.vue'
 import { Session } from '/@/utils/storage'
+import { VITE_FULL_RELOAD } from '/@/stores/constant/cacheKey'
+import { useRouter } from 'vue-router'

+const router = useRouter()
 const installModuleTemp = Session.get(INSTALL_MODULE_TEMP)
 if (installModuleTemp) {
    onInstall(installModuleTemp.uid, installModuleTemp.id)
 }
+
+const nonDevMode = () => {
+    Session.set(VITE_FULL_RELOAD, true)
+    router.go(0)
+}
 </script>

 <style scoped lang="scss">
@ -45,6 +66,17 @@ if (installModuleTemp) {
 .install-loading {
    height: 500px;
 }
+.install-wait-full-reload {
+    height: 500px;
+    .wait-full-reload-loading {
+        height: 250px;
+    }
+    .full-reload-tips {
+        display: flex;
+        justify-content: center;
+        color: var(--el-color-warning);
+    }
+}
 :deep(.install-done-button) {
    display: block;
    margin: 20px auto;
--- a/web/src/views/backend/module/index.ts
+++ b/web/src/views/backend/module/index.ts
@ -60,6 +60,7 @@ export const state: {
        website: string
    }[]
    installedModuleUids: number[]
+    waitFullReload: boolean
 } = reactive({
    tableLoading: true,
    remark: '',
@ -100,6 +101,7 @@ export const state: {
    loadIndex: false,
    installedModule: [],
    installedModuleUids: [],
+    waitFullReload: false,
 })

 export const loadData = () => {
@ -242,7 +244,7 @@ export const onInstall = (uid: string, id: number) => {
    // 存储当前模块的安装进度等状态
    Session.set(INSTALL_MODULE_TEMP, { uid: uid, id: id })

-    // 发生了热重载
+    // 是否发生了热重载
    const viteFullReload = Session.get(VITE_FULL_RELOAD)

    // 获取安装状态
@ -250,11 +252,9 @@ export const onInstall = (uid: string, id: number) => {
        state.install.state = res.data.state

        if (state.install.state === moduleInstallState.INSTALLED && viteFullReload) {
-            state.install.uid = uid
            state.install.title = '安装完成'
            setInstallLoadingStateTitle(false)
-            Session.remove(INSTALL_MODULE_TEMP)
-            Session.remove(VITE_FULL_RELOAD)
+            clearTempStorage()
            return
        }

@ -272,7 +272,7 @@ export const onInstall = (uid: string, id: number) => {
            })
            state.install.showDialog = false
            setInstallLoadingStateTitle(false)
-            Session.remove(INSTALL_MODULE_TEMP)
+            clearTempStorage()
        } else {
            setInstallLoadingStateTitle(state.install.state === moduleInstallState.UNINSTALLED ? 'download' : 'install')
            execInstall(uid, id)
@ -290,11 +290,12 @@ export const execInstall = (uid: string, id: number, extend: anyObj = {}) => {

    postInstallModule(uid, id, extend)
        .then((res) => {
-            state.install.uid = uid
            state.install.title = '安装完成'
            state.install.state = moduleInstallState.INSTALLED
            if (parseInt(res.data.fullreload) === 0 || viteFullReload) {
-                Session.remove(INSTALL_MODULE_TEMP)
+                clearTempStorage()
+            } else {
+                state.waitFullReload = true
            }
        })
        .catch((err) => {
@ -313,6 +314,7 @@ export const execInstall = (uid: string, id: number, extend: anyObj = {}) => {
                state.install.waitInstallDepend = err.data.wait_install
                state.install.dependInstallState = 'executing'
                if (extend.type && extend.type == 'conflictHandle' && parseInt(err.data.fullreload) === 1) {
+                    state.waitFullReload = true
                    return
                }
                if (parseInt(err.data.fullreload) === 0 || viteFullReload) {
@ -327,8 +329,9 @@ export const execInstall = (uid: string, id: number, extend: anyObj = {}) => {
                            terminalTaskExecComplete(res, 'composer_dependent_wait_install')
                        })
                    }
-                    Session.remove(INSTALL_MODULE_TEMP)
-                    Session.remove(VITE_FULL_RELOAD)
+                    clearTempStorage()
+                } else {
+                    state.waitFullReload = true
                }
            } else if (err.code == 0) {
                ElNotification({
@ -336,7 +339,7 @@ export const execInstall = (uid: string, id: number, extend: anyObj = {}) => {
                    message: err.msg,
                })
                state.install.showDialog = false
-                Session.remove(INSTALL_MODULE_TEMP)
+                clearTempStorage()
            }
        })
        .finally(() => {
@ -372,6 +375,11 @@ const setInstallLoadingStateTitle = (installState: string | false) => {
    state.install.componentKey = uuid()
 }

+const clearTempStorage = () => {
+    Session.remove(INSTALL_MODULE_TEMP)
+    Session.remove(VITE_FULL_RELOAD)
+}
+
 export const loginExpired = (res: ApiResponse) => {
    const baAccount = useBaAccount()
    if (res.code == 301 || res.code == 408) {