4 Commits
v2.1.0 ... main

Author SHA1 Message Date
ahjung
3a469f1aca README.md 更新 2026-01-19 21:32:32 +08:00
ahjung
3bd0d28e05 示例结构调整,避免页面出现空白 2025-10-10 15:31:43 +08:00
ahjung
447bdcc355 README update 2025-09-21 21:33:30 +08:00
ahjung
8bf849b803 README update 2025-09-17 09:15:34 +08:00
4 changed files with 828 additions and 813 deletions

View File

@@ -1,6 +1,6 @@
## 🚀 简介 ## 🚀 简介
`Naive Ui Admin` 是一款 完全免费 且可商用的中后台解决方案,基于 🌟 `Vue3.0` 🌟、🚀 `Vite` 🚀、✨ [Naive UI](https://www.naiveui.com/) ✨ 和 🎉 `TypeScript` 🎉。 `Naive Ui Admin` 是一款 完全免费 且可商用的中后台解决方案,基于 🌟 `Vue3.x` 🌟、🚀 `Vite` 🚀、✨ [Naive UI](https://www.naiveui.com/) ✨ 和 🎉 `TypeScript` 🎉。
它融合了最新的前端技术栈,提炼了典型的业务模型和页面,包括二次封装组件、动态菜单、权限校验等功能,助力快速搭建企业级中后台项目 它融合了最新的前端技术栈,提炼了典型的业务模型和页面,包括二次封装组件、动态菜单、权限校验等功能,助力快速搭建企业级中后台项目
## 🌈 特性 ## 🌈 特性
@@ -15,47 +15,42 @@
账号admin密码123456随意 账号admin密码123456随意
# 🚀 Naive Admin - 开箱即用的企业级前后端框架
> **✨ 多生态支持 · 多租户就绪 · 四年持续迭代** ## 🚀 Naive Admin - 开箱即用的企业级前后端框架 `商业版本`
> 前端自由切换 Vue3 UI 库 | 后端支持 Java/PHP 单体与多租户架构
> [官网直达](https://www.naiveadmin.com) | [更新日志](https://www.yuque.com/u5825/zaqu0e) > **✨ 多版本选择 · 四年持续迭代**
> 配套前后端支持 Java/Php 语言,支持单体和微服务多租户架构
> [详情→官网](https://www.naiveadmin.com) | [更新日志](https://www.yuque.com/u5825/zaqu0e)
--- ---
## 🔥 为什么选择 NaiveAdmin 商业版? ## 🔥 为什么选择 NaiveAdmin 商业版?
- **省时间**:内置丰富扩展组件与业务模板,不写一行样板代码即可开始业务开发
`⏱️ 节省200+人日` · `🏆 千人+开发者信任` · `🚀 四年持续迭代` - **经实战**:已落地电网、跨境 ERP、SaaS 等 30+ 场景
- **可扩展**:插件式菜单 / 按钮 / 数据权限新增业务模块「0 侵入」
> **"告别重复造轮子!"**
> 全系列版本提供 **30+开箱即用组件** 与 **企业级业务模块**,让您专注核心业务创新!
--- ---
## 🖥️ 纯前端版本 ## 🖥️ 纯前端版本
| 版本 | 技术栈 | 设计特点 | 配套后端 | 预览 | | 版本 | 技术栈 | 配套后端 | 预览地址 |
|----------------|--------|------------------|----------------------------|----------------------------------------| |-----|-------|---------|-------------|
| **Naive UI Plus** | Vu3、Ts | 全新设计语言 · 50+新增特性 | 支持Java/PHP | [立即体验](https://plus.naiveadmin.com) | | **🆕 Naive UI Max** | Vu3 + Ts + NaiveUI | 否 | [https://max.naiveadmin.com](https://max.naiveadmin.com) |
| **Naive UI** | Vu3、Ts | 经典设计语言 · 30+新增特性 | 支持Java/PHP | [立即体验](https://pro.naiveadmin.com) | | **Naive UI Plus** | Vu3 + Ts + NaiveUI | 支持Java/PHP | [https://plus.naiveadmin.com](https://plus.naiveadmin.com) |
| **Arco Design** | Vu3、Ts | 智能设计体系 · 轻盈交互 | 支持Java | [立即体验](https://arco.naiveadmin.com) |
| **Element Plus** | Vu3、Ts | 设计师友好 · 直观易用 | 支持Java | [立即体验](https://element.naiveadmin.com) |
| **Antd Vue** | Vu3、Ts | 企业级设计规范 · 完备组件 | 否 | [立即体验](https://antd.naiveadmin.com) |
## 🔌 前后端版本 ## 🔌 前后端版本
| 版本 | 技术栈 | 设计特点 | 预览 | | 版本 | 技术栈 | 预览地址 |
|------|--------|----------|--------------------------------------------------------------| |------|------------------|--------------------------------------------------------------|
| **Naive UI Plus** | Vu3、Ts | 全新设计语言 · 50+新增特性 | [立即体验](https://plus-full.naiveadmin.com) | | **🆕Naive UI Max** | Vu3 + Ts + NaiveUI | [https://max-full.naiveadmin.com](https://max-full.naiveadmin.com) |
| **Arco Design** | Vu3、Ts | 智能设计体系 · 轻盈交互 |[立即体验](https://arco-full.naiveadmin.com) | | **Naive UI Plus** | Vu3 + Ts + NaiveUI | [https://plus-full.naiveadmin.com](https://plus-full.naiveadmin.com) |
| **Element Plus** | Vu3、Ts | 设计师友好 · 直观易用 | [立即体验](https://element-full.naiveadmin.com) |
## 🏢 多租户版本 ## 🏢 多租户版本
| 版本 | 技术栈 | 设计特点 | 适用场景 | 预览 | | 版本 | 技术栈 | 适用场景 | 预览地址 |
|--------------|---------------|-----------------------------|----------------|-------------------------------------------| |-----------------------------|-----------------------------|----------------|-------------------------------------------|
| **Vue3** | Vu3、Ts、Java | 百家落地验证架构,免去试错成本,专为 Saas 化系统设计 | 构建企业级 Saas 化系统 | [立即体验](https://tenant.naiveadmin.com) | | **Vue3** | Vu3 + Ts + NaiveUI + Java | 构建企业级 Saas 化系统 | [https://tenant.naiveadmin.com](https://tenant.naiveadmin.com) |
| **React** | React、Ts、Java | 百家落地验证架构,免去试错成本,专为 Saas 化系统设计 | 构建企业级 Saas 化系统 | [立即体验](https://compose.warden.vip) | | **React** | React + Ts + Ant + Java | 构建企业级 Saas 化系统 | [https://compose.warden.vip](https://compose.warden.vip) |
## 📚 文档 ## 📚 文档
@@ -153,14 +148,13 @@ pnpm build
## 💬 交流 ## 💬 交流
有关 `Naive Ui Admin` 的使用或其他问题,欢迎加入我们的讨论群组或提出问题 有关 `Naive Ui Admin` 的使用或其他问题,可以加入讨论群交流问题
QQ1群328347666 (已满) QQ1群328347666 (已满)
QQ2群741353560 QQ2群741353560
## 💖 赞助 ## 💖 赞助
#### 如果您觉得这个项目对您有帮助,可以通过下面的链接为作者一杯果汁,表示感谢!。 #### 如果项目有帮到你,不妨请作者一杯咖啡吧!
![donate](https://assets.naiveadmin.com/images/sponsor.png)
![donate](https://assets.naiveadmin.com/assets/images/sponsor.png)
[Paypal Me](https://www.paypal.com/paypalme/majunping) [Paypal Me](https://www.paypal.com/paypalme/majunping)

View File

@@ -32,15 +32,15 @@
"@vueuse/core": "^9.13.0", "@vueuse/core": "^9.13.0",
"alova": "^3.3.4", "alova": "^3.3.4",
"date-fns": "^2.30.0", "date-fns": "^2.30.0",
"dayjs": "^1.11.13", "dayjs": "^1.11.18",
"echarts": "^5.6.0", "echarts": "^5.6.0",
"element-resize-detector": "^1.2.4", "element-resize-detector": "^1.2.4",
"lodash-es": "^4.17.21", "lodash-es": "^4.17.21",
"mockjs": "^1.1.0", "mockjs": "^1.1.0",
"naive-ui": "^2.42.0", "naive-ui": "^2.43.1",
"pinia": "^2.3.1", "pinia": "^2.3.1",
"qs": "^6.14.0", "qs": "^6.14.0",
"vue": "^3.5.18", "vue": "^3.5.21",
"vue-router": "^4.5.1", "vue-router": "^4.5.1",
"vue-types": "^4.2.1" "vue-types": "^4.2.1"
}, },
@@ -50,16 +50,16 @@
"@faker-js/faker": "^9.9.0", "@faker-js/faker": "^9.9.0",
"@types/lodash": "^4.17.20", "@types/lodash": "^4.17.20",
"@types/lodash-es": "^4.17.12", "@types/lodash-es": "^4.17.12",
"@types/node": "^18.19.122", "@types/node": "^18.19.126",
"@typescript-eslint/eslint-plugin": "^5.62.0", "@typescript-eslint/eslint-plugin": "^5.62.0",
"@typescript-eslint/parser": "^5.62.0", "@typescript-eslint/parser": "^5.62.0",
"@vitejs/plugin-vue": "^3.2.0", "@vitejs/plugin-vue": "^3.2.0",
"@vitejs/plugin-vue-jsx": "^2.1.1", "@vitejs/plugin-vue-jsx": "^2.1.1",
"@vue/compiler-sfc": "^3.5.18", "@vue/compiler-sfc": "^3.5.21",
"@vue/eslint-config-typescript": "^11.0.3", "@vue/eslint-config-typescript": "^11.0.3",
"autoprefixer": "^10.4.21", "autoprefixer": "^10.4.21",
"commitizen": "^4.3.1", "commitizen": "^4.3.1",
"core-js": "^3.45.0", "core-js": "^3.45.1",
"cross-env": "^7.0.3", "cross-env": "^7.0.3",
"dotenv": "^16.6.1", "dotenv": "^16.6.1",
"eslint": "^8.57.1", "eslint": "^8.57.1",
@@ -72,7 +72,7 @@
"gh-pages": "^4.0.0", "gh-pages": "^4.0.0",
"husky": "^8.0.3", "husky": "^8.0.3",
"jest": "^29.7.0", "jest": "^29.7.0",
"less": "^4.4.0", "less": "^4.4.1",
"less-loader": "^11.1.4", "less-loader": "^11.1.4",
"lint-staged": "^13.3.0", "lint-staged": "^13.3.0",
"postcss": "^8.5.6", "postcss": "^8.5.6",
@@ -87,12 +87,12 @@
"tailwindcss": "^3.4.17", "tailwindcss": "^3.4.17",
"typescript": "^4.9.5", "typescript": "^4.9.5",
"unplugin-vue-components": "^0.22.12", "unplugin-vue-components": "^0.22.12",
"vite": "^5.4.19", "vite": "^5.4.20",
"vite-plugin-compression": "^0.5.1", "vite-plugin-compression": "^0.5.1",
"vite-plugin-html": "^3.2.2", "vite-plugin-html": "^3.2.2",
"vite-plugin-style-import": "^2.0.0", "vite-plugin-style-import": "^2.0.0",
"vue-demi": "^0.13.11", "vue-demi": "^0.13.11",
"vue-draggable-next": "^2.2.1", "vue-draggable-next": "^2.3.0",
"vue-eslint-parser": "^9.4.3", "vue-eslint-parser": "^9.4.3",
"vuedraggable": "^4.1.0" "vuedraggable": "^4.1.0"
}, },

1447
pnpm-lock.yaml generated

File diff suppressed because it is too large Load Diff

View File

@@ -1,64 +1,70 @@
<template> <template>
<n-card :bordered="false"> <n-flex vertical>
<BasicForm @register="register" @submit="handleSubmit" @reset="handleReset"> <n-card :bordered="false">
<template #statusSlot="{ model, field }"> <BasicForm @register="register" @submit="handleSubmit" @reset="handleReset">
<n-input v-model:value="model[field]" /> <template #statusSlot="{ model, field }">
</template> <n-input v-model:value="model[field]" />
</BasicForm> </template>
</n-card> </BasicForm>
<n-card :bordered="false" class="mt-3"> </n-card>
<BasicTable <n-card :bordered="false">
:columns="columns" <BasicTable
:request="loadDataTable" :columns="columns"
:row-key="(row:ListData) => row.id" :request="loadDataTable"
ref="actionRef" :row-key="(row:ListData) => row.id"
:actionColumn="actionColumn" ref="actionRef"
@update:checked-row-keys="onCheckedRow" :actionColumn="actionColumn"
:scroll-x="1090" @update:checked-row-keys="onCheckedRow"
:striped="true" :scroll-x="1090"
> :striped="true"
<template #tableTitle>
<n-button type="primary" @click="addTable">
<template #icon>
<n-icon>
<PlusOutlined />
</n-icon>
</template>
新建
</n-button>
</template>
<template #toolbar> </template>
</BasicTable>
<n-modal v-model:show="showModal" :show-icon="false" preset="dialog" title="新建">
<n-form
:model="formParams"
:rules="rules"
ref="formRef"
label-placement="left"
:label-width="80"
class="py-4"
> >
<n-form-item label="名称" path="name"> <template #tableTitle>
<n-input placeholder="请输入名称" v-model:value="formParams.name" /> <n-button type="primary" @click="addTable">
</n-form-item> <template #icon>
<n-form-item label="地址" path="address"> <n-icon>
<n-input type="textarea" placeholder="请输入地址" v-model:value="formParams.address" /> <PlusOutlined />
</n-form-item> </n-icon>
<n-form-item label="日期" path="date"> </template>
<n-date-picker type="datetime" placeholder="请选择日期" v-model:value="formParams.date" /> 新建
</n-form-item> </n-button>
</n-form> </template>
<template #action> <template #toolbar> </template>
<n-space> </BasicTable>
<n-button @click="() => (showModal = false)">取消</n-button>
<n-button type="info" :loading="formBtnLoading" @click="confirmForm">确定</n-button> <n-modal v-model:show="showModal" :show-icon="false" preset="dialog" title="新建">
</n-space> <n-form
</template> :model="formParams"
</n-modal> :rules="rules"
</n-card> ref="formRef"
label-placement="left"
:label-width="80"
class="py-4"
>
<n-form-item label="名称" path="name">
<n-input placeholder="请输入名称" v-model:value="formParams.name" />
</n-form-item>
<n-form-item label="地址" path="address">
<n-input type="textarea" placeholder="请输入地址" v-model:value="formParams.address" />
</n-form-item>
<n-form-item label="日期" path="date">
<n-date-picker
type="datetime"
placeholder="请选择日期"
v-model:value="formParams.date"
/>
</n-form-item>
</n-form>
<template #action>
<n-space>
<n-button @click="() => (showModal = false)">取消</n-button>
<n-button type="info" :loading="formBtnLoading" @click="confirmForm">确定</n-button>
</n-space>
</template>
</n-modal>
</n-card>
</n-flex>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>