diff --git a/src/frontend/src/views/SystemSettingsView.vue b/src/frontend/src/views/SystemSettingsView.vue index fcbea956..1dbf557b 100644 --- a/src/frontend/src/views/SystemSettingsView.vue +++ b/src/frontend/src/views/SystemSettingsView.vue @@ -39,10 +39,15 @@ const activeDomain = ref<'ALL' | 'OMS' | 'WMS' | 'ERP'>('ALL'); const searchKeyword = ref(''); const activeCategoryTab = ref('ALL'); -// 2. 동적 드래그 반응형 Split Pane Resizer 상태 +// 2. 동적 드래그 반응형 Split Pane Resizer & 1-Click 스플릿 프리셋 const masterPanelWidth = ref(60); // 기본 60% const isDraggingSplitter = ref(false); +const setSplitRatio = (percent: number) => { + masterPanelWidth.value = percent; + showToast(`스플릿 분할 비율이 ${percent}% : ${100 - percent}% 로 조정되었습니다.`, 'success'); +}; + const startSplitterDrag = (e: MouseEvent) => { isDraggingSplitter.value = true; document.addEventListener('mousemove', onSplitterMouseMove); @@ -55,7 +60,7 @@ const onSplitterMouseMove = (e: MouseEvent) => { if (container) { const rect = container.getBoundingClientRect(); const newPercent = ((e.clientX - rect.left) / rect.width) * 100; - if (newPercent >= 25 && newPercent <= 75) { + if (newPercent >= 20 && newPercent <= 80) { masterPanelWidth.value = Math.round(newPercent); } } @@ -339,13 +344,24 @@ onMounted(loadData); - +
- +
+ +
+ + +
+ ✂️ 스플릿 비율: + + + + +
@@ -376,7 +392,7 @@ onMounted(loadData); -
+
@@ -562,21 +578,21 @@ onMounted(loadData);
  • 2. WMS 도메인 모듈: D+2 현금 볼트 안전율 & 포지션 사이징 가드
  • 3. ERP 도메인 모듈: 재무 회계 계정 맵핑 & Maker-Checker 승인 릴레이
  • 4. AI AX 코파일럿 배너: Antigravity AI 추천값 및 1-Click 자동 적용
    • -
  • 5. 물리적 동적 스플릿 바 (Draggable Resizer): 마우스 드래그 25%~75% 분할 조절
    • -
  • 6. Live PostgreSQL Ping 레이턴시 칩: 4ms 실시간 핑 상태
    • -
  • 7. SignalR WebSocket 소켓 칩: 라이브 소켓 연결 지표
    • -
  • 8. DbUp 마이그레이션 태그: DB 마이그레이션 태그 v2026.07.25
    • -
  • 9. 실시간 파이프라인 로그 터미널 창: 엔진 트랜잭션 스트리밍
    • -
  • 10. 비동기 배치 실행 & 진행률 바: 0~100% 모의 트랜잭션 게이지
    • -
  • 11. 낙관적 락 버전 인디케이터: 동시성 충돌 방지 v1~v5
    • -
  • 12. 실시간 텔레메트리 바: CPU/RAM/DB Pool 현장감 지표
    • -
  • 13. 검색 & 핫키 툴바: F3/F4/F5/F7 더존 표준 핫키
    • -
  • 14. 카테고리 탭 바: ALL/BUDGET/FACTOR/RISK/ACCOUNTING 탭
    • -
  • 15. AG Grid 데이터 테이블: 정렬, 필터, 단일 행 선택, Status Chips
    • -
  • 16. 페이지네이션 바: Page 1 of 1 건수 및 페이지 컨트롤러
    • -
  • 17. 더존 6대 표준 입력 마스크: Input, ComboBox, Radio, TextArea 등
    • -
  • 18. 읽기/편집 모드 토글: 👁️ 읽기 / ✏️ 편집 전환 스위치
    • -
  • 19. 증빙 파일 첨부 드롭존: Drag & drop 파일 첨부 칩
    • +
  • 5. 물리적 동적 스플릿 바 (Draggable Resizer): 마우스 드래그 20%~80% 분할 조절
    • +
  • 6. 1-Click 스플릿 프리셋 바: 3:7 / 5:5 / 6:4 / 7:3 퀵 분할 조절 버튼
    • +
  • 7. Live PostgreSQL Ping 레이턴시 칩: 4ms 실시간 핑 상태
    • +
  • 8. SignalR WebSocket 소켓 칩: 라이브 소켓 연결 지표
    • +
  • 9. DbUp 마이그레이션 태그: DB 마이그레이션 태그 v2026.07.25
    • +
  • 10. 실시간 파이프라인 로그 터미널 창: 엔진 트랜잭션 스트리밍
    • +
  • 11. 비동기 배치 실행 & 진행률 바: 0~100% 모의 트랜잭션 게이지
    • +
  • 12. 낙관적 락 버전 인디케이터: 동시성 충돌 방지 v1~v5
    • +
  • 13. 실시간 텔레메트리 바: CPU/RAM/DB Pool 현장감 지표
    • +
  • 14. 검색 & 핫키 툴바: F3/F4/F5/F7 더존 표준 핫키
    • +
  • 15. 카테고리 탭 바: ALL/BUDGET/FACTOR/RISK/ACCOUNTING 탭
    • +
  • 16. AG Grid 데이터 테이블: 정렬, 필터, 단일 행 선택, Status Chips
    • +
  • 17. 페이지네이션 바: Page 1 of 1 건수 및 페이지 컨트롤러
    • +
  • 18. 더존 6대 표준 입력 마스크: Input, ComboBox, Radio, TextArea 등
    • +
  • 19. 읽기/편집 모드 토글: 👁️ 읽기 / ✏️ 편집 전환 스위치
  • 20. 감사 이력 타임라인 & 모달 & 엑셀 팝업: Audit Trail, Modal, Excel/CSV
    • @@ -601,6 +617,44 @@ onMounted(loadData); user-select: none; } +.category-tabs-bar { + display: flex; + justify-content: space-between; + align-items: center; + background: white; + padding: 4px 12px; + border: 1px solid #CBD5E1; + border-radius: 6px; +} + +.left-category-tabs { display: flex; gap: 6px; } + +.right-split-presets { + display: flex; + align-items: center; + gap: 4px; + font-size: 0.7rem; + color: #475569; + font-weight: 700; +} + +.preset-btn { + padding: 2px 6px; + font-size: 0.65rem; + font-weight: 700; + border: 1px solid #CBD5E1; + background: #F8FAFC; + color: #334155; + border-radius: 3px; + cursor: pointer; +} + +.preset-btn.active, .preset-btn:hover { + background: #2563EB; + color: white; + border-color: #2563EB; +} + .domain-switcher-bar { display: flex; gap: 4px; @@ -877,15 +931,6 @@ onMounted(loadData); font-size: 0.65rem; } -.category-tabs-bar { - display: flex; - gap: 6px; - background: white; - padding: 4px 12px; - border: 1px solid #CBD5E1; - border-radius: 6px; -} - .tab-btn { padding: 4px 12px; border: none;