APITable 使用心得

应 vika维格 陈总的邀请：启动一下 APITable 的开发环境并说说心得。进而有了这篇文章。

一、初见

接触一项技术或工具，首要先沉下心来看看文档。

README 已经对 APITable 介绍得相当详细了 https://github.com/apitable/apitable/tree/develop/docs/readme/zh-CN

作为刚开源不久的产品，社区版的完成度已经的非常高了。

Frist Commit 在 22年12月25日。

从 release 上看，23年1月5日发布的首个 Alpha 版。

APITable 不只是个前端框架，还要配合后端完成它丰富的功能。架构图有助了解：https://github.com/apitable/apitable/blob/develop/docs/readme/zh-CN/docs/contribute/architecute-overview.md

二、上手

先看文档 https://github.com/apitable/apitable/blob/develop/docs/readme/zh-CN/README.md#installation

前置条件 - 我目前的本地环境是：

Win11
已装好 WSL 2 环境以及 Ubuntu For WSL 镜像
Docker Desktop 已安装 & 已开启 WSL 2 Backend

安装

官方已有自动化脚本 https://apitable.github.io/install.sh

#!/bin/bash

set -e

notes () {
    cat << EOF
======== WARM TIPS ========
Before you submit any github issue, please do the following check:
* make sure the docker daemon is running
* make sure you use docker compose v2: recommend 2.x.x, got $(docker compose version --short 2>/dev/null || echo not install)
* check your internet connection if timeout happens
===========================
EOF
}

trap notes ERR

DOWNLOAD_URL='https://github.com/apitable/apitable.github.io/releases/latest/download/docker-compose.tar.gz'

mkdir -p apitable
cd apitable || exit 1

: "${DOWNLOAD_URL?✗ missing env}"

curl -fLo docker-compose.tar.gz "${DOWNLOAD_URL}"
tar -xvzf docker-compose.tar.gz

docker compose down -v --remove-orphans
for i in {1..50}; do
    if docker compose pull; then
        if docker compose up -d; then
            break
        fi
    fi
    sleep 6
done

可看出该应用已 Dockerize 容器化了，没什么特别的安装前的前置准备，仅需 Docker 环境即可。
因此原理上手动 git clone 并 docker compose up 即可跑起来。
步骤如下：

1. 下源码

方式一：从 GitHub 下载源码。

git clone https://github.com/apitable/apitable.git

直接从 github clone 会很慢，可以科学上网或者改国内 gitee。

经查验，虽然 APITable 在 Gitee 的 Release 落后于 GitHub，处于不可用状态，但代码是一直保持同步的，可放心使用。

方式二：改从 Gitee 下载源码。

注意，Gitee 的项目名叫 APITable 严格区分大小写，GitHub 则是全小写。
建议统一小写目录名。

git clone https://gitee.com/apitable/APITable.git apitable

2. 启动

进入项目目录，通过 docker compose 启动：

cd APITable
docker compose up

默认监听的80端口，因此直接 http://localhost 就可打开了。

三、使用

第一感官，前端做得非常细致。

个人作为前端开发工程师的理念：
当今百花齐放的时代，同类产品之间的功能性差异正逐渐缩小。再好的功能和想法，没有好的 UI 用户界面和优秀的 UE 用户体验，都是在漠视用户诉求，固步自封。

中国人做的软件，点击头像进入 My Settings，自豪地换上简体中文。Figma 到现在都只有日文和英文，GitLab 长期新版本无官方中文。

官方支持很多视图模式，例如敏捷研发常用的看板视图。

结合默认模板以及自定义一下，感觉可以抛弃 Teambition 做一款很好的软件项目管理工具了。

开源也有助于二次开发，更适合企业内部定制使用。

我将尝试使用一段时间，后续有时间将分享功能上的使用体验。

四、为 APITable 改个 Bug 试试

个人对前端体验非常敏感，刚上手使用就发现了个 UI 上的问题。

统一术语：

本文中 Item 代指菜单项、树节点、以及任何与兄弟元素具有同一行为规则的元素。

纵观 APITable 整个前端的 UI 行为，在正常的情况下：当 Item 处于 active 激活状态时，背景色为主题色，且鼠标 hover 时背景色不应有所改变。

正确的 UI 行为演示：

错误的 UI 行为演示（Bug 出现位置：模板中心 > 模板详情页 > 侧栏）：

进入正题：我们接下来将以此 Bug 为主题，分析问题成因，讲解修复流程，顺带了解一番 APITable 前端工程的一些细节。

成因分析

先 F12 审查下元素，看看 DOM 结构和 CSS。

得到两个信息：

不用看源码，光从 class 的 ant- 前缀可知前端用的的 React + Ant Design。
这个侧栏菜单用的是 Tree 组件，且 active 状态对应的其实是被选中的树节点 .ant-tree-treenode-selected。

Bug 出现在 hover 状态的时候，因此我们需将元素强制激发 :hover 看看。

得到信息：

未完待续...

APITable 使用心得

一、初见​

二、上手​

安装​

1. 下源码​

2. 启动​

三、使用​

四、为 APITable 改个 Bug 试试​

成因分析​

得到信息：​