maque 0.2.1__py3-none-any.whl

maque/table_viewer/static/main.css

@@ -0,0 +1,268 @@
+:root {
+    --image-width: 120px;
+    --image-height: 90px;
+}
+
+body {
+    margin: 0;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+}
+
+.main-container {
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+}
+
+.header {
+    background: #fff;
+    border-bottom: 1px solid #e6e6e6;
+    padding: 16px 24px;
+    display: flex;
+    justify-content: between;
+    align-items: center;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+}
+
+.content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+}
+
+.toolbar {
+    background: #f5f5f5;
+    padding: 12px 24px;
+    border-bottom: 1px solid #e6e6e6;
+    display: flex;
+    gap: 12px;
+    align-items: center;
+    flex-wrap: wrap;
+}
+
+.table-container {
+    flex: 1;
+    overflow: auto;
+    padding: 24px;
+    background: #fff;
+}
+
+.image-preview {
+    max-width: 200px;
+    max-height: 150px;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: transform 0.2s;
+}
+
+.image-preview:hover {
+    transform: scale(1.1);
+}
+
+.multi-images-container {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+    overflow-x: auto;
+    max-width: 100%;
+    padding: 4px 0;
+}
+
+.multi-images-container::-webkit-scrollbar {
+    height: 4px;
+}
+
+.multi-images-container::-webkit-scrollbar-track {
+    background: #f1f1f1;
+    border-radius: 2px;
+}
+
+.multi-images-container::-webkit-scrollbar-thumb {
+    background: #c1c1c1;
+    border-radius: 2px;
+}
+
+.multi-images-container::-webkit-scrollbar-thumb:hover {
+    background: #a1a1a1;
+}
+
+.multi-image-item {
+    flex-shrink: 0;
+    max-width: var(--image-width);
+    max-height: var(--image-height);
+    width: var(--image-width);
+    height: var(--image-height);
+    object-fit: cover;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: transform 0.2s;
+}
+
+.multi-image-item:hover {
+    transform: scale(1.05);
+}
+
+.image-placeholder {
+    flex-shrink: 0;
+    width: var(--image-width);
+    height: var(--image-height);
+    background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
+    border: 2px dashed #ddd;
+    border-radius: 4px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    color: #999;
+    font-size: 12px;
+    position: relative;
+    overflow: hidden;
+}
+
+.image-placeholder::before {
+    content: '📷';
+    font-size: 24px;
+    margin-bottom: 4px;
+    opacity: 0.6;
+}
+
+.image-placeholder.loading {
+    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
+    border-color: #bae6fd;
+    color: #0369a1;
+}
+
+.image-placeholder.loading::before {
+    content: '⏳';
+    animation: pulse 1.5s ease-in-out infinite;
+}
+
+.image-placeholder.error {
+    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
+    border-color: #fca5a5;
+    color: #dc2626;
+}
+
+.image-placeholder.error::before {
+    content: '❌';
+}
+
+@keyframes pulse {
+    0%, 100% { transform: scale(1); opacity: 0.6; }
+    50% { transform: scale(1.1); opacity: 1; }
+}
+
+.loading-shimmer {
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
+    animation: shimmer 2s infinite;
+}
+
+@keyframes shimmer {
+    0% { left: -100%; }
+    100% { left: 100%; }
+}
+
+.filter-row {
+    background: #fafafa;
+    padding: 12px 16px;
+    border-bottom: 1px solid #e6e6e6;
+    display: flex;
+    gap: 12px;
+    align-items: center;
+    flex-wrap: wrap;
+}
+
+.stats-info {
+    background: #e8f4fd;
+    padding: 8px 16px;
+    border-left: 4px solid #409eff;
+    margin-bottom: 16px;
+    border-radius: 4px;
+}
+
+.el-table .el-table__cell {
+    padding: 8px 12px;
+}
+
+.cell-editor {
+    width: 100%;
+    border: none;
+    background: transparent;
+    outline: none;
+    padding: 4px;
+}
+
+.cell-editor:focus {
+    background: #fff;
+    border: 1px solid #409eff;
+    border-radius: 3px;
+}
+
+/* 表头按钮样式优化 */
+.el-table th.el-table__cell {
+    padding: 8px 12px;
+}
+
+.el-button-group .el-button {
+    margin: 0;
+}
+
+.el-table .el-table__header-wrapper .el-button {
+    border: 1px solid #dcdfe6;
+}
+
+.el-table .el-table__header-wrapper .el-button:hover {
+    background: #f5f7fa;
+    border-color: #c0c4cc;
+}
+
+.el-table .el-table__header-wrapper .el-button--primary {
+    background: #409eff;
+    border-color: #409eff;
+    color: #fff;
+}
+
+/* 拖拽上传区域样式 */
+.upload-area {
+    border: 2px dashed #d9d9d9;
+    border-radius: 8px;
+    background: #fafafa;
+    padding: 20px;
+    text-align: center;
+    transition: all 0.3s;
+    cursor: pointer;
+}
+
+.upload-area:hover, .upload-area.dragover {
+    border-color: #409eff;
+    background: #f0f9ff;
+}
+
+.upload-area.dragover {
+    border-color: #67c23a;
+    background: #f0f9f0;
+}
+
+.upload-icon {
+    font-size: 48px;
+    color: #c0c4cc;
+    margin-bottom: 16px;
+}
+
+.upload-text {
+    color: #606266;
+    font-size: 16px;
+    line-height: 1.6;
+}
+
+.upload-hint {
+    color: #909399;
+    font-size: 12px;
+    margin-top: 8px;
+}