本项目使用了AlpineJs作为前端主要库，目的是简单快捷，语法类似于VUE2.

中文官网：https://www.alpinejs.cn/
国际官网：https://alpinejs.dev/

和UI相关的资源，本项目使用了如下的资源
https://www.penguinui.com/
https://devdojo.com/pines
https://pinemix.com/


更多信息可以在bing中搜索alpine js ui library


作者编写了alp_unit.js实现单一模块的封装和加载，如下所示：

<div alp-unit="kg.html"></div>
<div alp-unit="kg2.aps"></div>


其中动态加载，需要手工指定触发时机，如下方式：

 <!-- 智能体对话窗口-->
<template x-if="ppt_modalIsOpen">
    <div id="ppt_ai_dialog" alp-unit="chat_agent.html"></div>
</template>

1. init函数中监控触发
    init(){

    //动态加载,AI对话框
    this.$watch('ppt_modalIsOpen',value => {
        if (value){
            this.$nextTick(() => { 
                var dom = document.getElementById("ppt_ai_dialog")
                scan_alp_units(dom); 
            });
        }
    });

    },//初始化函数

2. 事件触发函数：
enter_chat_agent(index){
    //先设置值
    this.ppt_modalIsOpen = true;
    
    //更新后动态加载
    this.$nextTick(() => { 
        var dom = document.getElementById("ppt_ai_dialog")
        scan_alp_units(dom); 
    });

}

==============================事件分发价值，在多个组件之间进行消息数据的传递=======================
<h3>注意:事件名称一定要全部小写，这是AlpineJs,但可以使用-,如my-event等<h3>
跨组件不能使用x-model,最多就是使用下级还没有定义的上级的一些属性和方法，复杂的情况都需要使用事件来传递

1. 组件内和上下级组件传递和接收
<div @myevent="console.log($event.detail.foo)">
    <button @click="$dispatch('myevent', { foo: 'bar' })">
    <!-- 点击时，将触发 console.log -->
    
</div>

2. 函数内定义和接收参数
<div @myevent-2="handel($event)">
    <button @click="click2">
</div>

<script>
   {
    //定义的函数
   
    click2(){
        this.$dispatch('myevent-2', { foo: 'two' })
    },
    handel(event){
        alert(event.detail.foo)
    }
} 
</script>

3. 平行组件的接收
<div x-data @custom-event.window="console.log($event.detail)"></div>

<button x-data @click="$dispatch('custom-event', 'Hello World!')">

加上.windows即可


===========================初始化隐藏和闪屏问题=======================
1. 在元素上同时使用 x-show 和 x-cloak
Html
深色版本
<div x-data="{ open: false }">
    <button @click="open = !open">Toggle</button>

    <!-- 这个面板默认是隐藏的，但初始化前可能闪现 -->
    <div x-show="open" x-cloak>
        我是弹出内容！
    </div>
</div>
2. 全局 CSS 中定义 x-cloak 隐藏规则（必须！）
Html
深色版本
<style>
    [x-cloak] {
        display: none !important;
    }
</style>
💡 即使 x-show 最终会设为 false，但在 Alpine 初始化完成前，浏览器仍会渲染该元素。x-cloak 确保它在初始化前始终隐藏。