@duxweb/dvha-template 1.0.8 → 1.0.10

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 DuxWeb
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/bin/index.js

@@ -1,11 +1,11 @@
 #!/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 path from 'node:path'
+import { fileURLToPath } from 'node:url'
+import { confirm, input, select } from '@inquirer/prompts'
 import { Command } from 'commander'
+import fs from 'fs-extra'
+import { bold, cyan, green, red, yellow } from 'kolorist'
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url))
 
@@ -29,7 +29,7 @@ async function createProject(projectName) {
   if (!targetDir) {
     targetDir = await input({
       message: '请输入项目名称 / Enter project name:',
-      default: 'my-dvha-app'
+      default: 'my-dvha-app',
     })
   }
 
@@ -43,7 +43,7 @@ async function createProject(projectName) {
   if (fs.existsSync(root)) {
     const overwrite = await confirm({
       message: `目录 ${targetDir} 已存在，是否覆盖？ / Directory ${targetDir} already exists, overwrite?`,
-      default: false
+      default: false,
     })
 
     if (!overwrite) {
@@ -58,15 +58,15 @@ async function createProject(projectName) {
   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')
+    .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
+          value: config.name,
         }
       }
       return null
@@ -78,8 +78,8 @@ async function createProject(projectName) {
     choices: availableUIs.map(ui => ({
       name: `${ui.display} - ${ui.description}`,
       value: ui.value,
-      description: ui.description
-    }))
+      description: ui.description,
+    })),
   })
 
   if (!template) {
@@ -117,19 +117,19 @@ async function createProject(projectName) {
       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'
+      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文件
@@ -139,6 +139,13 @@ async function createProject(projectName) {
     fs.copySync(uiPagesDir, targetPagesDir)
   }
 
+  // 2.5. 检查并复制UI特定的main.ts文件（如果存在）
+  const uiMainTsPath = path.resolve(__dirname, '..', 'template', 'ui-configs', template, 'main.ts')
+  if (fs.existsSync(uiMainTsPath)) {
+    const targetMainTsPath = path.join(root, 'main.ts')
+    fs.copySync(uiMainTsPath, targetMainTsPath)
+  }
+
   // 3. 更新package.json
   const pkgPath = path.join(root, 'package.json')
   if (fs.existsSync(pkgPath)) {
@@ -150,22 +157,24 @@ async function createProject(projectName) {
     // 更新依赖
     pkg.dependencies = {
       ...pkg.dependencies,
-      ...uiConfig.dependencies
+      ...uiConfig.dependencies,
     }
 
     if (uiConfig.devDependencies && Object.keys(uiConfig.devDependencies).length > 0) {
       pkg.devDependencies = {
         ...pkg.devDependencies,
-        ...uiConfig.devDependencies
+        ...uiConfig.devDependencies,
       }
     }
 
     fs.writeJsonSync(pkgPath, pkg, { spaces: 2 })
   }
 
-  // 4. 更新main.ts
+  // 4. 更新main.ts（仅当UI配置没有自定义main.ts时）
   const mainTsPath = path.join(root, 'main.ts')
-  if (fs.existsSync(mainTsPath)) {
+
+  // 如果UI配置有自定义main.ts，跳过修改；否则修改基础main.ts
+  if (!fs.existsSync(uiMainTsPath) && fs.existsSync(mainTsPath)) {
     let mainTsContent = fs.readFileSync(mainTsPath, 'utf-8')
 
     // 在导入语句后添加UI库的导入
@@ -173,7 +182,7 @@ async function createProject(projectName) {
     const appUseStatements = uiConfig.appUse || []
 
     // 找到现有导入的位置
-    const appImportIndex = mainTsContent.indexOf("import App from './App.vue'")
+    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' : '')
@@ -184,7 +193,7 @@ async function createProject(projectName) {
     if (appUseStatements.length > 0) {
       const appUseIndex = mainTsContent.indexOf('app.use(createDux(config))')
       if (appUseIndex !== -1) {
-        const additionalUse = appUseStatements.join('\n') + '\n'
+        const additionalUse = `${appUseStatements.join('\n')}\n`
         mainTsContent = mainTsContent.slice(0, appUseIndex) + additionalUse + mainTsContent.slice(appUseIndex)
       }
     }
@@ -223,7 +232,8 @@ program
   .action(async (projectName) => {
     try {
       await createProject(projectName)
-    } catch (error) {
+    }
+    catch (error) {
       if (error.name === 'ExitPromptError') {
         console.log(yellow('\n👋 操作已取消 / Operation cancelled'))
         process.exit(0)
@@ -247,4 +257,4 @@ program
     console.log()
   })
 
-program.parse()
+program.parse()

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@duxweb/dvha-template",
   "type": "module",
-  "version": "1.0.8",
+  "version": "1.0.10",
   "description": "Create DVHA project from template",
   "author": "DuxWeb",
   "license": "MIT",
@@ -36,15 +36,17 @@
   "engines": {
     "node": ">=20.0.0"
   },
-  "scripts": {
-    "test": "./scripts/test.sh",
-    "push": "./scripts/publish.sh",
-    "dev": "bun run bin/index.js"
-  },
   "dependencies": {
     "@inquirer/prompts": "^7.5.1",
     "commander": "^14.0.0",
     "fs-extra": "^11.2.0",
     "kolorist": "^1.8.0"
+  },
+  "scripts": {
+    "test": "./scripts/test.sh",
+    "push": "./scripts/publish.sh",
+    "dev": "node bin/index.js",
+    "changeset": "changeset",
+    "changeset:version": "changeset version"
   }
-}
+}

package/template/base/package.json

@@ -25,11 +25,11 @@
     "clsx": "^2.1.1",
     "lodash-es": "^4.17.21",
     "petite-vue-i18n": "^11.1.4",
-    "pinia": "^3.0.0",
-    "pinia-plugin-persistedstate": "^4.0.0",
+    "pinia": "^3.0.3",
+    "pinia-plugin-persistedstate": "^4.3.0",
     "unocss": "^66.1.2",
     "vue": "^3.5.0",
-    "vue-router": "^4.0.0"
+    "vue-router": "^4.5.1"
   },
   "devDependencies": {
     "@antfu/eslint-config": "^4.13.1",

package/template/base/uno.config.ts

@@ -1,11 +1,11 @@
-import { defineConfig, presetIcons, presetWind3 } from 'unocss'
 import icons from '@iconify-json/tabler/icons.json'
+import { defineConfig, presetIcons, presetWind3 } from 'unocss'
 
-const generateSafeList = () => {
+function generateSafeList() {
   return Object.keys(icons.icons).flatMap((item) => {
     return `i-tabler:${item}`
   })
-};
+}
 
 const safeList = generateSafeList()
 

package/template/ui-configs/elementui/pages/layout.vue

@@ -1,30 +1,62 @@
+<script setup lang="ts">
+import { useGetAuth, useLogout, useManage } from '@duxweb/dvha-core'
+import { onMounted, onUnmounted, ref } from 'vue'
+import Sidebar from './menu.vue'
+
+const manage = useManage()
+const user = useGetAuth()
+
+const { mutate: logout } = useLogout({
+  onSuccess: () => console.log('退出成功'),
+  onError: error => console.error('退出失败:', error),
+})
+
+const sidebarOpen = ref(false)
+const showUserMenu = ref(false)
+
+const getUserName = () => user?.info?.name || user?.info?.username || 'Admin'
+const toggleSidebar = () => sidebarOpen.value = !sidebarOpen.value
+const handleLogout = () => logout()
+
+function closeDropdowns(event: Event) {
+  if (!(event.target as HTMLElement).closest('.relative')) {
+    showUserMenu.value = false
+  }
+}
+
+onMounted(() => document.addEventListener('click', closeDropdowns))
+onUnmounted(() => document.removeEventListener('click', closeDropdowns))
+</script>
+
 <template>
   <div class="min-h-screen bg-gray-50 flex flex-col">
     <!-- 头部 -->
     <header class="bg-white shadow-sm border-b fixed w-full top-0 z-50">
       <div class="flex items-center justify-between h-16 px-4">
         <div class="flex items-center">
-          <button @click="toggleSidebar" class="p-2 rounded hover:bg-gray-100 lg:hidden">
-            <div class="i-tabler:menu-2 text-xl"></div>
+          <button class="p-2 rounded hover:bg-gray-100 lg:hidden" @click="toggleSidebar">
+            <div class="i-tabler:menu-2 text-xl" />
           </button>
           <div class="flex items-center ml-4 lg:ml-0">
-            <div class="i-tabler:brand-vue text-2xl text-blue-600 mr-3"></div>
-            <h1 class="text-xl font-bold">{{ manage.config?.title || 'Dux Admin' }}</h1>
+            <div class="i-tabler:brand-vue text-2xl text-blue-600 mr-3" />
+            <h1 class="text-xl font-bold">
+              {{ manage.config?.title || 'Dux Admin' }}
+            </h1>
           </div>
         </div>
 
         <!-- 用户菜单 -->
         <div class="relative">
-          <button @click="showUserMenu = !showUserMenu" class="flex items-center p-2 rounded hover:bg-gray-100">
-            <div class="i-tabler:user-circle text-xl mr-2"></div>
+          <button class="flex items-center p-2 rounded hover:bg-gray-100" @click="showUserMenu = !showUserMenu">
+            <div class="i-tabler:user-circle text-xl mr-2" />
             <span class="hidden md:block text-sm font-medium">{{ getUserName() }}</span>
-            <div class="i-tabler:chevron-down text-sm ml-1 hidden md:block"></div>
+            <div class="i-tabler:chevron-down text-sm ml-1 hidden md:block" />
           </button>
 
           <div v-if="showUserMenu" class="absolute right-0 mt-2 w-40 bg-white rounded-md shadow-lg border z-50">
             <div class="py-1">
-              <button @click="handleLogout" class="flex items-center w-full px-4 py-2 text-sm hover:bg-gray-100">
-                <div class="i-tabler:logout mr-3"></div>
+              <button class="flex items-center w-full px-4 py-2 text-sm hover:bg-gray-100" @click="handleLogout">
+                <div class="i-tabler:logout mr-3" />
                 退出登录
               </button>
             </div>
@@ -38,7 +70,7 @@
       <Sidebar :sidebar-open="sidebarOpen" />
 
       <!-- 遮罩层 -->
-      <div v-if="sidebarOpen" @click="toggleSidebar" class="fixed inset-0 z-30 bg-black bg-opacity-50 lg:hidden"></div>
+      <div v-if="sidebarOpen" class="fixed inset-0 z-30 bg-black bg-opacity-50 lg:hidden" @click="toggleSidebar" />
 
       <!-- 主内容 -->
       <main class="flex-1">
@@ -47,33 +79,3 @@
     </div>
   </div>
 </template>
-
-<script setup lang="ts">
-import { ref, onMounted, onUnmounted } from 'vue'
-import { useManage, useGetAuth, useLogout } from '@duxweb/dvha-core'
-import Sidebar from './menu.vue'
-
-const manage = useManage()
-const user = useGetAuth()
-
-const { mutate: logout } = useLogout({
-  onSuccess: () => console.log('退出成功'),
-  onError: (error) => console.error('退出失败:', error)
-})
-
-const sidebarOpen = ref(false)
-const showUserMenu = ref(false)
-
-const getUserName = () => user?.info?.name || user?.info?.username || 'Admin'
-const toggleSidebar = () => sidebarOpen.value = !sidebarOpen.value
-const handleLogout = () => logout()
-
-const closeDropdowns = (event: Event) => {
-  if (!(event.target as HTMLElement).closest('.relative')) {
-    showUserMenu.value = false
-  }
-}
-
-onMounted(() => document.addEventListener('click', closeDropdowns))
-onUnmounted(() => document.removeEventListener('click', closeDropdowns))
-</script>

package/template/ui-configs/elementui/pages/login.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { ref, reactive } from 'vue'
+import type { FormInstance } from 'element-plus'
+import { useLogin } from '@duxweb/dvha-core'
+import { Lock, User } from '@element-plus/icons-vue'
 import { ElMessage } from 'element-plus'
+import { reactive, ref } from 'vue'
 import { useRouter } from 'vue-router'
-import { useLogin } from '@duxweb/dvha-core'
-import type { FormInstance } from 'element-plus'
-import { User, Lock } from '@element-plus/icons-vue'
 import 'element-plus/dist/index.css'
 
 const router = useRouter()
@@ -14,16 +14,16 @@ const formRef = ref<FormInstance>()
 const formModel = reactive({
   username: '',
   password: '',
-  remember: false
+  remember: false,
 })
 
 const rules = reactive({
   username: [
-    { required: true, message: '请输入用户名', trigger: 'blur' }
+    { required: true, message: '请输入用户名', trigger: 'blur' },
   ],
   password: [
-    { required: true, message: '请输入密码', trigger: 'blur' }
-  ]
+    { required: true, message: '请输入密码', trigger: 'blur' },
+  ],
 })
 
 const { mutate, isLoading } = useLogin({
@@ -33,18 +33,19 @@ const { mutate, isLoading } = useLogin({
   onError: (error) => {
     console.log(error)
     ElMessage.error(error?.message || '登录失败，请检查用户名和密码')
-  }
+  },
 })
 
-const handleSubmit = () => {
-  if (!formRef.value) return
+function handleSubmit() {
+  if (!formRef.value)
+    return
 
   formRef.value.validate((valid) => {
     if (valid) {
       mutate({
         username: formModel.username,
         password: formModel.password,
-        code: "0000"
+        code: '0000',
       })
     }
   })
@@ -55,8 +56,12 @@ const handleSubmit = () => {
   <div class="flex justify-center items-center min-h-screen bg-gray-100">
     <div class="w-400px p-40px rounded-8px bg-white shadow-sm">
       <div class="text-center mb-40px">
-        <h1 class="m-0 mb-8px text-24px font-600 text-gray-800">系统登录</h1>
-        <p class="m-0 text-gray-500 text-14px">欢迎使用管理系统，请登录</p>
+        <h1 class="m-0 mb-8px text-24px font-600 text-gray-800">
+          系统登录
+        </h1>
+        <p class="m-0 text-gray-500 text-14px">
+          欢迎使用管理系统，请登录
+        </p>
       </div>
 
       <el-form

package/template/ui-configs/pro/main.ts

@@ -0,0 +1,82 @@
+import type { IConfig } from '@duxweb/dvha-core'
+import { createDux, i18nProvider, simpleAuthProvider, simpleDataProvider } from '@duxweb/dvha-core'
+import * as DuxPro from '@duxweb/dvha-pro'
+import * as NaiveUI from 'naive-ui'
+import { createApp } from 'vue'
+
+import '@duxweb/dvha-pro/style.css'
+
+const { createDuxPro, DuxApp, DuxAuthLayout, DuxLayout, DuxLoginPage, DuxPage404, DuxPage500, DuxPageLoading, enUS, zhCN } = DuxPro
+
+const app = createApp(DuxApp)
+
+const config: IConfig = {
+  defaultManage: 'admin',
+  manages: [
+    {
+      name: 'admin',
+      title: 'Dux Pro 管理系统',
+      routePrefix: '/admin',
+      apiUrl: '/admin',
+      apiRoutePath: '/routes',
+      components: {
+        authLayout: DuxAuthLayout,
+        noAuthLayout: DuxLayout,
+        notFound: DuxPage404,
+        loading: DuxPageLoading,
+        error: DuxPage500,
+      },
+      userMenus: [
+        {
+          label: '设置',
+          key: 'setting',
+          icon: 'i-tabler:settings',
+          path: 'setting',
+        },
+      ],
+      routes: [
+        {
+          name: 'admin.login',
+          path: 'login',
+          component: DuxLoginPage,
+          meta: {
+            authorization: false,
+          },
+        },
+      ],
+      menus: [
+        {
+          name: 'home',
+          path: 'index',
+          icon: 'i-tabler:home',
+          label: '工作台',
+          component: () => import('./pages/home.vue'),
+        },
+      ],
+    },
+  ],
+  dataProvider: simpleDataProvider({
+    apiUrl: 'https://m1.apifoxmock.com/m1/4407506-4052338-default/admin',
+  }),
+  authProvider: simpleAuthProvider(),
+  i18nProvider: i18nProvider({
+    locale: 'zh-CN',
+    fallbackLocale: 'en-US',
+    messages: {
+      'zh-CN': zhCN,
+      'en-US': enUS,
+    },
+  }),
+  remote: {
+    packages: {
+      'naive-ui': NaiveUI,
+      '@duxweb/dvha-pro': DuxPro,
+    },
+  },
+}
+
+app.use(createDux(config))
+app.use(NaiveUI)
+app.use(createDuxPro())
+
+app.mount('#app')

package/template/ui-configs/pro/pages/home.vue

@@ -0,0 +1,181 @@
+<script setup lang="ts">
+import { DuxCard, DuxChart, DuxDashboardQuick } from '@duxweb/dvha-pro'
+import { NButton, NGi, NGrid } from 'naive-ui'
+import { computed, ref } from 'vue'
+
+// 基本统计数据
+const stats = ref([
+  {
+    label: '总订单',
+    icon: 'i-tabler:shopping-cart',
+    value: 126,
+  },
+  {
+    label: '总用户',
+    icon: 'i-tabler:users',
+    value: 89,
+  },
+  {
+    label: '总收入',
+    icon: 'i-tabler:currency-dollar',
+    value: '¥12,543',
+  },
+])
+
+// 图表数据
+const chartData = computed(() => ({
+  labels: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
+  data: [
+    {
+      name: '访问量',
+      type: 'line',
+      data: [120, 132, 101, 134, 90, 230, 210],
+      color: '#18a058',
+    },
+  ],
+}))
+</script>
+
+<template>
+  <div class="p-6 space-y-6">
+    <!-- 欢迎区域 -->
+    <DuxCard>
+      <div class="text-center py-8">
+        <div class="i-tabler:brand-vue text-6xl text-blue-600 mx-auto mb-6" />
+        <h1 class="text-3xl font-bold text-gray-900 dark:text-gray-100 mb-4">
+          欢迎使用 Dux Pro
+        </h1>
+        <p class="text-gray-600 dark:text-gray-300 text-lg max-w-2xl mx-auto">
+          基于 Vue 3 + Naive UI + Dux Pro 组件库构建的现代化管理后台，提供丰富的业务组件和开箱即用的功能
+        </p>
+      </div>
+    </DuxCard>
+
+    <!-- 统计卡片 -->
+    <NGrid :cols="3" :x-gap="16">
+      <NGi v-for="item in stats" :key="item.label">
+        <DuxDashboardQuick
+          :label="item.label"
+          :icon="item.icon"
+          :value="item.value"
+        />
+      </NGi>
+    </NGrid>
+
+    <!-- 图表区域 -->
+    <DuxCard>
+      <template #header>
+        <div class="flex items-center justify-between">
+          <h3 class="text-lg font-semibold">
+            数据概览
+          </h3>
+          <NButton size="small" type="primary">
+            查看详情
+          </NButton>
+        </div>
+      </template>
+      <DuxChart :option="chartData" style="height: 300px;" />
+    </DuxCard>
+
+    <!-- Dux Pro 特性展示 -->
+    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
+      <DuxCard>
+        <div class="text-center p-4">
+          <div class="i-tabler:components text-4xl text-purple-600 mb-4" />
+          <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-2">
+            丰富组件
+          </h3>
+          <p class="text-gray-600 dark:text-gray-300 text-sm">
+            提供丰富的业务组件，快速构建管理后台
+          </p>
+        </div>
+      </DuxCard>
+
+      <DuxCard>
+        <div class="text-center p-4">
+          <div class="i-tabler:chart-bar text-4xl text-green-600 mb-4" />
+          <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-2">
+            数据可视化
+          </h3>
+          <p class="text-gray-600 dark:text-gray-300 text-sm">
+            内置图表组件，轻松展示数据分析结果
+          </p>
+        </div>
+      </DuxCard>
+
+      <DuxCard>
+        <div class="text-center p-4">
+          <div class="i-tabler:layout-dashboard text-4xl text-blue-600 mb-4" />
+          <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-2">
+            页面布局
+          </h3>
+          <p class="text-gray-600 dark:text-gray-300 text-sm">
+            灵活的布局组件，适应各种业务场景
+          </p>
+        </div>
+      </DuxCard>
+    </div>
+
+    <!-- 快速操作 -->
+    <DuxCard>
+      <template #header>
+        <h3 class="text-lg font-semibold">
+          快速操作
+        </h3>
+      </template>
+      <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
+        <NButton block type="primary">
+          <template #icon>
+            <div class="i-tabler:plus" />
+          </template>
+          创建订单
+        </NButton>
+        <NButton block>
+          <template #icon>
+            <div class="i-tabler:users" />
+          </template>
+          用户管理
+        </NButton>
+        <NButton block>
+          <template #icon>
+            <div class="i-tabler:chart-bar" />
+          </template>
+          数据统计
+        </NButton>
+        <NButton block>
+          <template #icon>
+            <div class="i-tabler:settings" />
+          </template>
+          系统设置
+        </NButton>
+      </div>
+    </DuxCard>
+
+    <!-- 开始使用 -->
+    <div class="bg-gradient-to-r from-blue-50 to-indigo-50 dark:from-blue-950 dark:to-indigo-950 rounded-lg border p-8 text-center">
+      <h3 class="text-xl font-bold text-gray-900 dark:text-gray-100 mb-4">
+        开始构建您的 Pro 应用
+      </h3>
+      <p class="text-gray-600 dark:text-gray-300 mb-6">
+        Dux Pro 为您提供了构建现代化管理系统所需的所有专业组件
+      </p>
+      <div class="flex justify-center space-x-4">
+        <a
+          href="https://github.com/duxweb/dvha" target="_blank"
+          class="inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 text-sm font-medium"
+        >
+          <div class="i-tabler:brand-github mr-2" />
+          查看源码
+        </a>
+        <a href="#" class="inline-flex items-center px-4 py-2 border border-gray-300 text-gray-700 dark:text-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 text-sm font-medium">
+          <div class="i-tabler:book mr-2" />
+          查看文档
+        </a>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+/* 自定义样式 */
+</style>

package/template/ui-configs/pro.json

@@ -0,0 +1,14 @@
+{
+  "name": "pro",
+  "display": "Vue 3 + Dux Pro",
+  "description": "使用 Dux Pro 组件库的 Vue 3 项目",
+  "dependencies": {
+    "@duxweb/dvha-core": "latest",
+    "@duxweb/dvha-naiveui": "latest",
+    "@duxweb/dvha-pro": "latest",
+    "naive-ui": "^2.42.0",
+    "vue": "^3.5.0",
+    "vue-router": "^4.5.1"
+  },
+  "devDependencies": {}
+}