@lark-base-open/base-database-cli 1.8.0 → 1.8.1

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## [1.8.1] - 2026-10-29
+
+### Fixed
+
+- 修复新建工程的默认浅色主题与业务配色，避免页面明暗不一致。
+- 完善主题切换指引，按工程实际安装的 SDK 判断可用能力。
+
 ## [1.8.0] - 2026-10-29
 
 ### Added

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lark-base-open/base-database-cli",
-  "version": "1.8.0",
+  "version": "1.8.1",
   "description": "CLI and Agent Skill for building database applications on Lark Base.",
   "type": "module",
   "bin": {

package/skills/lark-base-database/references/development.md

@@ -91,6 +91,8 @@ Function 成功返回一层 `{code,msg,data}`。SQL data 为 ResultJSON；Mutati
 
 页面运行时 API 用法请读取工程 `node_modules/@lark-base-open/base-database-app-sdk/docs/README.md` 索引及其 `page.md`、`compat.md`、`start-base-app.md`、`components.md`（旧双工程安装位于 `page/node_modules`），业务建模与交付流程回到本 Skill。
 
+新 starter 在 `base-app.config.ts` 显式声明 `theme: 'light'`；省略 theme 时按已安装 SDK 的默认值处理，`'host'` 跟随宿主明暗，SDK 默认值仍是 host；新 starter 显式选择 light；业务样式隔离仅在实际安装包含 `styleScope` 能力的 SDK 后启用，不能只升级 CLI 就假定工程 SDK 已升级；切换条件与暗色 token 要求见[配色与字体](frontend-design-guide.md#3-共用配色与字体)。
+
 默认 Page 的 page/index.html 标题填写应用名称；受众默认 enterprise，仅个人系统选择 personal。人员写入使用内部 user_id，不将 open_id 填入记录 payload。
 
 ## 日期与时区

package/skills/lark-base-database/references/frontend-design-guide.md

@@ -73,7 +73,7 @@
 
 已有规范可用就直接继承。缺少规范时，自主选定一套实际值，写入现有主题、CSS 类或组件变体并在页面调用；不逐页重新取值。
 
-**配色按角色分工**：业务界面以协调的中性面为主体，选择一个主动作色及其前景；错误、警告、成功使用独立语义色。没有品牌色时按产品内容选色，颜色不与 A/B/C 配方绑定。普通指标不一项一种颜色，状态色只标记相关状态或异常，不顺带染满整张卡片；图表需要分类色时保持映射与图例一致。默认浅色，已有主题或明确需求支持暗色时沿用，不为单主题任务新增切换器。
+**配色按角色分工**：业务界面以协调的中性面为主体，选择一个主动作色及其前景；错误、警告、成功使用独立语义色。没有品牌色时按产品内容选色，颜色不与 A/B/C 配方绑定。普通指标不一项一种颜色，状态色只标记相关状态或异常，不顺带染满整张卡片；图表需要分类色时保持映射与图例一致。站点默认浅色，`base-app.config.ts` 保持 `theme: 'light'`；starter 使用模板声明的 SDK 版本，业务自行声明完整配色；仅在目标 SDK 已安装且包含该能力时，才主动开启 `styleScope: 'components'`，以该包的类型和文档为准。仅用户明确要求暗色或跟随宿主时改为 `theme: 'host'`，同时让背景、文字、弱文本、边框和控件配色一起切换。SDK 保留外层 `.base-app-platform`、`data-theme` 和 `--base-app-*` 变量；token 映射放在其内部的业务根容器，例如 `--app-bg: var(--base-app-color-bg, #fff)`、`--app-fg: var(--base-app-color-fg, #1f2329)`，并成对设置 `background` 与 `color`。不要在 `:root` 映射只在后代 wrapper 定义的变量；`html`/`body` 也选不中 wrapper 的 `data-theme`。页面底色由最外层业务容器 `min-height: 100vh` 铺满。自定义主题基于 `[data-theme="dark"]` 提供完整暗色 token。不得只改 theme、背景或文字其中一项；不为单主题任务新增切换器。存量工程默认主题和基础样式保持不变，不为修复主题强制升级；主动启用 components 时先补业务样式。
 
 常规业务控件与摘要使用平面样式，不叠加彩色渐变、彩边、投影、光晕和图标底板。图标默认跟随文字或当前状态，不逐项配彩色方块；渐变只在明确的品牌素材或内容表达中局部使用。主动作、真实异常和普通统计有不同强调程度，避免同屏多个高饱和实底按钮争夺注意力。
 

package/templates/database-starter-v2/base-app.config.ts

@@ -5,6 +5,8 @@ import App from './page/src/App';
 const queryClient = new QueryClient();
 export default {
   app: App,
+  // 默认浅色；需要跟随宿主明暗时改为 'host' 并在 token 层定义暗色
+  theme: 'light',
   providers: (children) =>
     createElement(QueryClientProvider, { client: queryClient }, children),
 } satisfies StartBaseAppOptions;

package/templates/database-starter-v2/page/src/App.tsx

@@ -1,7 +1,7 @@
 import { DatabaseUserMenu } from '@lark-base-open/base-database-app-sdk/page';
 export default function App() {
   return (
-    <main>
+    <main className="app-shell">
       <header>
         <h1>我的应用</h1>
         <DatabaseUserMenu audience="enterprise" />

package/templates/database-starter-v2/page/src/index.css

@@ -1 +1,29 @@
-body { margin: 0; font-family: system-ui, sans-serif; } main { padding: 24px; } header { display: flex; align-items: center; justify-content: space-between; }
+body {
+  margin: 0;
+  font-family: system-ui, sans-serif;
+}
+
+.app-shell {
+  --app-bg: var(--base-app-color-bg, #fff);
+  --app-fg: var(--base-app-color-fg, #1f2329);
+  --app-muted: var(--base-app-color-muted, #646a73);
+  --app-border: var(--base-app-color-border, #dee0e3);
+  --app-accent: var(--base-app-color-accent, #1456f0);
+  min-height: 100vh;
+  box-sizing: border-box;
+  padding: 24px;
+  background: var(--app-bg);
+  color: var(--app-fg);
+}
+
+.app-shell header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.app-shell p {
+  color: var(--app-muted);
+}
+.app-shell button:not(.base-app-platform) {
+  font: inherit;
+}