duxingchen/track
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI升级: Footer图标上文字下防截断 + TreeCanvas全屏翻页大卡片(320x460)

Browse Source
This commit is contained in:
duxingchen
2026-08-06 10:02:50 +08:00
parent e183ea5583
commit da8db95141
2 changed files with 21 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
track-uniapp/src/pages/scan/components/TreeCanvas.vue
View File

@ -13,7 +13,7 @@
class="tree-movable-view"
direction="all"
:x="0" :y="0"
:scale="true" :scale-min="0.5" :scale-max="2"
:scale="true" :scale-min="0.3" :scale-max="2"
:style="{ width: canvasWidth + 'px', height: canvasHeight + 'px' }"
>
<view class="canvas-inner">
@ -93,7 +93,7 @@ export default {
if (currentLevel.length > 0) levels.push(currentLevel);
// 4. 计算 X, Y 坐标
const CARD_W = 240, CARD_H = 140, GAP_X = 60, GAP_Y = 80;
const CARD_W = 320, CARD_H = 460, GAP_X = 80, GAP_Y = 120;
const nodes = [];
nodes._lines = [];
@ -167,24 +167,24 @@ export default {
.canvas-hint { font-size: 11px; color: #9ca3af; text-align: center; padding: 8px 0; background: #fff; border-bottom: 1px solid #e5e7eb; flex-shrink: 0; }
.tree-movable-area { flex: 1; width: 100%; background-color: #f8fafc; background-image: linear-gradient(#e5e7eb 1px, transparent 1px), linear-gradient(90deg, #e5e7eb 1px, transparent 1px); background-size: 20px 20px; }
.canvas-inner { position: absolute; left: 0; top: 0; }
.canvas-node { position: absolute; width: 240px; min-height: 120px; background: #ffffff; border-radius: 14px; padding: 16px; box-shadow: 0 8px 24px rgba(0,0,0,0.10), 0 2px 4px rgba(0,0,0,0.06); border-left: 8px solid #3b82f6; z-index: 10; display: flex; flex-direction: column; gap: 8px; }
.canvas-node { position: absolute; width: 320px; min-height: 460px; background: #ffffff; border-radius: 20px; padding: 24px; box-shadow: 0 10px 30px rgba(0,0,0,0.10), 0 4px 8px rgba(0,0,0,0.06); border-left: 12px solid #3b82f6; z-index: 10; display: flex; flex-direction: column; gap: 10px; }
.canvas-node.s-yellow { border-left-color: #f59e0b; }
.canvas-node.s-blue { border-left-color: #3b82f6; }
.canvas-node.s-green { border-left-color: #22c55e; }
.canvas-node.s-red { border-left-color: #ef4444; }
.cn-header { display: flex; align-items: center; justify-content: space-between; }
.cn-name { font-size: 16px; font-weight: 800; color: #1f2937; }
.cn-badge { font-size: 11px; padding: 2px 8px; border-radius: 8px; font-weight: 700; }
.cn-name { font-size: 24px; font-weight: 800; color: #1f2937; }
.cn-badge { font-size: 14px; padding: 4px 12px; border-radius: 8px; font-weight: 700; }
.cn-badge.s-yellow { background: #fef3c7; color: #b45309; }
.cn-badge.s-blue { background: #dbeafe; color: #1d4ed8; }
.cn-badge.s-green { background: #dcfce7; color: #15803d; }
.cn-badge.s-red { background: #fce4ec; color: #be123c; }
.cn-assignee { font-size: 13px; color: #6b7280; font-weight: 500; }
.tag-rework { font-size: 11px; color: #fff; background: #ef4444; padding: 2px 6px; border-radius: 6px; display: inline-block; width: max-content; }
.cn-remark { font-size: 12px; color: #a16207; background: #fefce8; padding: 6px 10px; border-radius: 6px; border: 1px solid #fef08a; line-height: 1.4; word-break: break-all; }
.cn-footer { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 10px; border-top: 1px dashed #e5e7eb; }
.cn-end { font-size: 11px; font-weight: 700; color: #16a34a; }
.cn-assignee { font-size: 16px; color: #6b7280; font-weight: 500; margin-top: 10px; }
.tag-rework { font-size: 13px; color: #fff; background: #ef4444; padding: 4px 10px; border-radius: 6px; display: inline-block; width: max-content; }
.cn-remark { font-size: 16px; color: #a16207; background: #fefce8; padding: 16px; border-radius: 8px; border: 1px solid #fef08a; line-height: 1.5; word-break: break-all; min-height: 100px; white-space: normal; margin-top: 16px; }
.cn-footer { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 14px; border-top: 1px dashed #e5e7eb; }
.cn-end { font-size: 13px; font-weight: 700; color: #16a34a; }
.cn-end-wh { color: #7c3aed; }
.cn-records { font-size: 12px; color: #2563eb; font-weight: 700; background: #eff6ff; padding: 2px 8px; border-radius: 12px; }
.canvas-line { position: absolute; height: 3px; background: #cbd5e1; z-index: 1; transform-origin: 0 0; }
.cn-records { font-size: 14px; color: #2563eb; font-weight: 700; background: #eff6ff; padding: 4px 12px; border-radius: 12px; }
.canvas-line { position: absolute; height: 3px; background: #94a3b8; z-index: 1; transform-origin: 0 0; }
</style>

16
track-uniapp/src/pages/scan/components/WorkspaceArea.vue
View File

@ -77,15 +77,15 @@
<view class="footer-actions">
<button v-if="lockedTask.status === 'WIP'" class="footer-btn footer-transfer"
@tap="$emit('action', { task: lockedTask, type: 'transfer' })">🔄 完工转交</button>
@tap="$emit('action', { task: lockedTask, type: 'transfer' })"><text class="btn-icon">🔄</text><text class="btn-txt">完工转交</text></button>
<button v-if="lockedTask.status === 'WIP'" class="footer-btn footer-record"
@tap="$emit('action', { task: lockedTask, type: 'record' })">📝 记录/拍照</button>
@tap="$emit('action', { task: lockedTask, type: 'record' })"><text class="btn-icon">📝</text><text class="btn-txt">记录拍照</text></button>
<button v-if="lockedTask.status === 'WIP'" class="footer-btn footer-spawn"
@tap="$emit('action', { task: lockedTask, type: 'spawn' })">➕ 派发协助分支</button>
@tap="$emit('action', { task: lockedTask, type: 'spawn' })"><text class="btn-icon">➕</text><text class="btn-txt">派发协助</text></button>
<button v-if="lockedTask.status === 'PENDING'" class="footer-btn footer-receive"
@tap="$emit('action', { task: lockedTask, type: 'receive' })">✅ 接收任务</button>
@tap="$emit('action', { task: lockedTask, type: 'receive' })"><text class="btn-icon">✅</text><text class="btn-txt">接收任务</text></button>
<button v-if="lockedTask.status === 'PENDING'" class="footer-btn footer-reject"
@tap="$emit('action', { task: lockedTask, type: 'reject' })">❌ 驳回任务</button>
@tap="$emit('action', { task: lockedTask, type: 'reject' })"><text class="btn-icon">❌</text><text class="btn-txt">驳回任务</text></button>
</view>
</template>
</view>
@ -184,9 +184,11 @@ export default {
.zero-task { display: flex; flex-direction: column; align-items: center; padding: 24px 0; }
.zero-icon { font-size: 40px; margin-bottom: 8px; }
.zero-text { font-size: 14px; color: #9ca3af; }
.footer-actions { display: flex; gap: 20rpx; padding: 20rpx 30rpx; padding-bottom: calc(20rpx + env(safe-area-inset-bottom)); background: #ffffff; box-shadow: 0 -2rpx 10rpx rgba(0,0,0,0.05); flex-shrink: 0; }
.footer-btn { flex: 1; height: 88rpx; border: none; border-radius: 12rpx; font-size: 30rpx; font-weight: 700; line-height: 88rpx; }
.footer-actions { display: flex; gap: 12rpx; padding: 16rpx 20rpx; padding-bottom: calc(16rpx + env(safe-area-inset-bottom)); background: #ffffff; box-shadow: 0 -2rpx 10rpx rgba(0,0,0,0.05); flex-shrink: 0; }
.footer-btn { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100rpx; border: none; border-radius: 16rpx; line-height: 1.2; padding: 0; }
.footer-btn::after { border: none; }
.btn-icon { font-size: 36rpx; margin-bottom: 6rpx; }
.btn-txt { font-size: 24rpx; font-weight: 700; }
.footer-transfer { background: #dcfce7; color: #16a34a; }
.footer-record { background: #eff6ff; color: #2563eb; }
.footer-receive { background: #dbeafe; color: #1d4ed8; }