u

code/g3soft-libs/docs/content/ui/data/table.md

@@ -220,7 +220,7 @@ watch(n, (v) => { rows.value = Array.from({ length: v }, (_, i) => makeRow(i)) }
 | `virtualX` | `boolean` | `true` | 横向虚拟滚动总开关（实际是否开启受列数门控） |
 | `rowHeight` | `number` | `30` | 行高，同时驱动虚拟滚动计算 |
 | `headerRowHeight` | `number` | `34` | 表头行高 |
-| `bordered` | `boolean` | `true` | 是否显示边框（透传给底座的 `bordered: true`）。边框由底座绘制，不再是自绘外框 + 圆角 |
+| `bordered` | `boolean` | `true` | 边框。`true` = 自绘圆角外框 + 行分隔线；`false` = 无外框，只留行分隔线（嵌进卡片 / 面板时用） |
 | `stripe` | `boolean` | `false` | 斑马纹（隔行底色）。**固定列会一起上条纹**（见「固定列」）：库只把条纹画在 `tr` 上，冻结列的底色必须不透明，组件在它上面补一层同色内阴影接上 |
 | `fixedColShadow` | `boolean` | `false` | 固定列被滚动内容遮挡时画 10px 渐变阴影（见「固定列」） |
 | `colResizable` | `boolean \| object` | `true` | 列宽拖拽；未绑定 `v-model:columns` 时自动关闭。可用 `{ disabled: (col) => boolean }` 按列禁用 |
@@ -356,10 +356,13 @@ watch(n, (v) => { rows.value = Array.from({ length: v }, (_, i) => makeRow(i)) }
 - **主题通过覆盖库的 CSS 变量实现**：库把 41 个主题值都做成了 `.stk-table` 作用域内的变量，组件把它们映射到 `--g3-*` 令牌（覆盖层在 `src/table/style/_overrides.scss`）。改变量而不是逐个选择器改样式，库升级时不容易失效。
 - **区域选择按需自注册**：库的单元格区域选择是全局注册的（`registerFeature(useAreaSelection)`），不注册则 `area-selection-change` 永不触发、行内编辑失效。组件库不拥有 app 启动流程，因此**首次挂载时自动注册一次**；需要显式控制时可调用导出的 `registerTableFeatures()`。
 - **`data-testid` 透传到内层**：组件 `inheritAttrs: false`，`$attrs` 落在内层 `StkTable` 上，所以写 E2E 时按类名 `.g3-table` 定位根节点。
-- **边框完全交给底座**：组件把 `bordered` 直接透传为底座的 `bordered: true`，**不再自绘外框与行分隔线**。因此：
-  - 底座用逐格 `background-image` 渐变画线（不是 `border`），横竖线都来自 `--bg-border-*` 变量；
-  - 受滚动条影响，**表格右侧与底部的边框会消失**——这是底座文档（`table/basic/bordered`）明确说明的行为，需要时自行补 CSS；
-  - 没有圆角；`bordered: false` 时四边与格线全部消失。
+- **边框：外框自绘，格线仍用底座的渐变**。组件把 `bordered` 翻成底座的 `'v'` 档（只借它的竖线），再自己补外框：
+  - **外框** → 外层容器上的真 `border` + 圆角令牌（`bordered: false` 时不描边）；
+  - **横线** → 把 `'v'` 档清零的 `--bg-border-bottom` 配方拿回来；
+  - **竖线** → 底座原样，只抹掉最右列那条（外侧线归外框管）。
+  为什么不全交给底座：它的外框是 `border-left` + 三段背景渐变拼的，**做不出圆角**，且其右侧 / 底部边框会因滚动条占位而消失（底座 `table/basic/bordered` 文档明确说明）。
+  ⚠️ 格线**不能**改写成真 `border`：行内编辑器被钉死在 `var(--row-height)`，单元格多出 1px 边线就会被顶高 1px，而行高是虚拟滚动 `translateY` 的计算基准。背景渐变不参与盒模型。
+  颜色只有 `--g3-border-color` 一个入口，亮 / 暗主题自动跟随。
 - **`--th-bgc` 等表头/表尾底色**由覆盖层的变量映射提供，不通过行内 style 注入。
 - **行编辑态存在 `WeakMap` 里**：按行对象存，不给业务数据打标记；行被回收时状态自动释放。行与行之间切换编辑**不翻转** `editingActive`，避免整表列重建。
 - **编辑器无缝嵌入单元格**（`editorSeamless`）：把 `G3Input` / `G3Select` 自带的 `padding` / `border` / `border-radius` / `background` 置零，只保留焦点、hover 与校验提示；编辑器的高度由组件显式钉成 `var(--row-height)`（不能被控件的 `min-height: 32px` 顶高，也不能靠 `height: 100%` —— td 的内容盒不等于行高），因此**编辑前后的行高完全一致**。焦点环画在外层 `td` 的 `inset` 阴影上：不参与盒模型计算，几何零影响。

code/g3soft-libs/docs/examples/table/basic.vue

@@ -5,7 +5,7 @@ import type { G3TableColumn, TableRow } from '@g3soft/ui'
 
 // 最小用法：给 columns 与 dataSource 两份数据即可。
 // - seq 默认开启，会在最前列注入序号列
-// - bordered 默认开启，边框由底座（stk-table-vue）绘制
+// - bordered 默认开启：圆角外框由组件自绘；横竖格线仍走底座的背景渐变
 // - 没写 width 的列会自动摊掉剩余宽度
 // - 本例额外开了 `stripe`（斑马纹，默认关）：注意**序号列也带条纹** ——
 //   冻结列的底色必须不透明（否则横滚时被压住的内容会透字），

code/g3soft-libs/packages/ui/e2e/table.spec.ts

@@ -66,22 +66,26 @@ test.describe('G3Table 表格', () => {
     expect(innerBox!.height).toBeLessThanOrEqual(wrapBox!.height + 2)
   })
 
-  test('边框由库绘制：不再有自绘外框与圆角', async ({ page }) => {
-    // 组件已改为把边框完全交给库（传 bordered: true），自己不再画外框 / 圆角。
+  test('边框自绘：外框是根节点的圆角描边，库的外框被清掉', async ({ page }) => {
+    // 边框设计（见 docs/table-design.md §3.2）：外框与横线由组件自绘，纵向列线用库的
+    // 渐变。组件把 `bordered` 翻成库的 'v' 档（见 G3Table.vue 的 `:bordered` 绑定）。
     // data-testid 透传给内层 StkTable（组件 inheritAttrs: false），所以按类名定位根节点。
     const root = page.locator('[data-testid="table-wrap"] .g3-table').first()
     await expect(root).toHaveClass(/is-bordered/)
 
-    // 自绘外框已删除：根节点不该再有 border / 圆角
-    const radius = await root.evaluate((el) => getComputedStyle(el).borderRadius)
-    expect(radius).toBe('0px')
-    const borderWidth = await root.evaluate((el) => getComputedStyle(el).borderTopWidth)
-    expect(borderWidth).toBe('0px')
+    // 自绘外框：根节点上有 1px 描边 + 圆角（库的外框做不出圆角，这正是自绘的理由）
+    const outer = await root.evaluate((el) => {
+      const s = getComputedStyle(el)
+      return { width: s.borderTopWidth, radius: s.borderTopLeftRadius }
+    })
+    expect(outer.width).toBe('1px')
+    expect(outer.radius).not.toBe('0px')
 
-    // 边框改由库的 .bordered 提供
-    await expect(page.locator('[data-testid="table-wrap"] .stk-table').first()).toHaveClass(
-      /bordered/,
-    )
+    // 库那层外框必须被抹掉：'v' 档是字符串，库会同时挂 .bordered 与 .bordered-v，
+    // 前者的 `border-left` 若留着，就和自绘外框叠成双线
+    const stk = page.locator('[data-testid="table-wrap"] .stk-table').first()
+    await expect(stk).toHaveClass(/bordered-v/)
+    expect(await stk.evaluate((el) => getComputedStyle(el).borderLeftWidth)).toBe('0px')
   })
 
   test('表头显示序号列（seq 默认开启）', async ({ page }) => {
@@ -633,22 +637,42 @@ test.describe('G3Table 布局：表头固定与分隔线', () => {
     expect(Math.abs(after!.y - before!.y)).toBeLessThan(2)
   })
 
-  test('边框交由库绘制：库根节点带 .bordered，且不再叠加自绘实线', async ({ page }) => {
+  test('边框自绘：库只保留竖线，横线走渐变而不是真 border', async ({ page }) => {
     await page.goto('/')
     const wrap = page.locator('[data-testid="table-wrap"]')
     await wrap.scrollIntoViewIfNeeded()
 
-    // 我们传 bordered: true，库会给根节点挂 .bordered（并因是字符串才挂 bordered-xxx）
+    // 我们传的是库的 'v' 档（字符串才挂 bordered-xxx）
     const stk = wrap.locator('.stk-table').first()
-    await expect(stk).toHaveClass(/bordered/)
+    await expect(stk).toHaveClass(/bordered-v/)
 
-    // 自绘的行分隔线已删除，单元格不应再有真的 border-bottom
-    // （库用 background-image 渐变画线，不走 border）
-    const td = await wrap
-      .locator('.stk-tbody-main td')
-      .first()
-      .evaluate((el) => getComputedStyle(el).borderBottomWidth)
-    expect(td).toBe('0px')
+    /** 数「非透明的背景渐变层数」——即这一格画了几条线（不看库内部怎么拼） */
+    const lineCount = (locator: import('@playwright/test').Locator) =>
+      locator.evaluate((el) =>
+        getComputedStyle(el)
+          .backgroundImage.split(/,(?![^(]*\))/)
+          .filter((layer) => /rgb\(\d+, \d+, \d+\)/.test(layer)).length,
+      )
+
+    // 横线：`'v'` 档把 --bg-border-bottom 清零（只剩竖线一条），组件按底座配方把它
+    // 拿回来 —— 所以这里应当数出**两条**。但它**不能**是真 border：格线一进盒模型，
+    // 单元格多 1px 就会被行内编辑器顶高（行高是虚拟滚动 translateY 的基准）。
+    const td = wrap.locator('.stk-tbody-main td').first()
+    const normalLines = await lineCount(td)
+    expect(normalLines).toBeGreaterThan(1)
+    expect(await td.evaluate((el) => getComputedStyle(el).borderBottomWidth)).toBe('0px')
+
+    // 竖线：末列的外侧那条已被抹掉（归自绘外框管），所以比普通列**正好少一条**
+    const lastTd = wrap.locator('.stk-tbody-main td:last-child').first()
+    expect(await lineCount(lastTd)).toBe(normalLines - 1)
+
+    // 行高没被格线动过（30 = 默认 rowHeight，也是虚拟滚动 translateY 的基准）
+    expect(
+      await wrap
+        .locator('.stk-tbody-main tr')
+        .first()
+        .evaluate((el) => Math.round(el.getBoundingClientRect().height)),
+    ).toBe(30)
   })
 
   test('库自绘边框：单元格带可见的横竖渐变线', async ({ page }) => {

code/g3soft-libs/packages/ui/src/form/Form.vue

@@ -39,7 +39,9 @@ const { b, m, is } = useNamespace('form')
 const merged = useComponentDefaults('form', props)
 
 const resolvedLayout = computed(() => merged.value.layout ?? 'horizontal')
-const resolvedLabelAlign = computed(() => merged.value.labelAlign ?? 'right')
+// 默认左对齐：横排下右对齐需要定宽 label 才有意义，未给定宽时右对齐会让标签贴到控件一侧；
+// 竖排（layout="vertical"）下 label 占满整列，右对齐更是直接把文字推到边缘。要右对齐请显式传。
+const resolvedLabelAlign = computed(() => merged.value.labelAlign ?? 'left')
 const resolvedLabelWidth = computed(() => merged.value.labelWidth)
 const resolvedValidateTrigger = computed(() => merged.value.validateTrigger ?? 'change')
 

code/g3soft-libs/packages/ui/src/form/FormGroup.test.ts

@@ -0,0 +1,71 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+import { nextTick } from 'vue'
+import G3Form from './Form.vue'
+import G3FormItem from './FormItem.vue'
+import G3FormGroup from './FormGroup.vue'
+
+/**
+ * 分组只是分区标题 + 一组共用列数 / 布局 / 间距的字段，**没有折叠能力**：
+ * 标题不带箭头、不响应点击，组件也不该再声明折叠相关的 prop。
+ */
+const COMPONENTS = { G3Form, G3FormGroup, G3FormItem }
+
+/** extraAttrs 走模板字符串，贴近真实写法 */
+function mountGroup(extraAttrs = '') {
+  return mount({
+    components: COMPONENTS,
+    data() {
+      return { model: { a: '' } }
+    },
+    template: `
+      <G3Form :model="model">
+        <G3FormGroup title="分组" ${extraAttrs}>
+          <G3FormItem name="a" label="字段"><input /></G3FormItem>
+        </G3FormGroup>
+      </G3Form>
+    `,
+  })
+}
+
+describe('FormGroup', () => {
+  it('标题只是分区标题，没有折叠入口', () => {
+    const wrapper = mountGroup()
+
+    const title = wrapper.find('.g3-form-group__title')
+    expect(title.text()).toBe('分组')
+    expect(title.attributes('role')).toBeUndefined()
+    expect(title.attributes('tabindex')).toBeUndefined()
+    expect(title.attributes('aria-expanded')).toBeUndefined()
+    expect(title.classes()).not.toContain('is-collapsible')
+    // 箭头与折叠容器都不该存在
+    expect(wrapper.find('.g3-form-group__arrow').exists()).toBe(false)
+    expect(wrapper.find('.g3-form-group__collapse').exists()).toBe(false)
+  })
+
+  it('点击标题不会改变内容可见性', async () => {
+    const wrapper = mountGroup()
+
+    await wrapper.find('.g3-form-group__title').trigger('click')
+    await nextTick()
+
+    // 字段内容直接挂在 body 下，行高不受任何折叠状态影响
+    const body = wrapper.find('.g3-form-group__body')
+    expect(body.find('[data-field="a"]').exists()).toBe(true)
+    expect(body.attributes('style') ?? '').not.toContain('0fr')
+  })
+
+  it('不再声明折叠相关 prop', () => {
+    const declared = Object.keys(
+      (G3FormGroup as unknown as { props?: Record<string, unknown> }).props ?? {},
+    )
+    expect(declared).not.toContain('collapsible')
+    expect(declared).not.toContain('defaultExpanded')
+    expect(declared).not.toContain('modelValue')
+  })
+
+  it('仍然提供组内列数上下文（columns > 1 走网格）', () => {
+    const wrapper = mountGroup(':columns="2"')
+    expect(wrapper.find('.g3-form-group').classes()).toContain('g3-form-group--grid')
+  })
+})

code/g3soft-libs/packages/ui/src/form/FormGroup.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import { computed, inject, onBeforeUnmount, provide, ref, watch } from 'vue'
-import { ChevronDown } from '@lucide/vue'
+import { computed, inject, provide } from 'vue'
 import { useComponentDefaults } from '../_composables/useComponentDefaults'
 import { useNamespace } from '../_composables/useNamespace'
 import { formGroupKey, formKey } from './context'
@@ -11,15 +10,17 @@ import type { FormGroupProps } from './types'
  * 表单分组 —— 一组字段共用独立的列数 / 布局 / 间距，便于在长表单里做宫格嵌套。
  *
  * 组内覆盖优先于外层 Form：FormItem 的 label 宽度、布局与跨列数都会先看组上下文。
- * 标题行可点击折叠（collapsible 默认开启）；折叠用 grid-template-rows 过渡而不是卸载，
- * 收起期间字段与校验状态全部保留（也可用 v-model 受控展开态）。
+ *
+ * 标题只是分区标题，**不提供折叠**：把字段藏到标题后面，配置类表单里更容易漏看，
+ * 分组本身也起不到收起省空间的作用（字段数是固定的）。同理也不做 hover 反馈——
+ * 不可点的东西不该看起来可点。
+ *
+ * 视觉保持「无色块、无粘顶」的中性分区：分层只交给外层 Form 的组间距（见 Form 的 gap），
+ * 组件本身不画底色 / 描边 / 分隔线，避免分组风格与页面主题或设计器分组撞车。
  */
 defineOptions({ name: 'G3FormGroup' })
 
 const props = withDefaults(defineProps<FormGroupProps>(), {
-  modelValue: undefined,
-  collapsible: true,
-  defaultExpanded: true,
   columns: undefined,
   layout: undefined,
   labelWidth: undefined,
@@ -28,47 +29,11 @@ const props = withDefaults(defineProps<FormGroupProps>(), {
   title: '',
 })
 
-const emit = defineEmits<{ 'update:modelValue': [expanded: boolean] }>()
-
-const { b, e, m, is } = useNamespace('form-group')
+const { b, e, m } = useNamespace('form-group')
 const form = inject(formKey, null)
 
 const merged = useComponentDefaults('form-group', props)
 
-/** 展开态：受控优先，否则内部维护（初值取 defaultExpanded） */
-const innerExpanded = ref(props.defaultExpanded)
-const expanded = computed(() => props.modelValue ?? innerExpanded.value)
-
-/**
- * 折叠动画进行中：只有「收起 / 动画中」需要给内容加 overflow: hidden
- * （隐藏收起后的内容、防止动画期间内容外溢）。
- * 展开且静止时放开裁切，否则输入框的聚焦光环 / 阴影会在分组边界被切掉。
- */
-const animating = ref(false)
-let animatingTimer: ReturnType<typeof setTimeout> | null = null
-
-watch(expanded, (value, oldValue) => {
-  if (value === oldValue) return
-  animating.value = true
-  if (animatingTimer) clearTimeout(animatingTimer)
-  // 与下方 grid-template-rows 的 0.2s 过渡对齐，略留余量
-  animatingTimer = setTimeout(() => {
-    animating.value = false
-    animatingTimer = null
-  }, 220)
-})
-
-onBeforeUnmount(() => {
-  if (animatingTimer) clearTimeout(animatingTimer)
-})
-
-function toggleCollapse() {
-  if (!props.collapsible) return
-  const next = !expanded.value
-  if (props.modelValue === undefined) innerExpanded.value = next
-  emit('update:modelValue', next)
-}
-
 /** 组内列数：显式 columns > 外层 Form.columns > 1 */
 const columns = computed(() => merged.value.columns ?? form?.columns.value ?? 1)
 
@@ -115,29 +80,14 @@ provide(formGroupKey, {
 
 <template>
   <div :class="[b(), { [m('grid')]: columns > 1 }]" :style="rootStyle">
-    <div
-      v-if="title || $slots.title"
-      :class="[e('title'), { [is('collapsible')]: collapsible, [is('expanded')]: expanded }]"
-      :role="collapsible ? 'button' : undefined"
-      :tabindex="collapsible ? 0 : undefined"
-      :aria-expanded="collapsible ? expanded : undefined"
-      @click="toggleCollapse"
-      @keydown.enter.prevent="toggleCollapse"
-      @keydown.space.prevent="toggleCollapse"
-    >
-      <ChevronDown v-if="collapsible" :class="e('arrow')" aria-hidden="true" />
+    <div v-if="title || $slots.title" :class="e('title')">
       <span :class="e('title-text')">
         <slot name="title">{{ title }}</slot>
       </span>
     </div>
 
-    <div
-      :class="[e('collapse'), { [is('collapsed')]: !expanded, [is('collapsing')]: animating }]"
-      :style="{ gridTemplateRows: expanded ? '1fr' : '0fr' }"
-    >
-      <div :class="e('body')" :style="groupStyle">
-        <slot />
-      </div>
+    <div :class="e('body')" :style="groupStyle">
+      <slot />
     </div>
   </div>
 </template>
@@ -162,56 +112,6 @@ provide(formGroupKey, {
   justify-self: start;
 }
 
-.#{e('form-group', 'title')}.#{is('collapsible')} {
-  cursor: pointer;
-  user-select: none;
-}
-
-.#{e('form-group', 'title')}.#{is('collapsible')}:hover .#{e('form-group', 'title-text')},
-.#{e('form-group', 'title')}.#{is('collapsible')}:hover .#{e('form-group', 'arrow')} {
-  color: v('color-primary', #18181b);
-}
-
-.#{e('form-group', 'title')}.#{is('collapsible')}:focus-visible {
-  @include focus-ring();
-  border-radius: v('radius-sm', 4px);
-}
-
-.#{e('form-group', 'arrow')} {
-  flex-shrink: 0;
-  width: 16px;
-  height: 16px;
-  color: v('text-3', rgba(0, 0, 0, 0.45));
-  /* 收起时箭头转向右侧，展开朝下 */
-  transform: rotate(-90deg);
-  transition:
-    transform v('duration', 0.2s) v('ease', ease),
-    color v('duration', 0.2s) v('ease', ease);
-}
-
-.#{e('form-group', 'title')}.#{is('expanded')} .#{e('form-group', 'arrow')} {
-  transform: rotate(0deg);
-}
-
-/* 折叠用网格行过渡：0fr 收起但内容不卸载，字段状态与校验态都还在 */
-.#{e('form-group', 'collapse')} {
-  display: grid;
-  grid-template-rows: 1fr;
-  transition: grid-template-rows v('duration', 0.2s) v('ease', ease);
-
-  > * {
-    min-height: 0;
-  }
-}
-
-/* 裁切只在「收起 / 折叠动画中」开启：收起态内容不可见、动画期间防外溢；
- * 展开且静止时必须放开——常开 overflow: hidden 会把输入框的聚焦光环 / 阴影
- * 在分组边界（最后一行的下缘等）整条切掉。 */
-.#{e('form-group', 'collapse')}.#{is('collapsed')} > *,
-.#{e('form-group', 'collapse')}.#{is('collapsing')} > * {
-  overflow: hidden;
-}
-
 .#{e('form-group', 'body')} {
   display: flex;
   flex-direction: column;

code/g3soft-libs/packages/ui/src/form/FormItem.test.ts

@@ -156,3 +156,34 @@ describe('FormItem 校验与提示', () => {
     expect(wrapper.find('.g3-form-item__help').text()).toBe('名称不能为空')
   })
 })
+
+describe('label 对齐默认值', () => {
+  function mountWithLabelAlign(extra = '') {
+    return mount({
+      components: COMPONENTS,
+      data() {
+        return { model: { a: '' } }
+      },
+      template: `
+        <G3Form :model="model" :label-width="80" ${extra}>
+          <G3FormItem name="a" label="名称"><span class="plain" /></G3FormItem>
+        </G3Form>
+      `,
+    })
+  }
+
+  it('未传 labelAlign 时默认左对齐', () => {
+    const wrapper = mountWithLabelAlign()
+    expect(wrapper.find('.g3-form-item__label').classes()).not.toContain('is-label-right')
+  })
+
+  it('显式 label-align="right" 时才右对齐', () => {
+    const wrapper = mountWithLabelAlign('label-align="right"')
+    expect(wrapper.find('.g3-form-item__label').classes()).toContain('is-label-right')
+  })
+
+  it('竖排下标签左对齐（不被默认值推到整列右边缘）', () => {
+    const wrapper = mountWithLabelAlign('layout="vertical"')
+    expect(wrapper.find('.g3-form-item__label').classes()).not.toContain('is-label-right')
+  })
+})

code/g3soft-libs/packages/ui/src/form/types.ts

@@ -45,7 +45,7 @@ export interface FormProps {
   rules?: Record<string, FormRule[]>
   /** 布局；不传时回落全局默认值 */
   layout?: FormLayout
-  /** label 文本对齐方式；不传时回落全局默认值 */
+  /** label 文本对齐方式；不传时回落全局默认值，最终兜底为 left */
   labelAlign?: FormLabelAlign
   /** label 宽度（仅横向布局生效） */
   labelWidth?: string | number
@@ -96,12 +96,6 @@ export interface FormItemProps {
 }
 
 export interface FormGroupProps {
-  /** 受控展开态（v-model）；不传时由 defaultExpanded 决定 */
-  modelValue?: boolean
-  /** 是否可折叠：点击标题行切换展开 / 收起 */
-  collapsible?: boolean
-  /** 非受控时的初始展开态 */
-  defaultExpanded?: boolean
   /**
    * 组内列数；不传时继承外层 Form 的 columns。
    * 传 1 可让分组的字段强制单列排布。

code/g3soft-libs/packages/ui/src/switch/Switch.vue

@@ -83,7 +83,9 @@ function toggle(event: MouseEvent) {
   width: v('switch-width', 32px);
   height: v('switch-height', 18px);
   border-radius: 999px;
-  background: v('fill-hover', rgba(0, 0, 0, 0.08));
+  /* 关闭态：中性填充 fill（0.04）。Semi 用 fill-0 打底、hover fill-1、按下 fill-2，
+     我们用 fill / fill-hover 两档就近映射（见下方 hover / active） */
+  background: v('fill', rgba(0, 0, 0, 0.04));
   transition: background-color v('duration', 0.2s) v('ease', ease);
 }
 
@@ -96,14 +98,46 @@ function toggle(event: MouseEvent) {
   height: v('switch-thumb-size', 14px);
   border-radius: 50%;
   background: v('bg-container', #fff);
-  box-shadow: v('shadow', 0 2px 8px rgba(0, 0, 0, 0.15));
-  transition: transform v('duration', 0.2s) v('ease', ease);
+  /* 立体感来自滑块自身，而不是轨道 —— Semi 的 track 完全没有 box-shadow，
+     全靠这一层把滑块「托」起来。两层叠加：
+       · 0 4px 6px rgba(0,0,0,.1)  投影，制造悬浮高度
+       · 0 0 1px rgba(0,0,0,.3)    1px 贴边描边，白滑块落在浅色轨道上也有清晰边界
+     只留投影会「发虚」，只留描边会「发平」，两层缺一不可。 */
+  box-shadow:
+    0 4px 6px rgba(0, 0, 0, 0.1),
+    0 0 1px rgba(0, 0, 0, 0.3);
+  /* width 也要过渡：按下态滑块会延展，只过渡 transform 会「跳宽」 */
+  transition:
+    transform v('duration', 0.2s) v('ease', ease),
+    width v('duration', 0.2s) v('ease', ease);
 }
 
+/* ---------- 关闭态：hover / 按下 ---------- */
+.#{b('switch')}:hover:not(.#{is('disabled')}):not(.#{is('checked')}) .#{e('switch', 'track')} {
+  background: v('fill-hover', rgba(0, 0, 0, 0.08));
+}
+
+/* 关闭态按下：比 hover 再深一档。Semi 有 fill-2，我们只有 fill / fill-hover 两档。
+   刻意**不用** box-shadow 叠色：track 的禁用态描边也用 box-shadow，
+   两者会互相覆盖（选中/禁用的组合下直接丢失描边）。用 filter 压暗，与阴影互不干扰。 */
+.#{b('switch')}:active:not(.#{is('disabled')}):not(.#{is('checked')}) .#{e('switch', 'track')} {
+  background: v('fill-hover', rgba(0, 0, 0, 0.08));
+  filter: brightness(0.96);
+}
+
+/* ---------- 开启态 ---------- */
 .#{b('switch')}.#{is('checked')} .#{e('switch', 'track')} {
   background: v('color-primary', #18181b);
 }
 
+.#{b('switch')}.#{is('checked')}:hover:not(.#{is('disabled')}) .#{e('switch', 'track')} {
+  background: v('color-primary-hover', rgba(24, 24, 27, 0.9));
+}
+
+.#{b('switch')}.#{is('checked')}:active:not(.#{is('disabled')}) .#{e('switch', 'track')} {
+  background: v('color-primary-active', rgba(24, 24, 27, 0.8));
+}
+
 .#{b('switch')}.#{is('checked')} .#{e('switch', 'thumb')} {
   /* 乘 --g3-dir-sign（LTR 1 / RTL -1）：RTL 下选中态滑块向左移动 */
   transform: translateX(
@@ -116,13 +150,59 @@ function toggle(event: MouseEvent) {
   );
 }
 
+/* ---------- 按下滑块延展（Semi 手感的关键）----------
+   按下时滑块朝「要去的方向」拉长 4px，松开回弹。两态都要做：
+   · 关闭态按下：滑块右缘延伸，暗示「将要往右走」；
+   · 开启态按下：滑块左缘延伸 —— 位移同步回退 4px 抵掉，
+     否则会把右边缘顶出轨道外。
+   用 inset-inline-start 打底 + 逻辑方向符号，RTL 下自动跟随。 */
+.#{b('switch')}:active:not(.#{is('disabled')}) .#{e('switch', 'thumb')} {
+  width: calc(#{v('switch-thumb-size', 14px)} + 4px);
+}
+
+.#{b('switch')}.#{is('checked')}:active:not(.#{is('disabled')}) .#{e('switch', 'thumb')} {
+  transform: translateX(
+    calc(
+      #{v('dir-sign', 1)} * (
+          #{v('switch-width', 32px)} - #{v('switch-thumb-size', 14px)} - #{v('switch-thumb-offset', 2px)} *
+            2 - 4px
+        )
+    )
+  );
+}
+
 .#{b('switch')}:focus-visible .#{e('switch', 'track')} {
   @include focus-ring();
 }
 
+/* ---------- 禁用态 ----------
+   关闭态禁用：Semi 是「透明底 + border 描边」（$color-switch_disabled-border-default
+   = --semi-color-border），比单纯压透明度更能表达「这里有个开关，但它是关的且不可用」。
+   开启态禁用：保留主色底 + opacity，换灰会丢掉「它开着」这一信息。
+   两态的滑块都去掉投影（禁用不该有「浮起」暗示），关闭态补描边保证白滑块有边界。 */
 .#{b('switch')}.#{is('disabled')} {
-  opacity: 0.5;
   cursor: not-allowed;
+  color: v('text-disabled', rgba(0, 0, 0, 0.25));
+}
+
+.#{b('switch')}.#{is('disabled')} .#{e('switch', 'track')} {
+  background: transparent;
+  box-shadow: inset 0 0 0 1px v('border-color', #d9d9d9);
+}
+
+.#{b('switch')}.#{is('disabled')}.#{is('checked')} .#{e('switch', 'track')} {
+  background: v('color-primary', #18181b);
+  box-shadow: none;
+  opacity: 0.5;
+}
+
+.#{b('switch')}.#{is('disabled')} .#{e('switch', 'thumb')} {
+  box-shadow: inset 0 0 0 1px v('border-color', #d9d9d9);
+}
+
+.#{b('switch')}.#{is('disabled')}.#{is('checked')} .#{e('switch', 'thumb')} {
+  box-shadow: none;
+  opacity: 0.5;
 }
 
 @media (prefers-reduced-motion: reduce) {

code/g3soft-libs/packages/ui/src/table/G3Table.vue

@@ -98,6 +98,17 @@ const props = withDefaults(
     virtualX?: boolean
     rowHeight?: number
     headerRowHeight?: number
+    /**
+     * 边框：`true`（默认）= 圆角外框 + 行分隔线；`false` = 无外框、只留行分隔线
+     * （嵌进卡片 / 面板时用）。
+     *
+     * 不直接透传给底座（设计见 `docs/table-design.md` §3.2）：底座的外框由
+     * `border-left` + 三段背景渐变拼成，**做不出圆角**，且其右侧 / 底部边框会被
+     * 滚动条占位吃掉。所以 `true` 会翻成底座的 `'v'` 档（只借它的竖线），**外框**
+     * 改由组件用真 `border` + 圆角令牌画；**横线**则把底座清零的那条渐变配方拿回来
+     * —— 格线为什么不一起用真 `border`，见 `style/_overrides.scss` 的「边框」一节
+     * （真边线会把行撑高 1px，而行高是虚拟滚动的计算基准）。
+     */
     bordered?: boolean | string
     /**
      * 斑马纹（隔行底色），默认 `false`；等价于给底座的 `stripe` 传 true。
@@ -1569,7 +1580,7 @@ const fixedPatchOff = (() => {
       :show-overflow="showOverflow"
       :empty-cell-text="''"
       :area-selection="editable"
-      :bordered="bordered ? true : false"
+      :bordered="bordered ? 'v' : false"
       @update:columns="onColumnsUpdate"
       @area-selection-change="handleAreaSelectionChange"
       @row-order-change="handleRowOrderChange"
@@ -1599,10 +1610,10 @@ const fixedPatchOff = (() => {
   overflow: hidden;
 }
 
-/* 边框完全交给库：传 `bordered: true`，外框 / 圆角 / 横竖线都由库自己画。
-   库文档（table/basic/bordered）说明：出于滚动条影响，表格**右侧和底部的边框
-   由单元格的 border-right / border-bottom 实现，因此会消失**，需要时自行补 CSS。
-   我们按库的原样使用，不再自绘外框与行分隔线。 */
+/* 边框：`bordered` 只翻译成底座的档位（true → 'v'，false → false），真正的
+   圆角外框与「横线怎么补回来」都在 `style/_overrides.scss` 的「边框」一节 ——
+   为什么外框不再交给底座（做不出圆角、右侧底部边框被滚动条吃掉）、为什么格线
+   不能用真 border（会把行撑高 1px），都写在那一节，别在这里重复。 */
 
 .#{e('table', 'inner')} {
   width: 100%;

code/g3soft-libs/packages/ui/src/table/style/_overrides.scss

@@ -2,10 +2,12 @@
 //
 // 为什么改变量而不是改选择器：
 // 库把 41 个主题值全部做成了 `.stk-table` 作用域内的 CSS 变量（实测见 style.css）。
-// 覆盖变量既能一次改全套（边框、hover、斑马纹、排序箭头、滚动条…），
-// 又不会因为库内部 DOM 结构调整而失效。fms 的做法是逐个选择器覆写，
-// 结果同一个「边框颜色」散落在 3 处（自己画外框 + 清库的渐变 + 补行分隔线），
-// 库一升级就要重新验证每一条。这里改成一个入口。
+// 覆盖变量既能一次改全套（hover、斑马纹、排序箭头、滚动条…），
+// 又不会因为库内部 DOM 结构调整而失效。
+//
+// ⚠ 唯一例外是**边框**（外框 + 横线）：那部分由组件自绘，不走变量路线，
+//   见下方「边框」一节。底座的边框画法做不出圆角，也不是「改一个变量」能解决的
+//   ——它更像结构问题，硬套变量映射只会把改动散到四处。
 //
 // 所有令牌都带 fallback：未加载 @g3soft/tokens 时组件仍可正常渲染。
 @use '@g3soft/tokens/scss' as *;
@@ -134,6 +136,97 @@
   }
 }
 
+// ==========================================================================
+// 边框：外框圆角描边 + 行分隔线由组件自绘，纵向列线仍借底座的渐变
+// --------------------------------------------------------------------------
+// 底座不用 `border` 画线，而是把四条边做成 `background-image` 渐变
+// （--bg-border-*，由 --border-color 派生），并给 `bordered` 提供三档：
+// true=外框+横竖线 / 'h'=只要横线 / 'v'=只要竖线 / false=全不要。
+// 这套画法有两处绕不过去：
+//   · 外框是「`border-left` + 三段背景渐变」拼出来的，**做不出圆角**；且底座文档
+//     （table/basic/bordered）写明：受滚动条占位影响，表格**右侧与底部的边框会
+//     消失**，需要时自行补 CSS；
+//   · 越往后越多边线要单独摘掉（最右列外侧线该归外框管，右固定列的左侧线又必须
+//     留着），而它们共用 `--border-color` 一个派生入口 —— 只能去覆盖渐变本身。
+//
+// 于是这里定成：**外框改用真 border 自绘，所有格线（横线 + 竖线）都保持底座的
+// 背景渐变画法**。
+//   外框 → `.g3-table.is-bordered` 上的真 `border` + 圆角令牌（外层容器已有
+//          `overflow: hidden`，圆角能把内部内容裁掉）；
+//   横线 → 把 `bordered-v` 清零的 --bg-border-bottom **恢复成底座那份配方**；
+//   竖线 → 保留底座的 --bg-border-right 渐变，只抹掉最右列那一条。
+//
+// 组件侧只负责把 `bordered` 翻成 `true` / `'v'` / `false`（见 G3Table.vue 的
+// `:bordered` 绑定）——`'v'` 必然同时带上 `.bordered` 与 `.bordered-v` 两个类
+// （底座 `{[`bordered-${bordered}`]: typeof bordered === 'string'}`），
+// 所以下面既要清掉 `.bordered` 画的外框，也要接受 `.bordered-v` 关掉的上下渐变
+// （只把横线那条拿回来，`--bg-border-top` 继续透明，免得与自绘外框叠成双线）。
+//
+// ⚠⚠ 格线**绝对不能**改成真 `border-bottom` / `border-top`（这是第一版踩的坑，
+//    e2e `行内编辑 › 进入编辑：行高不变` 当场变红）：行内编辑器被钉死在
+//    `var(--row-height)`（30px，见 G3Table.vue 的 editorSeamless 区块），而 td 的
+//    高度是「按内容撑开」的 —— 一旦 td 多出 1px 边线，内容盒只剩 29px 放不下 30px
+//    的编辑器，整行被顶到 31px。行高是虚拟滚动 `translateY` 的计算基准，涨 1px
+//    会一路累积成行错位。**背景渐变不参与盒模型**，所以格线只能走 background-image。
+//
+// ⚠ 颜色统一走 `--g3-border-color` 令牌，亮 / 暗主题自动跟随，别再写死色值。
+// ==========================================================================
+
+// 外框：只有 `bordered` 为真才有（false = 嵌进卡片，只留行分隔线）。
+// `box-sizing: border-box` 必须有：根节点默认是 content-box，加 1px 描边会让它
+// 比父容器高 2px（`:not(.is-bordered)` 时不描边，故不设）。
+.#{b('table')}.#{is('bordered')} {
+  box-sizing: border-box;
+  border: 1px solid #{v('border-color', #d9d9d9)};
+  border-radius: v('radius-lg', 8px);
+}
+
+.#{b('table')} {
+  .#{e('table', 'inner')}.stk-table {
+    // 横线：拿回 `bordered-v` 清零的那条。配方照抄底座（style.css 的
+    // `--bg-border-bottom`），因为这是它的变量、也只能按它的语法写。
+    //
+    // 两条规则都挂在 `.bordered-v` 下：它只在真开了边框时才存在（见 G3Table.vue
+    // 的 `:bordered`），所以 `bordered: false` 的无框模式不会被这里添线。
+    &.bordered-v {
+      --bg-border-bottom: linear-gradient(
+        0deg,
+        var(--border-color) var(--border-width),
+        transparent var(--border-width)
+      );
+
+      // 合计行：分隔线画在 footer 单元格的**上**边（数据区最后一行被 sticky 的
+      // footer 压住，它那条横线指望不上）。同样用渐变，理由见上。
+      .stk-footer td {
+        background-image:
+          var(--bg-border-right),
+          linear-gradient(
+            180deg,
+            var(--border-color) var(--border-width),
+            transparent var(--border-width)
+          );
+      }
+    }
+  }
+
+  // 去掉底座的外框：根节点上那条 `border-left` 与三段背景渐变（外框已由上面画）。
+  .#{e('table', 'inner')}.stk-table.bordered-v {
+    border-left: none;
+    background-image: none;
+
+    // 最右列的外侧竖线同样归外框管，抹掉单元格自己那条（两条紧挨着会被看成 2px）。
+    //
+    // ⚠️ 只能改 --bg-border-right 这一个变量，**不能整体清空 background-image**：
+    //    底座会给「被前面内容穿透遮挡」的右固定列补 `.fixed-cell--border-left`，
+    //    用 --bg-border-left 画它左边的分隔线；整份清空会把这根线一起干掉
+    //    （症状：操作列压住内容却没有分割线）。
+    th:last-child,
+    td:last-child {
+      --bg-border-right: linear-gradient(transparent, transparent);
+    }
+  }
+}
+
 // ==========================================================================
 // 表头 / 表尾：不透明底色（防 sticky 滚动时透出下方内容）
 // --------------------------------------------------------------------------

code/g3soft-libs/packages/ui/src/table/types.ts

@@ -225,7 +225,11 @@ export interface TableProps<T extends TableRow = TableRow> {
   rowHeight?: number
   /** 表头行高 */
   headerRowHeight?: number
-  /** 边框：true=外框圆角描边+行分隔线；false=无外框仅行分隔线 */
+  /**
+   * 边框：`true`（默认）= 圆角外框 + 行分隔线；`false` = 无外框仅行分隔线。
+   * 外框由本组件用真 `border` 自绘（底座的外框做不出圆角），格线仍走底座的背景
+   * 渐变，见 `style/_overrides.scss` 的「边框」一节。
+   */
   bordered?: boolean | string
   /**
    * 斑马纹（隔行底色），默认 `false`。透传给底座的 `stripe`。

code/g3soft-libs/packages/ui/src/table/utils/column.test.ts

@@ -24,7 +24,7 @@ describe('resolveSeqConfig', () => {
 
   it('seq 为 true 时用默认标题与宽度', () => {
     const cfg = resolveSeqConfig(true)
-    expect(cfg).toEqual({ enabled: true, title: '序号', width: 50 })
+    expect(cfg).toEqual({ enabled: true, title: '序号', width: 60 })
   })
 
   it('传对象时接受自定义标题与宽度', () => {
@@ -40,7 +40,7 @@ describe('resolveSeqConfig', () => {
   })
 
   it('只给 title 时宽度回落默认值', () => {
-    expect(resolveSeqConfig({ title: '序号列' }).width).toBe(50)
+    expect(resolveSeqConfig({ title: '序号列' }).width).toBe(60)
   })
 })
 

code/g3soft-libs/packages/ui/src/table/utils/column.ts

@@ -36,12 +36,12 @@ export interface SeqConfig {
 export function resolveSeqConfig(
   seq: boolean | { title?: string; width?: number } | undefined,
 ): SeqConfig {
-  if (!seq) return { enabled: false, title: '序号', width: 50 }
+  if (!seq) return { enabled: false, title: '序号', width: 60 }
   const cfg: { title?: string; width?: number } = seq === true ? { } : seq
   return {
     enabled: true,
     title: cfg.title ?? '序号',
-    width: Number(cfg.width ?? 50),
+    width: Number(cfg.width ?? 60),
   }
 }
 

code/g3soft-libs/packages/ui/src/tabs/Tabs.vue

@@ -390,7 +390,10 @@ const VNodeRenderer = (renderProps: {
   gap: v('space-1', 4px);
   box-sizing: border-box;
   min-height: v('tabs-tab-height', 38px);
-  padding: 0 v('space-3', 12px);
+  /* 左右只留 4px：选中线是 border-bottom，宽度跟着盒子走。
+     padding 一大，线就比文字宽出一圈（原来 12px → 线比文字宽 24px）。
+     页签之间的间隔改由 margin-right 承担（见下），不再靠这里的 padding。 */
+  padding: 0 v('space-1', 4px);
   border: 0;
   border-bottom: 2px solid transparent;
   background: transparent;
@@ -406,6 +409,21 @@ const VNodeRenderer = (renderProps: {
     border-color v('duration', 0.2s) v('ease', ease);
 }
 
+/* 页签间距走 margin，把「间隔」与「选中线宽度」解耦：
+   选中线依赖 padding，间隔依赖 margin，两者互不干扰。
+   首个页签贴齐左边缘（Semi 的 nth-of-type(1) 处理），否则整排会右移 16px。
+   横向用 margin-right（末尾多出的一截由 nav-list 的负 margin 抵消）；
+   垂直模式沿用 column 的 gap，不吃这套。 */
+.#{b('tabs')}:not(.#{m('tabs', 'left')}):not(.#{m('tabs', 'right')})
+  .#{e('tabs', 'tab')}:not(:last-child) {
+  margin-right: v('space-4', 16px);
+}
+
+.#{b('tabs')}:not(.#{m('tabs', 'left')}):not(.#{m('tabs', 'right')}) .#{e('tabs', 'nav-list')} {
+  /* 抵消最后一个页签多出的 margin-right，避免栏内右侧凭空多出 16px 空隙 */
+  margin-right: calc(-1 * #{v('space-4', 16px)});
+}
+
 .#{e('tabs', 'tab')}:hover:not(:disabled) {
   color: v('color-primary', #18181b);
 }
@@ -419,6 +437,9 @@ const VNodeRenderer = (renderProps: {
 .#{b('tabs')}.#{m('tabs', 'right')} .#{e('tabs', 'tab')} {
   justify-content: flex-start;
   border-bottom: 0;
+  /* 垂直模式的指示线在左/右侧（border-left/right），不吃底部的 padding，
+     所以这里可以放心用常规内边距，让文字与竖线之间有呼吸感 */
+  padding: 0 v('space-3', 12px);
 }
 
 .#{b('tabs')}.#{m('tabs', 'left')} .#{e('tabs', 'tab')}.#{is('tab-active')} {

code/g3soft-libs/test.html

@@ -0,0 +1,721 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Table 行编辑 · 单元格状态 · 边框变体</title>
+<style>
+  /* ============================================================
+     基础
+     ============================================================ */
+  * { box-sizing: border-box; }
+
+  body {
+    margin: 0;
+    padding: 24px;
+    background: #f5f5f5;
+    color: rgba(0, 0, 0, 0.88);
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC',
+      'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Arial, sans-serif;
+    font-size: 14px;
+    line-height: 1.5;
+  }
+
+  h1 { font-size: 20px; margin: 0 0 4px; }
+  h2 { font-size: 15px; margin: 0 0 12px; font-weight: 600; }
+  .hint { color: rgba(0, 0, 0, 0.45); font-size: 12px; margin: 0 0 20px; }
+
+  .card {
+    background: #fff;
+    border-radius: 8px;
+    padding: 16px 20px 20px;
+    margin-bottom: 20px;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
+  }
+  .card > .note {
+    color: rgba(0, 0, 0, 0.45);
+    font-size: 12px;
+    margin: -4px 0 12px;
+  }
+
+  /* ============================================================
+     表格骨架
+     表头与单元格的内边距、行高、文字省略都在这里统一。
+     ============================================================ */
+  .tbl {
+    width: 100%;
+    border-collapse: separate;   /* separate 才能让每格的边框独立控制 */
+    border-spacing: 0;
+    font-size: 14px;
+    background: #fff;
+    table-layout: fixed;         /* 定宽布局，列宽不随内容抖动 */
+  }
+
+  .tbl th,
+  .tbl td {
+    padding: 8px 12px;
+    text-align: left;
+    vertical-align: middle;
+    font-weight: 400;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .tbl thead th {
+    background: #f5f5f5;
+    color: rgba(0, 0, 0, 0.65);
+    font-weight: 500;
+    white-space: nowrap;
+  }
+
+  .tbl td.is-num,
+  .tbl th.is-num { text-align: right; font-variant-numeric: tabular-nums; }
+
+  /* 行操作列宽一点，放得下「编辑/保存/取消」 */
+  .col-op { width: 132px; }
+  .col-idx { width: 48px; text-align: center; }
+  .col-name { width: 22%; }
+  .col-amount { width: 15%; }
+  .col-status { width: 15%; }
+  .col-remark { width: auto; }
+
+  /* ============================================================
+     ★ 边框变体（本次重点）
+     用 CSS 变量驱动，一份标记切换四种边框：
+       --bw          线宽
+       --bc          线色
+       外框始终存在，差别只在「内部格线画哪些方向」
+     ============================================================ */
+  .tbl {
+    --bw: 1px;
+    --bc: #d9d9d9;
+    --outer: var(--bc);
+  }
+
+  /* ---- 变体 1：全边框（横竖都有，含外框）---- */
+  .tbl.bordered-all {
+    border: var(--bw) solid var(--outer);
+  }
+  .tbl.bordered-all th,
+  .tbl.bordered-all td {
+    border-right: var(--bw) solid var(--bc);
+    border-bottom: var(--bw) solid var(--bc);
+  }
+  /* 最后一列不画右边线，否则与外框叠成 2px */
+  .tbl.bordered-all th:last-child,
+  .tbl.bordered-all td:last-child { border-right: 0; }
+  /* 最后一行不画下边线，同理 */
+  .tbl.bordered-all tbody tr:last-child td { border-bottom: 0; }
+
+  /* ---- 变体 2：只有横向线（+外框）----
+     行与行之间有横线，列与列之间没有竖线；最外面一圈仍在。
+     表头下方的那条线由 th 的 border-bottom 提供，天然包含在内。 */
+  .tbl.bordered-x {
+    border: var(--bw) solid var(--outer);
+  }
+  .tbl.bordered-x th,
+  .tbl.bordered-x td {
+    border-bottom: var(--bw) solid var(--bc);
+    border-right: 0;
+  }
+  .tbl.bordered-x tbody tr:last-child td { border-bottom: 0; }
+
+  /* ---- 变体 3：只有外框，内部无线 ---- */
+  .tbl.bordered-outer {
+    border: var(--bw) solid var(--outer);
+  }
+  .tbl.bordered-outer th,
+  .tbl.bordered-outer td {
+    border-right: 0;
+    border-bottom: 0;
+  }
+  /* 内无横线时，表头需要一条线把自己与表体分开，否则糊成一片 */
+  .tbl.bordered-outer thead th {
+    border-bottom: var(--bw) solid var(--bc);
+  }
+
+  /* ---- 变体 4：只有竖线（+外框），横向无线 ---- */
+  .tbl.bordered-y {
+    border: var(--bw) solid var(--outer);
+  }
+  .tbl.bordered-y th,
+  .tbl.bordered-y td {
+    border-right: var(--bw) solid var(--bc);
+    border-bottom: 0;
+  }
+  .tbl.bordered-y th:last-child,
+  .tbl.bordered-y td:last-child { border-right: 0; }
+  .tbl.bordered-y thead th {
+    border-bottom: var(--bw) solid var(--bc);
+  }
+
+  /* ============================================================
+     ★ 单元格状态
+     与组件库同一套语义色：
+       error    → color-danger  #ec4246，8% 混入底色
+       warning  → color-warning #e79a0d，5% 混入底色
+       disabled → 灰底 + 文字降一档亮度（is-readonly）
+     底色**不透明**：半透明会让行 hover 透上来，分不清「格有问题」还是「行被选中」。
+     ============================================================ */
+  .tbl td.is-error {
+    background-color: color-mix(in srgb, #ec4246 8%, #fff);
+  }
+  .tbl td.is-warning {
+    background-color: color-mix(in srgb, #e79a0d 5%, #fff);
+  }
+  .tbl td.is-disabled {
+    background-color: color-mix(in srgb, rgba(0, 0, 0, 0.88) 3%, #fff);
+    color: rgba(0, 0, 0, 0.65);
+    cursor: not-allowed;
+  }
+
+  /* 校验格的编辑态让位：正在编辑时不铺底色，改用语义色焦点环 + 红字。
+     判据用 .is-editing 标记，而不是 :focus-within —— select 展开时焦点会跑进
+     浮层，:focus-within 会时有时无，环就会闪。 */
+  .tbl td.is-error.is-editing,
+  .tbl td.is-warning.is-editing {
+    background-color: #fff;
+    color: inherit;
+  }
+  .tbl td.is-error.is-editing {
+    box-shadow:
+      inset 0 0 0 2px #ec4246,
+      inset 0 0 0 3px #fff;
+  }
+  .tbl td.is-warning.is-editing {
+    box-shadow:
+      inset 0 0 0 2px #e79a0d,
+      inset 0 0 0 3px #fff;
+  }
+
+  /* 普通编辑格：主色焦点环。
+     与上面两条语义色环共存靠**权重**定胜负，不靠书写顺序：
+       .tbl td.is-error.is-editing   → (0,4,0)
+       .tbl td.is-warning.is-editing → (0,4,0)
+       .tbl td.is-editing            → (0,3,0)
+     前两条更高，所以校验格在编辑时仍然是红/橙环，不会被这条盖成主色。
+     这里刻意**不写** box-shadow: inherit 去「提权」：inherit 取的是父元素
+     （tr / table）的值，不是「上一条更具体的规则」，会把语义色环整个抹掉。 */
+  .tbl td.is-editing {
+    box-shadow:
+      inset 0 0 0 2px #18181b,
+      inset 0 0 0 3px #fff;
+  }
+
+  /* 实时输入框：融进单元格，看起来就是「格子在编辑」 */
+  .cell-input {
+    width: 100%;
+    border: 0;
+    padding: 0;
+    margin: 0;
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    text-align: inherit;
+    outline: none;
+  }
+  .cell-input::placeholder { color: rgba(0, 0, 0, 0.25); }
+
+  /* 校验提示：贴在单元格下方，不占行高 */
+  .cell-msg {
+    display: block;
+    font-size: 12px;
+    line-height: 16px;
+    margin-top: 2px;
+    white-space: normal;
+  }
+  .is-error .cell-msg { color: #ec4246; }
+  .is-warning .cell-msg { color: #e79a0d; }
+
+  /* 带提示的行需要放开 nowrap，否则提示会被省略号截掉 */
+  .tbl td.has-msg { white-space: normal; }
+
+  /* ============================================================
+     只读 / 禁用视图
+     ============================================================ */
+  .ro {
+    display: block;
+    color: rgba(0, 0, 0, 0.65);
+  }
+
+  /* ============================================================
+     按钮
+     ============================================================ */
+  .btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 24px;
+    padding: 0 8px;
+    border: 1px solid #d9d9d9;
+    border-radius: 4px;
+    background: #fff;
+    color: rgba(0, 0, 0, 0.88);
+    font: inherit;
+    font-size: 13px;
+    cursor: pointer;
+    transition: background-color 0.2s, border-color 0.2s, color 0.2s;
+  }
+  .btn:hover:not(:disabled) { border-color: #18181b; }
+  .btn-primary {
+    background: #18181b;
+    border-color: #18181b;
+    color: #fafafa;
+  }
+  .btn-primary:hover:not(:disabled) { background: rgba(24, 24, 27, 0.9); }
+  .btn-link {
+    border-color: transparent;
+    background: transparent;
+    color: #18181b;
+    padding: 0 4px;
+  }
+  .btn-link:hover:not(:disabled) { color: rgba(24, 24, 27, 0.8); }
+  .btn-danger { color: #ec4246; }
+  .btn:disabled,
+  .btn.is-disabled {
+    color: rgba(0, 0, 0, 0.25);
+    border-color: #d9d9d9;
+    background: rgba(0, 0, 0, 0.04);
+    cursor: not-allowed;
+  }
+  .btn-primary:disabled,
+  .btn-primary.is-disabled {
+    background: rgba(0, 0, 0, 0.04);
+    border-color: #d9d9d9;
+    color: rgba(0, 0, 0, 0.25);
+  }
+  .op-group { display: flex; gap: 4px; }
+
+  /* 行 hover：只染可编辑行，禁用行不动 */
+  .tbl tbody tr:hover > td { background-color: rgba(0, 0, 0, 0.02); }
+  .tbl tbody tr:hover > td.is-error { background-color: color-mix(in srgb, #ec4246 11%, #fff); }
+  .tbl tbody tr:hover > td.is-warning { background-color: color-mix(in srgb, #e79a0d 8%, #fff); }
+  .tbl tbody tr:hover > td.is-disabled {
+    background-color: color-mix(in srgb, rgba(0, 0, 0, 0.88) 3%, #fff);
+  }
+  .tbl tbody tr:hover > td.is-editing { background-color: #fff; }
+
+  /* 序号列居中且用次级色 */
+  .tbl .col-idx,
+  .tbl td.col-idx { color: rgba(0, 0, 0, 0.45); text-align: center; }
+</style>
+</head>
+<body>
+
+<h1>Table 行编辑 · 单元格状态 · 边框变体</h1>
+<p class="hint">
+  行内编辑：点「编辑」进入，可改单元格内容；金额为 error / warning 的格子会实时校验。
+  边框变体共四种，外框始终保留，差别只在内部格线画哪些方向。
+</p>
+
+<!-- ============================================================
+     1. 行编辑 + 三种单元格状态
+     ============================================================ -->
+<div class="card">
+  <h2>1. 行编辑 · error / warning / disabled 混合</h2>
+  <p class="note">
+    第 1 行可编辑；第 2 行整行禁用（灰底，操作列按钮禁用）；金额格演示校验态。
+  </p>
+  <table class="tbl bordered-all" id="grid1">
+    <colgroup>
+      <col class="col-idx"><col class="col-name"><col class="col-amount">
+      <col class="col-status"><col class="col-remark"><col class="col-op">
+    </colgroup>
+    <thead>
+      <tr>
+        <th class="col-idx">#</th>
+        <th>名称</th>
+        <th class="is-num">金额</th>
+        <th>状态</th>
+        <th>备注</th>
+        <th>操作</th>
+      </tr>
+    </thead>
+    <tbody>
+      <!-- 行 1：可编辑，金额 error（<=0），备注 warning（空） -->
+      <tr data-row="1">
+        <td class="col-idx">1</td>
+        <td data-field="name"><span class="ro">合同 A</span></td>
+        <td class="is-num is-error has-msg" data-field="amount" data-validate="positive">
+          <span class="ro">0</span>
+          <span class="cell-msg">金额必须大于 0</span>
+        </td>
+        <td data-field="status"><span class="ro">启用</span></td>
+        <td class="is-warning has-msg" data-field="remark" data-validate="notEmpty">
+          <span class="ro"></span>
+          <span class="cell-msg">建议填写备注</span>
+        </td>
+        <td>
+          <div class="op-group" data-op>
+            <button class="btn btn-link" data-act="edit">编辑</button>
+            <button class="btn btn-link btn-danger" data-act="del">删除</button>
+          </div>
+        </td>
+      </tr>
+
+      <!-- 行 2：整行禁用 -->
+      <tr data-row="2" data-locked="1">
+        <td class="col-idx">2</td>
+        <td class="is-disabled" data-field="name"><span class="ro">合同 B（已归档）</span></td>
+        <td class="is-num is-disabled" data-field="amount"><span class="ro">--</span></td>
+        <td class="is-disabled" data-field="status"><span class="ro">停用</span></td>
+        <td class="is-disabled" data-field="remark"><span class="ro">不可修改</span></td>
+        <td>
+          <div class="op-group" data-op>
+            <button class="btn btn-link" disabled>编辑</button>
+            <button class="btn btn-link" disabled>删除</button>
+          </div>
+        </td>
+      </tr>
+
+      <!-- 行 3：可编辑，全部合法 -->
+      <tr data-row="3">
+        <td class="col-idx">3</td>
+        <td data-field="name"><span class="ro">合同 C</span></td>
+        <td class="is-num" data-field="amount" data-validate="positive">
+          <span class="ro">43000</span>
+        </td>
+        <td data-field="status"><span class="ro">启用</span></td>
+        <td data-field="remark" data-validate="notEmpty"><span class="ro">待复核</span></td>
+        <td>
+          <div class="op-group" data-op>
+            <button class="btn btn-link" data-act="edit">编辑</button>
+            <button class="btn btn-link btn-danger" data-act="del">删除</button>
+          </div>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+<!-- ============================================================
+     2. 状态总览（静态，便于横向比对四种状态的观感）
+     ============================================================ -->
+<div class="card">
+  <h2>2. 单元格状态总览（静态）</h2>
+  <p class="note">
+    四种状态同屏对比：正常 / error / warning / disabled。
+  </p>
+  <table class="tbl bordered-all">
+    <colgroup>
+      <col style="width: 16%"><col style="width: 21%"><col style="width: 21%">
+      <col style="width: 21%"><col>
+    </colgroup>
+    <thead>
+      <tr>
+        <th>列</th><th>正常</th><th>error</th><th>warning</th><th>disabled</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>文本</td>
+        <td>合同 A</td>
+        <td class="is-error has-msg">合同 A<span class="cell-msg">名称重复</span></td>
+        <td class="is-warning has-msg">合同 A<span class="cell-msg">建议改为全称</span></td>
+        <td class="is-disabled"><span class="ro">合同 A</span></td>
+      </tr>
+      <tr>
+        <td>数字（右对齐）</td>
+        <td class="is-num">12000</td>
+        <td class="is-num is-error has-msg">0<span class="cell-msg">金额必须大于 0</span></td>
+        <td class="is-num is-warning has-msg">999999<span class="cell-msg">超出建议范围</span></td>
+        <td class="is-num is-disabled"><span class="ro">12000</span></td>
+      </tr>
+      <tr>
+        <td>编辑中</td>
+        <td class="is-editing"><input class="cell-input" value="正在输入"></td>
+        <td class="is-error is-editing"><input class="cell-input" value="0"></td>
+        <td class="is-warning is-editing"><input class="cell-input" value="999999"></td>
+        <td class="is-disabled"><span class="ro">不可编辑</span></td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+<!-- ============================================================
+     3. 边框变体
+     ============================================================ -->
+<div class="card">
+  <h2>3. 边框变体：全边框</h2>
+  <p class="note">横竖格线齐全，最外一圈与内部线宽一致。末行/末列不重复描边，避免叠成 2px。</p>
+  <table class="tbl bordered-all">
+    <thead>
+      <tr><th class="col-idx">#</th><th>名称</th><th class="is-num">金额</th><th>状态</th><th>备注</th></tr>
+    </thead>
+    <tbody>
+      <tr><td class="col-idx">1</td><td>合同 A</td><td class="is-num">12000</td><td>启用</td><td>已归档</td></tr>
+      <tr><td class="col-idx">2</td><td>合同 B</td><td class="is-num is-error has-msg">0<span class="cell-msg">金额必须大于 0</span></td><td>停用</td><td></td></tr>
+      <tr><td class="col-idx">3</td><td>合同 C</td><td class="is-num">43000</td><td>启用</td><td>待复核</td></tr>
+    </tbody>
+  </table>
+</div>
+
+<div class="card">
+  <h2>4. 边框变体：只有横向线（+ 外框）</h2>
+  <p class="note">
+    行与行之间有横线，列与列之间没有竖线；最外一圈边框仍然完整保留。
+    表头下方那条线也在，用来把表头与表体分开。
+  </p>
+  <table class="tbl bordered-x">
+    <thead>
+      <tr><th class="col-idx">#</th><th>名称</th><th class="is-num">金额</th><th>状态</th><th>备注</th></tr>
+    </thead>
+    <tbody>
+      <tr><td class="col-idx">1</td><td>合同 A</td><td class="is-num">12000</td><td>启用</td><td>已归档</td></tr>
+      <tr><td class="col-idx">2</td><td>合同 B</td><td class="is-num is-warning has-msg">999999<span class="cell-msg">超出建议范围</span></td><td>停用</td><td></td></tr>
+      <tr><td class="col-idx">3</td><td>合同 C</td><td class="is-num">43000</td><td>启用</td><td>待复核</td></tr>
+    </tbody>
+  </table>
+</div>
+
+<div class="card">
+  <h2>5. 边框变体：只有外框</h2>
+  <p class="note">内部完全无线，只有最外一圈；表头下方保留一条分隔线。</p>
+  <table class="tbl bordered-outer">
+    <thead>
+      <tr><th class="col-idx">#</th><th>名称</th><th class="is-num">金额</th><th>状态</th><th>备注</th></tr>
+    </thead>
+    <tbody>
+      <tr><td class="col-idx">1</td><td>合同 A</td><td class="is-num">12000</td><td>启用</td><td>已归档</td></tr>
+      <tr><td class="col-idx">2</td><td>合同 B</td><td class="is-num is-error has-msg">0<span class="cell-msg">金额必须大于 0</span></td><td>停用</td><td></td></tr>
+      <tr><td class="col-idx">3</td><td>合同 C</td><td class="is-num">43000</td><td>启用</td><td>待复核</td></tr>
+    </tbody>
+  </table>
+</div>
+
+<div class="card">
+  <h2>6. 边框变体：只有竖向线（+ 外框）</h2>
+  <p class="note">列与列之间有竖线，行与行之间没有横线；外框保留。</p>
+  <table class="tbl bordered-y">
+    <thead>
+      <tr><th class="col-idx">#</th><th>名称</th><th class="is-num">金额</th><th>状态</th><th>备注</th></tr>
+    </thead>
+    <tbody>
+      <tr><td class="col-idx">1</td><td>合同 A</td><td class="is-num">12000</td><td>启用</td><td>已归档</td></tr>
+      <tr><td class="col-idx">2</td><td>合同 B</td><td class="is-num">0</td><td>停用</td><td></td></tr>
+      <tr><td class="col-idx">3</td><td>合同 C</td><td class="is-num">43000</td><td>启用</td><td>待复核</td></tr>
+    </tbody>
+  </table>
+</div>
+
+<script>
+/* ============================================================
+   行编辑
+   约定：一行同时只有一格处于编辑态；编辑态那一格退掉校验底色，
+   改用语义色焦点环 + 红字（与组件库一致）。
+   ============================================================ */
+(function () {
+  var grid = document.getElementById('grid1');
+  var tbody = grid.tBodies[0];
+
+  /** 取某格当前的值（编辑态读 input，展示态读 .ro 的文字） */
+  function readValue(td) {
+    var input = td.querySelector('.cell-input');
+    if (input) return input.value;
+    var ro = td.querySelector('.ro');
+    return ro ? ro.textContent : td.textContent.trim();
+  }
+
+  /** 校验：返回 'error' | 'warning' | null */
+  function validate(td, value) {
+    var rule = td.dataset.validate;
+    if (!rule) return null;
+    if (rule === 'positive') {
+      if (String(value).trim() === '') return 'error';
+      return Number(value) > 0 ? null : 'error';
+    }
+    if (rule === 'notEmpty') {
+      return String(value).trim() === '' ? 'warning' : null;
+    }
+    return null;
+  }
+
+  /** 提示文案 */
+  function messageFor(rule, level) {
+    if (rule === 'positive') return level === 'error' ? '金额必须大于 0' : '';
+    if (rule === 'notEmpty') return level === 'warning' ? '建议填写备注' : '';
+    return '';
+  }
+
+  /** 把校验结果落到单元格上 */
+  function paint(td, level) {
+    td.classList.toggle('is-error', level === 'error');
+    td.classList.toggle('is-warning', level === 'warning');
+
+    var rule = td.dataset.validate;
+    var msg = td.querySelector('.cell-msg');
+    if (level) {
+      td.classList.add('has-msg');
+      if (!msg) {
+        msg = document.createElement('span');
+        msg.className = 'cell-msg';
+        td.appendChild(msg);
+      }
+      msg.textContent = messageFor(rule, level);
+    } else {
+      td.classList.remove('has-msg');
+      if (msg) msg.remove();
+    }
+  }
+
+  /** 进入编辑：展示 span 换成 input */
+  function enterEdit(td) {
+    if (td.classList.contains('is-editing')) return;
+    var value = readValue(td);
+    var isNum = td.classList.contains('is-num');
+
+    var input = document.createElement('input');
+    input.className = 'cell-input';
+    input.value = value;
+    if (isNum) input.inputMode = 'decimal';
+
+    var ro = td.querySelector('.ro');
+    if (ro) ro.style.display = 'none';
+    td.insertBefore(input, td.firstChild);
+    td.classList.add('is-editing');
+
+    // 实时校验
+    input.addEventListener('input', function () {
+      // 编辑态下先算结果，但底色让位（CSS 已处理），提示仍然实时更新
+      var level = validate(td, input.value);
+      // 编辑时不铺底色，但要把「离开编辑后该是什么状态」记在 dataset 上
+      td.dataset.pending = level || '';
+      var msg = td.querySelector('.cell-msg');
+      if (level) {
+        if (!msg) {
+          msg = document.createElement('span');
+          msg.className = 'cell-msg';
+          td.appendChild(msg);
+        }
+        td.classList.add('has-msg');
+        msg.textContent = messageFor(td.dataset.validate, level);
+      } else if (msg) {
+        msg.remove();
+        td.classList.remove('has-msg');
+      }
+    });
+
+    input.focus();
+    input.select();
+    return input;
+  }
+
+  /** 退出编辑：把 input 的值写回展示 span，并结算校验态 */
+  function exitEdit(td) {
+    if (!td.classList.contains('is-editing')) return;
+    var input = td.querySelector('.cell-input');
+    var value = input ? input.value : '';
+
+    if (input) input.remove();
+    var ro = td.querySelector('.ro');
+    if (ro) {
+      ro.style.display = '';
+      ro.textContent = value;
+    }
+    td.classList.remove('is-editing');
+
+    // 结算：写回后再按最终值判定一次
+    var level = validate(td, value);
+    paint(td, level);
+  }
+
+  /** 收集一行里所有可编辑格 */
+  function editableCells(tr) {
+    return Array.prototype.filter.call(tr.cells, function (td) {
+      return td.dataset.field && !td.classList.contains('is-disabled');
+    });
+  }
+
+  /** 进入某行的编辑态：把所有可编辑格变成 input，操作列换成保存/取消 */
+  function editRow(tr) {
+    editableCells(tr).forEach(enterEdit);
+
+    var op = tr.querySelector('[data-op]');
+    op.innerHTML =
+      '<button class="btn btn-primary" data-act="save">保存</button>' +
+      '<button class="btn" data-act="cancel">取消</button>';
+
+    tr.dataset.editing = '1';
+  }
+
+  /** 退出某行编辑态 */
+  function saveRow(tr, revert) {
+    var cells = editableCells(tr);
+
+    if (revert) {
+      // 取消：把 pending 清掉，按当前展示值重算（展示值此时就是原值）
+      cells.forEach(function (td) {
+        var input = td.querySelector('.cell-input');
+        if (input) {
+          var ro = td.querySelector('.ro');
+          var original = ro ? ro.dataset.original : '';
+          input.value = original != null ? original : input.value;
+        }
+      });
+    }
+
+    cells.forEach(exitEdit);
+
+    var op = tr.querySelector('[data-op]');
+    var locked = tr.dataset.locked === '1';
+    op.innerHTML =
+      '<button class="btn btn-link" data-act="edit"' + (locked ? ' disabled' : '') + '>编辑</button>' +
+      '<button class="btn btn-link btn-danger" data-act="del"' + (locked ? ' disabled' : '') + '>删除</button>';
+
+    delete tr.dataset.editing;
+  }
+
+  /* 记住每格的原始值，供「取消」回滚 */
+  Array.prototype.forEach.call(tbody.rows, function (tr) {
+    Array.prototype.forEach.call(tr.cells, function (td) {
+      var ro = td.querySelector('.ro');
+      if (ro) ro.dataset.original = ro.textContent;
+    });
+  });
+
+  /* 事件委托：编辑 / 保存 / 取消 / 删除 */
+  grid.addEventListener('click', function (e) {
+    var btn = e.target.closest('[data-act]');
+    if (!btn || btn.disabled) return;
+
+    var tr = btn.closest('tr');
+    var act = btn.dataset.act;
+
+    if (act === 'edit') {
+      editRow(tr);
+    } else if (act === 'save') {
+      saveRow(tr, false);
+    } else if (act === 'cancel') {
+      saveRow(tr, true);
+    } else if (act === 'del') {
+      if (tr.dataset.editing === '1') return; // 编辑中不给删，避免状态错乱
+      tr.remove();
+      renumber();
+    }
+  });
+
+  /* 回车保存 / Esc 取消 */
+  grid.addEventListener('keydown', function (e) {
+    var tr = e.target.closest('tr');
+    if (!tr || tr.dataset.editing !== '1') return;
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      saveRow(tr, false);
+    } else if (e.key === 'Escape') {
+      e.preventDefault();
+      saveRow(tr, true);
+    }
+  });
+
+  /* 删行后重排序号 */
+  function renumber() {
+    Array.prototype.forEach.call(tbody.rows, function (tr, i) {
+      tr.cells[0].textContent = String(i + 1);
+    });
+  }
+})();
+</script>
+
+</body>
+</html>