@duxweb/dvha-template 1.0.0

package/README.md

@@ -0,0 +1,71 @@
+# create-dvha
+
+快速创建 Dux Vue 项目的脚手架工具。
+
+## 使用方法
+
+### 使用 bunx (推荐)
+
+```bash
+bunx dvha init
+```
+
+### 使用 npx
+
+```bash
+npx dvha init
+```
+
+
+### 使用 yarn
+
+```bash
+yarn dvha init
+```
+
+### 使用 pnpm
+
+```bash
+pnpm dvha init
+```
+
+## 可用模板
+
+1. **Vue 3 + Vite + UnoCSS** - 基础的 Vue 3 项目模板
+2. **Vue 3 + Element Plus** - 使用 Element Plus 的 Vue 3 项目
+3. **Vue 3 + Naive UI** - 使用 Naive UI 的 Vue 3 项目
+
+## 特性
+
+- 🚀 快速创建项目
+- 🎨 多种 UI 框架模板选择
+- 📦 自动配置开发环境
+- 🔧 开箱即用的开发工具
+
+## 开发
+
+```bash
+# 安装依赖
+bun install
+
+# 本地测试
+bun run bin/index.js test-project
+
+# 或者使用 npm
+npm install
+node bin/index.js test-project
+```
+
+## 发布
+
+```bash
+# 使用 bun 发布
+bun run publish
+
+# 或者直接使用 bun
+bun pm publish
+```
+
+## 许可证
+
+LGPL-3.0

package/bin/index.js

@@ -0,0 +1,250 @@
+#!/usr/bin/env node
+
+import fs from 'fs-extra'
+import path from 'path'
+import { fileURLToPath } from 'url'
+import { input, select, confirm } from '@inquirer/prompts'
+import { cyan, green, red, yellow, blue, bold } from 'kolorist'
+import { Command } from 'commander'
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url))
+
+// 获取版本号
+function getVersion() {
+  const packagePath = path.resolve(__dirname, '..', 'package.json')
+  if (fs.existsSync(packagePath)) {
+    const pkg = fs.readJsonSync(packagePath)
+    return pkg.version
+  }
+  return '1.0.0'
+}
+
+async function createProject(projectName) {
+  console.log()
+  console.log(bold(cyan('欢迎使用 DVHA 项目创建工具！ / Welcome to DVHA Project Creator!')))
+  console.log()
+
+  let targetDir = projectName
+
+  if (!targetDir) {
+    targetDir = await input({
+      message: '请输入项目名称 / Enter project name:',
+      default: 'my-dvha-app'
+    })
+  }
+
+  if (!targetDir) {
+    console.log(red('✖ 项目名称不能为空 / Project name cannot be empty'))
+    process.exit(1)
+  }
+
+  const root = path.resolve(targetDir)
+
+  if (fs.existsSync(root)) {
+    const overwrite = await confirm({
+      message: `目录 ${targetDir} 已存在，是否覆盖？ / Directory ${targetDir} already exists, overwrite?`,
+      default: false
+    })
+
+    if (!overwrite) {
+      console.log(yellow('✖ 操作已取消 / Operation cancelled'))
+      process.exit(1)
+    }
+
+    fs.emptyDirSync(root)
+  }
+
+  // 读取可用的UI配置
+  const uiConfigsDir = path.resolve(__dirname, '..', 'template', 'ui-configs')
+  const availableUIs = fs.readdirSync(uiConfigsDir)
+    .filter(dir => fs.statSync(path.join(uiConfigsDir, dir)).isDirectory())
+    .map(dir => {
+      const configPath = path.join(uiConfigsDir, dir + '.json')
+      if (fs.existsSync(configPath)) {
+        const config = fs.readJsonSync(configPath)
+        return {
+          name: config.name,
+          display: config.display,
+          description: config.description,
+          value: config.name
+        }
+      }
+      return null
+    })
+    .filter(Boolean)
+
+  const template = await select({
+    message: '请选择一个模板 / Please select a template:',
+    choices: availableUIs.map(ui => ({
+      name: `${ui.display} - ${ui.description}`,
+      value: ui.value,
+      description: ui.description
+    }))
+  })
+
+  if (!template) {
+    console.log(red('✖ 请选择一个模板 / Please select a template'))
+    process.exit(1)
+  }
+
+  console.log(yellow(`\n正在创建项目 / Creating project: ${targetDir}...`))
+
+  // 基础模板目录
+  const baseTemplateDir = path.resolve(__dirname, '..', 'template', 'base')
+  const uiConfigPath = path.resolve(__dirname, '..', 'template', 'ui-configs', `${template}.json`)
+  const uiPagesDir = path.resolve(__dirname, '..', 'template', 'ui-configs', template, 'pages')
+
+  if (!fs.existsSync(baseTemplateDir)) {
+    console.log(red(`✖ 基础模板不存在 / Base template does not exist`))
+    process.exit(1)
+  }
+
+  if (!fs.existsSync(uiConfigPath)) {
+    console.log(red(`✖ UI配置 ${template} 不存在 / UI config ${template} does not exist`))
+    process.exit(1)
+  }
+
+  // 读取UI配置
+  const uiConfig = fs.readJsonSync(uiConfigPath)
+
+  // 创建目录
+  fs.ensureDirSync(root)
+
+  // 1. 复制基础模板文件
+  fs.copySync(baseTemplateDir, root, {
+    filter: (src) => {
+      const relativePath = path.relative(baseTemplateDir, src)
+      const fileName = path.basename(src)
+
+      // 过滤掉不需要的目录和文件
+      const shouldExclude =
+        relativePath.includes('node_modules') ||
+        relativePath.includes('.git') ||
+        relativePath.includes('dist') ||
+        relativePath.includes('.vite') ||
+        fileName === '.DS_Store' ||
+        fileName.endsWith('.log') ||
+        fileName === 'bun.lockb' ||
+        fileName === 'package-lock.json' ||
+        fileName === 'yarn.lock'
+
+      return !shouldExclude
+    }
+  })
+
+  // 2. 复制UI特定的pages文件
+  if (fs.existsSync(uiPagesDir)) {
+    const targetPagesDir = path.join(root, 'pages')
+    fs.emptyDirSync(targetPagesDir)
+    fs.copySync(uiPagesDir, targetPagesDir)
+  }
+
+  // 3. 更新package.json
+  const pkgPath = path.join(root, 'package.json')
+  if (fs.existsSync(pkgPath)) {
+    const pkg = fs.readJsonSync(pkgPath)
+
+    // 更新项目名称
+    pkg.name = path.basename(root)
+
+    // 更新依赖
+    pkg.dependencies = {
+      ...pkg.dependencies,
+      ...uiConfig.dependencies
+    }
+
+    if (uiConfig.devDependencies && Object.keys(uiConfig.devDependencies).length > 0) {
+      pkg.devDependencies = {
+        ...pkg.devDependencies,
+        ...uiConfig.devDependencies
+      }
+    }
+
+    fs.writeJsonSync(pkgPath, pkg, { spaces: 2 })
+  }
+
+  // 4. 更新main.ts
+  const mainTsPath = path.join(root, 'main.ts')
+  if (fs.existsSync(mainTsPath)) {
+    let mainTsContent = fs.readFileSync(mainTsPath, 'utf-8')
+
+    // 在导入语句后添加UI库的导入
+    const importStatements = uiConfig.imports || []
+    const appUseStatements = uiConfig.appUse || []
+
+    // 找到现有导入的位置
+    const appImportIndex = mainTsContent.indexOf("import App from './App.vue'")
+    if (appImportIndex !== -1) {
+      const insertPosition = mainTsContent.indexOf('\n', appImportIndex) + 1
+      const additionalImports = importStatements.join('\n') + (importStatements.length > 0 ? '\n' : '')
+      mainTsContent = mainTsContent.slice(0, insertPosition) + additionalImports + mainTsContent.slice(insertPosition)
+    }
+
+    // 在app.use(createDux(config))之前添加UI库的使用
+    if (appUseStatements.length > 0) {
+      const appUseIndex = mainTsContent.indexOf('app.use(createDux(config))')
+      if (appUseIndex !== -1) {
+        const additionalUse = appUseStatements.join('\n') + '\n'
+        mainTsContent = mainTsContent.slice(0, appUseIndex) + additionalUse + mainTsContent.slice(appUseIndex)
+      }
+    }
+
+    fs.writeFileSync(mainTsPath, mainTsContent)
+  }
+
+  console.log(green('\n✓ 项目创建成功！ / Project created successfully!'))
+  console.log()
+  console.log(bold('下一步 / Next steps:'))
+  console.log(cyan(`  cd ${targetDir}`))
+  console.log(cyan('  bun install'))
+  console.log(cyan('  bun run dev'))
+  console.log()
+  console.log(bold('或者使用 npm / Or use npm:'))
+  console.log(cyan(`  cd ${targetDir}`))
+  console.log(cyan('  npm install'))
+  console.log(cyan('  npm run dev'))
+  console.log()
+  console.log(green('🎉 开始你的 Dux Vue 之旅吧！ / Start your Dux Vue journey!'))
+}
+
+// 主程序
+const program = new Command()
+
+program
+  .name('dvha')
+  .description('DVHA 项目创建工具 / DVHA Project Creator')
+  .version(getVersion())
+
+program
+  .command('init')
+  .description('创建新项目 / Create a new project')
+  .argument('[project-name]', '项目名称 / Project name')
+  .alias('create')
+  .action(async (projectName) => {
+    try {
+      await createProject(projectName)
+    } catch (error) {
+      if (error.name === 'ExitPromptError') {
+        console.log(yellow('\n👋 操作已取消 / Operation cancelled'))
+        process.exit(0)
+      }
+      console.error(red('创建项目时出错 / Error creating project:'), error)
+      process.exit(1)
+    }
+  })
+
+// 添加默认行为 - 当没有命令时显示友好提示
+program
+  .action(() => {
+    console.log()
+    console.log(bold(cyan('👋 欢迎使用 DVHA 项目创建工具！ / Welcome to DVHA Project Creator!')))
+    console.log()
+    console.log('使用以下命令开始创建项目 / Use the following command to start creating a project:')
+    console.log()
+    console.log(green('  dvha init [project-name]'))
+    console.log()
+    console.log('更多信息请使用 / For more information, use:', cyan('dvha --help'))
+    console.log()
+  })
+
+program.parse()

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@duxweb/dvha-template",
+  "version": "1.0.0",
+  "description": "Create DVHA project from template",
+  "type": "module",
+  "bin": {
+    "dvha": "./bin/index.js"
+  },
+  "files": [
+    "bin",
+    "template",
+    "README.md"
+  ],
+  "scripts": {
+    "test": "./scripts/test.sh",
+    "publish": "./scripts/publish.sh",
+    "dev": "bun run bin/index.js"
+  },
+  "keywords": [
+    "vue",
+    "template",
+    "scaffold",
+    "dux",
+    "cli",
+    "create",
+    "vite",
+    "vue3",
+    "bun"
+  ],
+  "author": "DuxWeb",
+  "license": "LGPL-3.0",
+  "dependencies": {
+    "fs-extra": "^11.2.0",
+    "@inquirer/prompts": "^7.5.1",
+    "kolorist": "^1.8.0",
+    "commander": "^14.0.0"
+  },
+  "engines": {
+    "node": ">=20.0.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/your-username/dux-vue.git",
+    "directory": "packages/create-dux-vue"
+  },
+  "bugs": {
+    "url": "https://github.com/your-username/dux-vue/issues"
+  },
+  "homepage": "https://github.com/your-username/dux-vue#readme"
+}

package/template/base/App.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { RouterView } from 'vue-router'
+import { DuxAppProvider } from '@duxweb/dvha-core'
+</script>
+
+<template>
+  <DuxAppProvider>
+    <RouterView />
+  </DuxAppProvider>
+</template>
+
+<style scoped>
+</style>

package/template/base/README.md

@@ -0,0 +1,154 @@
+# Dux Template - 基础管理系统模板
+
+这是一个基于 `@duxweb/dvha-core` 框架构建的基础管理系统模板，使用 Vue 3 + UnoCSS 提供简洁现代的界面设计。
+
+## ✨ 特性
+
+- 🎨 **纯 UnoCSS** - 原子化 CSS 框架，无额外 UI 库依赖
+- 🚀 **Vue 3** - 基于最新的 Vue 3 Composition API
+- 📱 **响应式设计** - 完美适配桌面端和移动端
+- 🔧 **@duxweb/dvha-core** - 集成 Dux 框架的完整功能
+- 🎯 **开箱即用** - 包含常用页面和组件
+- 🔒 **权限管理** - 内置登录和权限控制
+- 📦 **模块化** - 易于扩展和定制
+
+## 📁 项目结构
+
+```
+packages/template/
+├── pages/           # 页面组件
+│   ├── layout.vue   # 主布局（侧边栏+头部）
+│   ├── home.vue     # 首页
+│   ├── login.vue    # 登录页
+│   └── 404.vue      # 404错误页
+├── main.ts          # 应用入口
+├── App.vue          # 根组件
+├── uno.config.ts    # UnoCSS 配置
+└── package.json     # 依赖配置
+```
+
+## 🚀 快速开始
+
+### 1. 安装依赖
+
+```bash
+npm install
+```
+
+### 2. 启动开发服务器
+
+```bash
+npm run dev
+```
+
+### 3. 构建生产版本
+
+```bash
+npm run build
+```
+
+## 📄 页面说明
+
+### 🏠 首页 (home.vue)
+- 系统概览和统计数据
+- 快速操作入口
+- 最近活动记录
+- 系统状态监控
+
+### 🔐 登录页 (login.vue)
+- 用户身份验证
+- 表单验证和错误提示
+- 记住登录状态
+- 第三方登录支持
+
+### 🎯 布局 (layout.vue)
+- 固定头部导航
+- 可折叠侧边栏
+- 移动端适配
+- 用户菜单和通知
+
+### ❌ 404页面 (404.vue)
+- 友好的错误提示
+- 搜索功能
+- 快速导航链接
+
+## 🎨 样式系统
+
+本模板使用 UnoCSS 原子化 CSS 框架，主要包含：
+
+- **颜色系统**: 基于 Tailwind 的颜色调色板
+- **图标库**: Tabler Icons (@iconify-json/tabler)
+- **响应式**: 移动优先的响应式设计
+- **动画**: 平滑的过渡和交互效果
+
+
+## 🔧 配置说明
+
+### Dux 配置 (main.ts)
+
+```typescript
+const config: IConfig = {
+  apiUrl: 'your-api-url',
+  defaultManage: 'admin',
+  manages: [
+    {
+      name: 'admin',
+      title: '管理系统标题',
+      routePrefix: '/admin',
+      components: {
+        authLayout: () => import('./pages/layout.vue'),
+        notFound: () => import('./pages/404.vue'),
+      },
+      menus: [
+        // 菜单配置
+      ]
+    }
+  ],
+  simpleDataProvider,
+  simpleAuthProvider,
+}
+```
+
+### UnoCSS 配置 (uno.config.ts)
+
+```typescript
+export default defineConfig({
+  presets: [
+    presetWind3(),        // Tailwind CSS 兼容
+    presetIcons({         // 图标支持
+      collections: {
+        tabler: () => import('@iconify-json/tabler/icons.json')
+      }
+    })
+  ]
+})
+```
+
+## 🛠 自定义和扩展
+
+### 添加新页面
+
+1. 在 `pages/` 目录创建新的 Vue 组件
+2. 在 `main.ts` 中添加路由配置
+3. 在菜单配置中添加导航项
+
+```typescript
+// 添加新菜单项
+menus: [
+  {
+    name: 'new-page',
+    path: 'new-page',
+    icon: 'i-tabler:page',
+    label: '新页面',
+    component: () => import('./pages/new-page.vue'),
+  }
+]
+```
+
+## 📄 许可证
+
+MIT License
+
+---
+
+**提示**: 这是一个基础模板，你可以根据实际需求进行定制和扩展。如果需要更多功能，请参考 @duxweb/dvha-core 的官方文档。

package/template/base/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>Dux Vue Example</title>
+  </head>
+  <body>
+    <div id="app" v-cloak un-cloak></div>
+    <script type="module" src="/main.ts"></script>
+  </body>
+</html>

package/template/base/main.ts

@@ -0,0 +1,64 @@
+import type { IConfig } from '@duxweb/dvha-core'
+import { createDux, simpleDataProvider, simpleAuthProvider } from '@duxweb/dvha-core'
+import { createApp } from 'vue'
+import App from './App.vue'
+
+import '@unocss/reset/tailwind.css'
+import 'virtual:uno.css'
+
+const app = createApp(App)
+
+const config: IConfig = {
+  apiUrl: 'https://m1.apifoxmock.com/m1/4407506-4052338-default',
+  defaultManage: 'admin',
+  manages: [
+    {
+      name: 'admin',
+      title: 'DVHA 后台管理系统',
+      routePrefix: '/admin',
+      apiUrl: '/admin',
+      components: {
+        authLayout: () => import('./pages/layout.vue'),
+        notFound: () => import('./pages/404.vue'),
+      },
+      routes: [
+        {
+          name: 'admin.login',
+          path: 'login',
+          component: () => import('./pages/login.vue'),
+          meta: {
+            authorization: false,
+          }
+        },
+      ],
+      menus: [
+        {
+          name: 'home',
+          path: 'index',
+          icon: 'i-tabler:home',
+          label: '首页',
+          component: () => import('./pages/home.vue'),
+        },
+        {
+          name: 'users',
+          path: 'users',
+          icon: 'i-tabler:users',
+          label: '用户管理',
+          component: () => import('./pages/home.vue'),
+        },
+        {
+          name: 'settings',
+          path: 'settings',
+          icon: 'i-tabler:settings',
+          label: '系统设置',
+          component: () => import('./pages/home.vue'),
+        },
+      ]
+    },
+  ],
+  dataProvider: simpleDataProvider,
+  authProvider: simpleAuthProvider,
+}
+
+app.use(createDux(config))
+app.mount('#app')

package/template/base/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "template",
+  "type": "module",
+  "version": "0.0.0",
+  "author": "DuxWeb",
+  "license": "LGPL-3.0",
+  "files": [
+    "README.md",
+    "dist",
+    "package.json"
+  ],
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@duxweb/dvha-core": "workspace:*",
+    "@iconify-json/tabler": "^1.2.18",
+    "@unocss/preset-icons": "^66.1.2",
+    "@vueuse/core": "^13.2.0",
+    "@vueuse/integrations": "^13.2.0",
+    "axios": "^1.9.0",
+    "lodash-es": "^4.17.21",
+    "unocss": "^66.1.2",
+    "@unocss/reset": "^66.1.2"
+  }
+}

package/template/base/tsconfig.json

@@ -0,0 +1,37 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "jsx": "preserve",
+    "jsxImportSource": "vue",
+    "lib": ["ESNext", "DOM"],
+    "moduleDetection": "force",
+    "useDefineForClassFields": true,
+
+    "baseUrl": ".",
+    "module": "ESNext",
+
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "allowJs": true,
+    "strict": true,
+    "noFallthroughCasesInSwitch": true,
+
+    "noImplicitAny": false,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "declaration": true,
+    "noEmit": false,
+    "outDir": "./dist",
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "isolatedModules": true,
+    "skipLibCheck": true
+  },
+  "include": [
+    "**/*.ts",
+    "**/*.tsx",
+    "**/*.vue",
+    "**/*.d.ts"
+  ],
+  "exclude": ["node_modules", "dist"]
+}

package/template/base/typings.d.ts

@@ -0,0 +1,16 @@
+// typings.d.ts
+declare module '*.css' {
+  const content: string
+  export default content
+}
+
+declare module '*?raw' {
+  const content: string
+  export default content
+}
+
+declare module '*.vue' {
+  import { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}