Autoflow
/
autoflow-web-console
23
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

style: 상세페이지 스타일 수정 변경

Browse Source
main
jschoi 7 months ago
parent 5c813eaf60
commit 349c54ac19
6 changed files with 88 additions and 70 deletions
Show Stats Download Patch File Download Diff File

10
src/components/templates/Datasets/ViewComponent.vue
Unescape View File

@ -192,7 +192,11 @@ watch(
</v-card-item>
</v-card>
<v-card flat class="bordered-box mb-6 w-100 rounded-lg pa-8">
<v-card
flat
class="bordered-box mb-6 w-100 rounded-lg pa-8"
color="grey-lighten-3"
>
<v-card-text class="px-6 pb-6 pt-4">
<v-row align="center" class="py-2">
<v-col cols="3" class="text-h6 font-weight-bold"
@ -254,9 +258,9 @@ watch(
</v-col>
</v-row>
</v-card-text>
<v-sheet class="d-flex justify-end mb-2">
<div class="d-flex justify-end mb-2">
<v-btn color="primary" @click="emit('close')"> Back to List </v-btn>
</v-sheet>
</div>
</v-card>
</v-card>
</v-container>

2
src/components/templates/run/executions/CompareComponent.vue
Unescape View File

@ -261,7 +261,7 @@ onMounted(() => {
class="bg-shades-transparent d-flex flex-column justify-center w-100"
>
<!-- 1) Workflow Information -->
<v-card flat class="bg-shades-transparent w-100">
<v-card flat class="bg-shades-transparent w-100" color="grey-lighten-3">
<v-card-item class="text-h5 font-weight-bold pt-0 pa-5 pl-0">
<div class="d-flex flex-row justify-start align-center">
<div>Compare Executions</div>

114
src/components/templates/run/executions/ViewComponent.vue
Unescape View File

@ -851,7 +851,11 @@ const artifactsLoading = ref(false);
<v-window v-model="mainTab">
<!-- ========= Details ========= -->
<v-window-item value="details">
<v-card flat class="bordered-box mb-6 w-100 rounded-lg pa-8">
<v-card
flat
class="bordered-box mb-6 w-100 rounded-lg pa-8"
color="grey-lighten-3"
>
<v-card-title class="grey lighten-4 py-2 px-4">
<span class="font-weight-bold">Execution Information</span>
</v-card-title>
@ -959,15 +963,15 @@ const artifactsLoading = ref(false);
</v-row>
</v-card-text>
<v-sheet class="d-flex justify-end mb-2">
<div class="d-flex justify-end mb-2">
<v-btn color="primary" @click="emit('close')">Back to List</v-btn>
</v-sheet>
</div>
</v-card>
</v-window-item>
<!-- ========= Visualizations ========= -->
<v-window-item value="viz">
<v-card class="rounded-lg pa-8 w-100">
<v-card class="rounded-lg pa-8 w-100" color="grey-lighten-3">
<v-window v-model="vizTab">
<v-window-item value="metrics">
<v-card-text>
@ -1030,15 +1034,28 @@ const artifactsLoading = ref(false);
</v-row>
<!-- Selected Run -->
<v-card class="mb-6" variant="tonal">
<v-card-title class="py-2 px-4">Selected Run</v-card-title>
<v-card-text class="px-4 pb-4">
<!-- Selected Run -->
<v-card flat class="mb-6" color="grey-lighten-3">
<v-card-title
class="py-2 px-0 text-button text-medium-emphasis"
>
Selected Run
</v-card-title>
<v-card-text class="px-0">
<v-row>
<!-- 기본 정보 -->
<v-col cols="12" md="6">
<v-table density="comfortable">
<thead>
<tr>
<th style="width: 40%">Field</th>
<th>Value</th>
</tr>
</thead>
<tbody>
<tr>
<td style="width: 40%">Run ID</td>
<td>Run ID</td>
<td>{{ runDetail?.info?.run_id || "—" }}</td>
</tr>
<tr>
@ -1077,12 +1094,17 @@ const artifactsLoading = ref(false);
</v-table>
</v-col>
<!-- 파라미터 + 태그 -->
<v-col cols="12" md="6">
<div class="text-subtitle-2 mb-2">Parameters</div>
<v-table density="compact">
<div
class="text-subtitle-2 text-medium-emphasis mb-2"
>
Parameters
</div>
<v-table density="compact" class="mb-4">
<thead>
<tr>
<th>Key</th>
<th style="width: 40%">Key</th>
<th>Value</th>
</tr>
</thead>
@ -1101,42 +1123,16 @@ const artifactsLoading = ref(false);
</tr>
</tbody>
</v-table>
</v-col>
</v-row>
<v-row class="mt-4">
<v-col cols="12" md="6">
<div class="text-subtitle-2 mb-2">Metrics</div>
<v-table density="compact">
<thead>
<tr>
<th>Metric</th>
<th>Value</th>
</tr>
</thead>
<tbody>
<tr v-if="!runDetail?.data?.metrics?.length">
<td colspan="2" class="text-medium-emphasis">
No metrics
</td>
</tr>
<tr
v-for="m in runDetail?.data?.metrics || []"
:key="m.key"
>
<td>{{ m.key }}</td>
<td>{{ m.value }}</td>
</tr>
</tbody>
</v-table>
</v-col>
<v-col cols="12" md="6">
<div class="text-subtitle-2 mb-2">Tags</div>
<div
class="text-subtitle-2 text-medium-emphasis mb-2"
>
Tags
</div>
<v-table density="compact">
<thead>
<tr>
<th>Key</th>
<th style="width: 40%">Key</th>
<th>Value</th>
</tr>
</thead>
@ -1166,7 +1162,7 @@ const artifactsLoading = ref(false);
</v-card>
<!-- Model Metrics table -->
<v-card flat class="mb-6">
<v-card flat class="mb-6" color="grey-lighten-3">
<v-card-title
class="py-2 px-0 text-button text-medium-emphasis"
>Model Metrics (selected run)</v-card-title
@ -1196,7 +1192,7 @@ const artifactsLoading = ref(false);
</v-card>
<!-- Bar chart -->
<v-card flat class="mb-6">
<v-card flat class="mb-6" color="grey-lighten-3">
<v-card-title
class="py-2 px-0 text-button text-medium-emphasis"
>Metrics (bar chart)</v-card-title
@ -1226,15 +1222,15 @@ const artifactsLoading = ref(false);
</v-window-item>
</v-window>
<v-sheet class="d-flex justify-end mb-2">
<div class="d-flex justify-end mb-2">
<v-btn color="primary" @click="emit('close')">Back to List</v-btn>
</v-sheet>
</div>
</v-card>
</v-window-item>
<!-- ========= Artifacts (Two-step, Flat) ========= -->
<v-window-item value="artifacts">
<v-card class="rounded-lg pa-8 w-100">
<v-card class="rounded-lg pa-8 w-100" color="grey-lighten-3">
<v-card-text>
<v-row class="mb-4" align="center">
<v-col
@ -1278,6 +1274,7 @@ const artifactsLoading = ref(false);
<v-icon start size="16">mdi-check-decagram</v-icon>
{{ externalAuth?.name || externalAuth?.id }}
</v-chip>
<v-btn
size="small"
color="primary"
@ -1287,6 +1284,7 @@ const artifactsLoading = ref(false);
>
<v-icon start size="16">mdi-rocket-launch</v-icon> Deploy
</v-btn>
<v-btn
v-if="isAuthenticated"
size="small"
@ -1325,9 +1323,14 @@ const artifactsLoading = ref(false);
{{ twoStepError }}
</v-alert>
<v-card variant="tonal">
<v-card-title class="py-2 px-4">Artifacts</v-card-title>
<v-divider />
<!-- 바깥 카드도 flat, 타이틀 톤 통일 -->
<v-card flat color="grey-lighten-3" class="mb-2">
<v-card-title
class="py-2 px-0 text-button text-medium-emphasis"
>
Artifacts
</v-card-title>
<v-card-text class="px-0">
<v-table density="comfortable">
<thead>
@ -1338,6 +1341,7 @@ const artifactsLoading = ref(false);
<th style="width: 180px" class="text-right">Actions</th>
</tr>
</thead>
<tbody>
<tr v-if="twoStepLoading">
<td
@ -1413,9 +1417,7 @@ const artifactsLoading = ref(false);
/>
</template>
<template v-else>
<v-btn size="small" variant="text" @click="">
Open
</v-btn>
<v-btn size="small" variant="text">Open</v-btn>
</template>
</td>
</tr>
@ -1427,9 +1429,9 @@ const artifactsLoading = ref(false);
</v-card>
</v-card-text>
<v-sheet class="d-flex justify-end mb-2">
<div class="d-flex justify-end mb-2">
<v-btn color="primary" @click="emit('close')">Back to List</v-btn>
</v-sheet>
</div>
</v-card>
</v-window-item>
</v-window>

11
src/components/templates/run/experiment/ViewComponent.vue
Unescape View File

@ -194,6 +194,7 @@ watch(
<v-card
flat
class="bordered-box mb-6 w-100 rounded-lg pa-8 position-relative"
color="grey-lighten-3"
>
<v-card-title class="grey lighten-4 py-2 px-4">
<span class="font-weight-bold">Experiment Information</span>
@ -247,18 +248,18 @@ watch(
</v-card>
<!-- Runs -->
<v-card class="rounded-lg pa-8 w-100">
<v-card class="rounded-lg pa-8 w-100" color="grey-lighten-3">
<v-card-title class="grey lighten-4 py-2 px-4">
<span class="font-weight-bold">Runs</span>
</v-card-title>
<v-card-text class="px-6 pb-2 pt-4">
<v-sheet class="d-flex align-center justify-between mb-4">
<div class="d-flex align-center justify-between mb-4">
<div class="text-body-2">
총 {{ runRows.length.toLocaleString() }}개 · Experiment ID:
<strong>{{ experimentId || "-" }}</strong>
</div>
</v-sheet>
</div>
<v-table density="comfortable" fixed-header height="420">
<colgroup>
@ -336,9 +337,9 @@ watch(
</v-card-actions>
</v-card-text>
<v-sheet class="d-flex justify-end mb-2">
<div class="d-flex justify-end mb-2">
<v-btn color="primary" @click="emit('close')">Back to List</v-btn>
</v-sheet>
</div>
</v-card>
</v-card>
</v-container>

16
src/components/templates/trainingscript/ViewComponent.vue
Unescape View File

@ -115,7 +115,11 @@ onBeforeUnmount(() => {
</v-card-item>
</v-card>
<v-card flat class="bordered-box mb-6 w-100 rounded-lg pa-8">
<v-card
flat
class="bordered-box mb-6 w-100 rounded-lg pa-8"
color="grey-lighten-3"
>
<v-card-title class="grey lighten-4 py-2 px-4">
<span class="font-weight-bold">Training Script Information</span>
</v-card-title>
@ -160,16 +164,20 @@ onBeforeUnmount(() => {
</v-card>
<!-- 미리보기 -->
<v-card flat class="bordered-box mb-6 w-100 rounded-lg pa-8">
<v-card
flat
class="bordered-box mb-6 w-100 rounded-lg pa-8"
color="grey-lighten-3"
>
<v-card-title class="grey lighten-4 py-2 px-4">
<span class="font-weight-bold">Training Script Preview</span>
</v-card-title>
<v-card-text class="px-6 pb-6 pt-4">
<div ref="editorRef" class="editor-container"></div>
</v-card-text>
<v-sheet class="d-flex justify-end mb-2">
<div class="d-flex justify-end mb-2">
<v-btn color="primary" @click="emit('close')">Back to List</v-btn>
</v-sheet>
</div>
</v-card>
</v-container>
</template>

5
src/components/templates/workflow/ViewComponent.vue
Unescape View File

@ -222,7 +222,10 @@ const steps = ref<
<!-- Details 탭 -->
<template v-if="activeTab === 'details'">
<v-card class="bordered-box mb-6 w-100 rounded-lg pa-8 step-card">
<v-card
class="bordered-box mb-6 w-100 rounded-lg pa-8 step-card"
color="grey-lighten-3"
>
<v-card-title class="grey lighten-4 py-2 px-4">
<span class="font-weight-bold">Workflow Information</span>
</v-card-title>

Write Preview
Loading…
Cancel
Save