很酷的流程编排！酷 cool

预览地址

快戳我，去预览一下吧！

账号：admin 密码：123456

AI 流程编排

想象一下吧，通过拖放操作，你就可以用 AI 技术来轻松优化和自动化各种工作流程，是不是很酷？🎉

前端基于 @vue-flow

AI 极速编码

咦，这是什么？原来是：AI 代码生成器

只要你动动手指，输入简要描述，完整的前后端代码就为你生成啦！是不是超级方便？

2023 年 7 月 14 日更新：好消息来啦！现在支持 Java 版本，还能生成 Mapper、Entity、Service 实现/接口类、Controller 哦！

有什么不同？

路人甲：嗯，这种后台模板看起来挺常见的嘛。

路人乙：不就是个 UI 组件拼凑的壳子吗？

路人丙：感觉代码结构可能就是直接复制 vue-admin-template 那套东西吧。

...

虽然你们这样说，嗯...但其实你们没看见真正的亮点啊！继续往下看，绝对惊喜！

模块化开发

嘿嘿，别以为你只看到了一堆 UI 界面，其实背后的目录结构和代码设计可是经过多年经验打磨出来的哦！模块化开发不仅让代码复用变得轻而易举，还能降低耦合度，厉害吧！

src
  ├── cool 核心文件：权限、路由、模块插件的加载、Eps 的生成
  ├── plugins
  │      ├── crud CRUD 组件
  │      ├── editor 代码编辑器、富文本编辑器
  │      ├── upload 文件上传
  │      ├── excel 表格导入导出
  │      └── view 视图组件
  ├── modules
  │      ├── base 基础模块：用户、菜单、角色等
  │      ├── chat 聊天通讯模块
  │      ├── dict 字典模块
  │      ├── helper 快速开发辅助模块
  │      ├── space 文件管理模块
  │      ├── task 任务模块
  │      ├── theme 主题模块
  │      ├── ...

想要更详细的内容？来来来，戳这里：[完整代码结构](https://show.cool-admin.com)

实例代码

<template>
    <cl-crud v-bind="Crud.value" />
</template>

<script setup lang="ts">
import { reactive } from "vue";
import { useForm } from "cool-admin";
import { useCrud, useTable } from "cool-admin";
import service from "@/service";

const Form = useForm({
    fields: [
        { label: "名称", prop: "name", component: { name: "el-input" }, value: "", required: true },
        { label: "价格", prop: "price", component: { name: "el-input-number" }, value: 0, required: true },
        { label: "库存", prop: "stock", component: { name: "el-input-number" }, value: 0, required: true },
        { label: "销量", prop: "sales", component: { name: "el-input-number" }, value: 0, required: true },
    ],
});

const Table = useTable({
    columns: [
        { type: "selection" },
        { label: "名称", prop: "name", minWidth: 140 },
        { label: "价格", prop: "price", minWidth: 140 },
        { label: "库存", prop: "stock", minWidth: 140 },
        { label: "品牌", prop: "brand", minWidth: 140 },
        { label: "规格", prop: "specification", minWidth: 140 },
        { label: "描述", prop: "description", showOverflowTooltip: true, minWidth: 200 },
        { label: "图片", prop: "images", minWidth: 100, component: { name: "cl-image", props: { size: 60 } } },
        { label: "状态", prop: "status", component: { name: "cl-switch" }, minWidth: 120 },
        { label: "销量", prop: "sales", minWidth: 140 },
        { label: "创建时间", prop: "createTime", minWidth: 170, sortable: "desc" },
        { type: "op", buttons: ["edit", "delete"] },
    ],
});

const Crud = useCrud({ service: service.goods.info }, (app) => {
    app.refresh();
});

function refresh(params?: any) {
    Crud.value?.refresh(params);
}
</script>

怎么样？是不是感觉代码清晰易懂？而且还有很多细节上的小优化哦：

• 使用 useTable<Eps.GoodsInfoEntity> 后，items.prop 会提示当前表中的可选字段，超贴心！
• cl-table 组件继承了 elm 的许多特性，可以直接使用 el-table 的 border、stripe、row-class-name 等属性，简直不要太方便！
• 支持插件模式，比如输入框自动聚焦插件、字段权限校验插件，是不是很实用？

如果你还想看更多示例，那就赶快点击这里吧：CRUD 示例

结尾

新功能持续开发中哦！MidwayJs 和 Java 版本已经上线了，快来尝尝鲜吧~

而且，Go 和 Python 版本也正在紧锣密鼓地制作中，感谢所有铁粉的支持和耐心等待，敬请期待！

官网：cool-js.com

GitHub：cool-admin-vue

我们是完全开源的哦！觉得好用的话，记得给我们点个 Star，给我们打打气吧！💪

希望这个版本符合你的期望，如果还需要更多调整，请随时告诉我哦！