manager/my-worker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改页面弹窗全屏

Browse Source
This commit is contained in:
gaoxq
2026-02-22 15:49:44 +08:00
parent 535d843036
commit 14127580fe
1 changed files with 108 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

193
web-vue/packages/core/layouts/views/desktop/workbench/components/NoteTodo.vue
View File

@@ -69,27 +69,28 @@
<div class="progress-done" :style="{ width: doneRate + '%' }"></div>
</div>
</div>
<div class="priority-stat-container">
<h5 class="priority-stat-title">级别统计</h5>
<div class="priority-cards">
<div class="priority-card priority-low-card">
<div class="priority-card-inner">
<span class="priority-name">低优先级</span>
<span class="priority-count">{{ lowPriorityDoneCount }}/{{ lowPriorityTotalCount }}</span>
</div>
</div>
<div class="priority-stat-container">
<h5 class="priority-stat-title">级别统计</h5>
<div class="title-divider"></div>
<div class="priority-cards">
<div class="priority-card priority-low-card">
<div class="priority-card-inner">
<span class="priority-name">低优先级</span>
<span class="priority-count">{{ lowPriorityDoneCount }}/{{ lowPriorityTotalCount }}</span>
</div>
<div class="priority-card priority-medium-card">
<div class="priority-card-inner">
<span class="priority-name">中优先级</span>
<span class="priority-count">{{ mediumPriorityDoneCount }}/{{ mediumPriorityTotalCount }}</span>
</div>
</div>
<div class="priority-card priority-medium-card">
<div class="priority-card-inner">
<span class="priority-name">中优先级</span>
<span class="priority-count">{{ mediumPriorityDoneCount }}/{{ mediumPriorityTotalCount }}</span>
</div>
<div class="priority-card priority-high-card">
<div class="priority-card-inner">
<span class="priority-name">高优先级</span>
<span class="priority-count">{{ highPriorityDoneCount }}/{{ highPriorityTotalCount }}</span>
</div>
</div>
<div class="priority-card priority-high-card">
<div class="priority-card-inner">
<span class="priority-name">高优先级</span>
<span class="priority-count">{{ highPriorityDoneCount }}/{{ highPriorityTotalCount }}</span>
</div>
</div>
</div>
@@ -169,7 +170,7 @@
</template>
<script lang="ts" setup>
import { ref, computed, watch } from 'vue'
import { ref, computed } from 'vue'
import {
Tooltip as ATooltip,
Input as AInput,
@@ -178,7 +179,6 @@ import {
Select as ASelect,
SelectOption as ASelectOption,
DatePicker as ADatePicker,
Radio as ARadio,
RadioGroup as ARadioGroup,
RadioButton as ARadioButton,
message, Modal
@@ -395,34 +395,79 @@ fetchDataList({})
gap: 4px;
background: #fafafa;
}
.left-panel {
width: 30%;
background: #fff;
border: 1px solid #cce5ff;
border-radius: 4px;
padding: 10px;
padding: 8px;
display: flex;
flex-direction: column;
gap: 15px;
height: 100%;
gap: 8px;
overflow: hidden;
}
.create-note {
flex: 1;
display: flex;
flex-direction: column;
gap: 8px;
gap: 4px;
border: 1px solid #e8f4ff;
border-radius: 8px;
padding: 12px;
padding: 4px;
background: #f0f8ff;
overflow: auto;
}
.statistics-box {
flex: 1;
flex: 0 0 35%;
border: 1px solid #e8f4ff;
border-radius: 8px;
padding: 12px;
padding: 4px;
background: #f0f8ff;
display: flex;
flex-direction: column;
overflow: auto;
}
.priority-stat-container {
flex: 0 0 20%;
border: 1px solid #e8f4ff;
border-radius: 8px;
padding: 4px;
background: #f0f8ff;
display: flex;
flex-direction: column;
overflow: auto;
}
.create-note::-webkit-scrollbar,
.statistics-box::-webkit-scrollbar,
.priority-stat-container::-webkit-scrollbar {
width: 6px;
height: 6px;
background: transparent;
}
.create-note::-webkit-scrollbar-track,
.statistics-box::-webkit-scrollbar-track,
.priority-stat-container::-webkit-scrollbar-track {
background: #f5f5f5;
border-radius: 3px;
}
.create-note::-webkit-scrollbar-thumb,
.statistics-box::-webkit-scrollbar-thumb,
.priority-stat-container::-webkit-scrollbar-thumb {
background: #d9d9d9;
border-radius: 3px;
}
.create-note::-webkit-scrollbar-thumb:hover,
.statistics-box::-webkit-scrollbar-thumb:hover,
.priority-stat-container::-webkit-scrollbar-thumb:hover {
background: #b3b3b3;
}
.right-panel {
width: 70%;
background: #fff;
@@ -432,6 +477,7 @@ fetchDataList({})
flex-direction: column;
height: 100%;
}
.search-note {
padding: 10px;
border-bottom: 1px solid #f0f0f0;
@@ -494,17 +540,14 @@ fetchDataList({})
color: #409eff !important;
}
.create-title {
font-size: 15px;
color: #409eff;
margin: 0 0 5px 0;
font-weight: 600;
}
.stat-title {
.create-title,
.stat-title,
.priority-stat-title {
font-size: 15px;
color: #409eff;
margin: 0 0 5px 0;
font-weight: 600;
flex-shrink: 0;
}
.title-divider {
@@ -513,6 +556,7 @@ fetchDataList({})
background: linear-gradient(90deg, #409eff, #87ceeb, transparent);
border-radius: 1px;
margin-bottom: 10px;
flex-shrink: 0;
}
.note-title-input {
@@ -522,6 +566,7 @@ fetchDataList({})
padding: 0 10px;
font-size: 13px;
box-shadow: 0 1px 3px rgba(0,0,0,0.05);
flex-shrink: 0;
}
.note-input {
height: 70px;
@@ -532,10 +577,12 @@ fetchDataList({})
font-size: 13px;
line-height: 1.5;
box-shadow: 0 1px 3px rgba(0,0,0,0.05);
flex-shrink: 0;
}
.selector-row {
display: flex;
gap: 8px;
flex-shrink: 0;
}
.tag-select, .date-picker {
flex: 1;
@@ -549,6 +596,7 @@ fetchDataList({})
cursor: pointer;
transition: background-color 0.2s;
font-size: 14px;
flex-shrink: 0;
}
.add-btn:hover {
background: #66b1ff;
@@ -571,7 +619,11 @@ fetchDataList({})
.doing-count { color: #409eff; }
.done-count { color: #67c23a; }
.rate-count { color: #1989fa; }
.stat-progress { margin-top: 10px; margin-bottom: 15px; }
.stat-progress {
margin-top: 10px;
margin-bottom: 0;
flex-shrink: 0;
}
.progress-bar {
height: 8px;
border-radius: 4px;
@@ -583,24 +635,15 @@ fetchDataList({})
.progress-doing { background: #409eff; }
.progress-done { background: #67c23a; }
.priority-stat-container {
margin-top: 15px;
border-top: 1px solid #e8f4ff;
padding-top: 10px;
}
.priority-stat-title {
font-size: 14px;
color: #409eff;
margin: 0 0 8px 0;
font-weight: 600;
}
.priority-cards {
display: flex;
gap: 8px;
width: 100%;
flex-wrap: wrap;
}
.priority-card {
flex: 1;
min-width: 80px;
border-radius: 6px;
padding: 8px 6px;
text-align: center;
@@ -669,19 +712,14 @@ fetchDataList({})
height: 6px;
background: transparent;
}
.note-grid::-webkit-scrollbar-track {
background: #f5f5f5;
border-radius: 3px;
margin: 10px 0;
}
.note-grid::-webkit-scrollbar-thumb {
background: #d9d9d9;
border-radius: 3px;
transition: background 0.2s ease;
}
.note-grid::-webkit-scrollbar-thumb:hover {
background: #b3b3b3;
}
@@ -720,16 +758,13 @@ fetchDataList({})
font-size: 12px;
min-height: 24px;
}
.card-divider {
width: 100%;
height: 1px;
background-color: #f0f0f0;
margin: 2px 0;
}
.card-title-row {
justify-content: flex-start;
font-weight: bold;
color: #333;
font-size: 14px;
@@ -739,26 +774,12 @@ fetchDataList({})
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
text-align: left;
}
.card-meta-row {
justify-content: space-between;
}
.card-priority {
color: #666;
}
.priority-low { color: #67c23a; }
.priority-medium { color: #409eff; }
.priority-high { color: #ff4d4f; }
.card-type {
color: #666;
}
.type-work { color: #1890ff; }
.type-life { color: #52c41a; }
.type-study { color: #fa8c16; }
.type-other { color: #722ed1; }
.card-priority { color: #67c23a; }
.card-type { color: #1890ff; }
.card-content-row {
flex: 1;
border: 1px solid #eee;
@@ -774,11 +795,8 @@ fetchDataList({})
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.5;
margin: 0;
color: #333;
height: 100%;
}
.card-time-row {
justify-content: space-between;
color: #999;
@@ -790,7 +808,6 @@ fetchDataList({})
text-overflow: ellipsis;
max-width: 45%;
}
.card-actions-row {
justify-content: space-between;
align-items: center;
@@ -798,10 +815,6 @@ fetchDataList({})
.deadline-time {
color: #666;
font-size: 11px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 50%;
}
.action-buttons {
display: flex;
@@ -816,16 +829,11 @@ fetchDataList({})
white-space: nowrap;
cursor: pointer;
min-width: 30px;
transition: background-color 0.2s;
}
.start-btn {background: #409eff; color: #fff;}
.start-btn:hover {background: #66b1ff;}
.complete-btn {background: #67c23a; color: #fff;}
.complete-btn:hover {background: #85ce61;}
.back-btn {background: #e6a23c; color: #fff;}
.back-btn:hover {background: #ebb563;}
.delete-btn {background: #ff4d4f; color: #fff;}
.delete-btn:hover {background: #ff7875;}
.empty-tip {
position: absolute;
@@ -852,14 +860,29 @@ fetchDataList({})
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 992px) {
.note-grid {
grid-template-columns: repeat(2, 1fr);
}
.left-panel { width: 35%; }
.right-panel { width: 65%; }
}
@media (max-width: 768px) {
.note-manager {
flex-direction: column;
height: auto;
}
.left-panel, .right-panel {
width: 100%;
height: auto;
}
.create-note,
.statistics-box,
.priority-stat-container {
flex: none;
height: auto;
margin-bottom: 10px;
}
.note-grid {
grid-template-columns: 1fr;
}