Gentelella v4 后端接入实战用 contenteditable="false">【免费下载链接】gentelellaFree admin dashboard template — vanilla JS, SCSS, Vite 8. No Bootstrap, no jQuery.项目地址: https://gitcode.com/gh_mirrors/ge/gentelella导读本指南围绕 Gentelella v4 仓库中的 examples/README.md 展开讲解如何把开箱即用、全部基于硬编码 seed 数据的静态后台模板通过data-adapter数据适配器模式平滑接入真实后端。你将掌握useApiMode()一键切换机制、seedAdapter与httpAdapter的统一接口设计、如何运行仓库自带的 Express SQLite 示例服务以及如何按逐页迁移策略把自己的任意技术栈接进来——全程不需要改动一行渲染代码。背景为什么需要一个适配器层Gentelella v4 是一个vanilla JS SCSS Vite 构建的免费后台模板无 Bootstrap、无 jQuery见 package.json 的项目描述与 README.md。模板的每个交互页面订单、收件箱、看板、日历等默认都使用硬编码的 seed 数据保证任何人在没有后端的情况下也能离线预览、静态演示。但真实项目必然要读写真实数据。如果直接在页面里写死fetch(/api/orders)离线演示就彻底失效如果继续用 seed又无法对接后端。Gentelella v4 的答案是data-adapter 模式把数据从哪来抽象成一个只有 5 个方法的小接口让 seed 模式与 API 模式在同一套渲染代码下共存用一个 URL 参数即可切换。这个思路也写在了模块头注释中见 src/v4/data-adapter.jsEvery interactive page in the template has hardcoded seed data. Replacing that with a real API call is the most common first task for someone using this template as a starter. This module gives that task a name and a shape.examples 目录里有什么examples/ 是仓库自带的自包含、可直接运行的示例集合每个示例都是一个独立的 npm 项目用于演示如何把模板接到真实后端目录演示内容examples/express-sqlite极简 Express SQLite 服务提供GET /api/orders与GET /api/messages完整演示>import { useApiMode, seedAdapter, httpAdapter } from /src/v4/data-adapter.js; const adapter useApiMode() ? httpAdapter(/api/orders, { listKey: orders }) : seedAdapter(SEED); const items await adapter.list(); // 两种模式下调用方式完全一致 await adapter.update(id, { status: paid }); await adapter.create({ ... }); await adapter.remove(id);开关useApiMode()useApiMode()决定当前页面走哪条路实现见 src/v4/data-adapter.js两种触发方式URL 带?api1适合现场演示、联调时临时切换模块加载前设置window.__GENTELELLA_API__ true适合生产构建脚本——只要在业务代码之前注入该标志生产环境永远走 API。export function useApiMode() { if (typeof window undefined) {return false;} // SSR / Node 环境默认关闭 if (window.__GENTELELLA_API__) {return true;} return new URLSearchParams(window.location.search).has(api); }值得注意的实现细节即使 URL 里写了?api0只要api参数存在即视为开启代码用的是has(api)而非取值判断使用时不要用?api0表达关闭。seedAdapter离线数据的内存实现seedAdapter(seed, filter)把传入的数组维护在内存中所有写操作都是对内存数组的变更实现见 src/v4/data-adapter.jslist(query)可选地通过filter(item, query)对 seed 过滤后返回get(id)/create(data)/update(id, patch)/remove(id)与 API 语义一致id统一按字符串比较reset()恢复为初始 seed方便测试与演示src/v4/data-adapter.js。create时会根据现有数据的最大 id 自动分配nextId保证演示中新增记录不冲突src/v4/data-adapter.js。httpAdapterJSON REST 客户端httpAdapter(baseUrl, opts)是一个零依赖的 fetch 封装实现见 src/v4/data-adapter.js遵循以下 REST 约定方法请求期望响应list(query)GET baseUrl?keyvalue裸数组items[]或{ listKey: [...] }get(id)GET baseUrl/:id单条 itemcreate(data)POST baseUrl新建的 itemupdate(id, patch)PATCH baseUrl/:id{ ok: true }或 itemremove(id)DELETE baseUrl/:id{ ok: true }关键配置项listKey当列表接口返回的是包裹形式{ orders: [...] }时用它取出数组data[listKey] ?? []见 src/v4/data-adapter.js返回裸数组则无需设置fetch可注入自定义 fetch例如带鉴权 header、超时控制的封装默认使用globalThis.fetchsrc/v4/data-adapter.js。update与get会对 id 做encodeURIComponent转义因此像#7841这类订单号可以安全地放进 URL 路径见 src/v4/data-adapter.js。非 2xx 响应会抛出带status属性的HttpError便于在 catch 中区分4xx 用户错误与5xx/网络错误src/v4/data-adapter.js。端到端运行示例两个终端1. 启动后端终端一cd examples/express-sqlite npm install npm start # → API listening on http://localhost:8080首次启动时 examples/express-sqlite/seed.js 会自动播种数据20 条订单 10 条消息通过ON CONFLICT(id) DO NOTHING保证幂等页面打开即有内容可看。2. 启动前端开发服务器终端二项目根目录npm run dev # → http://localhost:9173Vite 开发服务器已把/api/*自动代理到http://localhost:8080配置见 vite.config.js。代理目标可用环境变量覆盖API_URL指向你自己的后端端口用PORT覆盖。3. 用?api1打开页面http://localhost:9173/production/orders.html?api1http://localhost:9173/production/inbox.html?api1你会先看到一闪而过的加载态随后表格/收件箱里出现 SQLite 的真实数据。去掉?api1立即回到离线 seed 模式——前后端各自独立互不影响。4. 不启动前端直接验证后端curl http://localhost:8080/api/orders | jq curl http://localhost:8080/api/messages?folderinbox | jq curl -X PATCH http://localhost:8080/api/orders/%237841 \ -H Content-Type: application/json \ -d {status:processing}注意第三行中%237841是#7841的 URL 编码#必须编码否则会被当作 URL 片段这与前端encodeURIComponent的处理一一对应。Express SQLite 示例后端拆解为什么选这套技术栈examples/express-sqlite/README.md 给出了三个理由ExpressNode 生态认知度最高的框架无惊喜路径任何人写过 Node 都能立刻读懂SQLitebetter-sqlite3同步 API、零配置、单文件数据库最适合示例与小型应用换 Postgres / Turso / Cloudflare D1 大约只需改 30 行不用 ORM直接写预编译 SQL 语句让 SQL 可见、可复制避免 ORM 的学习曲线掩盖这是起点示例的定位。表结构idempotent 迁移examples/express-sqlite/db.js 用migrations 表记录已应用迁移的方式保证重复启动不报错ordersidTEXT 主键如#7841、customer、initials、avatar_color、items、total、statusCHECK 约束限定paid/processing/pending/cancelled、payment、created_atmessagesidAUTOINCREMENT、folderCHECK 限定inbox/sent/drafts/trash、starred、unread、label、收发件人、subject、preview、body、created_at配套索引覆盖orders(status)、orders(created_at DESC)、messages(folder)、messages(unread)examples/express-sqlite/db.js。数据库连接启用journal_mode WAL与foreign_keys ON两个 pragmaexamples/express-sqlite/db.js。端点一览Orders订单GET /api/orders ?statuspaidlimit50offset0 PATCH /api/orders/:id { status: processing } DELETE /api/orders/:id响应结构{ orders: [{ id: #7841, customer: John Doe, items: 3, total: 245, status: paid, ... }], total: 20, limit: 50, offset: 0 }实现要点examples/express-sqlite/server.jslimit由Math.min(parseInt(...) || 50, 200)钳制在 200 以内status过滤通过命名参数status拼入 WHEREPATCH只接受白名单内的四个状态值非法值返回400 invalid status更新 0 行返回404examples/express-sqlite/server.js。Messages消息GET /api/messages ?folderinboxqdesign PATCH /api/messages/:id { unread: 0 } 或 { starred: 1 } 或 { folder: trash } POST /api/messages { folder: sent, to: ..., subject: ..., body: ... }响应结构{ messages: [{ id: 12, folder: inbox, fromName: Sarah K., subject: ..., body: ..., unread: 1, ... }], counts: [{ folder: inbox, unread: 3, total: 7 }, ...] }实现细节examples/express-sqlite/server.jsfolderstarred与foldertrash是特殊分支其余按folder精确匹配且排除 trashq参数对subject / body / from_name做 LIKE 模糊搜索counts汇总每个文件夹的未读数与总数供顶栏未读角标使用PATCH支持unread / starred / folder任意字段组合动态拼 SQL空 body 返回400POST限定folder只能是sent或draftssent必须有topreview自动取正文第一行前 140 字符。Health健康检查GET /api/health → { ok: true, orders: 20, messages: 10, uptime: 12.3 }末尾还有一个兜底 404 中间件保证任何未匹配路径都返回 JSON 而非 HTMLexamples/express-sqlite/server.js。常用运维命令examples/express-sqlite/package.json 内置四个脚本npm start # node server.js监听 :8080 npm run dev # node --watch server.js改代码自动重启 npm run reset # 删除 data.sqlite 并重新播种干净环境 npm run seed # 向已有数据库补种已有数据时是 no-op直接查看数据库内容sqlite3 data.sqlite .tables # orders, messages, migrations .schema orders SELECT id, customer, status FROM orders WHERE statuspaid LIMIT 5;页面端的完整接入示例orders.htmlproduction/orders.html 是仓库推荐的首个迁移样板它的内联脚本几乎只做数据渲染是理解加载 错误 空状态三件套的最佳入口import { useApiMode, seedAdapter, httpAdapter } from /src/v4/data-adapter.js; const adapter useApiMode() ? httpAdapter(/api/orders, { listKey: orders }) : seedAdapter(SEED);页面逻辑production/orders.html加载态adapter.list()前先渲染 5 行骨架屏skeletonRows()表格在请求期间保持活着的视觉反馈空状态返回空数组时显示 No orders yet.错误态catch 中渲染banner-danger横幅 Retry 重试按钮点击后重新执行load()行渲染只依赖o.id / customer / items / total / status / payment / createdAt等字段与数据来源无关——这正是统一接口面的收益。有状态页面的模式以 inbox.js 为例订单页是无状态渲染而收件箱、看板、日历这类客户端有状态页面遵循另一套模式初始化时从 API 拉初始状态 → 本地变更 → 可选地 PATCH 回写。initInbox()在useApiMode()为真时调用hydrateFromApi(root)见 src/v4/inbox.js其流程src/v4/inbox.js在列表区渲染 loading 空态spinner-dots Loading messages…httpAdapter(/api/messages, { listKey: messages }).list({ folder: state.view })拉取当前文件夹数据把 API 返回的 snake_case/服务端字段映射为前端内部 state 的形状fromName → from、unread转布尔、createdAt格式化为Apr 28等成功后renderAll() 同步顶栏未读数 toast 提示加载条数失败时渲染错误横幅提供Retry重试拉取与Use seed回退到本地种子两个按钮。把本地变更回写服务端就是在每个 toggle/trash/send 处理器里补一行await adapter.update(id, {...})或adapter.create({...})——前端结构完全不必改。自建集成的四步法examples/README.md 给出了最快的接入路径先挑一个页面迁移orders.html最干净内联脚本几乎不做别的把 SEED 数组替换为httpAdapter(/your/endpoint)调用有包裹结构就加listKey保留示例已接好的加载 错误状态骨架行 重试横幅它们对任何数据源都适用逐页迭代暂时不接后端的页面继续留在seedAdapter保证离线预览不中断。真实部署前的加固清单仓库明确声明示例后端是教学示例而非生产服务器见 examples/express-sqlite/README.md上线前需要处理替换 SQLite改用 Postgrespg驱动、Tursolibsql/client或 Cloudflare D1加认证目前任何人命中/api/*都能改数据需加req.user中间件JWT、Session Cookie 或 OAuth并拦截写操作加输入校验把散落的if (!body.x) return 400换成zod/valibotschema收紧 CORS按你的域名配置而不是cors()全放开加限流对 POST/PATCH 用express-rate-limit置于反向代理之后nginx、Caddy、Cloudflare不要直接暴露 Express配进程守护systemd、PM2 或 Docker 容器。不过这一切对前端透明data-adapter 只要求一个 JSON 端点技术栈切换发生在边缘层而非前端examples/express-sqlite/README.md 原文Stack swaps happen at the edges, not in the frontend.。小结Gentelella v4 的 contenteditable="false">【免费下载链接】gentelellaFree admin dashboard template — vanilla JS, SCSS, Vite 8. No Bootstrap, no jQuery.项目地址: https://gitcode.com/gh_mirrors/ge/gentelella创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
Gentelella v4 后端接入实战：用 data-adapter 模式与 Express + SQLite 示例把静态模板接上真实 API
Gentelella v4 后端接入实战用 contenteditable="false">【免费下载链接】gentelellaFree admin dashboard template — vanilla JS, SCSS, Vite 8. No Bootstrap, no jQuery.项目地址: https://gitcode.com/gh_mirrors/ge/gentelella导读本指南围绕 Gentelella v4 仓库中的 examples/README.md 展开讲解如何把开箱即用、全部基于硬编码 seed 数据的静态后台模板通过data-adapter数据适配器模式平滑接入真实后端。你将掌握useApiMode()一键切换机制、seedAdapter与httpAdapter的统一接口设计、如何运行仓库自带的 Express SQLite 示例服务以及如何按逐页迁移策略把自己的任意技术栈接进来——全程不需要改动一行渲染代码。背景为什么需要一个适配器层Gentelella v4 是一个vanilla JS SCSS Vite 构建的免费后台模板无 Bootstrap、无 jQuery见 package.json 的项目描述与 README.md。模板的每个交互页面订单、收件箱、看板、日历等默认都使用硬编码的 seed 数据保证任何人在没有后端的情况下也能离线预览、静态演示。但真实项目必然要读写真实数据。如果直接在页面里写死fetch(/api/orders)离线演示就彻底失效如果继续用 seed又无法对接后端。Gentelella v4 的答案是data-adapter 模式把数据从哪来抽象成一个只有 5 个方法的小接口让 seed 模式与 API 模式在同一套渲染代码下共存用一个 URL 参数即可切换。这个思路也写在了模块头注释中见 src/v4/data-adapter.jsEvery interactive page in the template has hardcoded seed data. Replacing that with a real API call is the most common first task for someone using this template as a starter. This module gives that task a name and a shape.examples 目录里有什么examples/ 是仓库自带的自包含、可直接运行的示例集合每个示例都是一个独立的 npm 项目用于演示如何把模板接到真实后端目录演示内容examples/express-sqlite极简 Express SQLite 服务提供GET /api/orders与GET /api/messages完整演示>import { useApiMode, seedAdapter, httpAdapter } from /src/v4/data-adapter.js; const adapter useApiMode() ? httpAdapter(/api/orders, { listKey: orders }) : seedAdapter(SEED); const items await adapter.list(); // 两种模式下调用方式完全一致 await adapter.update(id, { status: paid }); await adapter.create({ ... }); await adapter.remove(id);开关useApiMode()useApiMode()决定当前页面走哪条路实现见 src/v4/data-adapter.js两种触发方式URL 带?api1适合现场演示、联调时临时切换模块加载前设置window.__GENTELELLA_API__ true适合生产构建脚本——只要在业务代码之前注入该标志生产环境永远走 API。export function useApiMode() { if (typeof window undefined) {return false;} // SSR / Node 环境默认关闭 if (window.__GENTELELLA_API__) {return true;} return new URLSearchParams(window.location.search).has(api); }值得注意的实现细节即使 URL 里写了?api0只要api参数存在即视为开启代码用的是has(api)而非取值判断使用时不要用?api0表达关闭。seedAdapter离线数据的内存实现seedAdapter(seed, filter)把传入的数组维护在内存中所有写操作都是对内存数组的变更实现见 src/v4/data-adapter.jslist(query)可选地通过filter(item, query)对 seed 过滤后返回get(id)/create(data)/update(id, patch)/remove(id)与 API 语义一致id统一按字符串比较reset()恢复为初始 seed方便测试与演示src/v4/data-adapter.js。create时会根据现有数据的最大 id 自动分配nextId保证演示中新增记录不冲突src/v4/data-adapter.js。httpAdapterJSON REST 客户端httpAdapter(baseUrl, opts)是一个零依赖的 fetch 封装实现见 src/v4/data-adapter.js遵循以下 REST 约定方法请求期望响应list(query)GET baseUrl?keyvalue裸数组items[]或{ listKey: [...] }get(id)GET baseUrl/:id单条 itemcreate(data)POST baseUrl新建的 itemupdate(id, patch)PATCH baseUrl/:id{ ok: true }或 itemremove(id)DELETE baseUrl/:id{ ok: true }关键配置项listKey当列表接口返回的是包裹形式{ orders: [...] }时用它取出数组data[listKey] ?? []见 src/v4/data-adapter.js返回裸数组则无需设置fetch可注入自定义 fetch例如带鉴权 header、超时控制的封装默认使用globalThis.fetchsrc/v4/data-adapter.js。update与get会对 id 做encodeURIComponent转义因此像#7841这类订单号可以安全地放进 URL 路径见 src/v4/data-adapter.js。非 2xx 响应会抛出带status属性的HttpError便于在 catch 中区分4xx 用户错误与5xx/网络错误src/v4/data-adapter.js。端到端运行示例两个终端1. 启动后端终端一cd examples/express-sqlite npm install npm start # → API listening on http://localhost:8080首次启动时 examples/express-sqlite/seed.js 会自动播种数据20 条订单 10 条消息通过ON CONFLICT(id) DO NOTHING保证幂等页面打开即有内容可看。2. 启动前端开发服务器终端二项目根目录npm run dev # → http://localhost:9173Vite 开发服务器已把/api/*自动代理到http://localhost:8080配置见 vite.config.js。代理目标可用环境变量覆盖API_URL指向你自己的后端端口用PORT覆盖。3. 用?api1打开页面http://localhost:9173/production/orders.html?api1http://localhost:9173/production/inbox.html?api1你会先看到一闪而过的加载态随后表格/收件箱里出现 SQLite 的真实数据。去掉?api1立即回到离线 seed 模式——前后端各自独立互不影响。4. 不启动前端直接验证后端curl http://localhost:8080/api/orders | jq curl http://localhost:8080/api/messages?folderinbox | jq curl -X PATCH http://localhost:8080/api/orders/%237841 \ -H Content-Type: application/json \ -d {status:processing}注意第三行中%237841是#7841的 URL 编码#必须编码否则会被当作 URL 片段这与前端encodeURIComponent的处理一一对应。Express SQLite 示例后端拆解为什么选这套技术栈examples/express-sqlite/README.md 给出了三个理由ExpressNode 生态认知度最高的框架无惊喜路径任何人写过 Node 都能立刻读懂SQLitebetter-sqlite3同步 API、零配置、单文件数据库最适合示例与小型应用换 Postgres / Turso / Cloudflare D1 大约只需改 30 行不用 ORM直接写预编译 SQL 语句让 SQL 可见、可复制避免 ORM 的学习曲线掩盖这是起点示例的定位。表结构idempotent 迁移examples/express-sqlite/db.js 用migrations 表记录已应用迁移的方式保证重复启动不报错ordersidTEXT 主键如#7841、customer、initials、avatar_color、items、total、statusCHECK 约束限定paid/processing/pending/cancelled、payment、created_atmessagesidAUTOINCREMENT、folderCHECK 限定inbox/sent/drafts/trash、starred、unread、label、收发件人、subject、preview、body、created_at配套索引覆盖orders(status)、orders(created_at DESC)、messages(folder)、messages(unread)examples/express-sqlite/db.js。数据库连接启用journal_mode WAL与foreign_keys ON两个 pragmaexamples/express-sqlite/db.js。端点一览Orders订单GET /api/orders ?statuspaidlimit50offset0 PATCH /api/orders/:id { status: processing } DELETE /api/orders/:id响应结构{ orders: [{ id: #7841, customer: John Doe, items: 3, total: 245, status: paid, ... }], total: 20, limit: 50, offset: 0 }实现要点examples/express-sqlite/server.jslimit由Math.min(parseInt(...) || 50, 200)钳制在 200 以内status过滤通过命名参数status拼入 WHEREPATCH只接受白名单内的四个状态值非法值返回400 invalid status更新 0 行返回404examples/express-sqlite/server.js。Messages消息GET /api/messages ?folderinboxqdesign PATCH /api/messages/:id { unread: 0 } 或 { starred: 1 } 或 { folder: trash } POST /api/messages { folder: sent, to: ..., subject: ..., body: ... }响应结构{ messages: [{ id: 12, folder: inbox, fromName: Sarah K., subject: ..., body: ..., unread: 1, ... }], counts: [{ folder: inbox, unread: 3, total: 7 }, ...] }实现细节examples/express-sqlite/server.jsfolderstarred与foldertrash是特殊分支其余按folder精确匹配且排除 trashq参数对subject / body / from_name做 LIKE 模糊搜索counts汇总每个文件夹的未读数与总数供顶栏未读角标使用PATCH支持unread / starred / folder任意字段组合动态拼 SQL空 body 返回400POST限定folder只能是sent或draftssent必须有topreview自动取正文第一行前 140 字符。Health健康检查GET /api/health → { ok: true, orders: 20, messages: 10, uptime: 12.3 }末尾还有一个兜底 404 中间件保证任何未匹配路径都返回 JSON 而非 HTMLexamples/express-sqlite/server.js。常用运维命令examples/express-sqlite/package.json 内置四个脚本npm start # node server.js监听 :8080 npm run dev # node --watch server.js改代码自动重启 npm run reset # 删除 data.sqlite 并重新播种干净环境 npm run seed # 向已有数据库补种已有数据时是 no-op直接查看数据库内容sqlite3 data.sqlite .tables # orders, messages, migrations .schema orders SELECT id, customer, status FROM orders WHERE statuspaid LIMIT 5;页面端的完整接入示例orders.htmlproduction/orders.html 是仓库推荐的首个迁移样板它的内联脚本几乎只做数据渲染是理解加载 错误 空状态三件套的最佳入口import { useApiMode, seedAdapter, httpAdapter } from /src/v4/data-adapter.js; const adapter useApiMode() ? httpAdapter(/api/orders, { listKey: orders }) : seedAdapter(SEED);页面逻辑production/orders.html加载态adapter.list()前先渲染 5 行骨架屏skeletonRows()表格在请求期间保持活着的视觉反馈空状态返回空数组时显示 No orders yet.错误态catch 中渲染banner-danger横幅 Retry 重试按钮点击后重新执行load()行渲染只依赖o.id / customer / items / total / status / payment / createdAt等字段与数据来源无关——这正是统一接口面的收益。有状态页面的模式以 inbox.js 为例订单页是无状态渲染而收件箱、看板、日历这类客户端有状态页面遵循另一套模式初始化时从 API 拉初始状态 → 本地变更 → 可选地 PATCH 回写。initInbox()在useApiMode()为真时调用hydrateFromApi(root)见 src/v4/inbox.js其流程src/v4/inbox.js在列表区渲染 loading 空态spinner-dots Loading messages…httpAdapter(/api/messages, { listKey: messages }).list({ folder: state.view })拉取当前文件夹数据把 API 返回的 snake_case/服务端字段映射为前端内部 state 的形状fromName → from、unread转布尔、createdAt格式化为Apr 28等成功后renderAll() 同步顶栏未读数 toast 提示加载条数失败时渲染错误横幅提供Retry重试拉取与Use seed回退到本地种子两个按钮。把本地变更回写服务端就是在每个 toggle/trash/send 处理器里补一行await adapter.update(id, {...})或adapter.create({...})——前端结构完全不必改。自建集成的四步法examples/README.md 给出了最快的接入路径先挑一个页面迁移orders.html最干净内联脚本几乎不做别的把 SEED 数组替换为httpAdapter(/your/endpoint)调用有包裹结构就加listKey保留示例已接好的加载 错误状态骨架行 重试横幅它们对任何数据源都适用逐页迭代暂时不接后端的页面继续留在seedAdapter保证离线预览不中断。真实部署前的加固清单仓库明确声明示例后端是教学示例而非生产服务器见 examples/express-sqlite/README.md上线前需要处理替换 SQLite改用 Postgrespg驱动、Tursolibsql/client或 Cloudflare D1加认证目前任何人命中/api/*都能改数据需加req.user中间件JWT、Session Cookie 或 OAuth并拦截写操作加输入校验把散落的if (!body.x) return 400换成zod/valibotschema收紧 CORS按你的域名配置而不是cors()全放开加限流对 POST/PATCH 用express-rate-limit置于反向代理之后nginx、Caddy、Cloudflare不要直接暴露 Express配进程守护systemd、PM2 或 Docker 容器。不过这一切对前端透明data-adapter 只要求一个 JSON 端点技术栈切换发生在边缘层而非前端examples/express-sqlite/README.md 原文Stack swaps happen at the edges, not in the frontend.。小结Gentelella v4 的 contenteditable="false">【免费下载链接】gentelellaFree admin dashboard template — vanilla JS, SCSS, Vite 8. No Bootstrap, no jQuery.项目地址: https://gitcode.com/gh_mirrors/ge/gentelella创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
