perf: island mod

Author: ZhaoJiSen

i18n/locales/en.json

@@ -941,6 +941,8 @@
     "PrimaryColorDescription": "Used for buttons, selections, and emphasized information.",
     "WorkspaceAppearance": "Workspace appearance",
     "WorkspaceAppearanceDescription": "Adjust how interface text, command terminals, and text editors are displayed.",
+    "ModernIsland": "Modern island",
+    "ModernIslandDescription": "Split the asset tree, session area, and right panel into separate islands with a splitter and accordion.",
     "InterfaceFont": "Interface font",
     "InterfaceFontDescription": "Font used by menus, navigation, and content areas.",
     "InterfaceFontSize": "UI font size",

i18n/locales/zh.json

@@ -944,6 +944,8 @@
     "PrimaryColorDescription": "用于按钮、选中状态和重点信息。",
     "WorkspaceAppearance": "工作区外观",
     "WorkspaceAppearanceDescription": "调整界面文字、命令终端和文本编辑区域的显示效果。",
+    "ModernIsland": "现代分割",
+    "ModernIslandDescription": "将左侧资产树、中间会话区和右侧面板拆成独立岛区，使用可拖拽分割与折叠手风琴。",
     "InterfaceFont": "界面字体",
     "InterfaceFontDescription": "应用菜单、导航和内容区域使用的字体。",
     "InterfaceFontSize": "UI 字号",

ui/assets/css/main.css

@@ -145,6 +145,10 @@
   );
   --workspace-surface-sub-tree: color-mix(in srgb, var(--app-surface-panel-strong) 68%, var(--app-surface-canvas) 32%);
   --workspace-surface-sub-border: color-mix(in srgb, var(--app-border-subtle) 86%, var(--app-surface-panel) 14%);
+  --workspace-island-inset: 6px;
+  --workspace-island-gap: 8px;
+  --workspace-island-radius: 10px;
+  --workspace-island-border: color-mix(in srgb, var(--theme-fg) 12%, transparent);
   --ui-bg: var(--app-surface-canvas);
   --ui-bg-muted: var(--app-surface-sidebar);
   --ui-bg-elevated: var(--app-surface-panel);
@@ -452,3 +456,91 @@ option {
   flex-shrink: 0;
   object-fit: contain;
 }
+
+.workspace-shell[data-island] .workspace-shell__header,
+.workspace-shell[data-island] .header-bg {
+  background-color: var(--app-surface-frame);
+  border-bottom-color: transparent;
+}
+
+.workspace-shell[data-island] .workspace-shell__footer {
+  background-color: var(--app-surface-frame);
+}
+
+.workspace-shell__body--island {
+  padding-top: 0;
+  padding-right: var(--workspace-island-inset);
+  padding-bottom: var(--workspace-island-inset);
+  padding-left: var(--workspace-island-inset);
+  background-color: var(--app-surface-frame);
+}
+
+.workspace-island {
+  display: flex;
+  width: 100%;
+  min-width: 0;
+  min-height: 0;
+  height: 100%;
+  flex: 1 1 auto;
+  flex-direction: column;
+  overflow: hidden;
+  border: 1px solid var(--workspace-island-border);
+  border-top-width: 0;
+  border-radius: 0 0 var(--workspace-island-radius) var(--workspace-island-radius);
+  background-color: var(--app-surface-sidebar);
+}
+
+.workspace-island--main {
+  background-color: var(--app-surface-canvas);
+}
+
+.workspace-island--right {
+  background-color: var(--app-surface-panel);
+}
+
+.workspace-island-accordion {
+  display: flex;
+  min-height: 0;
+  flex: 1;
+  flex-direction: column;
+}
+
+.workspace-island-accordion [data-slot="item"] {
+  display: flex;
+  min-height: 32px;
+  flex-direction: column;
+}
+
+.workspace-island-accordion [data-slot="item"][data-state="open"][data-value="assets"] {
+  min-height: 140px;
+  flex: 1 1 auto;
+}
+
+.workspace-island-accordion [data-slot="item"][data-state="open"]:not([data-value="assets"]) {
+  max-height: 38%;
+  flex: 0 1 auto;
+}
+
+.workspace-island-accordion [data-slot="content"] {
+  min-height: 0;
+  flex: 1;
+  overflow: hidden;
+}
+
+.workspace-shell[data-island] .workspace-shell__sidebar {
+  background-color: transparent;
+  border-right-width: 0;
+}
+
+.workspace-shell[data-island] .workspace-shell__right-panel {
+  background-color: transparent;
+}
+
+.workspace-island--sidebar > * {
+  border-right-width: 0;
+  background-color: transparent;
+}
+
+.workspace-island--right > * {
+  border-left-width: 0;
+}

ui/components/RightPanel/rightPanel.vue

@@ -3,6 +3,7 @@ import type { RightPanelTab } from "~/composables/useRightPanel";
 import { getLionWorkspaceSession } from "@/lion/workspaces/useLionWorkspaceSessionRegistry";
 
 const { t } = useI18n();
+const { modernIsland } = useSettingManager();
 const { activePaneId, activeTab: workspaceTab } = useWorkspaceTabs();
 const { activeWorkspaceMode } = useWorkspaceMode();
 const { activeTab, setActiveTab, setOpen } = useRightPanel();
@@ -77,8 +78,8 @@ watch(
   <aside
     class="flex h-full min-h-0 w-full flex-col"
     :style="{
-      borderLeft: '1px solid var(--app-border)',
-      backgroundColor: 'var(--app-panel-bg)',
+      borderLeft: modernIsland ? '0' : '1px solid var(--app-border)',
+      backgroundColor: modernIsland ? 'transparent' : 'var(--app-panel-bg)',
       color: 'var(--app-fg)'
     }"
   >

ui/components/SideBar/assetTree.vue

@@ -6,6 +6,7 @@ import { useUserInfoStore } from "~/store/modules/userInfo";
 const props = defineProps<{
   search: string;
   open?: boolean;
+  hideHeader?: boolean;
 }>();
 
 const emit = defineEmits<{
@@ -456,7 +457,7 @@ defineExpose({ refresh, loading });
 <template>
   <div
     class="flex min-h-8 flex-col"
-    :class="open === false ? 'h-8 shrink-0' : 'min-h-0 flex-1'"
+    :class="open === false && !hideHeader ? 'h-8 shrink-0' : 'min-h-0 flex-1'"
     role="tree"
     :aria-label="t('Menu.Resource')"
     :data-workspace-tour="search.trim() ? undefined : 'assets'"
@@ -505,6 +506,7 @@ defineExpose({ refresh, loading });
           class="flex h-8 w-full shrink-0 items-center gap-1 px-2.5 text-xs font-medium text-gray-700 dark:text-gray-300"
         >
           <button
+            v-if="!hideHeader"
             type="button"
             class="flex min-w-0 flex-1 cursor-pointer items-center gap-1.5 text-left"
             :aria-expanded="open !== false"
@@ -517,6 +519,7 @@ defineExpose({ refresh, loading });
             />
             <span class="min-w-0 flex-1 truncate">{{ activeTree.label }}</span>
           </button>
+          <div v-else class="min-w-0 flex-1" />
           <div v-if="batchMode" class="flex items-center gap-1 text-[11px] text-gray-500 dark:text-gray-400">
             <span class="hidden sm:inline">{{ t("Tree.SelectedCount", { count: checkedCount }) }}</span>
             <UButton
@@ -586,7 +589,7 @@ defineExpose({ refresh, loading });
           </div>
         </div>
 
-        <div v-if="open !== false" class="min-h-0 flex-1 overflow-y-auto py-0">
+        <div v-if="hideHeader || open !== false" class="min-h-0 flex-1 overflow-y-auto py-0">
           <div v-if="loading && activeTree.nodes.length === 0" class="grid h-20 place-items-center">
             <UIcon name="i-lucide-loader-circle" class="sidebar-icon animate-spin" />
           </div>

ui/components/SideBar/bottomPanels.vue

@@ -11,6 +11,7 @@ const props = defineProps<{
     favorites: boolean;
     snippets: boolean;
   };
+  hideChrome?: boolean;
 }>();
 
 const emit = defineEmits<{
@@ -449,11 +450,12 @@ const folderMenuItems = computed<DropdownMenuItem[]>(() => {
   <div class="contents">
     <SideBarCollapsiblePanel
       v-if="visiblePanels.favorites"
-      :open="isOpen('favorites')"
+      :open="hideChrome || isOpen('favorites')"
       :title="t('Menu.Favorite')"
       v-bind="panelConfig.favorites"
       :max-height="panelMaxHeight('favorites')"
       :fill-available="!mainPanelOpen"
+      :hide-chrome="hideChrome"
       @toggle="togglePanel('favorites')"
     >
       <template #actions>
@@ -514,11 +516,12 @@ const folderMenuItems = computed<DropdownMenuItem[]>(() => {
 
     <SideBarCollapsiblePanel
       v-if="visiblePanels.snippets"
-      :open="isOpen('snippets')"
+      :open="hideChrome || isOpen('snippets')"
       :title="t('Menu.Snippets')"
       v-bind="panelConfig.snippets"
       :max-height="panelMaxHeight('snippets')"
       :fill-available="!mainPanelOpen"
+      :hide-chrome="hideChrome"
       @toggle="togglePanel('snippets')"
     >
       <template #actions>

ui/components/SideBar/collapsiblePanel.vue

@@ -9,20 +9,30 @@ const props = withDefaults(
     minHeight?: number;
     maxHeight?: string;
     fillAvailable?: boolean;
+    hideChrome?: boolean;
   }>(),
   {
     preferredHeight: 200,
     minHeight: 112,
-    maxHeight: "50%"
+    maxHeight: "50%",
+    hideChrome: false
   }
 );
 
 const emit = defineEmits<{
   toggle: [];
 }>();
 
-const panelStyle = computed(() =>
-  props.open
+const panelStyle = computed(() => {
+  if (props.hideChrome) {
+    return {
+      height: "auto",
+      minHeight: 0,
+      flexGrow: 1
+    };
+  }
+
+  return props.open
     ? props.fillAvailable
       ? {
           height: "auto",
@@ -33,16 +43,18 @@ const panelStyle = computed(() =>
           height: `min(${props.preferredHeight}px, ${props.maxHeight})`,
           minHeight: `min(${props.minHeight}px, ${props.maxHeight})`
         }
-    : { height: "32px" }
-);
+    : { height: "32px" };
+});
 </script>
 
 <template>
   <section
-    class="group flex min-h-8 shrink-0 flex-col overflow-hidden border-t border-gray-200 dark:border-white/10"
+    class="group flex flex-col overflow-hidden"
+    :class="hideChrome ? 'min-h-0 flex-1' : 'min-h-8 shrink-0 border-t border-gray-200 dark:border-white/10'"
     :style="panelStyle"
   >
     <button
+      v-if="!hideChrome"
       type="button"
       class="flex h-8 shrink-0 cursor-pointer items-center gap-1.5 px-2.5 text-left text-xs font-medium text-gray-700 dark:text-gray-200"
       :aria-expanded="open"
@@ -59,7 +71,7 @@ const panelStyle = computed(() =>
       </div>
     </button>
 
-    <div v-if="open" class="min-h-0 flex-1 overflow-y-auto">
+    <div v-if="open || hideChrome" class="min-h-0 flex-1 overflow-y-auto">
       <slot />
     </div>
   </section>