<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><link rel="icon" href="/favicon.ico" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>人人开源 - 快速开发平台</title><script>//全局钩子/** 定义了一个全局变量 SITE_CONFIG，其中包含了应用程序中的一些配置信息。具体含义如下：apiURL: "<%=apiURL%>": 这是一个 API 的 URL 地址。
* 在代码中使用了 <%=apiURL%> 这样的语法，它可能是一个模板字符串或者模板引擎的语法，用来动态地将实际的 API 地址填充到这个位置。
* 换句话说，这个字段存储了应用程序需要与后端通信的接口地址。
通过将这些配置信息存储在 SITE_CONFIG 对象中，并将其定义为全局变量，可以在应用程序的任何地方方便地访问和使用这些配置信息，
* 而不需要重复地在各个模块中定义或引入。*** */window.SITE_CONFIG = {//apiapiURL: "<%=apiURL%>"};</script></head><body><div id="app"></div><script type="module" src="./src/main.ts"></script></body>
</html><script lang="ts">
import "@/assets/css/app.less";
import "@/assets/theme/index.less";
import "@/assets/theme/mobile.less";
import FullscreenLayout from "@/layout/fullscreen-layout.vue";
import Layout from "@/layout/index.vue";
import { ElConfigProvider } from "element-plus";
import { defineComponent, onMounted, reactive, watch } from "vue";
import { useRoute } from "vue-router";
import { useAppStore } from "@/store";
import app from "./constants/app";
import { EPageLayoutEnum, EThemeColor, EThemeSetting } from "./constants/enum";
import { IObject } from "./types/interface";
import { getThemeConfigCache, setThemeColor, updateTheme } from "./utils/theme";export default defineComponent({ /*这里使用 defineComponent 函数创建了一个 Vue 组件，并通过 export default 将其导出为默认模块*/name: "App", /*组件的名称，命名为 "App"*/components: { Layout, FullscreenLayout, [ElConfigProvider.name]: ElConfigProvider }, /*这里声明了组件中引入的其他组件。Layout、FullscreenLayout 和 ElConfigProvider 是其他组件，通过这种方式在当前组件中注册，以便在模板中使用*/setup() { /*这是 Composition API 的入口函数，用于组件的逻辑设置。*/const store = useAppStore();/*使用 useAppStore() hook 获取应用程序的状态管理仓库。*/const route = useRoute();/*使用 useRoute() hook 获取当前路由信息*/const state = reactive({layout: location.href.includes("pop=true") ? EPageLayoutEnum.fullscreen : EPageLayoutEnum.page}); /*使用 reactive() 函数创建一个响应式对象 state，其中包含了组件内部的状态，包括了布局信息*/onMounted(() => {/*在组件被挂载后执行的钩子函数，用于在组件挂载后执行一些操作，如在此处进行主题色缓存的读取和主题更新*///读取主题色缓存const themeCache = getThemeConfigCache();const themeColor = themeCache[EThemeSetting.ThemeColor];setThemeColor(EThemeColor.ThemeColor, themeColor);updateTheme(themeColor);});/*用于监听某些数据的变化，并在数据变化时执行相应的操作。在此处监听了路由信息的变化，根据路由信息更新了组件的布局状态*/watch(() => [route.path, route.query, route.fullPath],([path, query, fullPath]) => {store.updateState({ activeTabName: fullPath });state.layout = app.fullscreenPages.includes(path as string) || (query as IObject)["pop"] ? EPageLayoutEnum.fullscreen : EPageLayoutEnum.page;});/*返回一个对象，其中包含了组件中需要在模板中访问的属性和方法，这些属性和方法会被绑定到组件的模板中*/return {store,state,pageTag: EPageLayoutEnum.page};}
});
</script>
<template><el-config-provider><div v-if="!store.state.appIsRender" v-loading="true" :element-loading-fullscreen="true" :element-loading-lock="true" style="width: 100vw; height: 100vh; position: absolute; top: 0; left: 0; z-index: 99999; background: #fff"></div><template v-if="store.state.appIsReady"><layout v-if="state.layout === pageTag"> </layout><fullscreen-layout v-else></fullscreen-layout> <!--自定义组件，全局布局--></template></el-config-provider>
</template>import "@/assets/icons/iconfont/iconfont.js";
import RenDeptTree from "@/components/ren-dept-tree";
import RenRadioGroup from "@/components/ren-radio-group";
import RenRegionTree from "@/components/ren-region-tree";
import RenSelect from "@/components/ren-select";
import ElementPlus from "element-plus";
import "element-plus/theme-chalk/display.css";
import "element-plus/theme-chalk/index.css";
import locale from "element-plus/es/locale/lang/zh-cn";
import { createApp } from "vue";
import { createPinia } from "pinia";
import App from "./App.vue";
import router from "./router";
import * as ElementPlusIcons from "@element-plus/icons-vue";import axios from "axios";
import "virtual:svg-icons-register";const app = createApp(App); /*创建了一个 Vue 应用实例 app，并将其初始化为一个使用 App 组件的应用。*//*总之，这段代码的作用是将 Element Plus 图标组件注册到 Vue 应用实例中，以便在应用中使用这些图标。*/
Object.keys(ElementPlusIcons).forEach((iconName) => {app.component(iconName, ElementPlusIcons[iconName as keyof typeof ElementPlusIcons]); /*在 Vue 应用实例 app 中注册了 Element Plus 图标组件。iconName 是当前图标的名称，ElementPlusIcons[iconName] 获取了对应图标的组件。keyof typeof ElementPlusIcons 是 TypeScript 中的一种类型声明，它确保我们在访问 ElementPlusIcons 对象时使用的键是该对象实际上具有的键之一*/
});/*使用 Object.keys() 方法获取了 ElementPlusIcons 对象的所有键（即图标的名称），然后通过 forEach 方法遍历每个键。 *//*这段代码是在一个 Vue.js 应用中配置各种插件和组件，然后将应用挂载到 HTML 页面上*/
app.use(createPinia()) /*使用了 Vue.js 的状态管理库 Pinia，通过 createPinia() 函数创建了一个 Pinia 实例，并将其添加到 Vue 应用中*/.use(router) /*使用了 Vue Router，将 Vue Router 实例添加到 Vue 应用中，以便进行页面路由导航。*/.use(RenRadioGroup) /*使用了自定义的 RenRadioGroup 组件，将其添加到 Vue 应用中。*/.use(RenSelect) /**/.use(RenDeptTree).use(RenRegionTree).use(ElementPlus, { size: "default", locale: locale }) /*在 Vue 应用实例 app 中注册了 Element Plus 图标组件。iconName 是当前图标的名称，ElementPlusIcons[iconName] 获取了对应图标的组件。keyof typeof ElementPlusIcons 是 TypeScript 中的一种类型声明，它确保我们在访问 ElementPlusIcons 对象时使用的键是该对象实际上具有的键之一*/.mount("#app"); /*将 Vue 应用实例挂载到 HTML 页面上的一个具有 id 为 "app" 的 DOM 元素上，这是 Vue 应用的根元素。也就是index.html *//*将 axios 赋值给全局对象 window 的一个属性 axios。
这样做的目的是在浏览器环境中，可以通过 window.axios 来访问和使用 axios，而无需在每个模块中单独引入和使用 axios。
这种做法在某些情况下可以方便地在整个应用程序中共享和使用 axios，但也可能增加了全局变量的数量，因此需要谨慎使用*/
window.axios = axios;
