修改文件结构

front-end/main-app/src/app/App.tsx

@@ -0,0 +1,17 @@
+import { defineComponent } from 'vue'
+import { RouterLink, RouterView } from "vue-router";
+
+export default defineComponent({
+    name: 'App',
+    setup() {
+        return () => (
+            <>
+                <div id="nav">
+                    <RouterLink to="/">首页</RouterLink> |
+                    <RouterLink to="/about">我的</RouterLink>
+                </div>
+                <RouterView></RouterView>
+            </>
+        )
+    }
+})

front-end/main-app/src/app/assets/base.css

@@ -0,0 +1,86 @@
+/* color palette from <https://github.com/vuejs/theme> */
+:root {
+  --vt-c-white: #ffffff;
+  --vt-c-white-soft: #f8f8f8;
+  --vt-c-white-mute: #f2f2f2;
+
+  --vt-c-black: #181818;
+  --vt-c-black-soft: #222222;
+  --vt-c-black-mute: #282828;
+
+  --vt-c-indigo: #2c3e50;
+
+  --vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
+  --vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
+  --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
+  --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
+
+  --vt-c-text-light-1: var(--vt-c-indigo);
+  --vt-c-text-light-2: rgba(60, 60, 60, 0.66);
+  --vt-c-text-dark-1: var(--vt-c-white);
+  --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
+}
+
+/* semantic color variables for this project */
+:root {
+  --color-background: var(--vt-c-white);
+  --color-background-soft: var(--vt-c-white-soft);
+  --color-background-mute: var(--vt-c-white-mute);
+
+  --color-border: var(--vt-c-divider-light-2);
+  --color-border-hover: var(--vt-c-divider-light-1);
+
+  --color-heading: var(--vt-c-text-light-1);
+  --color-text: var(--vt-c-text-light-1);
+
+  --section-gap: 160px;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color-background: var(--vt-c-black);
+    --color-background-soft: var(--vt-c-black-soft);
+    --color-background-mute: var(--vt-c-black-mute);
+
+    --color-border: var(--vt-c-divider-dark-2);
+    --color-border-hover: var(--vt-c-divider-dark-1);
+
+    --color-heading: var(--vt-c-text-dark-1);
+    --color-text: var(--vt-c-text-dark-2);
+  }
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  font-weight: normal;
+}
+
+body {
+  min-height: 100vh;
+  color: var(--color-text);
+  background: var(--color-background);
+  transition:
+    color 0.5s,
+    background-color 0.5s;
+  line-height: 1.6;
+  font-family:
+    Inter,
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    Roboto,
+    Oxygen,
+    Ubuntu,
+    Cantarell,
+    'Fira Sans',
+    'Droid Sans',
+    'Helvetica Neue',
+    sans-serif;
+  font-size: 15px;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}

front-end/main-app/src/app/assets/logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>

front-end/main-app/src/app/assets/main.css

@@ -0,0 +1,35 @@
+@import './base.css';
+
+#app {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  font-weight: normal;
+}
+
+a,
+.green {
+  text-decoration: none;
+  color: hsla(160, 100%, 37%, 1);
+  transition: 0.4s;
+  padding: 3px;
+}
+
+@media (hover: hover) {
+  a:hover {
+    background-color: hsla(160, 100%, 37%, 0.2);
+  }
+}
+
+@media (min-width: 1024px) {
+  body {
+    display: flex;
+    place-items: center;
+  }
+
+  #app {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    padding: 0 2rem;
+  }
+}

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

@@ -0,0 +1,54 @@
+import { defineComponent, defineEmits, onMounted} from 'vue'
+import type { JSX } from "vue/jsx-runtime";
+
+export default defineComponent({
+    name: "Header",
+    props: {
+        text: {
+            type: Array<{ id: number, title: string }>,
+            default: () => []
+        }
+    },
+    emits: {
+        sendMessage: (message: string) => typeof message === 'string'
+    },
+
+    setup(props, { attrs, slots, emit, expose }) {
+
+        onMounted(() => {
+            console.log("onMounted")
+        })
+
+        const handleClick = () => {
+            console.log("handleClick")
+            emit('sendMessage', '子给父的数据')
+        }
+
+        const button = (): JSX.Element => {
+            return <button onClick={handleClick}>父向子emit点我</button>
+        }
+
+        return () => (
+            <div>
+                <h1>头部组件</h1>
+
+                { button() }
+
+                { slots.default?.() }
+
+                { slots.header?.() }
+
+                <div class="ScopedSlots">
+                    <p>作用于插槽：</p>
+                    <ul>
+                        {
+                            props.text.map(item => {
+                                return slots.scoped?.(item)
+                            })
+                        }
+                    </ul>
+                </div>
+            </div>
+        )
+    }
+})

front-end/main-app/src/app/main.ts

@@ -0,0 +1,13 @@
+// import './assets/main.css'
+
+import { createApp } from 'vue'
+import { createPinia } from 'pinia'
+
+import App from './App'
+import router from './router'
+
+createApp(App)
+    .use(createPinia())
+    .use(router)
+    .mount('#app')
+

front-end/main-app/src/app/router/index.ts

@@ -0,0 +1,24 @@
+import { createRouter, createWebHistory } from 'vue-router'
+
+const router = createRouter({
+    history: createWebHistory(import.meta.env.BASE_URL),
+    routes: [
+        {
+            path: '/',
+            name: 'home',
+            component: () => import('../views/Home'),
+        },
+        {
+            path: '/about',
+            name: 'about',
+            component: () => import('../views/About'),
+        },
+        {
+            path: '/:pathMatch(.*)*',
+            name: 'NotFound',
+            component: () => import('../views/NotFound')
+        }
+    ],
+})
+
+export default router

front-end/main-app/src/app/stores/counter.ts

@@ -0,0 +1,12 @@
+import { ref, computed } from 'vue'
+import { defineStore } from 'pinia'
+
+export const useCounterStore = defineStore('counter', () => {
+  const count = ref(0)
+  const doubleCount = computed(() => count.value * 2)
+  function increment() {
+    count.value++
+  }
+
+  return { count, doubleCount, increment }
+})

front-end/main-app/src/app/views/About.tsx

@@ -0,0 +1,12 @@
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: "About",
+  setup() {
+    return () => (
+      <div class="about">
+        <h1>我的</h1>
+      </div>
+    )
+  }
+})

front-end/main-app/src/app/views/Home.tsx

@@ -0,0 +1,60 @@
+import { defineComponent, reactive, onMounted } from 'vue'
+import Header from '@/components/Header'
+import { HttpConfig } from '@shared/config/index'
+import { UrlCheckUtils } from '@shared/utils'
+import { useCounterStore } from '@/stores/counter'
+import { storeToRefs } from 'pinia'
+
+interface stateType {
+  list: ListItemType[]
+}
+
+interface ListItemType {
+  id: number
+  title: string
+}
+
+export default defineComponent({
+  name: "Home",
+  setup() {
+
+    const counterStore = useCounterStore()
+    const { increment } = counterStore
+    const { count, doubleCount } = storeToRefs(counterStore)
+
+    const state = reactive<stateType>({
+      list: [
+        { id: 1, title: '新闻1' },
+        { id: 2, title: '新闻2' },
+        { id: 3, title: '新闻3' },
+      ]
+    })
+
+
+
+    onMounted(() => {
+      // console.log("onMounted: ", HttpConfig.DevBaseUrl);
+      console.log("check: ", UrlCheckUtils.check())
+    })
+
+    // 定义处理子组件事件的函数
+    const handleChildEvent = (message: string) => {
+      console.log('收到子组件事件：', message)
+    }
+
+
+    return () => (
+      <div class="home">
+        <Header text={state.list} onSendMessage={handleChildEvent}>
+          {{
+            scoped: (item: ListItemType) => <li key={item.id}>{item.title}</li>,
+            header: () => <div class="header">父到子 具名 插槽</div>,
+            default: () => <div class="default">父到子 default 插槽</div>
+          }}
+        </Header>
+        <h1>首页</h1>
+        <div class="count" onClick={increment}>点我+1：{count.value}</div>
+      </div>
+    )
+  }
+})

front-end/main-app/src/app/views/NotFound.tsx

@@ -0,0 +1,11 @@
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+    setup() {
+        return () => (
+            <div class="404">
+                <h1>404</h1>
+            </div>
+        )
+    }
+})

front-end/main-app/src/shared/config/HttpConfig.ts

@@ -0,0 +1,5 @@
+export default class HttpConfig {
+    public static DevBaseUrl: string = "http://127.0.0.1:8080"
+    public static prodBaseUrl: string = "http://127.0.0.1:9090/api"
+    public static apiList: string = ""
+}

front-end/main-app/src/shared/config/ThemeConfig.ts

@@ -0,0 +1,4 @@
+export default class ThemeConfig {
+    public static primaryColor: string = '#1890ff'; // 主色调
+    public static layoutType: 'side' | 'top' = 'side'; // 侧边栏布局
+}

front-end/main-app/src/shared/config/index.ts

@@ -0,0 +1,4 @@
+import HttpConfig from './HttpConfig';
+import ThemeConfig from './ThemeConfig';
+
+export { HttpConfig, ThemeConfig };

front-end/main-app/src/shared/infra/AxiosInfra.ts

@@ -0,0 +1,93 @@
+import axios, { type AxiosInstance, AxiosError, type AxiosRequestConfig, type InternalAxiosRequestConfig } from "axios";
+import { UrlCheckUtils } from '@shared/utils/index'
+
+
+class AxiosInfra {
+    public instance: AxiosInstance;
+
+    public constructor() {
+        this.instance = axios.create({
+            baseURL: UrlCheckUtils.check(),
+            timeout: 10000,
+            headers: {
+                "Content-Type": "application/json"
+            }
+        });
+        this.ResponseInterceptor();
+        this.RequestInterceptor();
+    }
+
+    public async get(params: AxiosRequestConfig): Promise<any> {
+        return await this.instance.get(<string>params.url, {
+            params: params.data,
+            headers: Object.assign({ Authorization: localStorage.getItem("token") }, params.headers)
+        });
+    }
+
+    public async post(params: AxiosRequestConfig): Promise<any> {
+        return await this.instance.post(<string>params.url, params.data, {
+            headers: Object.assign({ Authorization: localStorage.getItem("token") }, params.headers)
+        })
+    }
+
+    /**
+     * Put 请求
+         * 请求参数请参考接口：RequestParams
+     * @param params
+     */
+    public async put(params: AxiosRequestConfig): Promise<any> {
+        return await this.instance.put(<string>params.url, params.data)
+    }
+
+    /**
+     * delete 请求
+         * 请求参数请参考接口：RequestParams
+     * @param params
+     */
+    public async delete(params: AxiosRequestConfig): Promise<any> {
+        return await this.instance.delete(<string>params.url, { params: params.data })
+    }
+
+    /**
+     * 响应拦截器
+     * @constructor
+     */
+    public async ResponseInterceptor(): Promise<any> {
+        this.instance.interceptors.response.use(
+            (response: any) => {
+                return response.data.result;
+            },
+            (error: AxiosError) => {
+                console.log(`
+        ❌ 请求错误 ❌
+        1、基地址: ${error.config?.baseURL}
+        2、短地址: ${error.config?.url}
+        3、请求 方式: ${error.config?.method}
+        4、请求 参数: ${JSON.stringify(error.config?.params)}
+        5、请求  头 :  ${JSON.stringify(error.config?.headers)}
+        
+        ------------------------------------------------------------
+        
+        6、错误信息为: ${error.message}
+        7、错误代码为: ${error.stack}
+        `);
+                return Promise.reject(error)
+            })
+    }
+
+    /**
+     * 添加请求拦截器
+     * @constructor
+     */
+    public async RequestInterceptor(): Promise<any> {
+        this.instance.interceptors.request.use((config: any) => {
+            return config
+        }, function (error: AxiosError) {
+            return Promise.reject(error)
+        })
+    }
+
+}
+
+
+export default new AxiosInfra();

front-end/main-app/src/shared/types/env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

front-end/main-app/src/shared/types/shim.d.ts

@@ -0,0 +1,4 @@
+declare module '*.vue' {
+    import Vue from 'vue';
+    export default Vue;
+}

front-end/main-app/src/shared/utils/UrlCheckUtils.ts

@@ -0,0 +1,12 @@
+import { HttpConfig } from '@shared/config/index'
+
+export default class UrlCheckUtils {
+
+    public static check() {
+        if (import.meta.env.MODE === 'production') {
+            return HttpConfig.prodBaseUrl;
+        } else {
+            return HttpConfig.DevBaseUrl;
+        }
+    }
+}

front-end/main-app/src/shared/utils/index.ts

@@ -0,0 +1,3 @@
+import UrlCheckUtils from './UrlCheckUtils';
+
+export { UrlCheckUtils };