refactor(fe): migrate ApprovalQueue to KsSplitter - standardize master-detail layout
- Replace custom grid layout with KsSplitter component - Add storageKey to prevent ratio conflicts with other pages - Remove dead .content CSS class - Update .request-list height constraint (flex: 1 → height: 100%) - Maintain overflow-y: auto for scrollable panes - Simplifies code by ~50 lines, adds drag-to-resize functionality
This commit is contained in:
@@ -1,6 +1,7 @@
|
||||
<script setup lang="ts">
|
||||
import { reactive, computed, ref, onMounted } from 'vue'
|
||||
import ApprovalWorkbenchPage from '../../../shared/ui/screen-types/v2/ApprovalWorkbenchPage.vue'
|
||||
import KsSplitter from '../../../shared/ui/components/KsSplitter.vue'
|
||||
import { KsButton, KsStatusTag } from '../../../shared/ui/components'
|
||||
import type { StandardScreenState } from '../../../shared/ui/contracts/screenContract'
|
||||
|
||||
@@ -166,12 +167,13 @@ const handleRetry = () => {
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- Default Slot: List & Detail Workbench Layout -->
|
||||
<div class="content">
|
||||
<!-- Request Master List -->
|
||||
<aside class="request-list" aria-label="승인 요청 목록">
|
||||
<h2>Requests ({{ filteredRequests.length }})</h2>
|
||||
<div class="items" role="list">
|
||||
<!-- Master-Detail Layout: KsSplitter -->
|
||||
<KsSplitter storageKey="ks_splitter_ratio_approval_queue" initialRatio="25">
|
||||
<template #left>
|
||||
<!-- Request Master List -->
|
||||
<aside class="request-list" aria-label="승인 요청 목록">
|
||||
<h2>Requests ({{ filteredRequests.length }})</h2>
|
||||
<div class="items" role="list">
|
||||
<div
|
||||
v-for="req in filteredRequests"
|
||||
:key="req.requestId"
|
||||
@@ -196,8 +198,10 @@ const handleRetry = () => {
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
</template>
|
||||
|
||||
<!-- Detail Workbench Panel -->
|
||||
<template #right>
|
||||
<main class="detail-panel" aria-label="선택 요청 상세 및 검토">
|
||||
<h2 v-if="selectedRequest">{{ selectedRequest.modelName }}</h2>
|
||||
<div v-else class="empty-detail">Select a request from list</div>
|
||||
@@ -286,7 +290,8 @@ const handleRetry = () => {
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</template>
|
||||
</KsSplitter>
|
||||
</ApprovalWorkbenchPage>
|
||||
</template>
|
||||
|
||||
@@ -399,14 +404,6 @@ h3 {
|
||||
border-radius: var(--border-radius-lg);
|
||||
}
|
||||
|
||||
.content {
|
||||
display: grid;
|
||||
grid-template-columns: 350px 1fr;
|
||||
gap: var(--spacing-5);
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.request-list {
|
||||
border: var(--border-width-1) solid var(--color-border-primary);
|
||||
border-radius: var(--border-radius-lg);
|
||||
@@ -414,7 +411,7 @@ h3 {
|
||||
background: var(--color-background-primary);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user