码道工坊

一个包含把ERP、CRM、HRM、项目管理的好用开源平台

Thu, 09 Apr 2026 23:03:13 +0800

做企业的，痛点都差不多：

人事用一个系统，客户管理用一个系统，项目进度用一个系统，财务又用一个系统。光系统对接就够喝一壶的，更别提数据分散、流程割裂的问题。

Ever Gauzy 是一个开源的企业管理平台，把ERP、CRM

、HRM、项目管理这些模块整合到了一起。AGPL 3.0协议，代码全开

覆盖了哪些业务

人力资源管理（HRM）

员工管理、入离职、考勤排班、请假审批、绩效目标（OKR/KPI）、候选人面试追踪（ATS）。从招人到管人，一套流程覆盖。

客户关系管理（CRM）

客户/潜在客户管理、销售管线、报价、提案。

项目管理（PM）

项目创建、任务分配、进度追踪、日程安排。

财务与成本管理

记账、发票、收款付款、收入支出管理、多币种支持。

时间追踪

员工工时记录、活动监控、工作效率分析。有专门的桌面计时器客户端。

其他

库存管理、设备共享、多组织管理、多语言、多主题（深色/浅色/企业主题）、报表与分析、知识库、邮件模板、数据导入导出。

技术栈

前端

TypeScript + Angular

基于 Nx monorepo 管理

后端

Node.js + NestJS

TypeORM / MikroORM / Knex

数据库

支持多种：SQLite（默认演示用）、PostgreSQL（推荐生产用）、MySQL、MariaDB、CockroachDB、MS SQL、Oracle、MongoDB。

基础设施（Docker部署时）

PostgreSQL：主数据库

OpenSearch：搜索引擎

Redis：缓存

MinIO：对象存储（S3兼容）

Cube.js：BI报表

Jitsu：数据采集

部署方式

最快体验：Docker一键启动

docker-compose -f docker-compose.demo.yml up

打开浏览器访问 http://localhost:4200

管理员账号：admin@ever.co / admin

员工账号：employee@ever.co / 123456

推荐用 Kubernetes，也支持 Docker Compose。配置文件 .env.compose 里可以自定义数据库类型等参数。

桌面客户端

提供三个版本：

Gauzy Server：包含API + 数据库 + 前端，适合小团队部署
Gauzy Desktop App：全功能桌面端，可独立运行也可连接远程服务器
Gauzy Desktop Timer：专注工时记录和活动监控的轻量客户端

适合谁

中小企业想用一个平台搞定多个业务模块的

不想把数据分散在多个SaaS里的团队

需要私有化部署、对数据安全有要求的组织

想基于开源平台做二次开发的团队

注意事项

SaaS版本目前还在Alpha阶段，功能不太稳定，谨慎使用

项目体积较大，本地构建耗时较长

推荐用预构建的Docker镜像，而不是从头本地编译

生产环境建议用PostgreSQL，不要用SQLite

响应式布局的常用解决方案对比(媒体查询、百分比、rem和vw/vh）

Thu, 09 Apr 2026 22:51:30 +0800

简要介绍：前端开发中，静态网页通常需要适应不同分辨率的设备，常用的自适应解决方案包括媒体查询、百分比、rem和vw/vh等。本文从px单位出发，分析了px在移动端布局中的不足，接着介绍了几种不同的自适应解决方案。

px和视口
媒体查询
百分比
自适应场景下的rem解决方案
通过vw/vh来实现自适应

一、px和视口

在静态网页中，我们经常用像素（px）作为单位，来描述一个元素的宽高以及定位信息。在pc端，通常认为css中,1px所表示的真实长度是固定的。

那么，px真的是一个设备无关，跟长度单位米和分米一样是固定大小的吗？

字体都是16px，显然在pc端中文字正常显示，而在移动端文字很小，几乎看不到，说明在css中1px并不是固定大小，直观从我们发现在移动端1px所表示的长度较小，所以导致文字显示不清楚。

那么css中的1px的真实长度到底由什么决定呢？

为了理清楚这个概念我们首先介绍像素和视口的概念

1. 像素

像素是网页布局的基础，一个像素表示了计算机屏幕所能显示的最小区域，像素分为两种类型：css像素和物理像素。

我们在js或者css代码中使用的px单位就是指的是css像素，物理像素也称设备像素，只与设备或者说硬件有关，同样尺寸的屏幕，设备的密度越高，物理像素也就越多。下表表示css像素和物理像素的具体区别：

css像素	为web开发者提供，在css中使用的一个抽象单位
物理像素	只与设备的硬件密度有关，任何设备的物理像素都是固定的

那么css像素与物理像素的转换关系是怎么样的呢？为了明确css像素和物理像素的转换关系，必须先了解视口是什么。

2. 视口

广义的视口，是指浏览器显示内容的屏幕区域，狭义的视口包括了布局视口、视觉视口和理想视口

(1) 布局视口（layout viewport）

布局视口定义了pc网页在移动端的默认布局行为，因为通常pc的分辨率较大，布局视口默认为980px。也就是说在不设置网页的viewport的情况下，pc端的网页默认会以布局视口为基准，在移动端进行展示。因此我们可以明显看出来，默认为布局视口时，根植于pc端的网页在移动端展示很模糊。

(2) 视觉视口（visual viewport）

视觉视口表示浏览器内看到的网站的显示区域，用户可以通过缩放来查看网页的显示内容，从而改变视觉视口。视觉视口的定义，就像拿着一个放大镜分别从不同距离观察同一个物体，视觉视口仅仅类似于放大镜中显示的内容，因此视觉视口不会影响布局视口的宽度和高度。

(3) 理想视口（ideal viewport）

理想视口或者应该全称为“理想的布局视口”，在移动设备中就是指设备的分辨率。换句话说，理想视口或者说分辨率就是给定设备物理像素的情况下，最佳的“布局视口”。

上述视口中，最重要的是要明确理想视口的概念，在移动端中，理想视口或者说分辨率跟物理像素之间有什么关系呢？

为了理清分辨率和物理像素之间的联系，我们介绍一个用DPR（Device pixel ratio）设备像素比来表示，则可以写成：

在不缩放的情况下，一个css像素就对应一个dpr，也就是说，在不缩放

此外，在移动端的布局中，我们可以通过viewport元标签来控制布局，比如一般情况下，我们可以通过下述标签使得移动端在理想视口下布局：

上述meta标签的每一个属性的详细介绍如下：

属性名	取值	描述
width	正整数	定义布局视口的宽度，单位为像素
height	正整数	定义布局视口的高度，单位为像素，很少使用
initial-scale	[0,10]	初始缩放比例，1表示不缩放
minimum-scale	[0,10]	最小缩放比例
maximum-scale	[0,10]	最大缩放比例
user-scalable	yes／no	是否允许手动缩放页面，默认值为yes

其中我们来看width属性，在移动端布局时，在meta标签中我们会将width设置称为device-width，device-width一般是表示分辨率的宽，通过width=device-width的设置我们就将布局视口设置成了理想的视口。

3. px与自适应

上述我们了解到了当通过viewport元标签，设置布局视口为理想视口时，1个css像素可以表示成：

我们直到，在pc端的布局视口通常情况下为980px，移动端以iphone6为例，分辨率为375 * 667，也就是说布局视口在理想的情况下为375px。比如现在我们有一个750px * 1134px的视觉稿，那么在pc端，一个css像素可以如下计算

而在iphone6下：

也就是说在PC端，一个CSS像素可以用0.76个物理像素来表示，而iphone6中一个CSS像素表示了2个物理像素。此外不同的移动设备分辨率不同，也就是1个CSS像素可以表示的物理像素是不同的，因此如果在css中仅仅通过px作为长度和宽度的单位，造成的结果就是无法通过一套样式，实现各端的自适应。

二、媒体查询

在前面我们说到，不同端的设备下，在css文件中，1px所表示的物理像素的大小是不同的，因此通过一套样式，是无法实现各端的自适应。由此我们联想：

如果一套样式不行，那么能否给每一种设备各一套不同的样式来实现自适应的效果？

答案是肯定的。

使用@media媒体查询可以针对不同的媒体类型定义不同的样式，特别是响应式页面，可以针对不同屏幕的大小，编写多套样式，从而达到自适应的效果。举例来说：

上述的代码通过媒体查询定义了几套样式，通过max-width设置样式生效时的最大分辨率，上述的代码分别对分辨率在0～320px，320px～550px，550px～768px以及768px～960px的屏幕设置了不同的背景颜色。

通过媒体查询，可以通过给不同分辨率的设备编写不同的样式来实现响应式的布局，比如我们为不同分辨率的屏幕，设置不同的背景图片。比如给小屏幕手机设置@2x图，为大屏幕手机设置@3x图，通过媒体查询就能很方便的实现。

但是媒体查询的缺点也很明显，如果在浏览器大小改变时，需要改变的样式太多，那么多套样式代码会很繁琐。

三、百分比

除了用px结合媒体查询实现响应式布局外，我们也可以通过百分比单位 " % " 来实现响应式的效果。

比如当浏览器的宽度或者高度发生变化时，通过百分比单位，通过百分比单位可以使得浏览器中的组件的宽和高随着浏览器的变化而变化，从而实现响应式的效果。

为了了解百分比布局，首先要了解的问题是：

css中的子元素中的百分比（%）到底是谁的百分比？

直观的理解，我们可能会认为子元素的百分比完全相对于直接父元素，height百分比相对于height，width百分比相对于width。当然这种理解是正确的，但是根据css的盒式模型，除了height、width属性外，还具有padding、border、margin等等属性。那么这些属性设置成百分比，是根据父元素的那些属性呢？此外还有border-radius和translate等属性中的百分比，又是相对于什么呢？下面来具体分析。

1. 百分比的具体分析

（1）子元素height和width的百分比

子元素的height或width中使用百分比，是相对于子元素的直接父元素，width相对于父元素的width，height相对于父元素的height。比如：

移动端不同屏幕适配的方法

Thu, 09 Apr 2026 22:48:41 +0800

1.使用js修改rem值的大小

这个方法比较简单，获取其他手机屏幕相对于iphone5手机屏幕的大小，然后放大和缩小html的fontsize值就可以了。这个方法有个缺点就是fontsize值可能为小数，有可能导致页面上的文字出现模糊不清的情况。只要微调下就可以并不是大的问题。js代码如下：

使用上面这段代码是有前提的，就是页面必须要加这段html代码。

原因如下：

在移动端的发展过程中，早期的手机为了正常显示pc页面，手机默认的viewport的宽度并不是手机屏幕的宽度，一般默认的viewport宽度为980px，当然也有手机默认的宽度为1280px。这样如果你不把viewport的宽度设置为device-width的话，window.innerWidth就是默认值 980px或者是1280px。这样我们上一段代码就有问题了。我们使用window.innerWidth获取的并不是屏幕的宽度，所以求出来的scale也就错了。

解决方法有两个，一个是加上meta那一段html代码，既设置viewport的width为device-width。推荐使用这个方法（其实现在的移动端页面都有这段代码）。第二个方法就是改用screen.width而不是使用window.innerWidth。

2.使用媒体查询适配

使用媒体查询设置html元素font-size的大小。这个方法简单但是工作量较多，一来是需要知道市场上所有主流的手机的屏幕尺寸，二来如果未来出现新的机型号到时候可能又会出现页面不适配的情况。当时这个方法确实比较简单一点，媒体查询的css如下：

3.flex布局：主流的布局方式，不仅适用于移动Web，网页上也表现良好，这也是现在工作中用的最多的布局方式，因此我们的项目尽量采用flex+rem的方式进行布局和完成移动端的适配。

rem是相对长度单位，可以做到一样的取值，在不同尺寸的屏幕上的大小按比例缩放。
rem的定义：rem（font size of the root element）是相对于根元素（即html元素）font-size计算值的倍数。
例如html标签设置font-size:16px，同时div设置width:1.2rem。那么这个div的宽度就是1.2rem=16px*1.2=19.2px。
因此这种方法的适配原理是：根据不同屏幕的宽度，以相同的比例动态修改html的font-size适配，并将px替换成rem，它可以很好的根据根元素的字体大小来进行变化，从而达到各种屏幕基本一直的效果体验。

明白了REM的原理后，我们就可以使用这个特点来进行适应布局了，这也是现在比较主流的移动端web适配方案。

原生js实现文件分片上传

Thu, 09 Apr 2026 22:45:01 +0800

分片上传是一种文件上传技术，它允许将大文件分割成多个较小的片段（通常称为“分片”或“块”），然后将这些片段分别上传到服务器。服务器在接收到所有分片后，会将它们组合成一个完整的文件。

分片上传有以下优点：

可以支持大文件上传。

由于文件被分割成多个较小的片段，因此可以避免单次上传文件过大导致的问题。

可以提高上传速度。

由于每个分片都是独立上传的，因此可以并行上传多个分片，从而提高上传速度。

可以支持断点续传。

如果某个分片上传失败，可以重新上传这个分片，而不需要重新上传整个文件。

实现分片上传需要前端和后端配合。前端需要将文件分割成多个分片，并将每个分片单独上传到服务器；后端需要接收这些分片，并在接收到所有分片后将它们组合成一个完整的文件。

示例代码如下：

在上面的代码中，我们首先获取用户选择的文件，然后计算出分片总数。接着，我们使用一个循环来遍历每个分片，并使用 File 对象的 slice 方法将文件分割成多个分片。

对于每个分片，我们创建一个 FormData 对象，并将分片、文件名、分片索引和分片总数添加到表单数据中。然后，我们使用 fetch 函数向服务器发送一个 POST 请求，将表单数据上传到服务器。

需要注意的是，上面的代码仅仅是一个简单的示例，实际应用中可能需要更多的错误处理和进度显示等功能。此外，后端也需要相应地处理分片上传。

windows本地安装postgres教程

Thu, 09 Apr 2026 22:38:04 +0800

‌安装步骤‌

‌下载安装包‌

访问 PostgreSQL 官方下载页面：
https://www.enterprisedb.com/downloads/postgres-postgresql-downloads
选择适用于 Windows 的 ‌64 位版本（x86-64）‌，下载 .exe 安装文件。

这里我选择的是win-64版本的

‌运行安装程序‌

右键安装包 → ‌“以管理员身份运行”‌（避免权限问题）‌8。
点击 ‌Next‌ 进入下一步。
‌设置安装路径‌

默认路径为 C:\Program Files\PostgreSQL\XX，建议‌改到非系统盘‌（如 D 盘），避免 C 盘空间不足‌35。

这里我选择的d盘
点击 ‌Next‌。

设置一下密码，然后一路next

‌选择安装组件‌

默认全选（包括 pgAdmin、Stack Builder 等）。
若不确定用途，‌保持全选‌；若仅需数据库核心，可取消 Stack Builder（后续可单独安装扩展）‌35。
点击 ‌Next‌。

‌设置数据目录‌

默认为安装路径下的 data 子目录。
建议‌不要放在系统盘‌（如 C 盘），可指定如 D:\PostgreSQL\data‌36。
点击 ‌Next‌。

‌设置超级用户密码‌

超级用户名默认为 postgres。
‌务必设置并牢记密码‌，后续连接数据库、pgAdmin 等均需使用‌12。
点击 ‌Next‌。

‌设置端口号‌

默认端口为 ‌5432‌。
若该端口已被占用（如其他数据库服务），可改为 ‌5433‌ 或更高（需确保不冲突）‌36。
点击 ‌Next‌。

‌设置区域与编码‌

‌关键提示‌：
‌不要选择中文地区（如 Chinese (Simplified)）‌，否则可能因编码问题导致安装失败或乱码‌29。
建议选择 ‌默认（C）‌ 或 ‌English (United States)‌‌9。
点击 ‌Next‌。
‌确认信息并安装‌

核对设置无误后，点击 ‌Install‌ 开始安装。
安装过程需几分钟，完成后点击 ‌Finish‌‌15。

一路漫长的安装等待

可以使用navicat链接测一下有么有安装成功，填入刚刚设置的账号密码

如图显示安装成功

安装成功以后会自动打开页面这里可以不用安装选择取消

关于uniapp的vue2.x版本的路由守卫拦截方案

Thu, 09 Apr 2026 22:35:15 +0800

使用uni-read-pages和uni-simple-router实现，方案思路如下

首先在packge.json把下面两个依赖npm install 一下，我目前是这两个版本，别的版本号没有测试过

一键获取完整项目代码
然后再再根目录下面创建一个vue.config.js

代码如下

一键获取完整项目代码
javascript

然后根目录创建一个index.js(这里应该也可以创建目录router/index.js，我没有试过，感兴趣的自己可以试一下)

// router.js
import {RouterMount,createRouter} from 'uni-simple-router';

const scrollInfo={};

const router = createRouter({
platform: process.env.VUE_APP_PLATFORM,
routes: [...ROUTES],
h5:{
scrollBehavior:(to, from, savedPosition)=>{
const XY=scrollInfo[to.path];
if(XY){
return XY;
}
return savedPosition;
}
}
});
//全局路由前置守卫
router.beforeEach((to, from, next) => {

console.log("跳转前");
next();
});
// 全局路由后置守卫
router.afterEach((to, from) => {
console.log('跳转结束')
})

export {
router,
RouterMount
}
一键获取完整项目代码
javascript

然后main.js里面加入如下代码

import Vue from 'vue'
import App from './App'
import {router,RouterMount} from './router.js' //路径换成自己的
Vue.use(router)

Vue.config.productionTip = false
App.mpType = 'app'

const app = new Vue({
...App,
})

//v1.3.5起 H5端你应该去除原有的app.$mount();使用路由自带的渲染方式-----这一步很重要，
// #ifdef H5
RouterMount(app,router,'#app')
// #endif
app.$mount()
一键获取完整项目代码
javascript

其他的不用做任何改动，然后控制台就可以打印出来啦

OpenAI 发布 GPT-5，推理能力大幅提升

Wed, 08 Apr 2026 13:18:55 +0800

OpenAI 正式发布 GPT-5 模型，在数学推理、代码生成和多模态理解方面较上一代有显著提升，API 同步开放接入。

GitHub Copilot 支持全项目上下文理解

Wed, 08 Apr 2026 13:08:55 +0800

GitHub Copilot 最新版本新增全仓库上下文感知能力，可基于整个项目结构给出更精准的代码补全建议，已向所有付费用户开放。

Vue 3.5 正式发布，响应式系统重构

Wed, 08 Apr 2026 12:53:55 +0800

Vue 3.5 版本正式发布，响应式系统经过重构内存占用减少 56%，同时新增 useTemplateRef()、Deferred Teleport 等实用 API。

Cloudflare 推出 AI Gateway 正式版

Wed, 08 Apr 2026 12:23:55 +0800

Cloudflare AI Gateway 正式版上线，支持统一管理多个 AI 服务商的 API 调用，提供请求日志、限速、缓存和故障转移功能。