From 45ab54ba9093a0189328a604b2b63cd226c7d6a4 Mon Sep 17 00:00:00 2001
From: Noah <dingkuiqing@126.com>
Date: Tue, 22 Sep 2026 04:20:48 +0000
Subject: [PATCH] =?UTF-8?q?fix(ui):=20=E4=BF=AE=E5=A4=8D=E6=96=B0=20UI=20?=
 =?UTF-8?q?=E4=BE=A7=E6=A0=8F=E8=A2=AB=E9=A1=B6=E5=87=BA=E4=B8=8E=E5=B9=B3?=
 =?UTF-8?q?=E5=8F=B0=E8=AE=BE=E7=BD=AE=E9=A1=B5=E5=AF=BC=E8=88=AA=E9=87=8D?=
 =?UTF-8?q?=E5=A4=8D=20(#1706)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix(ui): 去掉 html/body 的 overflow-x: hidden，恢复侧栏与页头吸顶

#1704 引入的 bg-global.css 给 html、body 加了 overflow-x: hidden，任何非 visible
的 overflow 都会把 body 变成滚动容器，侧栏（layout.module.scss .sider）和
PageHeader 的 position: sticky 于是相对 body 而不是视口定位——主内容一长，
整页滚动就把左侧导航和「保存」按钮一起顶出视口。

- 删除 html/body 的 overflow-x: hidden，并在两处样式注明这条约束
- 两个 position: fixed 的背景层改用 inset: 0 铺满视口，不再依赖 100vw，
  也不会撑出横向滚动条

问题 1 of #1705（侧边导航被顶出）。

* fix(ui): 空间配置「平台设置」只保留左侧平台列表一套导航

#1704 把平台设置改成「左列平台列表 + 右栏 Collapse」后，右栏的手风琴仍然
为每个平台渲染一条带平台名的折叠栏，与左列重复（#1705 第二点）。

- 新增 app/ui/plugins/PlatformPanel.tsx：各平台插件的外壳，传入 bare 时只
  输出字段，否则保持原来的 Collapse.Panel（配置覆写弹窗仍在用）
- 10 个平台插件把 Collapse.Panel 换成 PlatformPanel，并透传 bare
- dashboard 右栏不再用 Collapse，改为每个平台一个 <section hidden>：所有
  字段始终挂载，只切换 hidden，保证 PUT /v1/configuration 整表覆盖时其他
  平台的参数与凭据不会因为字段卸载而丢失
- 左列平台列表在页头下方吸顶（position: sticky），右栏面板很长时列表不再
  随内容滚出视口；PageHeader 把自身高度写入 --page-header-height 供其取用；
  Tabs 关闭 tabPaneMotion 并放开 .semi-tabs-pane 的 overflow，否则 pane 会
  成为 sticky 的滚动容器。移动端横排 chip 行保持随内容滚动
- 左列按钮补 aria-pressed，nav 补 aria-label

Fixes #1705

* feat(ui): 空间配置保存校验失败时自动定位到第一个出错字段

平台设置的字段全部挂载、只切换 hidden，未选中的 Tab / 平台面板里的校验
错误用户看不到，表现为点「保存」没有任何反应。

- Form 加 onSubmitFail：把 Semi 的嵌套 errors 拍平成字段路径，按 DOM 顺序
  找到第一个出错字段，切到它所在的 Tab（Tabs 改为受控）与平台面板，再
  scrollIntoView 并聚焦，同时 Toast 提示未通过的项数
- TabPane 内容加 data-tab、平台 section 加 data-platform，供定位使用；
  不改插件接口

Refs #1705

* refactor(ui): 改用应用壳布局解决侧栏被顶出，移除 sticky 补救与 tabPaneMotion 取舍

按 review 意见（#1706）不再靠 position: sticky 解决问题一，改成简单的应用壳：

- layout.module.scss：.app 改为 height: 100vh（100dvh）+ overflow: hidden 的 flex 容器，
  页面本身不滚动；.sider 是固定宽度的普通子元素（撑满壳高，去掉 sticky/top/100vh）；
  .main 加 min-height: 0 + overflow: auto，成为唯一的滚动容器。侧栏、页脚服务灯
  自然留在视口内，PageHeader 原有的 position: sticky 相对 .main 吸顶，无需改动
- 去掉为让平台列表在 Tab 面板内 sticky 而加的补救：.platformNav 的 sticky /
  --page-header-height / max-height、PageHeader 的 ResizeObserver、Tabs 的
  tabPaneMotion={false} 以及 .semi-tabs-pane 的 overflow 覆盖，Tab 切换动画恢复。
  平台列表改回随内容滚动
- bg-global.css：文档不再滚动，html/body 不需要 overflow 规则，注释改为说明现状；
  两个 fixed 背景层保持 inset: 0

验证：tsc 0 错误、next build 通过；13 页 × 浅色 / 深色 / 折叠 / 移动端 390 / 平板 760，
主区滚到底后 document.scrollHeight == innerHeight（文档不滚）、aside top 0、页脚
bottom == innerHeight、header top 0、main 无横向溢出；Semi Select 下拉（主区预滚 1.2k px
及打开后继续滚动）、Popconfirm、配置覆写 Modal 及其内部 Select、Toast 位置全部正确；
切遍 10 个平台后保存 PUT 73/73 键（3 次）；校验失败自动定位三场景通过（2 轮）。

Refs #1705

* refactor(ui): 平台设置去掉外层嵌套卡片，改两栏独立滚动布局

按 review 第二条意见（#1706）：平台列表不用 sticky，也不随内容滚走——去掉包在
「平台列表 + 面板」外面的嵌套卡片，让两栏并排、各自独立滚动。

- dashboard/page.tsx：删掉 dc.content / rootConfigPanel / main / content 四层包裹和
  平台设置里的 framePlatformConfig 卡片与重复的「平台设置」标题；页面主体改为
  .page（占满页头以下的剩余高度）→ Form → Tabs，每个 Tab 面板在自己内部滚动，
  页面本身不滚，页头「保存」始终可见。去掉底部两个 Space 占位
- dashboard.module.scss：重写。删除 #1704 之前遗留的整段 .rootConfigPanel 嵌套规则
  （其中 frameInside / group / lineStory 等类早已无人引用）；Form / Tabs /
  semi-tabs-content / semi-tabs-pane（含开启动画时的 motion-overlay）改为
  flex: 1 + min-height: 0 的列容器，把高度让给当前面板，并补回
  .semi-tabs-pane-inactive 的 display: none（本模块选择器特异性更高）
- 平台设置：.platformLayout 两栏，.platformNav 160px、align-self: flex-start、
  max-height: 100% + overflow-y: auto（矮视口时列表自己滚），.platformBody
  flex: 1 + overflow-y: auto。右栏再长列表也不动
- 全局设置 / 开发者选项一致处理：frameDownload / frameUpload / frameDeveloper 不再是
  带边框和 50px 内边距的卡片，改为分区标题 + 分隔线的普通分区，面板 .pane 自身滚动
- 移动端（≤680px）：两栏改为上下堆叠，平台列表是横向滑动的标签行，固定在面板顶部
  不随字段滚走
- 自定义背景开启时给两个滚动面板垫一层 75% 的 bg-1 半透明底色，保证文字可读

验证：tsc 0 错误、next build 通过；空间配置页在 1440 / 760 / 390 × 浅 / 深 / 折叠 /
520px 矮视口下：文档与 <main> 均不滚动，页头与「保存」始终在视口内，右栏滚到底
（哔哩哔哩面板 1223px）时平台列表位置不变，矮视口下列表自身可滚；全局设置面板独立
滚动；切遍 10 个平台后保存 PUT 73/73 键（4 次）；校验失败自动定位三场景通过（3 轮，
scrollIntoView 在嵌套滚动容器内正常）；Select 下拉在面板预滚 1k px 及滚动中跟随触发器，
Popconfirm / Modal / Toast 位置正确；其余 12 页布局探针与上一提交一致。

Refs #1705

* fix(ui): 更新日志页内容不再覆盖导航顶栏

应用壳布局下页头真正吸顶后暴露出来的问题（review 第三条，#1706）：更新日志页把
PageHeader 又包在一层 position: sticky; z-index: 1 的 Semi Layout.Header 里，
形成一个层级只有 1 的 stacking context，PageHeader 自己的 z-index: 10 只在这层
内部生效；而版本卡片流 .feed 又设了 position: relative; z-index: 1，DOM 顺序在
后，滚动时就画在页头之上。

- changelog/page.tsx：去掉外层 Header，与其它页一样直接渲染 PageHeader
- changelog.module.scss：删掉 .feed / .center 的 position: relative; z-index: 1

验证：10 个带页头的页面滚到底后对页头内 6 个点做 elementFromPoint 命中测试，
全部命中页头自身（修前 /changelog 有 4 个点命中版本卡片头）；/history 播放器
Modal 居中且在最上层；/logviewer、/status 等无层叠。

Refs #1705
---
 app/(app)/bg-global.css                   |  16 +-
 app/(app)/changelog/changelog.module.scss |   6 -
 app/(app)/changelog/page.tsx              |  23 +-
 app/(app)/dashboard/page.tsx              | 219 +++++++-----
 app/(app)/layout.module.scss              |  15 +-
 app/styles/dashboard.module.scss          | 403 +++++-----------------
 app/ui/plugins/PlatformPanel.tsx          |  28 ++
 app/ui/plugins/bilibili.tsx               |  10 +-
 app/ui/plugins/cc.tsx                     |  10 +-
 app/ui/plugins/cookie.tsx                 |   8 +-
 app/ui/plugins/douyin.tsx                 |  10 +-
 app/ui/plugins/douyu.tsx                  |  10 +-
 app/ui/plugins/huya.tsx                   |  10 +-
 app/ui/plugins/index.ts                   |   3 +-
 app/ui/plugins/kilakila.tsx               |  10 +-
 app/ui/plugins/twitcasting.tsx            |  10 +-
 app/ui/plugins/twitch.tsx                 |  10 +-
 app/ui/plugins/youtube.tsx                |  10 +-
 18 files changed, 320 insertions(+), 491 deletions(-)
 create mode 100644 app/ui/plugins/PlatformPanel.tsx

diff --git a/app/(app)/bg-global.css b/app/(app)/bg-global.css
index 2ecdcf5..4fc4cbb 100644
--- a/app/(app)/bg-global.css
+++ b/app/(app)/bg-global.css
@@ -1,16 +1,11 @@
 /* 全局自定义背景：当 body 带 app-has-bg 时生效 */
-html,
-body {
-  overflow-x: hidden;
-}
 
+/* 两个背景层用 position: fixed + inset: 0 铺满视口。页面滚动由应用壳的主内容区承担
+   （layout.module.scss .app / .main），文档本身不滚，这里不需要再给 html / body 设 overflow */
 body.app-has-bg::before {
   content: '';
   position: fixed;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
+  inset: 0;
   z-index: -2;
   background-image: var(--app-bg-image);
   background-repeat: no-repeat;
@@ -23,10 +18,7 @@ body.app-has-bg::before {
 body.app-has-bg::after {
   content: '';
   position: fixed;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
+  inset: 0;
   background: var(--semi-color-bg-0);
   opacity: var(--app-bg-mask-opacity, 0.35);
   z-index: -1;
diff --git a/app/(app)/changelog/changelog.module.scss b/app/(app)/changelog/changelog.module.scss
index 0614206..caacd4e 100644
--- a/app/(app)/changelog/changelog.module.scss
+++ b/app/(app)/changelog/changelog.module.scss
@@ -3,12 +3,6 @@
   min-height: calc(100vh - 69px);
 }
 
-.feed,
-.center {
-  position: relative;
-  z-index: 1;
-}
-
 .center {
   display: flex;
   align-items: center;
diff --git a/app/(app)/changelog/page.tsx b/app/(app)/changelog/page.tsx
index def8422..3da11aa 100644
--- a/app/(app)/changelog/page.tsx
+++ b/app/(app)/changelog/page.tsx
@@ -9,7 +9,7 @@ import { formatVersion } from '@/app/lib/status'
 import { SLOW_REFRESH_MS } from '@/app/lib/use-dashboard'
 import styles from './changelog.module.scss'
 
-const { Header, Content } = Layout
+const { Content } = Layout
 const { Title, Text } = Typography
 
 // 数据源：biliup 官方 CHANGELOG（随版本自动更新，零后端改动）
@@ -210,20 +210,13 @@ export default function Changelog() {
 
   return (
     <>
-      <Header
-        style={{
-          backgroundColor: 'var(--semi-color-bg-1)',
-          position: 'sticky',
-          top: 0,
-          zIndex: 1,
-        }}
-      >
-        <PageHeader
-          icon={<IconBook size="large" />}
-          title="更新日志"
-          description="biliup 版本更新记录"
-        />
-      </Header>
+      {/* PageHeader 自带 sticky 与 z-index，不要再包一层带 position / z-index 的容器，
+          否则会形成更低层级的 stacking context，滚动时被下方内容盖住 */}
+      <PageHeader
+        icon={<IconBook size="large" />}
+        title="更新日志"
+        description="biliup 版本更新记录"
+      />
       <Content>
         <main className={styles.content}>
           {isLoading && (
diff --git a/app/(app)/dashboard/page.tsx b/app/(app)/dashboard/page.tsx
index 3fb99b8..52ee9c2 100644
--- a/app/(app)/dashboard/page.tsx
+++ b/app/(app)/dashboard/page.tsx
@@ -1,19 +1,16 @@
 'use client'
-import React, { useRef, useState } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 import {
   Button,
   Form,
-  Collapse,
   Avatar,
-  Select,
-  Space,
   Toast,
   Notification,
   Typography,
   Tabs,
   TabPane,
 } from '@douyinfe/semi-ui'
-import { IconPlusCircle, IconStar, IconGlobe } from '@douyinfe/semi-icons'
+import { IconPlusCircle, IconStar } from '@douyinfe/semi-icons'
 import useSWR from 'swr'
 import { fetcher, put } from '@/app/lib/api-streamer'
 import useSWRMutation from 'swr/mutation'
@@ -21,14 +18,28 @@ import { FormApi } from '@douyinfe/semi-ui/lib/es/form'
 import { useBiliUsers } from '../../lib/use-streamers'
 import styles from '../../styles/dashboard.module.scss'
 import PageHeader from '../components/PageHeader'
-import SectionTitle from '../components/SectionTitle'
-import dc from '@/app/ui/data-card.module.scss'
 
 // 注册各平台组件
 import { PlatformPanels } from '../../ui/plugins'
 import Global from '../../ui/plugins/global'
 import Developer from '../../ui/plugins/developer'
 
+const TAB_GLOBAL = '1'
+const TAB_PLATFORM = '2'
+const TAB_DEVELOPER = '3'
+
+/** Semi 把校验错误按字段路径存成嵌套对象（{ user: { bili_cookie: '…' } }），拍平成 x-field-id 形式 */
+function errorFieldPaths(errors: unknown, prefix = ''): string[] {
+  if (!errors || typeof errors !== 'object' || Array.isArray(errors) || '$$typeof' in errors) {
+    return prefix ? [prefix] : []
+  }
+  return Object.entries(errors as Record<string, unknown>).flatMap(([k, v]) =>
+    errorFieldPaths(v, prefix ? `${prefix}.${k}` : k),
+  )
+}
+
+const fieldElement = (path: string) =>
+  document.querySelector<HTMLElement>(`.semi-form-field[x-field-id="${path}"]`)
 
 const Dashboard: React.FC = () => {
 const { data: entity, error, isLoading } = useSWR('/v1/configuration', fetcher)
@@ -61,8 +72,34 @@ const { data: entity, error, isLoading } = useSWR('/v1/configuration', fetcher)
 
   const { biliUsers } = useBiliUsers()
 
-  // 平台设置：左列平台名 + 右栏仅展开选中平台。列表来自插件注册表 PlatformPanels
+  // 平台设置：左列平台名是唯一的导航，右栏只显示选中平台的字段。列表来自插件注册表 PlatformPanels
   const [activePlatform, setActivePlatform] = useState(PlatformPanels[0].key)
+  const [activeTab, setActiveTab] = useState(TAB_GLOBAL)
+
+  // 校验失败时出错字段可能藏在未选中的 Tab / 平台面板里（字段全部挂载、只切 hidden），
+  // 用户看不到红字也不知道为什么保存没反应。这里切到第一个出错字段所在的面板并滚过去。
+  const [pendingField, setPendingField] = useState<string | null>(null)
+  const handleSubmitFail = (errors: Record<string, unknown>) => {
+    const fields = errorFieldPaths(errors)
+      .map(path => ({ path, el: fieldElement(path) }))
+      .filter((f): f is { path: string; el: HTMLElement } => !!f.el)
+      .sort((a, b) => (a.el.compareDocumentPosition(b.el) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1))
+    const first = fields[0]
+    if (!first) return
+    const tab = first.el.closest<HTMLElement>('[data-tab]')?.dataset.tab
+    const platform = first.el.closest<HTMLElement>('[data-platform]')?.dataset.platform
+    if (tab) setActiveTab(tab)
+    if (platform) setActivePlatform(platform)
+    setPendingField(first.path)
+    Toast.warning(`有 ${fields.length} 项未通过校验，已定位到第一项`)
+  }
+  useEffect(() => {
+    if (!pendingField) return
+    const el = fieldElement(pendingField)
+    el?.scrollIntoView({ block: 'center', behavior: 'smooth' })
+    el?.querySelector<HTMLElement>('input, textarea')?.focus({ preventScroll: true })
+    setPendingField(null)
+  }, [pendingField])
 
   if (isLoading) {
     return <>Loading</>
@@ -105,92 +142,86 @@ const { data: entity, error, isLoading } = useSWR('/v1/configuration', fetcher)
           </Button>
         }
       />
-      <div className={dc.content}>
-        <main className={styles.rootConfigPanel}>
-          <div className={styles.main}>
-            <div className={styles.content}>
-              <Form
-                className={styles.form}
-                // key={formKey}
-                initValues={entity}
-                onSubmit={async values => {
-                  try {
-                    const payload = { ...values }
-                    if (payload.file_size === undefined || payload.file_size === '') {
-                      payload.file_size = null
-                    }
-                    if (payload.segment_time === undefined || payload.segment_time === '') {
-                      payload.segment_time = null
-                    }
-                    await trigger(payload)
-                    Toast.success('保存成功')
-                  } catch (e: any) {
-                    // error handling
-                    Notification.error({
-                      title: '保存失败',
-                      content: <Typography style={{ maxWidth: 450 }}>{e.message}</Typography>,
-                      // theme: 'light',
-                      // duration: 0,
-                      style: { width: 'min-content' },
-                    })
-                    throw e
-                  }
-                }}
-                getFormApi={formApi => (formRef.current = formApi)}
-              >
-                <Tabs
-                  type="line"
-                  contentStyle={{
-                    margin: '10px 0 0 0',
-                  }}
-                >
-                  <TabPane tab="全局设置" itemKey="1">
-                    {/* 全局设置 */}
-                    <Global />
-                  </TabPane>
-                  <TabPane tab="平台设置" itemKey="2">
-                    {/* 平台设置：左列平台名 + 右栏选中表单 */}
-                    <div className={styles.framePlatformConfig}>
-                      <SectionTitle icon={<IconGlobe size="small" />} title="平台设置" />
-                      <div className={styles.platformLayout}>
-                        <nav className={styles.platformNav}>
-                          {PlatformPanels.map(p => (
-                            <button
-                              key={p.key}
-                              type="button"
-                              className={`${styles.platformNavItem} ${
-                                activePlatform === p.key ? styles.platformNavItemActive : ''
-                              }`}
-                              onClick={() => setActivePlatform(p.key)}
-                            >
-                              {p.name}
-                            </button>
-                          ))}
-                        </nav>
-                        <div className={styles.platformBody}>
-                          {/* 所有平台组件保持挂载(keepDOM),仅展开当前平台面板。
-                              卸载会注销 Semi Form 字段状态,提交时仅剩挂载字段;后端 PUT /configuration
-                              整表覆盖保存,会清空其他平台的参数与凭据 */}
-                          <Collapse keepDOM activeKey={[activePlatform]}>
-                            {PlatformPanels.map(p => (
-                              <p.Component key={p.key} entity={entity} list={list} />
-                            ))}
-                          </Collapse>
-                        </div>
-                      </div>
-                    </div>
-                  </TabPane>
-                  <TabPane tab="开发者选项" itemKey="3">
-                    {/* 开发者选项 */}
-                    <Developer />
-                  </TabPane>
-                </Tabs>
-                <Space />
-                <Space style={{ height: '160px' }} />
-              </Form>
-            </div>
-          </div>
-        </main>
+      {/* 页头下方占满剩余高度；每个 Tab 面板在内部滚动，页面本身不滚，「保存」始终可见 */}
+      <div className={styles.page}>
+        <Form
+          className={styles.form}
+          initValues={entity}
+          onSubmit={async values => {
+            try {
+              const payload = { ...values }
+              if (payload.file_size === undefined || payload.file_size === '') {
+                payload.file_size = null
+              }
+              if (payload.segment_time === undefined || payload.segment_time === '') {
+                payload.segment_time = null
+              }
+              await trigger(payload)
+              Toast.success('保存成功')
+            } catch (e: any) {
+              // error handling
+              Notification.error({
+                title: '保存失败',
+                content: <Typography style={{ maxWidth: 450 }}>{e.message}</Typography>,
+                // theme: 'light',
+                // duration: 0,
+                style: { width: 'min-content' },
+              })
+              throw e
+            }
+          }}
+          onSubmitFail={handleSubmitFail}
+          getFormApi={formApi => (formRef.current = formApi)}
+        >
+          <Tabs type="line" className={styles.tabs} activeKey={activeTab} onChange={setActiveTab}>
+            <TabPane tab="全局设置" itemKey={TAB_GLOBAL}>
+              <div className={styles.pane} data-tab={TAB_GLOBAL}>
+                <Global />
+              </div>
+            </TabPane>
+            <TabPane tab="平台设置" itemKey={TAB_PLATFORM}>
+              {/* 左列平台列表 + 右栏选中平台的字段，两栏并排、各自独立滚动 */}
+              <div className={styles.platformLayout} data-tab={TAB_PLATFORM}>
+                <nav className={styles.platformNav} aria-label="平台列表">
+                  {PlatformPanels.map(p => (
+                    <button
+                      key={p.key}
+                      type="button"
+                      className={`${styles.platformNavItem} ${
+                        activePlatform === p.key ? styles.platformNavItemActive : ''
+                      }`}
+                      aria-pressed={activePlatform === p.key}
+                      onClick={() => setActivePlatform(p.key)}
+                    >
+                      {p.name}
+                    </button>
+                  ))}
+                </nav>
+                <div className={styles.platformBody}>
+                  {/* 所有平台的字段始终保持挂载，只用 hidden 切换显示。
+                      卸载会注销 Semi Form 字段状态，提交时仅剩挂载字段；后端 PUT /configuration
+                      整表覆盖保存，会清空其他平台的参数与凭据 */}
+                  {PlatformPanels.map(p => (
+                    <section
+                      key={p.key}
+                      className={styles.platformPanel}
+                      hidden={activePlatform !== p.key}
+                      aria-label={p.name}
+                      data-platform={p.key}
+                    >
+                      <p.Component entity={entity} list={list} bare />
+                    </section>
+                  ))}
+                </div>
+              </div>
+            </TabPane>
+            <TabPane tab="开发者选项" itemKey={TAB_DEVELOPER}>
+              <div className={styles.pane} data-tab={TAB_DEVELOPER}>
+                <Developer />
+              </div>
+            </TabPane>
+          </Tabs>
+        </Form>
       </div>
     </>
   )
diff --git a/app/(app)/layout.module.scss b/app/(app)/layout.module.scss
index 4872f25..c874109 100644
--- a/app/(app)/layout.module.scss
+++ b/app/(app)/layout.module.scss
@@ -1,8 +1,12 @@
 /* ===== 应用骨架:自绘侧边栏 ===== */
 
+/* 应用壳：整体占满视口且自身不滚动；侧栏是固定宽度的普通子元素，
+   主内容区（.main）独立滚动。页面本身不滚，长内容不会把侧栏顶出视口（#1705） */
 .app {
   display: flex;
-  min-height: 100vh;
+  height: 100vh;
+  height: 100dvh;
+  overflow: hidden;
   background: var(--semi-color-bg-0);
 }
 
@@ -17,14 +21,13 @@
 }
 
 /* ===== 侧边栏 ===== */
+/* 撑满应用壳高度；导航项多于一屏时只有 .nav 内部滚动 */
 .sider {
   width: 220px;
   flex-shrink: 0;
   display: flex;
   flex-direction: column;
-  position: sticky;
-  top: 0;
-  height: 100vh;
+  height: 100%;
   background: var(--semi-color-bg-1);
   border-right: 1px solid var(--semi-color-border);
   transition: width 0.18s ease, transform 0.2s ease;
@@ -265,12 +268,14 @@
   height: 16px;
 }
 
-/* ===== 主内容区 ===== */
+/* ===== 主内容区：唯一的滚动容器，页头（PageHeader）的 position: sticky 相对它吸顶 ===== */
 .main {
   flex: 1;
   min-width: 0;
+  min-height: 0;
   display: flex;
   flex-direction: column;
+  overflow: auto;
 }
 
 /* ===== 移动端抽屉 ===== */
diff --git a/app/styles/dashboard.module.scss b/app/styles/dashboard.module.scss
index 75fa238..0de54a4 100644
--- a/app/styles/dashboard.module.scss
+++ b/app/styles/dashboard.module.scss
@@ -1,325 +1,76 @@
-@media screen and (min-width: 640px) {
-    .rootConfigPanel {
-        padding: 0px 50px 0px 30px;
-        //align-items: center;
-        //background: var(--semi-color-bg-0);
-        //flex-direction: column;
-        //height: auto;
-        //overflow: auto;
-        //row-gap: 0;
-        //min-width: auto;
-        //max-width: auto;
-        //display: flex;
-        //color: var(--semi-color-text-0);
-        //font-family: Inter;
-        //font-size: 20px;
-        //font-weight: 600;
-        //letter-spacing: 0.4px;
-        //line-height: 28px;
-        //text-align: left;
-
-        .main {
-            //align-items: center;
-            display: flex;
-            flex-basis: 0;
-            flex-direction: column;
-            flex-grow: 1;
-            //padding: 40px 0px 0px;
-            row-gap: 32px;
-            align-self: stretch;
-
-            .content {
-                //align-items: flex-start;
-                //align-items: center;
-                display: inline-flex;
-                flex-direction: column;
-                row-gap: 32px;
-                flex-shrink: 0;
-
-                .item {
-                    min-width: 175px;
-                    vertical-align: middle;
-                    flex-shrink: 0;
-                }
-
-                .form {
-                    //align-items: flex-start;
-                    //align-items: center;
-                    //display: flex;
-                    //flex-direction: column;
-                    //row-gap: 16px;
-                    //min-width: 50px;
-                    //max-width: 965px;
-                    flex-shrink: 0;
-                    //color: var(--semi-color-text-0);
-                    //font-family: "PingFang SC";
-                    //font-size: 16px;
-                    //font-weight: 500;
-                    //letter-spacing: 0.32px;
-                    //line-height: 22px;
-                    //text-align: left;
-
-                    .frameDownload {
-                        //align-items: flex-start;
-                        border-color: rgb(var(--semi-grey-2));
-                        border-radius: 6px;
-                        border-style: solid;
-                        border-width: 1px;
-                        display: flex;
-                        flex-direction: column;
-                        flex-shrink: 0;
-                        padding: 25px 50px 50px;
-                        row-gap: 10px;
-                        align-self: stretch;
-                        min-width: 12px;
-                        max-width: auto;
-
-                        .frameInside {
-                            align-items: center;
-                            column-gap: 4px;
-                            display: inline-flex;
-                            flex-shrink: 0;
-
-                            .group {
-                                height: 20px;
-                                position: relative;
-                                width: 20px;
-                                flex-shrink: 0;
-
-                                .buttonOnlyIconSecond {
-                                    background: rgb(16, 192, 25);
-                                    border-radius: 8px;
-                                    height: 20px;
-                                    left: 0;
-                                    overflow: hidden;
-                                    top: 0;
-                                    width: 20px;
-                                    position: absolute;
-                                }
-
-                                .lineStory {
-                                    height: 10px;
-                                    left: 4.5px;
-                                    overflow: hidden;
-                                    top: 4.5px;
-                                    width: 12px;
-                                    position: absolute;
-                                }
-                            }
-
-                            .meegoSharedWebWorkIt {
-                                min-width: 68px;
-                                vertical-align: bottom;
-                                flex-shrink: 0;
-                            }
-                        }
-                    }
-                    .frameUpload {
-                        align-items: flex-start;
-                        border-color: rgb(var(--semi-grey-2));
-                        border-radius: 6px;
-                        border-style: solid;
-                        border-width: 1px;
-                        display: flex;
-                        flex-direction: column;
-                        flex-shrink: 0;
-                        padding: 25px 50px 50px;
-                        row-gap: 10px;
-                        align-self: stretch;
-
-                        .frameInside {
-                            align-items: center;
-                            column-gap: 4px;
-                            display: inline-flex;
-                            flex-shrink: 0;
-
-                            .group {
-                                height: 20px;
-                                position: relative;
-                                width: 20px;
-                                flex-shrink: 0;
-
-                                .buttonOnlyIconSecond {
-                                    background: rgb(236, 23, 66);
-                                    border-radius: 8px;
-                                    height: 20px;
-                                    left: 0;
-                                    overflow: hidden;
-                                    top: 0;
-                                    width: 20px;
-                                    position: absolute;
-                                }
-
-                                .lineStory {
-                                    height: 10px;
-                                    left: 4.5px;
-                                    overflow: hidden;
-                                    top: 4.5px;
-                                    width: 12px;
-                                    position: absolute;
-                                }
-                            }
-
-                            .meegoSharedWebWorkIt {
-                                min-width: 68px;
-                                vertical-align: bottom;
-                                flex-shrink: 0;
-                            }
-                        }
-                    }
-
-                    .framePlatformConfig {
-                        align-items: flex-start;
-                        border-color: rgb(var(--semi-grey-2));
-                        border-radius: 6px;
-                        border-style: solid;
-                        border-width: 1px;
-                        display: flex;
-                        flex-direction: column;
-                        flex-shrink: 0;
-                        padding: 25px 50px 50px;
-                        row-gap: 10px;
-                        align-self: stretch;
-
-                        .frameInside {
-                            align-items: center;
-                            column-gap: 4px;
-                            display: inline-flex;
-                            flex-shrink: 0;
-
-                            .group {
-                                height: 20px;
-                                position: relative;
-                                width: 20px;
-                                flex-shrink: 0;
-
-                                .outlinedVersion {
-                                    height: 10px;
-                                    left: 5px;
-                                    overflow: hidden;
-                                    top: 5px;
-                                    width: 10px;
-                                    position: absolute;
-                                }
-
-                                .buttonOnlyIconSecond {
-                                    background: rgb(47, 76, 206);
-                                    border-radius: 8px;
-                                    height: 20px;
-                                    left: 0;
-                                    overflow: hidden;
-                                    top: 0;
-                                    width: 20px;
-                                    position: absolute;
-                                }
-                                .lineStory {
-                                    height: 15px;
-                                    left: 4.5px;
-                                    overflow: hidden;
-                                    top: 4.1px;
-                                    width: 12px;
-                                    position: absolute;
-                                }
-                            }
-
-                            .meegoSharedWebSettin {
-                                min-width: 68px;
-                                vertical-align: bottom;
-                                flex-shrink: 0;
-                            }
-                        }
-                    }
-
-                    .frameDeveloper {
-                        align-items: flex-start;
-                        border-color: rgb(var(--semi-grey-2));
-                        border-radius: 6px;
-                        border-style: solid;
-                        border-width: 1px;
-                        display: flex;
-                        flex-direction: column;
-                        flex-shrink: 0;
-                        padding: 25px 50px 50px;
-                        row-gap: 10px;
-                        align-self: stretch;
-
-                        .frameInside {
-                            align-items: center;
-                            column-gap: 4px;
-                            display: inline-flex;
-                            flex-shrink: 0;
-
-                            .group {
-                                height: 20px;
-                                position: relative;
-                                width: 20px;
-                                flex-shrink: 0;
-
-                                .outlinedVersion {
-                                    height: 10px;
-                                    left: 5px;
-                                    overflow: hidden;
-                                    top: 5px;
-                                    width: 10px;
-                                    position: absolute;
-                                }
-
-                                .buttonOnlyIconSecond {
-                                    background: rgb(200, 109, 5);
-                                    border-radius: 8px;
-                                    height: 20px;
-                                    left: 0;
-                                    overflow: hidden;
-                                    top: 0;
-                                    width: 20px;
-                                    position: absolute;
-                                }
-                                .lineStory {
-                                    height: 15px;
-                                    left: 4.5px;
-                                    overflow: hidden;
-                                    top: 4.1px;
-                                    width: 12px;
-                                    position: absolute;
-                                }
-                            }
-
-                            .meegoSharedWebSettin {
-                                min-width: 68px;
-                                vertical-align: bottom;
-                                flex-shrink: 0;
-                            }
-                        }
-                    }
-                    .line {
-                        flex-shrink: 0;
-                        height: 0;
-                        align-self: stretch;
-                    }
-                }
-            }
-        }
-    }
+/* 空间配置页
+   页头下方是 Tabs，每个 Tab 面板占满剩余高度并在自己内部滚动；
+   页面本身（应用壳的 .main）不滚动，页头的「保存」始终可见。 */
+.page {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  max-width: 1280px;
+  margin: 0 auto;
+  box-sizing: border-box;
+  padding: 12px 28px 20px;
 }
 
-/* 表单卡片：必须加实色背景，避免全局背景图穿透导致文字不可读 */
+/* Semi 的 Form / Tabs 默认按内容撑开，这里让它们把剩余高度让给当前面板
+   （semi-tabs-pane-motion-overlay 是开启切换动画时 Semi 多包的一层） */
+.form,
+.tabs,
+.tabs :global(.semi-tabs-content),
+.tabs :global(.semi-tabs-pane),
+.tabs :global(.semi-tabs-pane-motion-overlay) {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+.tabs :global(.semi-tabs-content) {
+  padding: 0;
+}
+/* 上面的 display: flex 特异性高于 Semi 自己的 .semi-tabs-pane-inactive，未选中的面板要补回隐藏 */
+.tabs :global(.semi-tabs-pane-inactive) {
+  display: none;
+}
+
+/* 全局设置 / 开发者选项：面板自身滚动 */
+.pane {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 16px 4px 32px;
+}
+
+/* 表单分区：不再套卡片，只用分区标题 + 分隔线区分 */
 .frameDownload,
 .frameUpload,
-.framePlatformConfig,
 .frameDeveloper {
-  background: var(--semi-color-bg-1);
+  display: flex;
+  flex-direction: column;
+  row-gap: 10px;
+}
+.frameUpload {
+  margin-top: 24px;
+  padding-top: 24px;
+  border-top: 1px solid var(--semi-color-border);
 }
 
-/* 平台设置：左列平台名 + 右栏选中表单 */
+/* 平台设置：左列平台列表 + 右栏选中平台的字段。两栏并排、各自独立滚动，
+   右栏再长，列表也不会跟着滚走 */
 .platformLayout {
+  flex: 1;
+  min-height: 0;
   display: flex;
   gap: 16px;
-  align-items: flex-start;
-  margin-top: 16px;
+  padding-top: 16px;
 }
 .platformNav {
   width: 160px;
   flex-shrink: 0;
+  align-self: flex-start;
+  max-height: 100%;
+  box-sizing: border-box;
+  overflow-y: auto;
   display: flex;
   flex-direction: column;
   gap: 4px;
@@ -351,30 +102,44 @@
 .platformBody {
   flex: 1;
   min-width: 0;
+  min-height: 0;
+  overflow-y: auto;
+  padding-bottom: 32px;
+}
+/* 右栏：只显示选中平台的字段；不设 display，以免覆盖 hidden 属性 */
+.platformPanel {
+  padding: 4px 16px 8px 8px;
 }
 
-/* 移动端：卡片内边距收紧，避免左右留白/溢出 */
+/* 自定义背景开启时表单直接铺在背景图上，给滚动面板垫一层半透明底色保证可读 */
+:global(body.app-has-bg) .pane,
+:global(body.app-has-bg) .platformBody {
+  background: color-mix(in srgb, var(--semi-color-bg-1) 75%, transparent);
+  border-radius: 12px;
+}
+
+/* 移动端：两栏改为上下堆叠，平台列表变成横向滑动的标签行，仍不随内容滚走 */
 @media (max-width: 680px) {
-  .rootConfigPanel {
-    padding: 0 12px !important;
-  }
-  .frameDownload,
-  .frameUpload,
-  .framePlatformConfig,
-  .frameDeveloper {
-    padding: 16px 14px 24px !important;
-    border-radius: 10px;
+  .page {
+    padding: 8px 12px 12px;
   }
   .platformLayout {
     flex-direction: column;
+    gap: 10px;
+    padding-top: 10px;
   }
   .platformNav {
     width: 100%;
+    max-height: none;
+    align-self: stretch;
     flex-direction: row;
     overflow-x: auto;
-    flex-shrink: 0;
+    overflow-y: hidden;
   }
   .platformNavItem {
     white-space: nowrap;
   }
+  .platformPanel {
+    padding: 4px 4px 8px;
+  }
 }
diff --git a/app/ui/plugins/PlatformPanel.tsx b/app/ui/plugins/PlatformPanel.tsx
new file mode 100644
index 0000000..eb6f4b9
--- /dev/null
+++ b/app/ui/plugins/PlatformPanel.tsx
@@ -0,0 +1,28 @@
+'use client'
+import React from 'react'
+import { Collapse } from '@douyinfe/semi-ui'
+
+type Props = {
+  header: string
+  itemKey: string
+  /**
+   * 只输出字段，不套 Collapse.Panel。
+   * 空间配置页由左侧平台列表负责切换，右侧再出现一排带平台名的折叠栏就是重复导航（#1705）；
+   * 直播管理页的「配置覆写」弹窗仍以 Collapse.Panel 形式嵌在 Collapse 里。
+   */
+  bare?: boolean
+  children: React.ReactNode
+}
+
+const PlatformPanel: React.FC<Props> = ({ header, itemKey, bare, children }) => {
+  if (bare) {
+    return <>{children}</>
+  }
+  return (
+    <Collapse.Panel header={header} itemKey={itemKey}>
+      {children}
+    </Collapse.Panel>
+  )
+}
+
+export default PlatformPanel
diff --git a/app/ui/plugins/bilibili.tsx b/app/ui/plugins/bilibili.tsx
index 19db194..94d6f4e 100644
--- a/app/ui/plugins/bilibili.tsx
+++ b/app/ui/plugins/bilibili.tsx
@@ -1,15 +1,17 @@
 'use client'
 import React, { useEffect } from 'react'
-import { Form, Select, Collapse, useFormApi } from '@douyinfe/semi-ui'
+import { Form, Select, useFormApi } from '@douyinfe/semi-ui'
+import PlatformPanel from './PlatformPanel'
 
 type Props = {
   entity: any
   list: any
   initValues?: Record<string, any>
+  bare?: boolean
 }
 
 const Bilibili: React.FC<Props> = props => {
-  const { entity, list, initValues } = props
+  const { entity, list, initValues, bare } = props
   const formApi = useFormApi()
 
   useEffect(() => {
@@ -22,7 +24,7 @@ const Bilibili: React.FC<Props> = props => {
 
   return (
     <>
-      <Collapse.Panel header="哔哩哔哩" itemKey="bilibili">
+      <PlatformPanel header="哔哩哔哩" itemKey="bilibili" bare={bare}>
         <Form.Select
           allowCreate={true}
           filter
@@ -273,7 +275,7 @@ const Bilibili: React.FC<Props> = props => {
           }}
           showClear={true}
         />
-      </Collapse.Panel>
+      </PlatformPanel>
     </>
   )
 }
diff --git a/app/ui/plugins/cc.tsx b/app/ui/plugins/cc.tsx
index ec4b475..4bcd03a 100644
--- a/app/ui/plugins/cc.tsx
+++ b/app/ui/plugins/cc.tsx
@@ -1,15 +1,17 @@
 'use client'
 import React, { useEffect } from 'react'
-import { Form, Select, Collapse, useFormApi } from '@douyinfe/semi-ui'
+import { Form, Select, useFormApi } from '@douyinfe/semi-ui'
+import PlatformPanel from './PlatformPanel'
 
 type Props = {
   entity: any
   list: any
   initValues?: Record<string, any>
+  bare?: boolean
 }
 
 const CC: React.FC<Props> = props => {
-  const { entity, list, initValues } = props
+  const { entity, list, initValues, bare } = props
   const formApi = useFormApi()
 
   useEffect(() => {
@@ -22,7 +24,7 @@ const CC: React.FC<Props> = props => {
 
   return (
     <>
-      <Collapse.Panel header="CC" itemKey="cc">
+      <PlatformPanel header="CC" itemKey="cc" bare={bare}>
         <Form.Select
           field="cc_protocol"
           extraText="CC 直播流协议，默认 hls。录制经常异常断开、分段过多时可尝试切换为 flv。"
@@ -38,7 +40,7 @@ const CC: React.FC<Props> = props => {
           <Select.Option value="flv">flv</Select.Option>
           <Select.Option value="hls">hls（默认）</Select.Option>
         </Form.Select>
-      </Collapse.Panel>
+      </PlatformPanel>
     </>
   )
 }
diff --git a/app/ui/plugins/cookie.tsx b/app/ui/plugins/cookie.tsx
index 8d57be2..b34e090 100644
--- a/app/ui/plugins/cookie.tsx
+++ b/app/ui/plugins/cookie.tsx
@@ -1,10 +1,12 @@
 'use client'
 import React from 'react'
-import { Form, Select, Collapse } from '@douyinfe/semi-ui'
+import { Form, Select } from '@douyinfe/semi-ui'
+import PlatformPanel from './PlatformPanel'
 
 type Props = {
   entity: any
   list: any
+  bare?: boolean
 }
 
 const Cookie: React.FC<Props> = props => {
@@ -12,7 +14,7 @@ const Cookie: React.FC<Props> = props => {
   const list = props.list
   return (
     <>
-      <Collapse.Panel header="用户 Cookie" itemKey="user">
+      <PlatformPanel header="用户 Cookie" itemKey="user" bare={props.bare}>
         <Form.Input
           field="user.kuaishou_cookie"
           extraText={
@@ -94,7 +96,7 @@ const Cookie: React.FC<Props> = props => {
             padding: 0,
           }}
         />
-      </Collapse.Panel>
+      </PlatformPanel>
     </>
   )
 }
diff --git a/app/ui/plugins/douyin.tsx b/app/ui/plugins/douyin.tsx
index f47a008..8c9de6d 100644
--- a/app/ui/plugins/douyin.tsx
+++ b/app/ui/plugins/douyin.tsx
@@ -1,15 +1,17 @@
 'use client'
 import React, { useEffect } from 'react'
-import { Form, Select, Collapse, useFormApi } from '@douyinfe/semi-ui'
+import { Form, Select, useFormApi } from '@douyinfe/semi-ui'
+import PlatformPanel from './PlatformPanel'
 
 type Props = {
   entity: any
   list: any
   initValues?: Record<string, any>
+  bare?: boolean
 }
 
 const Douyin: React.FC<Props> = props => {
-  const { entity, list, initValues } = props
+  const { entity, list, initValues, bare } = props
   const formApi = useFormApi()
 
   useEffect(() => {
@@ -22,7 +24,7 @@ const Douyin: React.FC<Props> = props => {
 
   return (
     <>
-      <Collapse.Panel header="抖音" itemKey="douyin">
+      <PlatformPanel header="抖音" itemKey="douyin" bare={bare}>
         <Form.Select
           field="douyin_quality"
           extraText={
@@ -122,7 +124,7 @@ const Douyin: React.FC<Props> = props => {
             padding: 0,
           }}
         />
-      </Collapse.Panel>
+      </PlatformPanel>
     </>
   )
 }
diff --git a/app/ui/plugins/douyu.tsx b/app/ui/plugins/douyu.tsx
index 4f1d8b3..6ed190a 100644
--- a/app/ui/plugins/douyu.tsx
+++ b/app/ui/plugins/douyu.tsx
@@ -1,15 +1,17 @@
 'use client'
 import React, { useEffect } from 'react'
-import { Form, Select, Collapse, useFormApi } from '@douyinfe/semi-ui'
+import { Form, Select, useFormApi } from '@douyinfe/semi-ui'
+import PlatformPanel from './PlatformPanel'
 
 type Props = {
   entity: any
   list: any
   initValues?: Record<string, any>
+  bare?: boolean
 }
 
 const Douyu: React.FC<Props> = props => {
-  const { entity, list, initValues } = props
+  const { entity, list, initValues, bare } = props
   const formApi = useFormApi()
 
   useEffect(() => {
@@ -22,7 +24,7 @@ const Douyu: React.FC<Props> = props => {
 
   return (
     <>
-      <Collapse.Panel header="斗鱼" itemKey="douyu">
+      <PlatformPanel header="斗鱼" itemKey="douyu" bare={bare}>
         <Form.Select
           allowCreate={true}
           filter
@@ -102,7 +104,7 @@ const Douyu: React.FC<Props> = props => {
             padding: 0,
           }}
         />
-      </Collapse.Panel>
+      </PlatformPanel>
     </>
   )
 }
diff --git a/app/ui/plugins/huya.tsx b/app/ui/plugins/huya.tsx
index 17f4052..7697dbb 100644
--- a/app/ui/plugins/huya.tsx
+++ b/app/ui/plugins/huya.tsx
@@ -1,15 +1,17 @@
 'use client'
 import React, { useEffect } from 'react'
-import { Form, Select, Collapse, useFormApi } from '@douyinfe/semi-ui'
+import { Form, Select, useFormApi } from '@douyinfe/semi-ui'
+import PlatformPanel from './PlatformPanel'
 
 type Props = {
   entity: any
   list: any
   initValues?: Record<string, any>
+  bare?: boolean
 }
 
 const Huya: React.FC<Props> = props => {
-  const { entity, list, initValues } = props
+  const { entity, list, initValues, bare } = props
   const formApi = useFormApi()
 
   useEffect(() => {
@@ -22,7 +24,7 @@ const Huya: React.FC<Props> = props => {
 
   return (
     <>
-      <Collapse.Panel header="虎牙" itemKey="huya">
+      <PlatformPanel header="虎牙" itemKey="huya" bare={bare}>
         <Form.Select
           allowCreate={true}
           filter
@@ -144,7 +146,7 @@ const Huya: React.FC<Props> = props => {
             padding: 0,
           }}
         />
-      </Collapse.Panel>
+      </PlatformPanel>
     </>
   )
 }
diff --git a/app/ui/plugins/index.ts b/app/ui/plugins/index.ts
index 1ac53c5..9fba8e8 100644
--- a/app/ui/plugins/index.ts
+++ b/app/ui/plugins/index.ts
@@ -40,7 +40,8 @@ const plugins = {
 
 /**
  * 空间配置「平台设置」左栏的展示顺序与文案。
- * key 必须与各插件 Collapse.Panel 的 itemKey 一致；新增插件时在这里登记一行即可出现在 UI 里。
+ * 各插件组件接受 `bare` 属性：为 true 时只渲染字段（空间配置页），否则渲染成 Collapse.Panel（配置覆写弹窗）。
+ * 新增插件时在这里登记一行即可出现在 UI 里。
  */
 export const PlatformPanels: { key: string; name: string; Component: React.FC<any> }[] = [
   { key: 'bilibili', name: '哔哩哔哩', Component: Bilibili },
diff --git a/app/ui/plugins/kilakila.tsx b/app/ui/plugins/kilakila.tsx
index ff1d98e..cf0af7a 100644
--- a/app/ui/plugins/kilakila.tsx
+++ b/app/ui/plugins/kilakila.tsx
@@ -1,15 +1,17 @@
 'use client'
 import React, { useEffect } from 'react'
-import { Form, Select, Collapse, useFormApi } from '@douyinfe/semi-ui'
+import { Form, Select, useFormApi } from '@douyinfe/semi-ui'
+import PlatformPanel from './PlatformPanel'
 
 type Props = {
   entity: any
   list: any
   initValues?: Record<string, any>
+  bare?: boolean
 }
 
 const Kilakila: React.FC<Props> = props => {
-  const { entity, list, initValues } = props
+  const { entity, list, initValues, bare } = props
   const formApi = useFormApi()
 
   useEffect(() => {
@@ -22,7 +24,7 @@ const Kilakila: React.FC<Props> = props => {
 
   return (
     <>
-      <Collapse.Panel header="克拉克拉" itemKey="kilakila">
+      <PlatformPanel header="克拉克拉" itemKey="kilakila" bare={bare}>
         <Form.Select
           field="kila_protocol"
           extraText="直播流协议，默认 hls"
@@ -38,7 +40,7 @@ const Kilakila: React.FC<Props> = props => {
           <Select.Option value="hls">hls</Select.Option>
           <Select.Option value="flv">flv</Select.Option>
         </Form.Select>
-      </Collapse.Panel>
+      </PlatformPanel>
     </>
   )
 }
diff --git a/app/ui/plugins/twitcasting.tsx b/app/ui/plugins/twitcasting.tsx
index fd943c3..921c55c 100644
--- a/app/ui/plugins/twitcasting.tsx
+++ b/app/ui/plugins/twitcasting.tsx
@@ -1,15 +1,17 @@
 'use client'
 import React, { useEffect } from 'react'
-import { Form, Select, Collapse, useFormApi } from '@douyinfe/semi-ui'
+import { Form, Select, useFormApi } from '@douyinfe/semi-ui'
+import PlatformPanel from './PlatformPanel'
 
 type Props = {
   entity: any
   list: any
   initValues?: Record<string, any>
+  bare?: boolean
 }
 
 const TwitCasting: React.FC<Props> = props => {
-  const { entity, list, initValues } = props
+  const { entity, list, initValues, bare } = props
   const formApi = useFormApi()
 
   useEffect(() => {
@@ -22,7 +24,7 @@ const TwitCasting: React.FC<Props> = props => {
 
   return (
     <>
-      <Collapse.Panel header="TwitCasting" itemKey="twitcasting">
+      <PlatformPanel header="TwitCasting" itemKey="twitcasting" bare={bare}>
         <Form.Select
           field="twitcasting_quality"
           extraText="录制画质，默认取最高可用画质。所选画质不存在时自动降到更低一档；更低的也没有时取最高可用画质。"
@@ -72,7 +74,7 @@ const TwitCasting: React.FC<Props> = props => {
             padding: 0,
           }}
         />
-      </Collapse.Panel>
+      </PlatformPanel>
     </>
   )
 }
diff --git a/app/ui/plugins/twitch.tsx b/app/ui/plugins/twitch.tsx
index dc2ea91..f6eeea1 100644
--- a/app/ui/plugins/twitch.tsx
+++ b/app/ui/plugins/twitch.tsx
@@ -1,15 +1,17 @@
 'use client'
 import React, { useEffect } from 'react'
-import { Form, Select, Collapse, useFormApi } from '@douyinfe/semi-ui'
+import { Form, Select, useFormApi } from '@douyinfe/semi-ui'
+import PlatformPanel from './PlatformPanel'
 
 type Props = {
   entity: any
   list: any
   initValues?: Record<string, any>
+  bare?: boolean
 }
 
 const Twitch: React.FC<Props> = props => {
-  const { entity, list, initValues } = props
+  const { entity, list, initValues, bare } = props
   const formApi = useFormApi()
 
   useEffect(() => {
@@ -22,7 +24,7 @@ const Twitch: React.FC<Props> = props => {
 
   return (
     <>
-      <Collapse.Panel header="Twitch" itemKey="twitch">
+      <PlatformPanel header="Twitch" itemKey="twitch" bare={bare}>
         <Form.Switch
           field="twitch_danmaku"
           extraText="录制 Twitch 弹幕，默认关闭"
@@ -75,7 +77,7 @@ const Twitch: React.FC<Props> = props => {
             padding: 0,
           }}
         />
-      </Collapse.Panel>
+      </PlatformPanel>
     </>
   )
 }
diff --git a/app/ui/plugins/youtube.tsx b/app/ui/plugins/youtube.tsx
index 1143fad..2b855c5 100644
--- a/app/ui/plugins/youtube.tsx
+++ b/app/ui/plugins/youtube.tsx
@@ -1,15 +1,17 @@
 'use client'
 import React, { useEffect } from 'react'
-import { Form, Select, Collapse, useFormApi } from '@douyinfe/semi-ui'
+import { Form, Select, useFormApi } from '@douyinfe/semi-ui'
+import PlatformPanel from './PlatformPanel'
 
 type Props = {
   entity: any
   list: any
   initValues?: Record<string, any>
+  bare?: boolean
 }
 
 const YouTube: React.FC<Props> = props => {
-  const { entity, list, initValues } = props
+  const { entity, list, initValues, bare } = props
   const formApi = useFormApi()
 
   useEffect(() => {
@@ -22,7 +24,7 @@ const YouTube: React.FC<Props> = props => {
 
   return (
     <>
-      <Collapse.Panel header="YouTube" itemKey="youtube">
+      <PlatformPanel header="YouTube" itemKey="youtube" bare={bare}>
         <Form.Input
           field="user.youtube_cookie"
           extraText={
@@ -166,7 +168,7 @@ const YouTube: React.FC<Props> = props => {
             padding: 0,
           }}
         />
-      </Collapse.Panel>
+      </PlatformPanel>
     </>
   )
 }