Remove persistent project inspector

apps/senlinai-acro-react/scripts/visual-check.mjs

@@ -35,8 +35,6 @@ const collectMetrics = async () => page.evaluate(() => {
   const channelList = document.querySelector('.channel-list')
   const stage = document.querySelector('.stage')
   const inspector = document.querySelector('.inspector')
-  const inspectorTabsContent = document.querySelector('.inspector .arco-tabs-content')
-  const propertyList = document.querySelector('.property-list')
   const workspaceActions = [...document.querySelectorAll('.workspace-page .overview-head .arco-btn')]
     .map((button) => button.textContent?.trim())
   const dashboard = document.querySelector('.dashboard-button')
@@ -97,8 +95,6 @@ const collectMetrics = async () => page.evaluate(() => {
     channelListOverflow: overflowState(channelList),
     stageOverflow: overflowState(stage),
     inspectorOverflow: overflowState(inspector),
-    inspectorTabsContentOverflow: overflowState(inspectorTabsContent),
-    propertyListOverflow: overflowState(propertyList),
     overflowX: document.documentElement.scrollWidth > document.documentElement.clientWidth,
     viewportWidth: window.innerWidth,
   }
@@ -121,17 +117,8 @@ await page.locator('.channel-sidebar').hover()
 const channelSidebarHoverMetrics = await collectMetrics()
 await page.locator('.stage').hover()
 const stageHoverMetrics = await collectMetrics()
-await page.locator('.inspector').hover()
-const inspectorHoverMetrics = await collectMetrics()
 await page.locator('.channel-list').hover()
 const channelListHoverMetrics = await collectMetrics()
-await page.locator('.inspector .arco-tabs-content').hover()
-const inspectorTabsContentHoverMetrics = await collectMetrics()
-await page.getByText('属性', { exact: true }).click()
-await page.waitForTimeout(200)
-const propertyMetrics = await collectMetrics()
-await page.locator('.property-list').hover()
-const propertyListHoverMetrics = await collectMetrics()
 
 const channelPageChecks = []
 for (const channel of [
@@ -167,11 +154,7 @@ console.log(JSON.stringify({
   projectMetrics,
   channelSidebarHoverMetrics,
   stageHoverMetrics,
-  inspectorHoverMetrics,
   channelListHoverMetrics,
-  inspectorTabsContentHoverMetrics,
-  propertyMetrics,
-  propertyListHoverMetrics,
   channelPageChecks,
   errors,
 }, null, 2))
@@ -249,16 +232,19 @@ if (!projectMetrics.hasProjectOverview) failures.push('expected first project cl
 if (projectMetrics.hasWorkspacePage) failures.push('expected project overview mode to leave workspace page')
 if (!projectMetrics.projectButtonActive) failures.push('expected first project button to be active in project mode')
 if (projectMetrics.dashboardButtonActive) failures.push('expected dashboard button not to be active in project mode')
-if (!projectMetrics.projectRail || !projectMetrics.channelSidebar || !projectMetrics.stage || !projectMetrics.inspector) {
+if (projectMetrics.inspector) {
+  failures.push(`expected project page to remove right inspector until it becomes an on-demand panel, got ${JSON.stringify(projectMetrics.inspector)}`)
+}
+if (!projectMetrics.projectRail || !projectMetrics.channelSidebar || !projectMetrics.stage) {
   failures.push(
-    `missing project layout regions: rail=${JSON.stringify(projectMetrics.projectRail)}, sidebar=${JSON.stringify(projectMetrics.channelSidebar)}, stage=${JSON.stringify(projectMetrics.stage)}, inspector=${JSON.stringify(projectMetrics.inspector)}`,
+    `missing project layout regions: rail=${JSON.stringify(projectMetrics.projectRail)}, sidebar=${JSON.stringify(projectMetrics.channelSidebar)}, stage=${JSON.stringify(projectMetrics.stage)}`,
   )
 } else {
-  const sameTop = [projectMetrics.projectRail, projectMetrics.channelSidebar, projectMetrics.stage, projectMetrics.inspector]
+  const sameTop = [projectMetrics.projectRail, projectMetrics.channelSidebar, projectMetrics.stage]
     .every((region) => Math.abs(region.top - projectMetrics.projectRail.top) <= 1)
   if (!sameTop) {
     failures.push(
-      `expected project rail, channel sidebar, stage, and inspector to share the same top edge, got rail=${projectMetrics.projectRail.top}, sidebar=${projectMetrics.channelSidebar.top}, stage=${projectMetrics.stage.top}, inspector=${projectMetrics.inspector.top}`,
+      `expected project rail, channel sidebar, and stage to share the same top edge, got rail=${projectMetrics.projectRail.top}, sidebar=${projectMetrics.channelSidebar.top}, stage=${projectMetrics.stage.top}`,
     )
   }
   if (Math.abs(projectMetrics.channelSidebar.left - projectMetrics.projectRail.right) > 1) {
@@ -267,19 +253,14 @@ if (!projectMetrics.projectRail || !projectMetrics.channelSidebar || !projectMet
   if (Math.abs(projectMetrics.stage.left - projectMetrics.channelSidebar.right) > 1) {
     failures.push(`expected stage to sit after channel sidebar, got stage.left=${projectMetrics.stage.left}, sidebar.right=${projectMetrics.channelSidebar.right}`)
   }
-  if (Math.abs(projectMetrics.inspector.left - projectMetrics.stage.right) > 1) {
-    failures.push(`expected inspector to sit after stage, got inspector.left=${projectMetrics.inspector.left}, stage.right=${projectMetrics.stage.right}`)
-  }
-  if (Math.abs(projectMetrics.inspector.right - projectMetrics.viewportWidth) > 1) {
-    failures.push(`expected inspector to end at viewport right edge, got inspector.right=${projectMetrics.inspector.right}, viewport=${projectMetrics.viewportWidth}`)
+  if (Math.abs(projectMetrics.stage.right - projectMetrics.viewportWidth) > 1) {
+    failures.push(`expected project stage to end at viewport right edge, got stage.right=${projectMetrics.stage.right}, viewport=${projectMetrics.viewportWidth}`)
   }
 }
 for (const [name, overflow] of [
   ['channel sidebar', projectMetrics.channelSidebarOverflow],
   ['channel list', projectMetrics.channelListOverflow],
   ['stage', projectMetrics.stageOverflow],
-  ['inspector', projectMetrics.inspectorOverflow],
-  ['inspector tabs content', projectMetrics.inspectorTabsContentOverflow],
 ]) {
   if (!overflow || overflow.overflowX !== 'hidden' || overflow.overflowY !== 'auto') {
     failures.push(`expected ${name} to hide horizontal scrollbars and show vertical scrollbars only when needed, got ${JSON.stringify(overflow)}`)
@@ -292,17 +273,11 @@ for (const [name, overflow] of [
   ['channel sidebar hover', channelSidebarHoverMetrics.channelSidebarOverflow],
   ['channel list hover', channelListHoverMetrics.channelListOverflow],
   ['stage hover', stageHoverMetrics.stageOverflow],
-  ['inspector hover', inspectorHoverMetrics.inspectorOverflow],
-  ['inspector tabs content hover', inspectorTabsContentHoverMetrics.inspectorTabsContentOverflow],
-  ['property list hover', propertyListHoverMetrics.propertyListOverflow],
 ]) {
   if (overflow?.scrollbarWidth !== 'thin') {
     failures.push(`expected ${name} scrollbar to appear on hover, got ${JSON.stringify(overflow)}`)
   }
 }
-if (propertyMetrics.propertyListOverflow?.scrollbarWidth !== 'none') {
-  failures.push(`expected property list scrollbar to be hidden until hover, got ${JSON.stringify(propertyMetrics.propertyListOverflow)}`)
-}
 for (const check of channelPageChecks) {
   if (!check.foundPage) {
     failures.push(`expected ${check.label} to render .${check.pageClass}`)

apps/senlinai-acro-react/src/app/App.tsx

@@ -13,7 +13,7 @@ function App() {
   const [activeView, setActiveView] = useState<WorkbenchView>('workspace')
   const [activeProject, setActiveProject] = useState(projects[0])
   const [activeChannel, setActiveChannel] = useState<ChannelKey>('overview')
-  const [selectedItem, setSelectedItem] = useState('Inbox 待处理（36）')
+  const [, setSelectedItem] = useState('Inbox 待处理（36）')
 
   const dark = theme === 'dark'
 
@@ -27,7 +27,6 @@ function App() {
             activeView={activeView}
             activeProject={activeProject}
             activeChannel={activeChannel}
-            selectedItem={selectedItem}
             theme={theme}
             onSelectWorkspace={() => setActiveView('workspace')}
             onSelectProject={(project) => {

apps/senlinai-acro-react/src/pages/project.tsx

@@ -1,7 +1,6 @@
 import { Layout } from '@arco-design/web-react'
 import { WorkspacePage } from './workspace'
 import { ProjectChannelPage } from './projects/project-channel-page'
-import { ProjectInspector } from './projects/project-inspector'
 import { ProjectRail } from './projects/project-rail'
 import { ProjectSidebar } from './projects/project-sidebar'
 import { ProjectStatusbar } from './projects/project-statusbar'
@@ -14,7 +13,6 @@ export function ProjectPage({
   activeView,
   activeProject,
   activeChannel,
-  selectedItem,
   theme,
   onSelectProject,
   onSelectWorkspace,
@@ -25,7 +23,6 @@ export function ProjectPage({
   activeView: WorkbenchView
   activeProject: Project
   activeChannel: ChannelKey
-  selectedItem: string
   theme: Theme
   onSelectProject: (project: Project) => void
   onSelectWorkspace: () => void
@@ -69,14 +66,6 @@ export function ProjectPage({
           )}
         </Content>
 
-        {!isWorkspace && (
-          <ProjectInspector
-            activeView={activeView}
-            activeProject={activeProject}
-            activeChannel={activeChannel}
-            selectedItem={selectedItem}
-          />
-        )}
       </Layout>
 
       <ProjectStatusbar />