chore: 更新项目配置并添加 p5.js 粒子演示

.clinerules_MD

@@ -1,4 +0,0 @@
-```bash
-ln -s .github/copilot-instructions.md .clinerules
-ln -s .github/copilot-instructions.md .clinerules-code
-```

.github/copilot-instructions_MD

@@ -0,0 +1,3 @@
+```bash
+ln -s .github/copilot-instructions.md .roorules
+```

.vscode/settings.json

@@ -30,7 +30,8 @@
     "source.fixAll.eslint": "never",
     "source.fixAll.stylelint": "never",
     "source.fixAll.oxc": "never",
-    "source.organizeImports": "never"
+    "source.organizeImports": "never",
+    "source.fixAll": "never"
   },
   "editor.formatOnSave": false
 }

package.json

@@ -50,6 +50,7 @@
     "@pinia/colada": "^0.14.2",
     "@primeuix/themes": "^1.0.1",
     "@splinetool/runtime": "^1.9.82",
+    "@types/p5": "^1.7.6",
     "@unhead/vue": "^2.0.2",
     "@vant/use": "^1.6.0",
     "@vueuse/core": "^13.0.0",
@@ -66,6 +67,7 @@
     "lucide-vue-next": "^0.485.0",
     "mitt": "^3.0.1",
     "nprogress": "^0.2.0",
+    "p5": "^1.11.3",
     "page-stack-vue3": "^2.5.6",
     "pinia": "^3.0.1",
     "pinia-plugin-persistedstate": "^4.2.0",

pnpm-lock.yaml

@@ -31,6 +31,9 @@ importers:
       '@splinetool/runtime':
         specifier: ^1.9.82
         version: 1.9.82
+      '@types/p5':
+        specifier: ^1.7.6
+        version: 1.7.6
       '@unhead/vue':
         specifier: ^2.0.2
         version: 2.0.2(vue@3.5.13(typescript@5.8.3))
@@ -79,6 +82,9 @@ importers:
       nprogress:
         specifier: ^0.2.0
         version: 0.2.0
+      p5:
+        specifier: ^1.11.3
+        version: 1.11.3
       page-stack-vue3:
         specifier: ^2.5.6
         version: 2.5.6(vue-router@4.5.0(vue@3.5.13(typescript@5.8.3)))(vue@3.5.13(typescript@5.8.3))
@@ -1431,6 +1437,9 @@ packages:
   '@types/nprogress@0.2.3':
     resolution: {integrity: sha512-k7kRA033QNtC+gLc4VPlfnue58CM1iQLgn1IMAU8VPHGOj7oIHPp9UlhedEnD/Gl8evoCjwkZjlBORtZ3JByUA==}
 
+  '@types/p5@1.7.6':
+    resolution: {integrity: sha512-6pLTOo0V3N5jZb5nTwjiv3lPHLK3Z/TjbhQUj8CTWXocUk1Z/f6OHTp3Pcwi1BhWnf5gqKUcyEb1gP0KIJuQgw==}
+
   '@types/parse-json@4.0.2':
     resolution: {integrity: sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw==}
 
@@ -3587,6 +3596,9 @@ packages:
     resolution: {integrity: sha512-VkndIv2fIB99swvQoA65bm+fsmt6UNdGeIB0oxBs+WhAhdh08QA04JXpI7rbB9r08/nkbysKoya9rtDERYOYMA==}
     engines: {node: '>=18'}
 
+  p5@1.11.3:
+    resolution: {integrity: sha512-5eiyuZ3Pvo6ucr3nr8AzD+qwpoleiIEF2a2HmiO6PJM1tnbD0LmLlckZyYGJATs0tdmRjc37Muh6KPS4d1FHHg==}
+
   package-json-from-dist@1.0.1:
     resolution: {integrity: sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==}
 
@@ -5852,6 +5864,8 @@ snapshots:
 
   '@types/nprogress@0.2.3': {}
 
+  '@types/p5@1.7.6': {}
+
   '@types/parse-json@4.0.2': {}
 
   '@types/readdir-glob@1.1.5':
@@ -8305,6 +8319,8 @@ snapshots:
 
   p-map@7.0.3: {}
 
+  p5@1.11.3: {}
+
   package-json-from-dist@1.0.1: {}
 
   package-manager-detector@0.2.11:

src/pages/Page/p5_js/index.page.vue

@@ -0,0 +1,122 @@
+<script setup lang="ts">
+import P5 from 'p5';
+
+definePage({
+  meta: {
+    title: 'p5.js 粒子效果演示',
+  },
+});
+
+// 用于挂载 p5 canvas 的 DOM 元素的引用
+const sketchContainer = ref<HTMLElement | null>(null);
+// p5 实例
+let instance: null | P5 = null;
+
+// 定义粒子类
+class Particle {
+  x: number;
+  y: number;
+  vx: number;
+  vy: number;
+  alpha: number;
+  lifespan: number;
+  p: P5; // p5 实例引用
+
+  constructor(p: P5, x: number, y: number) {
+    this.p = p;
+    this.x = x;
+    this.y = y;
+    // 随机速度
+    this.vx = p.random(-1, 1);
+    this.vy = p.random(-2, 0); // 倾向于向上移动
+    this.alpha = 255; // 初始透明度
+    this.lifespan = 255; // 生命周期，与透明度关联
+  }
+
+  // 更新粒子状态
+  update() {
+    this.x += this.vx;
+    this.y += this.vy;
+    this.lifespan -= 5; // 逐渐消失
+    this.alpha = this.lifespan;
+  }
+
+  // 绘制粒子
+  display() {
+    this.p.noStroke();
+    // 可以根据速度或生命周期改变颜色
+    this.p.fill(255, this.alpha); // 白色，逐渐透明
+    this.p.ellipse(this.x, this.y, 8, 8); // 绘制小圆点
+  }
+
+  // 检查粒子是否存活
+  isDead() {
+    return this.lifespan < 0;
+  }
+}
+
+// 粒子数组
+const particles: Particle[] = [];
+
+// p5 sketch 定义
+const sketch = (p: P5) => {
+  // setup 函数只运行一次
+  p.setup = () => {
+    // 创建一个 600x400 像素的画布
+    p.createCanvas(600, 400);
+    p.background(51); // 设置深灰色背景
+  };
+
+  // draw 函数会持续循环执行
+  p.draw = () => {
+    p.background(51); // 每帧都重绘背景，以实现动画效果
+
+    // 在鼠标位置创建新粒子 (每帧创建 2 个)
+    for (let i = 0; i < 2; i++) {
+      particles.push(new Particle(p, p.mouseX, p.mouseY));
+    }
+
+    // 更新和显示所有粒子
+    // 从后向前遍历数组，这样可以在遍历过程中安全地删除元素
+    for (let i = particles.length - 1; i >= 0; i--) {
+      particles[i].update();
+      particles[i].display();
+      // 如果粒子生命周期结束，则从数组中移除
+      if (particles[i].isDead()) {
+        particles.splice(i, 1);
+      }
+    }
+  };
+};
+
+// 组件挂载后初始化 p5 实例
+onMounted(() => {
+  if (sketchContainer.value) {
+    instance = new P5(sketch, sketchContainer.value);
+  }
+});
+
+// 组件卸载前移除 p5 实例，释放资源
+onUnmounted(() => {
+  instance?.remove();
+});
+</script>
+
+<template>
+  <div class="p-4">
+    <h1 class="text-2xl font-bold mb-4">p5.js 粒子效果演示</h1>
+
+    <div class="mb-4">
+      <h2 class="text-xl font-semibold mb-2">粒子系统</h2>
+      <p>
+        这是一个使用 p5.js 创建的简单粒子系统演示。粒子会从鼠标指针的位置生成，并向上漂浮然后逐渐消失。 p5.js
+        使得创建这类动态和交互式的视觉效果变得相对容易。
+      </p>
+    </div>
+
+    <h2 class="text-xl font-semibold mb-2">演示区域</h2>
+    <p class="mb-2">在下面的深灰色区域移动鼠标，观察粒子效果：</p>
+    <!-- p5 canvas 将会挂载到这个 div -->
+    <div ref="sketchContainer" class="border border-gray-400 inline-block"></div>
+  </div>
+</template>

typed-router.d.ts

@@ -30,6 +30,7 @@ declare module 'vue-router/auto-routes' {
     'PageIcons': RouteRecordInfo<'PageIcons', '/Page/Icons', Record<never, never>, Record<never, never>>,
     'PageJSPage': RouteRecordInfo<'PageJSPage', '/Page/JSPage', Record<never, never>, Record<never, never>>,
     'PageMDPage': RouteRecordInfo<'PageMDPage', '/Page/MDPage', Record<never, never>, Record<never, never>>,
+    'PageP5Js': RouteRecordInfo<'PageP5Js', '/Page/p5_js', Record<never, never>, Record<never, never>>,
     'PageStyle': RouteRecordInfo<'PageStyle', '/Page/Style', Record<never, never>, Record<never, never>>,
     'PkgsUsageI18n': RouteRecordInfo<'PkgsUsageI18n', '/PkgsUsage/I18n', Record<never, never>, Record<never, never>>,
     'PkgsUsageTsEnumUtil': RouteRecordInfo<'PkgsUsageTsEnumUtil', '/PkgsUsage/ts-enum-util', Record<never, never>, Record<never, never>>,

unocss.config.ts

@@ -3,7 +3,6 @@
 import { defineConfig, presetAttributify, presetWind3, transformerDirectives, transformerVariantGroup } from 'unocss';
 import { presetAnimations } from 'unocss-preset-animations';
 // import presetChinese, { chineseTypography } from 'unocss-preset-chinese';
-
 import { presetShadcn } from 'unocss-preset-shadcn';
 
 // @unocss/preset-rem-to-px

vite.config.plugins.ts

@@ -11,7 +11,7 @@ import Vue from '@vitejs/plugin-vue';
 import VueJsx from '@vitejs/plugin-vue-jsx';
 import path from 'node:path';
 import UnoCSS from 'unocss/vite';
-import AutoImport from 'unplugin-auto-import/vite';
+import UnpluginAutoImport from 'unplugin-auto-import/vite';
 import { FileSystemIconLoader } from 'unplugin-icons/loaders';
 import IconsResolver from 'unplugin-icons/resolver';
 import Icons from 'unplugin-icons/vite';
@@ -79,7 +79,7 @@ export function Plugins() {
     }),
 
     // https://github.com/antfu/unplugin-auto-import
-    AutoImport({
+    UnpluginAutoImport({
       dirs: [
         // 'src/composables',
         'src/stores',