cbvirtua 1.0.47 → 1.0.49

package/Signature.vue

@@ -364,3 +364,130 @@ onMounted(() => {
   }
 }
 </style>
+<template>
+  <div class="progress-bar">
+      <div class="bg"></div>
+      <div class="bar" :style="{ width: progress + '%' }"></div>
+      <div class="label">{{ progress }}%</div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+      return {
+          progress: 0,
+          isPlaying: false,
+          isCompleted: false
+      }
+  },
+  mounted() {
+      this.start();
+  },
+  methods: {
+      start() {
+          this.isPlaying = true;
+          this.animateProgress(90)
+              .then(() => {
+                  if (!this.isCompleted) {
+                      this.animateProgress(100);
+                  }
+              })
+              .catch((error) => {
+                  console.error('Progress error', error);
+              });
+      },
+      animateProgress(target) {
+          return new Promise((resolve, reject) => {
+              let start = this.progress;
+              const end = target;
+              const duration = (target - start) * 150;
+
+              const doAnimation = () => {
+                  const elapsed = Date.now() - startTime;
+                  const progress = Math.min(elapsed / duration, 1);
+
+                  this.progress = start + ((end - start) * progress);
+
+                  if (progress === 1) {
+                      resolve();
+                  } else if (this.isCompleted) {
+                      resolve();
+                  } else {
+                      requestAnimationFrame(doAnimation);
+                  }
+              };
+
+              const startTime = Date.now();
+              requestAnimationFrame(doAnimation);
+          });
+      },
+      finish() {
+          this.isCompleted = true;
+          this.progress = 100;
+      }
+  }
+};
+</script>
+
+<div class="progress" :style="{width, height}">
+  <svg viewBox="0 0 96 96" class="svg-circle-progress" style="width: 96px; height: 96px;">
+      <circle r="40" cx="48" cy="48" fill="none" stroke-miterlimit="20" stroke-width="10" class="svg-progress"
+          style="stroke-dasharray: 275, 279.602;stroke:#eee;">
+      </circle>
+      <circle r="40" cx="48" cy="48" fill="none" stroke-miterlimit="20" stroke-width="10"
+          class="svg-progress"
+          :style="`stroke-dasharray: ${progressValue}, 279.602;stroke:${color};`">
+      </circle>
+  </svg>
+  <div class="mask">
+{{ progress}}%
+</div>
+</div>
+<script setup>
+import { ref, toRefs, watch } from 'vue'
+
+const props = defineProps({
+  progress: {
+      type: Number,
+      default: () => 20
+  },
+  color: {
+      type: String,
+      default: () => "#FFAFAF"
+  },
+  width: {
+      type: String,
+      default: () => "210px"
+  },
+  height: {
+      type: String,
+      default: () => "100px"
+  },
+})
+const { height, width, color, progress } = toRefs(props)
+const progressValue = ref((progress.value / 100) * 250)
+
+watch(progress, (newValue) => {
+  progressValue.value = (newValue / 100) * 250
+})
+
+</script>
+<style lang="css" scoped>
+.progress {
+  display: inline-block;
+  position: relative;
+  height: 100px;
+  text-align: center;
+}
+.svg-circle-progress {
+  position: relative;
+  transform: rotate(-90deg);
+}
+.svg-progress {
+  stroke: #2196f3;
+  stroke-linecap: round;
+  transition: all .3s linear;
+}
+</style>
+

package/canvas-example-main/canvas-example-main/.github/workflows/main.yml

@@ -0,0 +1,62 @@
+# This is a basic workflow to help you get started with Actions
+
+name: CI
+
+# Controls when the action will run.
+on:
+  # Triggers the workflow on push or pull request events but only for the master branch
+  push:
+    branches: [main]
+    paths:
+      - 'src/**'
+      - '.github/workflows/main.yml'
+
+# A workflow run is made up of one or more jobs that can run sequentially or in parallel
+jobs:
+  # This workflow contains a single job called "build"
+  build:
+    # The type of runner that the job will run on
+    runs-on: ubuntu-latest
+
+    # Steps represent a sequence of tasks that will be executed as part of the job
+    steps:
+      # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
+      - uses: actions/checkout@v2
+
+      - name: Use Node.js 18.20.4
+        uses: actions/setup-node@v1
+        with:
+          node-version: 18.20.4
+
+      - name: Install pnpm
+        run: npm i pnpm@9 -g
+
+      - name: Install Packages
+        run: pnpm install
+
+      - name: Build
+        run: pnpm build
+
+      # 推到服务器
+      - name: rsync deployments
+        uses: burnett01/rsync-deployments@5.2.1
+        with:
+          switches: -avzr --delete
+          path: dist/
+          remote_path: /root/project/canvas/
+          remote_host: ${{ secrets.SSH_HOST }}
+          remote_port: ${{ secrets.SSH_PORT }}
+          remote_user: ${{ secrets.SSH_USER }}
+          remote_key: ${{ secrets.DEPLOY_KEY }}
+
+      # nginx 重启
+      - name: Restart server # 第三步，重启服务
+        uses: appleboy/ssh-action@master
+        with:
+          host: ${{ secrets.SSH_HOST }} # 下面三个配置与上一步类似
+          username: ${{ secrets.SSH_USER }}
+          port: ${{ secrets.SSH_PORT }} # SSH端口
+          key: ${{ secrets.DEPLOY_KEY }}
+          # 重启的脚本，根据自身情况做相应改动，一般要做的是migrate数据库以及重启服务器
+          script: |
+            nginx -s reload

package/canvas-example-main/canvas-example-main/README.md

@@ -0,0 +1,13 @@
+# canvas-example
+
+canvas 学习项目
+
+## 应用
+
+[扫雷小游戏-在线体验](https://canvas.xjq.icu/minesweeper)
+
+[扫雷小游戏-源码位置](https://github.com/xjq7/canvas-example/tree/main/src/pages/minesweeper)
+
+[原生 Canvas 练习项目](https://canvas.xjq.icu/practice)
+
+[原生 Canvas 练习项目-源码位置](https://github.com/xjq7/canvas-example/tree/main/src/pages/practice)

package/canvas-example-main/canvas-example-main/curved.html

@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+  </head>
+  <body>
+    <canvas
+      id="canvas"
+      width="500"
+      height="500"
+      style="border: 1px solid #000000"
+    >
+    </canvas>
+    <script>
+      const canvas = document.querySelector('#canvas');
+      const ctx = canvas.getContext('2d');
+
+      // 脸
+      ctx.beginPath();
+      ctx.arc(200, 200, 50, 0, Math.PI * 2);
+      ctx.stroke();
+
+      // 左眼
+      ctx.beginPath();
+      ctx.arc(185, 185, 5, Math.PI, Math.PI * 2);
+      ctx.stroke();
+
+      // 右眼
+      ctx.beginPath();
+      ctx.arc(216, 185, 5, Math.PI, Math.PI * 2);
+      ctx.stroke();
+
+      // 嘴
+      ctx.beginPath();
+      ctx.arc(200, 215, 10, Math.PI / 8, (Math.PI * 7) / 8);
+      ctx.stroke();
+
+      // 头发
+      ctx.beginPath();
+      ctx.moveTo(75, 40);
+      ctx.bezierCurveTo(75, 37, 70, 25, 50, 25);
+      ctx.bezierCurveTo(20, 25, 20, 62.5, 20, 62.5);
+      ctx.bezierCurveTo(20, 80, 40, 102, 75, 120);
+      ctx.bezierCurveTo(110, 102, 130, 80, 130, 62.5);
+      ctx.bezierCurveTo(130, 62.5, 130, 25, 100, 25);
+      ctx.bezierCurveTo(85, 25, 75, 37, 75, 40);
+      ctx.fill();
+    </script>
+  </body>
+</html>

package/canvas-example-main/canvas-example-main/eslint.config.js

@@ -0,0 +1,30 @@
+import js from '@eslint/js';
+import globals from 'globals';
+import reactHooks from 'eslint-plugin-react-hooks';
+import reactRefresh from 'eslint-plugin-react-refresh';
+import tseslint from 'typescript-eslint';
+
+export default tseslint.config(
+  { ignores: ['dist'] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+      '@typescript-eslint/no-explicit-any': 'warn',
+      '@typescript-eslint/no-empty-object-type': 'warn',
+    },
+  }
+);

package/canvas-example-main/canvas-example-main/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>xjq7 canvas example</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/canvas-example-main/canvas-example-main/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "cc",
+  "private": true,
+  "version": "0.0.1",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@leafer-in/animate": "^1.0.9",
+    "@leafer-in/editor": "^1.0.9",
+    "@leafer-in/state": "^1.0.9",
+    "@leafer-in/view": "^1.0.9",
+    "allotment": "^1.20.2",
+    "antd": "^5.20.1",
+    "classnames": "^2.5.1",
+    "leafer-ui": "^1.0.4",
+    "leafer-x-ruler": "^1.0.13",
+    "lodash": "^4.17.21",
+    "pixi.js": "^8.5.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.26.1",
+    "react-use": "^17.5.1",
+    "zustand": "^5.0.0"
+  },
+  "devDependencies": {
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
+    "@babel/plugin-proposal-decorators": "^7.25.9",
+    "@eslint/js": "^9.9.0",
+    "@types/lodash": "^4.17.10",
+    "@types/node": "^22.7.7",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react-swc": "^3.5.0",
+    "autoprefixer": "^10.4.20",
+    "eslint": "^9.9.0",
+    "eslint-plugin-react-hooks": "^5.1.0-rc.0",
+    "eslint-plugin-react-refresh": "^0.4.9",
+    "globals": "^15.9.0",
+    "less": "^4.2.0",
+    "postcss": "^8.4.47",
+    "tailwindcss": "^3.4.13",
+    "typescript": "^5.5.3",
+    "typescript-eslint": "^8.0.1",
+    "vite": "^5.4.1"
+  }
+}