基于Vue3+OOP+JSX改造项目代码，增加pnpm统一管理依赖

front-end/main-app/src/app/components/Header.tsx

@@ -1,59 +1,56 @@
-import { defineComponent, defineEmits, onMounted, PropType } from 'vue'
-import type { JSX } from "vue/jsx-runtime";
+import {Component, ComponentProps, Hook, useProps, VueComponent} from 'vue3-oop'
+import {JSX} from "vue/jsx-runtime";
+import {VNodeChild} from "vue";
 
-export default defineComponent({
-    name: "Header",
-    props: {
-        text: {
-            type: Array<{ id: number, title: string }>,
-            default: () => []
-        },
-        // 点击事件
-        onClick: {
-            type: Function as PropType<() => void>,
-            default: () => { }
-        }
-    },
-    emits: {
-        sendMessage: (message: string) => typeof message === 'string'
-    },
+interface ListItemType {
+    id: number
+    title: string
+}
 
-    setup(props, { attrs, slots, emit, expose }) {
+interface HeaderProps {
+    text?: string;
+    list: ListItemType[]
+    slots: {
+        default: () => JSX.Element;
+        haveName: () => JSX.Element;
+        item: (val: ListItemType) => VNodeChild;
+    }
+}
 
-        onMounted(() => {
-            console.log("onMounted")
-        })
+@Component()
+export default class Header extends VueComponent<HeaderProps> {
 
-        const handleClick = () => {
-            console.log("handleClick")
-            emit('sendMessage', '子给父的数据')
-        }
+    // required 的 true or false 需要和 类型中 text的? 对应
+    static defaultProps: ComponentProps<HeaderProps> = {
+        text: {default: '默认数值', required: true},
+        list: {default: () => []}
+    };
 
-        const button = (): JSX.Element => {
-            return <button onClick={handleClick}>父向子emit点我</button>
-        }
+    @Hook('Mounted')
+    mounted() {
+        console.log("this: ", this);
+        console.log('Header 组件的 mounted 生命周期...')
+    }
 
-        return () => (
-            <div>
-                <h1 onClick={props.onClick}>头部组件-点我</h1>
 
-                {button()}
+    render() {
+        const {text, list} = useProps<HeaderProps>();
 
-                {slots.default?.()}
-
-                {slots.header?.()}
-
-                <div class="ScopedSlots">
-                    <p>作用于插槽：</p>
-                    <ul>
-                        {
-                            props.text.map(item => {
-                                return slots.scoped?.(item)
-                            })
-                        }
-                    </ul>
-                </div>
+        return (
+            <div class="header">
+                头部组件
+                <p>{text}</p>
+                {this.context.slots.default?.()}
+                {this.context.slots.haveName?.()}
+                <ul>
+                    {
+                        list.map(
+                            item =>
+                                this.context.slots.item?.(item)
+                        )
+                    }
+                </ul>
             </div>
         )
     }
-})
+}