vue积木库

Web/Vue/CubeLib/.gitignore

@@ -0,0 +1,61 @@
+# Dependencies
+node_modules/
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Production
+dist/
+
+# Environment variables
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# IDE
+.idea/
+.vscode/
+
+# Build output
+build/
+coverage/
+dist/
+
+# Logs
+logs/
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Editor temp files
+*~
+*.swp
+*.swo
+*.bak
+*.tmp
+*~
+
+# Test
+coverage/
+*.lcov
+
+# TypeScript
+*.tsbuildinfo
+
+# Lock files
+package-lock.json
+yarn.lock
+pnpm-lock.yaml
+
+# Local configuration files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local

Web/Vue/CubeLib/README.md

@@ -0,0 +1,50 @@
+# JoyD Vue3 CubeLib 组件库
+
+## 简介
+
+JoyD Vue3 CubeLib 是一个基于 Vue 3 开发的组件库，提供了一系列可复用的 UI 组件，旨在简化 Web 应用程序的开发流程。
+
+## 特性
+
+- 基于 Vue 3 构建
+- TypeScript 支持
+- 模块化设计
+- 易于定制和扩展
+- 丰富的组件库
+
+## 安装
+
+```bash
+npm install joyd.web.vue.cubelib
+# 或者
+yarn add joyd.web.vue.cubelib
+```
+
+## 使用
+
+```javascript
+import { CubeButton } from 'joyd.web.vue.cubelib'
+
+app.use(CubeButton)
+```
+
+## 文档
+
+查看 [在线文档](https://docs.joyd.com) 获取详细的使用说明和示例。
+
+## 贡献
+
+我们欢迎社区贡献！请阅读 [贡献指南](CONTRIBUTING.md) 了解如何参与。
+
+## 许可证
+
+MIT License
+
+## 联系我们
+
+- 邮箱：support@joyd.com
+- 网站：https://www.joyd.com
+
+## 版本历史
+
+请查看 [CHANGELOG.md](CHANGELOG.md) 了解版本更新历史。

Web/Vue/CubeLib/index.js

@@ -0,0 +1,17 @@
+import { createApp } from 'vue'
+import CubeButton from './src/components/CubeButton.vue'
+
+const components = {
+  CubeButton
+}
+
+const CubeLib = {
+  install(app) {
+    Object.entries(components).forEach(([name, component]) => {
+      app.component(name, component)
+    })
+  }
+}
+
+export default CubeLib
+export { CubeButton }

Web/Vue/CubeLib/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "joyd.web.vue.cubelib",
+  "version": "1.0.0",
+  "description": "JoyD Vue3 CubeLib 组件库",
+  "type": "module",
+  "main": "index.js",
+  "files": [
+    "dist/*",
+    "src/*",
+    "README.md"
+  ],
+  "peerDependencies": {
+    "vue": ">=3.3.0"
+  },
+  "keywords": ["vue3", "components", "cubelib", "joyd"],
+  "author": "JoyD",
+  "license": "MIT",
+  "engines": {
+    "node": ">=18"
+  },
+  "publishConfig": {
+    "registry": "http://47.111.181.23:8081/repository/npm-releases/"
+  },
+  "scripts": {
+    "build": "vue-demi-vite build",
+    "dev": "vue-demi-vite dev",
+    "serve": "vue-demi-vite preview",
+    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore",
+    "test": "vitest run",
+    "test:ui": "vitest ui"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.1.4",
+    "eslint": "^9.10.0",
+    "eslint-plugin-vue": "^9.30.0",
+    "typescript": "^5.5.3",
+    "vite": "^5.4.8",
+    "vue": "^3.4.29",
+    "vue-demi": "^0.14.6",
+    "vue-demi-vite": "^0.2.0",
+    "vitest": "^2.1.5"
+  }
+}

Web/Vue/CubeLib/src/components/CubeButton.vue

@@ -0,0 +1,100 @@
+<template>
+  <button class="cube-button" @click="handleClick">
+    <slot></slot>
+  </button>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  type: {
+    type: String,
+    default: 'default'
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  loading: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const emit = defineEmits(['click'])
+
+function handleClick() {
+  if (!props.disabled && !props.loading) {
+    emit('click')
+  }
+}
+</script>
+
+<style scoped>
+.cube-button {
+  padding: 8px 16px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+  transition: all 0.3s ease;
+}
+
+.cube-button.default {
+  background-color: #409EFF;
+  color: #fff;
+}
+
+.cube-button.primary {
+  background-color: #67C23A;
+  color: #fff;
+}
+
+.cube-button.danger {
+  background-color: #F56C6C;
+  color: #fff;
+}
+
+.cube-button.warning {
+  background-color: #E6A23C;
+  color: #fff;
+}
+
+.cube-button.info {
+  background-color: #909399;
+  color: #fff;
+}
+
+.cube-button:hover:not(:disabled) {
+  opacity: 0.9;
+}
+
+.cube-button:disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.cube-button.loading {
+  position: relative;
+  pointer-events: none;
+}
+
+.cube-button.loading::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 14px;
+  height: 14px;
+  margin-top: -7px;
+  margin-left: -7px;
+  border: 2px solid transparent;
+  border-top-color: #fff;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+</style>

Web/Vue/CubeLib/src/index.ts

@@ -0,0 +1,20 @@
+import { App, defineComponent } from 'vue'
+import CubeButton from './components/CubeButton.vue'
+
+const components = {
+  CubeButton
+}
+
+const install = (app: App) => {
+  Object.entries(components).forEach(([name, component]) => {
+    app.component(name, component)
+  })
+}
+
+const CubeLib = {
+  install,
+  ...components
+}
+
+export default CubeLib
+export { CubeButton }

Web/Vue/CubeLib/src/shims-vue.d.ts

@@ -0,0 +1,10 @@
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}
+
+declare module 'vue' {
+  export * from '@vue/runtime-core'
+  export * from '@vue/runtime-dom'
+}

Web/Vue/CubeLib/tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "preserve",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    },
+    "types": ["node"]
+  },
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
+  "types": ["node", "vue"]
+}

Web/Vue/CubeLib/vite.config.js

@@ -0,0 +1,28 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import { resolve } from 'path'
+
+export default defineConfig({
+  plugins: [vue()],
+  build: {
+    lib: {
+      entry: resolve(__dirname, 'src/index.ts'),
+      name: 'CubeLib',
+      fileName: (format) => `joyd.web.vue.cubelib.${format}.js`
+    },
+    rollupOptions: {
+      external: ['vue'],
+      output: {
+        globals: {
+          vue: 'Vue'
+        }
+      }
+    },
+    outDir: 'dist'
+  },
+  resolve: {
+    alias: {
+      '@': resolve(__dirname, 'src')
+    }
+  }
+})