QQs'Note

// --- 创建模型和画布纹理 ---
const canvas = document.createElement('canvas');
canvas.width = 1024;
canvas.height = 1024;
const context = canvas.getContext('2d');
context.fillStyle = '#ffffff';
context.fillRect(0, 0, canvas.width, canvas.height);

const texture = new THREE.CanvasTexture(canvas);
texture.minFilter = THREE.LinearFilter;
texture.magFilter = THREE.LinearFilter;

const material = new THREE.MeshStandardMaterial({
    map: texture,
    roughness: 0.8,
    metalness: 0.2,
});

const geometry = new THREE.SphereGeometry(2, 64, 64);
const sphere = new THREE.Mesh(geometry, material);
scene.add(sphere);

// --- 射线投射和鼠标事件 ---
const raycaster = new THREE.Raycaster();
const mouse = new THREE.Vector2();
let isPainting = false;

function onMouseMove(event) {
    mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
    mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
    if (isPainting) {
        paint();
    }
}

function onMouseDown(event) {
    isPainting = true;
    paint();
}

function onMouseUp(event) {
    isPainting = false;
}

window.addEventListener('mousemove', onMouseMove);
window.addEventListener('mousedown', onMouseDown);
window.addEventListener('mouseup', onMouseUp);

// --- 核心绘制函数 ---
function paint() {
  raycaster.setFromCamera(mouse, camera);
  const intersects = raycaster.intersectObject(sphere);

  if (intersects.length > 0) {
    const intersect = intersects[0];
    const uv = intersect.uv;
    const x = uv.x * canvas.width;
    const y = (1 - uv.y) * canvas.height;

    const brushRadius = 20;
    context.fillStyle = '#ff0000'; // 红色笔刷
    context.beginPath();
    context.arc(x, y, brushRadius, 0, Math.PI * 2);
    context.fill();

    texture.needsUpdate = true;
  }
}

class EventBus {
  constructor() {
    this.events = {}; // 存储事件和对应的回调函数列表 eventKey - Array<callback>
  }

  // 订阅事件
  on(eventName, callback) {
    if (!this.events[eventName]) {
      this.events[eventName] = [];
    }
    this.events[eventName].push(callback);
  }

  // 发布事件
  emit(eventName, data) {
    if (this.events[eventName]) {
      this.events[eventName].forEach(callback => {
        callback(data);
      });
    }
  }

  // 取消订阅
  off(eventName, callback) {
    if (this.events[eventName]) {
      this.events[eventName] = this.events[eventName].filter(
        cb => cb !== callback
      );
    }
  }

  // 只订阅一次
  once(eventName, callback) {
    const wrapper = (data) => {
      callback(data);
      this.off(eventName, wrapper);
    };
    this.on(eventName, wrapper);
  }
}

// 使用示例
const bus = new EventBus();

// 订阅事件
bus.on('sayHello', (data) => {
  console.log('Hello, ' + data.name);
});

// 发布事件
bus.emit('sayHello', { name: 'Alice' }); // 输出: Hello, Alice

// 取消订阅
const handler = (data) => console.log('Goodbye, ' + data.name);
bus.on('sayGoodbye', handler);
bus.emit('sayGoodbye', { name: 'Bob' }); // 输出: Goodbye, Bob
bus.off('sayGoodbye', handler);
bus.emit('sayGoodbye', { name: 'Bob' }); // 无输出

// 只订阅一次
bus.once('greet', (data) => console.log('Greetings, ' + data.name));
bus.emit('greet', { name: 'Charlie' }); // 输出: Greetings, Charlie
bus.emit('greet', { name: 'Charlie' }); // 无输出

npm i @micro-zoe/micro-app -S

// src/index.js
import microApp from '@micro-zoe/micro-app'

microApp.start()

<template>
  <div>
    <h1>子应用</h1>
    <!--
      name(必传)：应用名称
      url(必传)：应用地址，会被自动补全为http://localhost:3000/index.html
      baseroute(可选)：基座应用分配给子应用的基础路由，就是上面的 `/my-page`
     -->
    <micro-app name='learnvue' url='http://localhost:8081/' baseroute="/dentition"></micro-app>
  </div>
</template>

npm i qiankun -S

<template>
  <div id="viewport">
    <div id="subapp-root"></div>
  </div>
</template>
<script>
import { registerMicroApps, start } from 'qiankun'

export default {
  name: '',
  data () {
    return {}
  },
  mounted () {
    // 注册微应用
    registerMicroApps([
      {
        name: 'learnvue', // app name registered
        entry: '//localhost:8081',
        container: '#viewport',
        activeRule: '/dentition'
      }
    ])

    if (!window.qiankunStarted) {
      window.qiankunStarted = true
      start()
    }
  }
}
</script>

import { loadMicroApp } from 'qiankun';

loadMicroApp({
  name: 'app',
  entry: '//localhost:7100',
  container: '#yourContainer',
});

const { defineConfig } = require('@vue/cli-service')
const packageName = require('./package.json').name;

module.exports = defineConfig({
  transpileDependencies: true,
  
  devServer: {
    port: 8081,
    headers: {
      // 微前端需要跨域
      'Access-Control-Allow-Origin': '*'
    }
  },
  configureWebpack: {
    output: {
      library: `${packageName}-[name]`, // [name]是打包时trunk名称的占位符
      libraryTarget: 'umd', // Universal Module Definition通用模块定义
      chunkLoadingGlobal: `webpackJsonp_${packageName}`,
    }
  }
})

//main.js
import Vue from 'vue'
import App from './App.vue'
import './public-path'
import router from './router'

Vue.config.productionTip = false

let instance = null;

function render(props = {}) {
  const { container } = props;

  instance = new Vue({
    router,
    render: h => h(App)
  }).$mount(container ? container.querySelector('#app') : '#app')
}

// Running in qiankun
/* eslint-disable no-undef */
if (window.__POWERED_BY_QIANKUN__) {
  __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}

// Running standalone
if (!window.__POWERED_BY_QIANKUN__) {
  render();
}

export async function bootstrap() {
  console.log('[vue] vue app bootstraped');
}

export async function mount(props) {
  console.log('[vue] props from main framework', props);
  render(props);
}

export async function unmount() {
  instance.$destroy();
  instance.$el.innerHTML = '';
  instance = null;
}

export async function update(props) {
  console.log('update props', props)
}

git clone https://github.com/emscripten-core/emsdk.git
cd emsdk

git pull
# need google access
./emsdk.bat install latest
./emsdk.bat activate latest

cd ..
git clone https://github.com/microsoft/vcpkg.git
cd vcpkg

.\bootstrap-vcpkg.bat

# add vcpkg directory into env variable path

cd ../Workspace/WasmOpenGLProject
vcpkg install boost:wasm32-emscripten 

vcpkg install glm:wasm32-emscripten

vcpkg install glad:wasm32-emscripten

Trying to rename Makefile-333 -> Makefile: Permission denied
make[1]: *** [Makefile:2395: depend] Error 13
make: *** [Makefile:2293: build_modules] Error 2
make: *** Waiting for unfinished jobs....

set VCPKG_MAX_CONCURRENCY=1
vcpkg install openssl:wasm32-emscripten --clean-after-build

mkdir build
cd build
emcmake cmake -G "Ninja" ^
    -DCMAKE_SYSTEM_NAME=Emscripten ^
    -DCMAKE_SYSTEM_PROCESSOR=x86 ^
    -DCMAKE_TOOLCHAIN_FILE="%VCPKG_HUGE%/scripts/buildsystems/vcpkg.cmake" ^
    -DVCPKG_CHAINLOAD_TOOLCHAIN_FILE="%EMSDK%/upstream/emscripten/cmake/Modules/Platform/Emscripten.cmake" ^
    -DVCPKG_TARGET_TRIPLET=wasm32-emscripten ^
    -DCMAKE_C_COMPILER="%EMCC_PATH%" ^
    -DCMAKE_CXX_COMPILER="%EMXX_PATH%" ^
    -DCMAKE_BUILD_TYPE=Release ^
    -DCMAKE_FIND_ROOT_PATH_MODE_PACKAGE=BOTH ^
    -DCMAKE_PREFIX_PATH="%VCPKG_HUGE%/installed/wasm32-emscripten" ^
    ..
cd ..

cd build
emmake ninja

axios.post('/api/submit', this.editForm)
        .then(response => {
          console.log('Form submitted successfully:', response.data);
        })
        .catch(error => {
          console.error('Error submitting form:', error);
        });

      axios.request({
        url: '/api/submit',
        method: 'post',
        data: this.editForm
      }).then(response => {
        console.log('Form submitted successfully:', response.data);
      }).catch(error => {
        console.error('Error submitting form:', error);
      });

const instance = axios.create({ baseURL: '/api' });

// Works just like axios(config)
instance({
  url: '/users',
  method: 'get'
});

// Add a request interceptor
axios.interceptors.request.use(function (config) {
    // Do something before request is sent
    return config;
  }, function (error) {
    // Do something with request error
    return Promise.reject(error);
  },
  { synchronous: true, runWhen: () => /* This function returns true */}
);

// Add a response interceptor
axios.interceptors.response.use(function onFulfilled(response) {
    // Any status code that lie within the range of 2xx cause this function to trigger
    // Do something with response data
    return response;
  }, function onRejected(error) {
    // Any status codes that falls outside the range of 2xx cause this function to trigger
    // Do something with response error
    return Promise.reject(error);
  });

<ItemGroup>
  <PackageReference Include="HandyControl" Version="3.5.1" />
  <PackageReference Include="Prism.Unity" Version="8.1.97" />
</ItemGroup>

<prism:PrismApplication
    x:Class="WpfApp1.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:WpfApp1"
    xmlns:prism="http://prismlibrary.com/">
    <Application.Resources>
    </Application.Resources>
</prism:PrismApplication>

// 创建程序主窗口
protected override Window CreateShell()
{
    return Container.Resolve<MainWindow>();
}

protected override void RegisterTypes(IContainerRegistry container)
{
    // 注册导航页面和ViewModel
    container.RegisterForNavigation<MainWindow, MainWindowViewModel>();
    
    // 注册单例服务
    container.RegisterSingleton<IMyService, MyService>();

    // 配置文件基础路径
    string programData = System.Environment.GetFolderPath(System.Environment.SpecialFolder.MyDocuments);
    programData = Path.Combine(programData, "xxxx");
    
    // 从注册表读取配置路径
    using (var key = Registry.LocalMachine.OpenSubKey($@"SOFTWARE\xxxx"))
    {
        if (key != null && key.GetValue("SolutionPath") != null)
        {
            programData = key.GetValue("SolutionPath").ToString();
        }
    }

    // 初始化全局缓存
    GlobalCache.Instance.FileBasePath = programData;
    GlobalCache.Instance.InitPaths();
}