直接上图, 展示的是一个完整用户管理功能截图

列表功能展示

新增和编辑展示

修改密码功能展示

上图功能包含了 新增、修改、删除、查询、修改密码、权限控制等完整的用户管理功能 总共117行代码,而网上比较火的ruoyi框架实现同样的功能总共是696行代码(5倍的差距)； 下面是实现此功能的代码，体现了整个设计的 简洁，易懂，灵活，易扩展

<template>  <IvzBasicView name="用户" auth>    <IvzViewSearch>      <ivz-input field="name" label="用户昵称" />      <ivz-input field="account" label="用户帐号" />      <ivz-input field="phone" label="用户手机" />      <ivz-radio field="status" label="用户状态" :options="status"/>      <template #func>        <IvzFuncBtn func="reset">重置</IvzFuncBtn>        <IvzFuncBtn func="query" url="/core/admin/view">搜索</IvzFuncBtn>        <IvzFuncBtn func="add" url="/core/admin/add">新增</IvzFuncBtn>      </template>    </IvzViewSearch>    <IvzViewDrawer width="860" layout="vertical" :rules="rules" placement="left">      <template #default="{model}">        <IvzRow :gutter="16" span="8">          <ivz-input field="name" label="用户昵称" />          <ivz-input field="account" label="用户帐号" :disabled="model.id != null"/>          <ivz-tree-select field="orgId" label="所属部门" treeNodeFilterProp="label"                           url="/core/org/parent" labelField="name" valueField="id"/>          <ivz-input field="email" label="用户邮箱" />          <ivz-radio field="status" label="用户状态" defaultValue="enabled" :options="status"/>          <ivz-radio field="sex" label="用户性别" :options="sex" defaultValue="non"/>          <ivz-checkbox field="roleIds" label="用户角色" url="/core/role/list"                        labelField="name" valueField="id" span="24"/>          <ivz-textarea field="remark" label="用户简介" span="24" />        </IvzRow>      </template>      <template #title="{model}">        {{model.id != null ? '修改用户' : '新增用户'}}      </template>      <template #footer="{model}">        <IvzFuncBtn func="cancel">取消</IvzFuncBtn>        <IvzFuncBtn func="submit" :url="model.id ? '/core/admin/edit' : '/core/admin/add'">提交</IvzFuncBtn>        <IvzFuncBtn func="reset">重置</IvzFuncBtn>      </template>    </IvzViewDrawer>    <IvzViewTable :columns="columns" :bordered="true" size="small">      <template #c_action="{record}">        <IvzFuncTag func="edit" :data="record" url="/core/admin/edit">修改</IvzFuncTag>        <IvzFuncTag func="del" :data="record" url="/core/admin/del">删除</IvzFuncTag>        <IvzFuncTag func="edit:modPwd" :data="record" url="/core/admin/pwd">修改密码</IvzFuncTag>      </template>    </IvzViewTable>    <!--  修改密码  -->    <IvzBasicModal id="modPwd" title="修改密码" ref="pwdModalRef" :span="[6, 15]" :rules="pwdRules">      <ivz-input-password label="密码" field="password" />      <ivz-input-password label="确认密码" field="surePwd" />      <template #footer>        <IvzFuncBtn func="submit" url="/core/admin/pwd">提交</IvzFuncBtn>        <IvzFuncBtn func="cancel">取消</IvzFuncBtn>      </template>    </IvzBasicModal>  </IvzBasicView></template><script>import {ref} from "vue";import {IvzViewDrawer, IvzViewSearch, IvzViewTable} from "@/components/view";import IvzBasicModal from "@/components/modal/IvzBasicModal";export default {  name: "Admin",  components: {IvzBasicModal},  setup() {    let sex = [      {label: '男', value: 'man'},      {label: '女', value: 'woman'},      {label: '无', value: 'non'}    ]    let status = [      {label: '启用', value: 'enabled'}, {label: '禁用', value: 'disabled'}    ]    let columns = [      {title: '用户昵称', field: 'name'},      {title: '用户账号', field: 'account'},      {title: '所属部门', field: 'orgId', url: '/core/org/parent', valueField: 'id', labelField: 'name'},      {title: '性别', field: 'sex', options: sex},      {title: '手机', field: 'phone'},      {title: '邮箱', field: 'email'},      {title: '状态', field: 'status', options: status},      {title: '创建时间', field: 'createTime'},      {title: '操作', field: 'action', type: 'action'},    ]    let rules = {      name: {required: true, message: '用户昵称必填'},      roleIds: {type: 'array', required: true, message: '请选择用户角色'},      account: {required: true, message: '用户帐号必填'},    }    let pwdModalRef = ref(null);    let validator = (a,b,c) => {      let editModel = pwdModalRef.value.getEditModel();      return new Promise((resolve, reject) => {        if(b == null || b == '') {          reject("请输入确认密码");        } else if(editModel.password != editModel.surePwd) {          reject("两次密码不一致");        }else {          resolve();        }      })    }    let pwdRules = {      surePwd: {required: true, validator},      password: {required: true, message: '请输入密码'}    }    let loading = ref(false);    return {columns, rules, status, sex, pwdRules, loading, pwdModalRef}  },}</script>

代码量少是因为封装了，而封装导致了灵活性的丧失了，面对业务的复杂性害怕在不了解内在逻辑的情况下出了问题解决不了。其实我们只是做了简单的封装，在ui方面和原生的一样灵活，您可以自由地布局，这在其他的框架里面还比较难看到的，比如avue框架；我们只是对增删改查等常用的功能实现上进行了封装，对于ui布局没有一点影响，而且每个默认的功能在不满足使用的情况下可以按照原先的写法重新定义，互不影响

能解决什么问题如果你的系统有几十个功能，每个功能增删改查的实现都是同一套代码，每个页面的代码都是从另外一个页面复制过来的。体验过修个bug时几十个页面一起修改的痛苦吗甲方不满足现在页面的ui设计, 项目做了一大半了，需要调整。几十个页面修改一遍样式的那种绝望吗同样的一套增删改查、导入、导出、详情的功能实现又臭又长，然后却每个页面都有，代码不整洁，看起来很乱，找个bug看花了眼，功能不断的新增，代码量不断的增加打包后的体积越来越大...

项目开源在gitee上, 搜索ivzone, 由于不能放外链，请自行搜索