dsrptlab/test
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update flow fit and refine prototype screens

Browse Source
This commit is contained in:
Ruslan Bakiev
2026-02-10 17:44:25 +07:00
parent 0b94afc8d4
commit 092f42d019
2 changed files with 71 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
app/app.vue
View File

@@ -163,6 +163,8 @@
<div class="flow-wrapper glass-panel rounded-3xl border border-base-300 p-4">
<ClientOnly>
<VueFlow
:id="flowId"
class="h-full w-full"
:nodes="flowNodes"
:edges="flowEdges"
:fit-view-on-init="true"
@@ -404,9 +406,11 @@
</template>
<script setup>
import { onMounted, onUnmounted, ref } from 'vue'
import { VueFlow, Handle, Position, MarkerType } from '@vue-flow/core'
import { onMounted, onUnmounted, nextTick, ref } from 'vue'
import { VueFlow, Handle, Position, MarkerType, useVueFlow } from '@vue-flow/core'
import Granim from 'granim'
import '@vue-flow/core/dist/style.css'
import '@vue-flow/core/dist/theme-default.css'
useHead({
title: 'Контроль ремонта — презентация',
@@ -416,6 +420,7 @@ useHead({
})
let granimInstance
const flowId = 'key-user-flow'
const flowNodes = ref([
{
id: '1',
@@ -498,6 +503,8 @@ const flowEdges = ref([
{ id: 'e6-7', source: '6', target: '7', sourceHandle: 'source-r', targetHandle: 'target-l', type: 'straight', markerEnd: MarkerType.ArrowClosed }
])
const { fitView } = useVueFlow({ id: flowId })
onMounted(() => {
granimInstance = new Granim({
element: '#canvas-basic',
@@ -514,6 +521,10 @@ onMounted(() => {
}
})
nextTick(() => {
fitView({ padding: 0.08 })
})
onUnmounted(() => {
if (granimInstance && granimInstance.pause) granimInstance.pause()
})
@@ -521,8 +532,6 @@ onMounted(() => {
</script>
<style>
@import '@vue-flow/core/dist/style.css';
@import '@vue-flow/core/dist/theme-default.css';
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;600;700&family=Space+Grotesk:wght@400;600;700&display=swap');
:root {
@@ -553,7 +562,7 @@ html {
.flow-wrapper {
width: 100%;
height: 100%;
height: 320px;
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: thin;
@@ -579,20 +588,6 @@ html {
height: 100%;
}
.vue-flow {
position: relative;
}
.vue-flow__nodes {
position: absolute;
top: 0;
left: 0;
}
.vue-flow__edges {
position: absolute;
inset: 0;
}
.flow-card {
min-width: 160px;
@@ -716,12 +711,7 @@ html {
.flow-slide .slide-main {
flex: 1;
min-height: 420px;
}
.flow-main .flow-wrapper {
height: 100%;
min-height: 420px;
min-height: 360px;
}
.glass-panel {

84
public/prototype.html
View File

@@ -25,17 +25,46 @@
height: 100%;
display: flex;
flex-direction: column;
gap: 10px;
padding: 14px 12px 16px;
gap: 12px;
padding: 72px 16px 18px;
background: #eef1f4;
}
.screen-title {
font-size: 20px;
font-weight: 800;
letter-spacing: -0.02em;
color: #14171c;
}
.screen-subtitle {
margin-top: 6px;
font-size: 12px;
color: rgba(27, 31, 35, 0.65);
}
.analysis-hero {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
gap: 10px;
padding: 8px 12px;
}
.analysis-sub {
font-size: 12px;
color: rgba(27, 31, 35, 0.6);
}
.card {
background: #ffffff;
background: transparent;
border-radius: 12px;
border: 1px solid rgba(27, 31, 35, 0.1);
padding: 14px;
box-shadow: 0 8px 18px rgba(27, 31, 35, 0.08);
border: none;
padding: 0;
box-shadow: none;
}
.card.main {
@@ -62,6 +91,7 @@
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 6px;
margin-top: 12px;
}
.thumb {
@@ -108,17 +138,12 @@
z-index: 1;
}
.analysis {
display: grid;
gap: 10px;
margin-top: 6px;
}
.loader {
height: 8px;
background: rgba(15, 76, 129, 0.12);
border-radius: 999px;
overflow: hidden;
width: 140px;
}
.loader__bar {
@@ -138,6 +163,7 @@
width: 100%;
border-collapse: collapse;
font-size: 11px;
margin-top: 12px;
}
.table th,
@@ -182,6 +208,7 @@
grid-template-columns: 54px 1fr;
gap: 10px;
align-items: center;
margin-top: 12px;
padding: 10px;
border-radius: 12px;
background: #f0f2f4;
@@ -206,6 +233,12 @@
color: rgba(27, 31, 35, 0.6);
}
.accept-note {
margin-top: 8px;
font-size: 11px;
color: rgba(27, 31, 35, 0.6);
}
.tag {
display: inline-flex;
align-items: center;
@@ -234,7 +267,7 @@
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 8px;
margin-top: 12px;
padding: 8px 10px;
border-radius: 10px;
background: #f0f2f4;
@@ -287,7 +320,7 @@
.list {
display: grid;
gap: 8px;
margin-top: 8px;
margin-top: 12px;
}
.item {
@@ -345,8 +378,7 @@
{
content: function () {
return (
'<div class="section-title">Материалы</div>' +
'<div class="media-count">8 фото · 2 видео</div>' +
'<div class="screen-title">Добавление объекта</div>' +
'<div class="media-grid">' +
'<div class="thumb" style="background-image:url(https://images.unsplash.com/photo-1502005097973-6a7082348e28?auto=format&fit=crop&w=600&q=60)"></div>' +
'<div class="thumb" style="background-image:url(https://images.unsplash.com/photo-1484154218962-a197022b5858?auto=format&fit=crop&w=600&q=60)"></div>' +
@@ -369,10 +401,10 @@
{
content: function () {
return (
'<div class="section-title">Анализ</div>' +
'<div class="analysis">' +
'<div class="analysis-hero">' +
'<div class="screen-title">Анализируем объект</div>' +
'<div class="analysis-sub">Формируем смету, этапы и критерии приемки</div>' +
'<div class="loader"><div class="loader__bar" id="loaderBar"></div></div>' +
'<div class="hint">5 секунд</div>' +
'</div>'
);
},
@@ -400,6 +432,8 @@
{
content: function () {
return (
'<div class="screen-title">Готовая смета по вашему объекту</div>' +
'<div class="screen-subtitle">Ознакомьтесь с этапами работ и итоговой стоимостью.</div>' +
'<table class="table">' +
'<thead><tr><th>Работы</th><th>Старт</th><th>Финиш</th><th>Сумма</th></tr></thead>' +
'<tbody>' +
@@ -430,16 +464,13 @@
},
{
content: function () {
var statusTag = state.accepted ? '<span class="tag success">Принято</span>' : '<span class="tag pending">Ожидает</span>';
var payTag = state.accepted ? '<span class="tag success">Переводится</span>' : '<span class="tag pending">Ожидает</span>';
return (
'<div class="section-title">Приемка</div>' +
'<div class="screen-title">Подтвердите выполнение этапа работ</div>' +
'<div class="accept-card">' +
'<div class="accept-photo" style="background-image:url(https://images.unsplash.com/photo-1484154218962-a197022b5858?auto=format&fit=crop&w=600&q=60)"></div>' +
'<div>' +
'<div class="accept-title">Черновые работы</div>' +
'<div class="accept-meta">Эксперт подтвердил · Смирнов А.</div>' +
'<div class="tag info" style="margin-top:6px;">Фото-отчет загружен</div>' +
'<div class="accept-meta">Исполнитель: Смирнов А. · Фотоотчет загружен</div>' +
'</div>' +
'</div>' +
'<div class="toggle-row">' +
@@ -449,10 +480,7 @@
'<span class="slider"></span>' +
'</label>' +
'</div>' +
'<div class="list">' +
'<div class="item"><strong>Статус</strong>' + statusTag + '</div>' +
'<div class="item"><strong>Оплата</strong>' + payTag + '</div>' +
'</div>'
'<div class="accept-note">Подтверждая приемку работ, вы переводите оплату исполнителю.</div>'
);
},
onEnter: function () {