github/PPTist
1
0
Fork 0
mirror of https://github.com/pipipi-pikachu/PPTist.git synced 2025-04-15 02:20:00 +08:00
Code Issues Packages Projects Releases Wiki Activity

perf: 更新UI

Browse Source
This commit is contained in:
zxc 2024-09-07 16:52:36 +08:00
parent e3bb67b0dc
commit b34e80879d
1 changed files with 94 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

101
src/views/Editor/Toolbar/ElementStylePanel/ChartStylePanel/ChartDataEditor.vue
View File

@ -1,6 +1,29 @@
<template> <template>
<div class="chart-data-editor"> <div class="chart-data-editor">
<div class="editor-content"> <div class="editor-content">
<div class="handler">
<div class="col-header">
<div class="col-header-item"
v-for="colIndex in 7"
:key="colIndex"
>
<div class="col-key">{{ alphabet[colIndex - 1] }}</div>
</div>
</div>
<div class="row-header">
<div class="row-header-item"
v-for="rowIndex in 31"
:key="rowIndex"
>
<div class="row-key">{{ rowIndex }}</div>
</div>
</div>
<div class="all-header">
<svg class="triangle" width="8" height="8" viewBox="0 0 8 8" xmlns="http://www.w3.org/2000/svg">
<path d="M8,0 L8,8 L0,8 L8,0" fill="#ccc" />
</svg>
</div>
</div>
<div class="range-box"> <div class="range-box">
<div <div
class="temp-range" class="temp-range"
@ -32,6 +55,7 @@
<input <input
:class="['item', { 'selected': rowIndex <= selectedRange[1] && colIndex <= selectedRange[0] }]" :class="['item', { 'selected': rowIndex <= selectedRange[1] && colIndex <= selectedRange[0] }]"
:id="`cell-${rowIndex - 1}-${colIndex - 1}`" :id="`cell-${rowIndex - 1}-${colIndex - 1}`"
v-if="!(rowIndex === 1 && colIndex === 1)"
autocomplete="off" autocomplete="off"
@focus="focusCell = [rowIndex - 1, colIndex - 1]" @focus="focusCell = [rowIndex - 1, colIndex - 1]"
@paste="$event => handlePaste($event, rowIndex - 1, colIndex - 1)" @paste="$event => handlePaste($event, rowIndex - 1, colIndex - 1)"
@ -70,6 +94,7 @@ const emit = defineEmits<{
(event: 'close'): void (event: 'close'): void
}>() }>()
const alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'
const CELL_WIDTH = 100 const CELL_WIDTH = 100
const CELL_HEIGHT = 32 const CELL_HEIGHT = 32
@ -292,13 +317,15 @@ const changeSelectRange = (e: MouseEvent) => {
position: relative; position: relative;
border-right: 1px solid #ccc; border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc; border-bottom: 1px solid #ccc;
padding-left: 30px;
padding-top: 20px;
@include overflow-overlay(); @include overflow-overlay();
} }
.range-box { .range-box {
position: absolute; position: absolute;
top: 0; top: 20px;
left: 0; left: 30px;
z-index: 100; z-index: 100;
user-select: none; user-select: none;
} }
@ -373,7 +400,7 @@ table {
height: 32px; height: 32px;
&.head { &.head {
background-color: rgba($color: $themeColor, $alpha: .1); background-color: rgba($color: $themeColor, $alpha: .08);
} }
} }
.item { .item {
@ -385,10 +412,6 @@ table {
font-size: 13px; font-size: 13px;
text-align: center; text-align: center;
background-color: transparent; background-color: transparent;
&.selected {
background-color: rgba($color: $themeColor, $alpha: .02);
}
} }
} }
.btns { .btns {
@ -396,4 +419,68 @@ table {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
} }
.col-header {
width: auto;
height: 20px;
position: absolute;
top: 0;
left: 30px;
display: flex;
border: 1px solid #ccc;
border-bottom: 0;
border-right: 0;
background-color: $lightGray;
}
.col-header-item {
width: 100px;
position: relative;
border-right: 1px solid #ccc;
}
.col-key {
font-size: 10px;
text-align: center;
line-height: 20px;
}
.row-header {
height: auto;
width: 30px;
position: absolute;
top: 20px;
left: 0;
border: 1px solid #ccc;
border-bottom: 0;
border-right: 0;
background-color: $lightGray;
}
.row-header-item {
height: 32px;
position: relative;
border-bottom: 1px solid #ccc;
}
.row-key {
height: 100%;
font-size: 10px;
display: flex;
justify-content: center;
align-items: center;
}
.all-header {
width: 30px;
height: 20px;
position: absolute;
top: 0;
left: 0;
border: 1px solid #ccc;
border-bottom: 0;
border-right: 0;
background-color: $lightGray;
.triangle {
position: absolute;
bottom: 4px;
right: 4px;
}
}
</style> </style>