987 lines
20 KiB
Vue
987 lines
20 KiB
Vue
<script setup lang="ts">
|
|
import { ref } from 'vue'
|
|
import RibbonMenu from './components/RibbonMenu.vue'
|
|
import TreeView from './components/TreeView.vue'
|
|
import ContentPanel from './components/ContentPanel.vue'
|
|
import UserManagementView from './components/views/UserManagementView.vue'
|
|
import ProjectDeptView from './components/views/ProjectDeptView.vue'
|
|
import type { TreeNode } from './components/TreeView.vue'
|
|
|
|
const selectedNode = ref<TreeNode | null>(null)
|
|
const showUserManagement = ref(false)
|
|
const showProjectDept = ref(false)
|
|
const treeViewRef = ref<InstanceType<typeof TreeView> | null>(null)
|
|
const contentPanelRef = ref<InstanceType<typeof ContentPanel> | null>(null)
|
|
const treeData = ref<TreeNode[]>([])
|
|
|
|
const handleNodeSelect = (node: TreeNode) => {
|
|
selectedNode.value = node
|
|
}
|
|
|
|
const handleSwitchView = (viewMode: any) => {
|
|
if (contentPanelRef.value) {
|
|
contentPanelRef.value.switchView(viewMode)
|
|
}
|
|
}
|
|
|
|
const handleTreeDataUpdate = (data: TreeNode[]) => {
|
|
treeData.value = data
|
|
}
|
|
|
|
const handleUpdateNodeContent = (nodeId: string, content: any) => {
|
|
// 调用 TreeView 的方法更新节点内容
|
|
treeViewRef.value?.updateNodeContent(nodeId, content)
|
|
}
|
|
|
|
const handleMenuClick = (label: string) => {
|
|
if (label === 'Welcome') {
|
|
// 在新标签页打开 content.vue
|
|
window.open('/content.html', '_blank')
|
|
} else if (label === 'Users') {
|
|
showUserManagement.value = true
|
|
} else if (label === 'Proj Dept') {
|
|
showProjectDept.value = true
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="app">
|
|
<!-- Top Ribbon Menu -->
|
|
<header class="app-header">
|
|
<RibbonMenu @menu-click="handleMenuClick" />
|
|
</header>
|
|
|
|
<!-- Main Content Area -->
|
|
<main class="app-main">
|
|
<!-- Left Sidebar - Tree View -->
|
|
<aside class="app-sidebar">
|
|
<TreeView
|
|
ref="treeViewRef"
|
|
@select="handleNodeSelect"
|
|
@tree-data-update="handleTreeDataUpdate"
|
|
@switch-view="handleSwitchView"
|
|
/>
|
|
</aside>
|
|
|
|
<!-- Right Content Panel -->
|
|
<section class="app-content">
|
|
<ContentPanel
|
|
ref="contentPanelRef"
|
|
:selected-node="selectedNode"
|
|
:tree-data="treeData"
|
|
@update:node-content="handleUpdateNodeContent"
|
|
/>
|
|
</section>
|
|
</main>
|
|
|
|
<UserManagementView
|
|
v-if="showUserManagement"
|
|
@close="showUserManagement = false"
|
|
/>
|
|
|
|
<ProjectDeptView
|
|
v-if="showProjectDept"
|
|
:tree-data="treeData"
|
|
@close="showProjectDept = false"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<style>
|
|
/* ============================================
|
|
SystemWeaver Style - Requirements Manager
|
|
Traditional Engineering Software UI
|
|
============================================ */
|
|
|
|
/* CSS Variables */
|
|
:root {
|
|
/* Colors - Cool Gray Palette */
|
|
--color-bg-primary: #f0f0f0;
|
|
--color-bg-secondary: #e8e8e8;
|
|
--color-bg-tertiary: #e0e0e0;
|
|
--color-bg-hover: #d0d0d0;
|
|
--color-bg-selected: #cde8ff;
|
|
--color-bg-active: #b8d4f0;
|
|
|
|
--color-border: #a0a0a0;
|
|
--color-border-light: #c0c0c0;
|
|
--color-border-dark: #808080;
|
|
|
|
--color-text-primary: #333333;
|
|
--color-text-secondary: #666666;
|
|
--color-text-muted: #999999;
|
|
--color-text-inverse: #ffffff;
|
|
|
|
--color-accent: #0078d4;
|
|
--color-accent-hover: #106ebe;
|
|
|
|
/* Status Colors */
|
|
--color-status-work: #ffc107;
|
|
--color-status-released: #28a745;
|
|
--color-status-accept: #28a745;
|
|
--color-status-reject: #dc3545;
|
|
--color-status-pending: #ffc107;
|
|
--color-status-not-handled: #6c757d;
|
|
--color-status-cs-released: #17a2b8;
|
|
|
|
/* Spacing */
|
|
--spacing-xs: 2px;
|
|
--spacing-sm: 4px;
|
|
--spacing-md: 8px;
|
|
--spacing-lg: 12px;
|
|
--spacing-xl: 16px;
|
|
|
|
/* Font */
|
|
--font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
--font-size-xs: 10px;
|
|
--font-size-sm: 11px;
|
|
--font-size-md: 12px;
|
|
--font-size-lg: 13px;
|
|
|
|
/* Borders */
|
|
--border-width: 1px;
|
|
--border-radius: 2px;
|
|
}
|
|
|
|
/* Reset & Base */
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html, body {
|
|
height: 100%;
|
|
font-family: var(--font-family);
|
|
font-size: var(--font-size-md);
|
|
color: var(--color-text-primary);
|
|
background-color: var(--color-bg-primary);
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* ============================================
|
|
App Layout
|
|
============================================ */
|
|
|
|
.app {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100vh;
|
|
width: 100vw;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.app-header {
|
|
flex-shrink: 0;
|
|
background-color: var(--color-bg-secondary);
|
|
border-bottom: var(--border-width) solid var(--color-border);
|
|
}
|
|
|
|
.app-main {
|
|
display: flex;
|
|
flex: 1;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.app-sidebar {
|
|
width: 25%;
|
|
min-width: 280px;
|
|
max-width: 400px;
|
|
background-color: var(--color-bg-primary);
|
|
border-right: var(--border-width) solid var(--color-border);
|
|
overflow: hidden;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.app-content {
|
|
flex: 1;
|
|
background-color: var(--color-bg-primary);
|
|
overflow: hidden;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
/* ============================================
|
|
Ribbon Menu
|
|
============================================ */
|
|
|
|
.ribbon-menu {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
/* Menu Bar */
|
|
.menu-bar {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
background: linear-gradient(to bottom, #f5f5f5, #e0e0e0);
|
|
border-bottom: var(--border-width) solid var(--color-border-light);
|
|
padding: 0 var(--spacing-sm);
|
|
}
|
|
|
|
.menu-items {
|
|
display: flex;
|
|
}
|
|
|
|
.menu-item {
|
|
padding: var(--spacing-sm) var(--spacing-lg);
|
|
font-size: var(--font-size-md);
|
|
font-weight: 500;
|
|
color: var(--color-text-primary);
|
|
background: transparent;
|
|
border: none;
|
|
cursor: pointer;
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.menu-item:hover {
|
|
background-color: var(--color-bg-hover);
|
|
}
|
|
|
|
.menu-item.active {
|
|
background: linear-gradient(to bottom, #e8f4fc, #d0e8f8);
|
|
border-bottom: 2px solid var(--color-accent);
|
|
color: var(--color-accent);
|
|
}
|
|
|
|
.menu-actions {
|
|
display: flex;
|
|
gap: var(--spacing-sm);
|
|
}
|
|
|
|
.menu-action-btn {
|
|
padding: var(--spacing-sm);
|
|
background: transparent;
|
|
border: none;
|
|
cursor: pointer;
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
.menu-action-btn:hover {
|
|
color: var(--color-text-primary);
|
|
background-color: var(--color-bg-hover);
|
|
}
|
|
|
|
/* Toolbar */
|
|
.toolbar {
|
|
display: flex;
|
|
padding: var(--spacing-sm);
|
|
background: linear-gradient(to bottom, #f8f8f8, #e8e8e8);
|
|
border-bottom: var(--border-width) solid var(--color-border-light);
|
|
gap: var(--spacing-xs);
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.toolbar-group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: 0 var(--spacing-sm);
|
|
border-right: var(--border-width) solid var(--color-border-light);
|
|
}
|
|
|
|
.toolbar-group:last-child {
|
|
border-right: none;
|
|
}
|
|
|
|
.toolbar-buttons {
|
|
display: flex;
|
|
gap: var(--spacing-xs);
|
|
}
|
|
|
|
.toolbar-btn {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: var(--spacing-sm);
|
|
min-width: 48px;
|
|
background: linear-gradient(to bottom, #ffffff, #e8e8e8);
|
|
border: var(--border-width) solid var(--color-border-light);
|
|
border-radius: var(--border-radius);
|
|
cursor: pointer;
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.toolbar-btn:hover {
|
|
background: linear-gradient(to bottom, #f0f8ff, #d0e8f8);
|
|
border-color: var(--color-accent);
|
|
}
|
|
|
|
.toolbar-btn:active {
|
|
background: linear-gradient(to bottom, #d0e8f8, #b8d4f0);
|
|
}
|
|
|
|
.toolbar-btn-icon {
|
|
color: var(--color-text-primary);
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
.toolbar-btn-label {
|
|
font-size: var(--font-size-xs);
|
|
color: var(--color-text-secondary);
|
|
text-align: center;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.toolbar-group-title {
|
|
font-size: var(--font-size-xs);
|
|
color: var(--color-text-muted);
|
|
margin-top: var(--spacing-xs);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
/* Context Bar */
|
|
.context-bar {
|
|
display: flex;
|
|
flex-direction: column;
|
|
background-color: var(--color-bg-secondary);
|
|
border-bottom: var(--border-width) solid var(--color-border);
|
|
}
|
|
|
|
.context-path {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: var(--spacing-sm) var(--spacing-md);
|
|
gap: var(--spacing-sm);
|
|
border-bottom: var(--border-width) solid var(--color-border-light);
|
|
}
|
|
|
|
.context-label {
|
|
font-size: var(--font-size-sm);
|
|
color: var(--color-text-muted);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.context-value {
|
|
font-size: var(--font-size-sm);
|
|
color: var(--color-text-primary);
|
|
}
|
|
|
|
.context-tabs {
|
|
display: flex;
|
|
padding: var(--spacing-xs) var(--spacing-md);
|
|
gap: var(--spacing-xs);
|
|
}
|
|
|
|
.context-tab {
|
|
padding: var(--spacing-xs) var(--spacing-md);
|
|
font-size: var(--font-size-sm);
|
|
color: var(--color-text-secondary);
|
|
background: transparent;
|
|
border: none;
|
|
border-bottom: 2px solid transparent;
|
|
cursor: pointer;
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.context-tab:hover {
|
|
color: var(--color-text-primary);
|
|
background-color: var(--color-bg-hover);
|
|
}
|
|
|
|
.context-tab.active {
|
|
color: var(--color-accent);
|
|
border-bottom-color: var(--color-accent);
|
|
background-color: var(--color-bg-selected);
|
|
}
|
|
|
|
/* ============================================
|
|
Tree View
|
|
============================================ */
|
|
|
|
.tree-view {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.tree-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: var(--spacing-sm) var(--spacing-md);
|
|
background: linear-gradient(to bottom, #f5f5f5, #e8e8e8);
|
|
border-bottom: var(--border-width) solid var(--color-border);
|
|
}
|
|
|
|
.tree-header-title {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-sm);
|
|
font-size: var(--font-size-md);
|
|
font-weight: 600;
|
|
color: var(--color-text-primary);
|
|
}
|
|
|
|
.tree-header-icon {
|
|
color: var(--color-accent);
|
|
}
|
|
|
|
.tree-header-actions {
|
|
display: flex;
|
|
gap: var(--spacing-xs);
|
|
}
|
|
|
|
.tree-header-btn {
|
|
padding: var(--spacing-xs);
|
|
background: transparent;
|
|
border: var(--border-width) solid var(--color-border-light);
|
|
border-radius: var(--border-radius);
|
|
cursor: pointer;
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
.tree-header-btn:hover {
|
|
background-color: var(--color-bg-hover);
|
|
color: var(--color-text-primary);
|
|
}
|
|
|
|
.tree-content {
|
|
flex: 1;
|
|
overflow: auto;
|
|
}
|
|
|
|
.tree-column-headers {
|
|
display: flex;
|
|
padding: var(--spacing-xs) var(--spacing-sm);
|
|
background-color: var(--color-bg-secondary);
|
|
border-bottom: var(--border-width) solid var(--color-border);
|
|
font-size: var(--font-size-sm);
|
|
font-weight: 600;
|
|
color: var(--color-text-secondary);
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 10;
|
|
}
|
|
|
|
.tree-col-name {
|
|
flex: 1;
|
|
min-width: 150px;
|
|
}
|
|
|
|
.tree-col-status,
|
|
.tree-col-version,
|
|
.tree-col-next,
|
|
.tree-col-pss {
|
|
width: 70px;
|
|
text-align: center;
|
|
}
|
|
|
|
.tree-nodes {
|
|
padding: var(--spacing-xs) 0;
|
|
}
|
|
|
|
.tree-node-wrapper {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.tree-node {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 2px var(--spacing-sm);
|
|
cursor: pointer;
|
|
transition: all 0.1s ease;
|
|
border-bottom: var(--border-width) solid transparent;
|
|
}
|
|
|
|
.tree-node:hover {
|
|
background-color: var(--color-bg-hover);
|
|
}
|
|
|
|
.tree-node.selected {
|
|
background-color: var(--color-bg-selected);
|
|
border-bottom-color: var(--color-accent);
|
|
}
|
|
|
|
.tree-node-toggle {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 14px;
|
|
height: 14px;
|
|
margin-right: 2px;
|
|
cursor: pointer;
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
.tree-node-spacer {
|
|
width: 14px;
|
|
}
|
|
|
|
.tree-node-icon {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 16px;
|
|
height: 16px;
|
|
margin-right: var(--spacing-xs);
|
|
}
|
|
|
|
.icon-folder,
|
|
.icon-folder-open {
|
|
color: #daa520;
|
|
}
|
|
|
|
.icon-requirement {
|
|
color: var(--color-accent);
|
|
}
|
|
|
|
.icon-subsystem {
|
|
color: #6b8e23;
|
|
}
|
|
|
|
.icon-component {
|
|
color: #cd853f;
|
|
}
|
|
|
|
.tree-node-label {
|
|
flex: 1;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
font-size: var(--font-size-md);
|
|
color: var(--color-text-primary);
|
|
}
|
|
|
|
.tree-children {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
/* Status styling for tree nodes */
|
|
.status-work {
|
|
color: var(--color-status-work);
|
|
}
|
|
|
|
.status-released,
|
|
.status-cs-released {
|
|
color: var(--color-status-released);
|
|
}
|
|
|
|
/* ============================================
|
|
Content Panel
|
|
============================================ */
|
|
|
|
.content-panel {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.panel-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: var(--spacing-sm) var(--spacing-md);
|
|
background: linear-gradient(to bottom, #f5f5f5, #e8e8e8);
|
|
border-bottom: var(--border-width) solid var(--color-border);
|
|
}
|
|
|
|
.panel-header-left {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-md);
|
|
}
|
|
|
|
.panel-title {
|
|
font-size: var(--font-size-lg);
|
|
font-weight: 600;
|
|
color: var(--color-text-primary);
|
|
}
|
|
|
|
.panel-divider {
|
|
color: var(--color-border);
|
|
}
|
|
|
|
.panel-subtitle {
|
|
font-size: var(--font-size-md);
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
.panel-header-right {
|
|
display: flex;
|
|
gap: var(--spacing-xs);
|
|
}
|
|
|
|
.panel-header-btn {
|
|
padding: var(--spacing-xs);
|
|
background: transparent;
|
|
border: var(--border-width) solid var(--color-border-light);
|
|
border-radius: var(--border-radius);
|
|
cursor: pointer;
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
.panel-header-btn:hover {
|
|
background-color: var(--color-bg-hover);
|
|
color: var(--color-text-primary);
|
|
}
|
|
|
|
/* Search Bar */
|
|
.panel-search-bar {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-sm);
|
|
padding: var(--spacing-sm) var(--spacing-md);
|
|
background-color: var(--color-bg-secondary);
|
|
border-bottom: var(--border-width) solid var(--color-border-light);
|
|
}
|
|
|
|
.search-input-wrapper {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
background-color: #ffffff;
|
|
border: var(--border-width) solid var(--color-border-light);
|
|
border-radius: var(--border-radius);
|
|
padding: var(--spacing-xs) var(--spacing-sm);
|
|
}
|
|
|
|
.search-icon {
|
|
color: var(--color-text-muted);
|
|
margin-right: var(--spacing-sm);
|
|
}
|
|
|
|
.search-input {
|
|
flex: 1;
|
|
border: none;
|
|
outline: none;
|
|
font-size: var(--font-size-md);
|
|
color: var(--color-text-primary);
|
|
background: transparent;
|
|
}
|
|
|
|
.search-input::placeholder {
|
|
color: var(--color-text-muted);
|
|
}
|
|
|
|
.search-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-xs);
|
|
padding: var(--spacing-xs) var(--spacing-md);
|
|
background: linear-gradient(to bottom, #ffffff, #e8e8e8);
|
|
border: var(--border-width) solid var(--color-border-light);
|
|
border-radius: var(--border-radius);
|
|
cursor: pointer;
|
|
font-size: var(--font-size-sm);
|
|
color: var(--color-text-primary);
|
|
}
|
|
|
|
.search-btn:hover {
|
|
background: linear-gradient(to bottom, #f0f8ff, #d0e8f8);
|
|
border-color: var(--color-accent);
|
|
}
|
|
|
|
/* Table */
|
|
.panel-table-container {
|
|
flex: 1;
|
|
overflow: auto;
|
|
background-color: #ffffff;
|
|
}
|
|
|
|
.panel-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
font-size: var(--font-size-md);
|
|
}
|
|
|
|
.panel-table thead {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 10;
|
|
}
|
|
|
|
.panel-table th {
|
|
padding: var(--spacing-sm) var(--spacing-md);
|
|
text-align: left;
|
|
font-weight: 600;
|
|
color: var(--color-text-secondary);
|
|
background: linear-gradient(to bottom, #f5f5f5, #e8e8e8);
|
|
border-bottom: var(--border-width) solid var(--color-border);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.panel-table td {
|
|
padding: var(--spacing-xs) var(--spacing-md);
|
|
border-bottom: var(--border-width) solid var(--color-border-light);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.panel-table tbody tr {
|
|
cursor: pointer;
|
|
transition: background-color 0.1s ease;
|
|
}
|
|
|
|
.panel-table tbody tr:hover {
|
|
background-color: var(--color-bg-hover);
|
|
}
|
|
|
|
.panel-table tbody tr.selected {
|
|
background-color: var(--color-bg-selected);
|
|
}
|
|
|
|
.col-checkbox {
|
|
width: 30px;
|
|
text-align: center;
|
|
}
|
|
|
|
.col-name {
|
|
min-width: 250px;
|
|
}
|
|
|
|
.col-req-id {
|
|
width: 80px;
|
|
}
|
|
|
|
.col-handshake {
|
|
width: 100px;
|
|
}
|
|
|
|
.col-status {
|
|
width: 90px;
|
|
}
|
|
|
|
.col-version {
|
|
width: 70px;
|
|
}
|
|
|
|
.col-last-change {
|
|
width: 80px;
|
|
}
|
|
|
|
.name-cell {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-xs);
|
|
}
|
|
|
|
.row-icon {
|
|
color: var(--color-text-muted);
|
|
}
|
|
|
|
.row-label {
|
|
color: var(--color-text-primary);
|
|
}
|
|
|
|
.checkbox-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 2px;
|
|
background: transparent;
|
|
border: none;
|
|
cursor: pointer;
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
.checkbox-btn:hover {
|
|
color: var(--color-accent);
|
|
}
|
|
|
|
/* Status Badges */
|
|
.status-badge {
|
|
display: inline-block;
|
|
padding: 1px 6px;
|
|
font-size: var(--font-size-sm);
|
|
font-weight: 500;
|
|
border-radius: var(--border-radius);
|
|
text-align: center;
|
|
}
|
|
|
|
.status-accept {
|
|
background-color: #d4edda;
|
|
color: #155724;
|
|
border: var(--border-width) solid #c3e6cb;
|
|
}
|
|
|
|
.status-reject {
|
|
background-color: #f8d7da;
|
|
color: #721c24;
|
|
border: var(--border-width) solid #f5c6cb;
|
|
}
|
|
|
|
.status-not-handled {
|
|
background-color: #e2e3e5;
|
|
color: #383d41;
|
|
border: var(--border-width) solid #d6d8db;
|
|
}
|
|
|
|
.status-cs-released {
|
|
background-color: #d1ecf1;
|
|
color: #0c5460;
|
|
border: var(--border-width) solid #bee5eb;
|
|
}
|
|
|
|
.status-work {
|
|
background-color: #fff3cd;
|
|
color: #856404;
|
|
border: var(--border-width) solid #ffeeba;
|
|
}
|
|
|
|
/* Context Menu Placeholder */
|
|
.context-menu-placeholder {
|
|
position: absolute;
|
|
top: 50%;
|
|
right: 20%;
|
|
z-index: 100;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.context-menu {
|
|
background-color: #ffffff;
|
|
border: var(--border-width) solid var(--color-border);
|
|
border-radius: var(--border-radius);
|
|
box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.15);
|
|
min-width: 140px;
|
|
padding: var(--spacing-xs) 0;
|
|
}
|
|
|
|
.context-menu-item {
|
|
padding: var(--spacing-sm) var(--spacing-md);
|
|
cursor: pointer;
|
|
font-size: var(--font-size-md);
|
|
color: var(--color-text-primary);
|
|
}
|
|
|
|
.context-menu-item:hover {
|
|
background-color: var(--color-bg-selected);
|
|
}
|
|
|
|
/* Bottom Panel */
|
|
.bottom-panel {
|
|
border-top: var(--border-width) solid var(--color-border);
|
|
background-color: var(--color-bg-secondary);
|
|
max-height: 150px;
|
|
}
|
|
|
|
.bottom-panel-header {
|
|
padding: var(--spacing-xs) var(--spacing-md);
|
|
background: linear-gradient(to bottom, #f0f0f0, #e0e0e0);
|
|
border-bottom: var(--border-width) solid var(--color-border-light);
|
|
}
|
|
|
|
.bottom-panel-title {
|
|
font-size: var(--font-size-sm);
|
|
font-weight: 600;
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
.bottom-panel-content {
|
|
overflow: auto;
|
|
max-height: 120px;
|
|
}
|
|
|
|
.bottom-panel-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
font-size: var(--font-size-sm);
|
|
}
|
|
|
|
.bottom-panel-table th {
|
|
padding: var(--spacing-xs) var(--spacing-md);
|
|
text-align: left;
|
|
font-weight: 600;
|
|
color: var(--color-text-secondary);
|
|
background-color: var(--color-bg-tertiary);
|
|
border-bottom: var(--border-width) solid var(--color-border-light);
|
|
}
|
|
|
|
.bottom-panel-table td {
|
|
padding: var(--spacing-xs) var(--spacing-md);
|
|
border-bottom: var(--border-width) solid var(--color-border-light);
|
|
}
|
|
|
|
/* Status Bar */
|
|
.status-bar {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: var(--spacing-xs) var(--spacing-md);
|
|
background: linear-gradient(to bottom, #e8e8e8, #d0d0d0);
|
|
border-top: var(--border-width) solid var(--color-border);
|
|
}
|
|
|
|
.status-bar-left {
|
|
display: flex;
|
|
gap: var(--spacing-lg);
|
|
}
|
|
|
|
.status-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-xs);
|
|
font-size: var(--font-size-sm);
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
.status-indicator {
|
|
width: 10px;
|
|
height: 10px;
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.status-indicator.not-handled {
|
|
background-color: var(--color-status-not-handled);
|
|
}
|
|
|
|
.status-indicator.version-mismatch {
|
|
background-color: #ffc107;
|
|
}
|
|
|
|
.status-indicator.reject {
|
|
background-color: var(--color-status-reject);
|
|
}
|
|
|
|
.status-indicator.accept {
|
|
background-color: var(--color-status-accept);
|
|
}
|
|
|
|
.status-bar-btn {
|
|
padding: var(--spacing-xs) var(--spacing-md);
|
|
font-size: var(--font-size-sm);
|
|
color: var(--color-text-primary);
|
|
background: linear-gradient(to bottom, #ffffff, #e8e8e8);
|
|
border: var(--border-width) solid var(--color-border-light);
|
|
border-radius: var(--border-radius);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.status-bar-btn:hover {
|
|
background: linear-gradient(to bottom, #f0f8ff, #d0e8f8);
|
|
border-color: var(--color-accent);
|
|
}
|
|
|
|
/* Scrollbar Styling */
|
|
::-webkit-scrollbar {
|
|
width: 8px;
|
|
height: 8px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: var(--color-bg-secondary);
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: var(--color-border);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: var(--color-border-dark);
|
|
}
|
|
|
|
/* Selection */
|
|
::selection {
|
|
background-color: var(--color-bg-selected);
|
|
color: var(--color-text-primary);
|
|
}
|
|
</style>
|