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

다크 모드에서 화이트로 배경 변경

Browse Source
main
jschoi 7 months ago
parent b1abc8f68f
commit 7d8fb8b8af
16 changed files with 96 additions and 84 deletions
Show Stats Download Patch File Download Diff File

34
src/components/common/LayoutComponent.vue
Unescape View File

@ -211,7 +211,7 @@ onBeforeUnmount(() => {
<div <div
variant="text" variant="text"
size="large" size="large"
class="brand-btn text-h5 text-primary" class="brand-btn text-h5"
@click="goMain" @click="goMain"
aria-label="Home" aria-label="Home"
> >
@ -220,8 +220,6 @@ onBeforeUnmount(() => {
<!-- 중앙: 메뉴 그룹 (Settings 전/후 분기) --> <!-- 중앙: 메뉴 그룹 (Settings 전/후 분기) -->
<div class="center-nav d-none d-md-flex" v-if="!hideAllMenus"> <div class="center-nav d-none d-md-flex" v-if="!hideAllMenus">
<!-- 관리자 메뉴: showAdminTabs 조건으로 표시 -->
<!-- 관리자 메뉴바: 기본 메뉴바와 1:1 동일 구조 -->
<template v-if="showAdminTabs"> <template v-if="showAdminTabs">
<template v-for="(m, i) in adminMenus" :key="'am_' + i"> <template v-for="(m, i) in adminMenus" :key="'am_' + i">
<!-- 드롭다운 있는 항목 --> <!-- 드롭다운 있는 항목 -->
@ -308,12 +306,7 @@ onBeforeUnmount(() => {
(m.path && m.path.startsWith('/run')) (m.path && m.path.startsWith('/run'))
" "
> >
<v-card <v-card rounded="lg" elevation="12" class="px-2 py-2">
rounded="lg"
elevation="12"
color="surface"
class="px-2 py-2"
>
<v-list density="comfortable" lines="one" class="min-w-48"> <v-list density="comfortable" lines="one" class="min-w-48">
<template v-for="(d, j) in m.depth" :key="'run_' + j"> <template v-for="(d, j) in m.depth" :key="'run_' + j">
<v-hover v-slot="{ isHovering, props: liProps }"> <v-hover v-slot="{ isHovering, props: liProps }">
@ -322,14 +315,13 @@ onBeforeUnmount(() => {
:title="d.title" :title="d.title"
:to="d.path" :to="d.path"
:active="isLinkActive(d.path)" :active="isLinkActive(d.path)"
color="primary"
:rounded="'lg'" :rounded="'lg'"
:variant=" :variant="
isHovering || isLinkActive(d.path) isHovering || isLinkActive(d.path)
? 'tonal' ? 'tonal'
: 'text' : 'text'
" "
class="mx-2 my-1 text-white" class="mx-2 my-1"
/> />
</v-hover> </v-hover>
</template> </template>
@ -337,7 +329,6 @@ onBeforeUnmount(() => {
</v-card> </v-card>
</template> </template>
<!-- 기본 하위메뉴 (Run 이외는 기존 그대로) -->
<template v-else> <template v-else>
<v-list density="compact" class="min-w-48 subnav-list"> <v-list density="compact" class="min-w-48 subnav-list">
<v-list-item <v-list-item
@ -345,7 +336,7 @@ onBeforeUnmount(() => {
:key="'d_' + j" :key="'d_' + j"
:title="d.title" :title="d.title"
:to="d.path" :to="d.path"
class="submenu-item text-white" class="submenu-item"
:class="{ 'submenu-active': isLinkActive(d.path) }" :class="{ 'submenu-active': isLinkActive(d.path) }"
/> />
</v-list> </v-list>
@ -373,8 +364,7 @@ onBeforeUnmount(() => {
<template #activator="{ props }" v-if="!hideAllMenus"> <template #activator="{ props }" v-if="!hideAllMenus">
<v-btn <v-btn
icon icon
color="primary" class="mr-2 text-white"
class="mr-2"
v-bind="props" v-bind="props"
@click="toggleAdmin" @click="toggleAdmin"
aria-label="Settings" aria-label="Settings"
@ -388,8 +378,7 @@ onBeforeUnmount(() => {
<template #activator="{ props }"> <template #activator="{ props }">
<v-btn <v-btn
icon icon
color="primary" class="mr-2 text-white"
class="mr-2"
@click="goSelect" @click="goSelect"
v-bind="props" v-bind="props"
aria-label="Project" aria-label="Project"
@ -400,15 +389,17 @@ onBeforeUnmount(() => {
</v-tooltip> </v-tooltip>
<div class="d-none d-md-flex flex-column align-end userbox"> <div class="d-none d-md-flex flex-column align-end userbox">
<div class="font-weight-black">{{ username || "GUEST" }}</div> <div class="font-weight-black text-white">
<div class="text-subtitle-2"> {{ username || "GUEST" }}
</div>
<div class="text-subtitle-2 text-white">
{{ projectName || "No Project Selected" }} {{ projectName || "No Project Selected" }}
</div> </div>
</div> </div>
<v-menu location="bottom end"> <v-menu location="bottom end">
<template #activator="{ props }"> <template #activator="{ props }">
<v-btn icon color="primary" v-bind="props" class="mr-1"> <v-btn icon v-bind="props" class="mr-1 text-white">
<v-icon>mdi-arrow-down-drop-circle-outline</v-icon> <v-icon>mdi-arrow-down-drop-circle-outline</v-icon>
</v-btn> </v-btn>
</template> </template>
@ -441,7 +432,7 @@ onBeforeUnmount(() => {
<style scoped> <style scoped>
.topbar { .topbar {
background: rgba(18, 18, 18, 0.7) !important; background: #121212 !important;
backdrop-filter: saturate(140%) blur(8px); backdrop-filter: saturate(140%) blur(8px);
border-bottom: 1px solid rgba(255, 255, 255, 0.06); border-bottom: 1px solid rgba(255, 255, 255, 0.06);
} }
@ -451,6 +442,7 @@ onBeforeUnmount(() => {
font-weight: 800; font-weight: 800;
letter-spacing: 0.08em; letter-spacing: 0.08em;
padding: 0 14px; padding: 0 14px;
color: #fff;
} }
/* 중앙 고정 네비게이션 */ /* 중앙 고정 네비게이션 */

2
src/components/templates/Datasets/ListComponent.vue
Unescape View File

@ -484,7 +484,7 @@ watch(
</v-sheet> </v-sheet>
<!-- 목록 --> <!-- 목록 -->
<v-card class="rounded-lg pa-8"> <v-card class="rounded-lg pa-8" color="grey-lighten-4">
<v-col cols="12"> <v-col cols="12">
<v-sheet> <v-sheet>
<v-table <v-table

2
src/components/templates/datagroup/ListComponent.vue
Unescape View File

@ -462,7 +462,7 @@ onMounted(fetchList);
</v-sheet> </v-sheet>
<!-- Table --> <!-- Table -->
<v-card class="rounded-lg pa-8"> <v-card class="rounded-lg pa-8" color="grey-lighten-4">
<v-col cols="12"> <v-col cols="12">
<v-sheet> <v-sheet>
<v-table <v-table

2
src/components/templates/deployment/ListComponent.vue
Unescape View File

@ -424,7 +424,7 @@ const getSelectedAllData = () => {
</v-sheet> </v-sheet>
</v-sheet> </v-sheet>
<v-card class="rounded-lg pa-8"> <v-card class="rounded-lg pa-8" color="grey-lighten-4">
<v-col cols="12"> <v-col cols="12">
<v-sheet> <v-sheet>
<v-table <v-table

82
src/components/templates/home/ListComponent.vue
Unescape View File

@ -679,10 +679,15 @@ watch(showKubeflowDetails, async () => {
<v-row> <v-row>
<!-- Recent Run --> <!-- Recent Run -->
<v-col cols="12" md="6"> <v-col cols="12" md="6">
<v-card class="pa-0" style="min-height: 450px; max-height: 450px"> <v-card
class="pa-0"
:elevation="0"
color="grey-lighten-4"
style="min-height: 450px; max-height: 450px"
>
<div <div
class="d-flex align-center justify-space-between w-100" class="d-flex align-center justify-space-between w-100"
style="padding: 16px; border-bottom: 1px solid #ccc" style="padding: 16px"
> >
<h3 class="text-subtitle-1 font-weight-bold mb-0">Recent Run</h3> <h3 class="text-subtitle-1 font-weight-bold mb-0">Recent Run</h3>
@ -696,7 +701,7 @@ watch(showKubeflowDetails, async () => {
Go to Executions Go to Executions
</v-btn> </v-btn>
</div> </div>
<v-divider />
<div style="overflow-y: auto; max-height: 380px; padding: 8px 16px"> <div style="overflow-y: auto; max-height: 380px; padding: 8px 16px">
<v-skeleton-loader <v-skeleton-loader
v-if="runsLoading" v-if="runsLoading"
@ -705,7 +710,7 @@ watch(showKubeflowDetails, async () => {
v-for="i in 4" v-for="i in 4"
:key="i" :key="i"
/> />
<v-list v-else density="comfortable"> <v-list v-else density="comfortable" class="bg-transparent">
<v-list-item <v-list-item
v-for="(runRow, idx) in recentRuns" v-for="(runRow, idx) in recentRuns"
:key="idx" :key="idx"
@ -761,10 +766,15 @@ watch(showKubeflowDetails, async () => {
<!-- Workflows --> <!-- Workflows -->
<v-col cols="12" md="6"> <v-col cols="12" md="6">
<v-card class="pa-0" style="min-height: 450px; max-height: 450px"> <v-card
class="pa-0"
:elevation="0"
color="grey-lighten-4"
style="min-height: 450px; max-height: 450px"
>
<div <div
class="d-flex align-center justify-space-between w-100" class="d-flex align-center justify-space-between w-100"
style="padding: 16px; border-bottom: 1px solid #ccc" style="padding: 16px"
> >
<h3 class="text-subtitle-1 font-weight-bold mb-0"> <h3 class="text-subtitle-1 font-weight-bold mb-0">
Recently Registered Workflow Recently Registered Workflow
@ -779,9 +789,9 @@ watch(showKubeflowDetails, async () => {
Go to Workflows Go to Workflows
</v-btn> </v-btn>
</div> </div>
<v-divider />
<div style="overflow-y: auto; max-height: 380px; padding: 8px 16px"> <div style="overflow-y: auto; max-height: 380px; padding: 8px 16px">
<v-list density="comfortable" nav> <v-list density="comfortable" class="bg-transparent" nav>
<v-list-item <v-list-item
v-for="wfRow in workflows v-for="wfRow in workflows
.slice(0, 10) .slice(0, 10)
@ -793,7 +803,7 @@ watch(showKubeflowDetails, async () => {
<span class="text-body-2 font-weight-medium">{{ <span class="text-body-2 font-weight-medium">{{
wfRow.name wfRow.name
}}</span> }}</span>
<span class="text-caption text-grey-lighten-1">{{ <span class="text-caption text-body-2">{{
fmtYmdHm(wfRow.modDt) fmtYmdHm(wfRow.modDt)
}}</span> }}</span>
</div> </div>
@ -818,8 +828,13 @@ watch(showKubeflowDetails, async () => {
<!-- Kubeflow --> <!-- Kubeflow -->
<v-col cols="12" md="6"> <v-col cols="12" md="6">
<v-card class="pa-0" style="min-height: 450px; max-height: 450px"> <v-card
<div style="padding: 16px; border-bottom: 1px solid #3a3a3a"> class="pa-0"
:elevation="0"
color="grey-lighten-4"
style="min-height: 450px; max-height: 450px"
>
<div style="padding: 16px">
<div class="d-flex align-center justify-space-between w-100"> <div class="d-flex align-center justify-space-between w-100">
<h3 class="text-subtitle-1 font-weight-bold mb-0"> <h3 class="text-subtitle-1 font-weight-bold mb-0">
Run Status Overview Run Status Overview
@ -860,7 +875,7 @@ watch(showKubeflowDetails, async () => {
</v-btn> </v-btn>
</div> </div>
</div> </div>
<v-divider />
<div style="height: 380px"> <div style="height: 380px">
<!-- Only Chart --> <!-- Only Chart -->
<div <div
@ -963,28 +978,30 @@ watch(showKubeflowDetails, async () => {
<!-- Dataset (fixed height, inner scroll, compact) --> <!-- Dataset (fixed height, inner scroll, compact) -->
<v-col cols="12" md="6"> <v-col cols="12" md="6">
<v-card class="pa-0 d-flex flex-column" :height="450"> <v-card
<!-- Header (고정 높이) --> class="pa-0"
<div :elevation="0"
class="d-flex align-center justify-space-between w-100 pa-4 flex-shrink-0" color="grey-lighten-4"
> style="min-height: 450px; max-height: 450px"
<h3 class="text-subtitle-1 font-weight-bold mb-0"> >
DataGroup Update Activity <div style="padding: 16px">
</h3> <div class="d-flex align-center justify-space-between w-100">
<v-btn <h3 class="text-subtitle-1 font-weight-bold mb-0">
variant="text" DataGroup Update Activity
class="text-caption font-weight-bold" </h3>
append-icon="mdi-arrow-right" <v-btn
style="text-transform: none" variant="text"
@click="goDatasets" class="text-caption font-weight-bold"
> append-icon="mdi-arrow-right"
Go to DataGroup style="text-transform: none"
</v-btn> @click="goDatasets"
>
Go to DataGroup
</v-btn>
</div>
</div> </div>
<v-divider /> <v-divider />
<v-sheet class="pa-3 flex-grow-1 overflow-auto bg-transparent">
<!-- Body (남은 영역만 스크롤) -->
<v-sheet class="pa-3 flex-grow-1 overflow-auto">
<v-skeleton-loader <v-skeleton-loader
v-if="dsLoading" v-if="dsLoading"
type="list-item-two-line" type="list-item-two-line"
@ -997,6 +1014,7 @@ watch(showKubeflowDetails, async () => {
<v-expansion-panel <v-expansion-panel
v-for="g in groupSummaries" v-for="g in groupSummaries"
:key="g.id" :key="g.id"
:elevation="3"
@group:selected=" @group:selected="
async (e: any) => { async (e: any) => {
if (e.value) await loadDatasetsForGroup(g.id, g.name); if (e.value) await loadDatasetsForGroup(g.id, g.name);

2
src/components/templates/projects/ListComponent.vue
Unescape View File

@ -588,7 +588,7 @@ onMounted(async () => {
</v-sheet> </v-sheet>
<!-- 테이블 --> <!-- 테이블 -->
<v-card class="rounded-lg pa-8"> <v-card class="rounded-lg pa-8" color="grey-lighten-4">
<v-col cols="12"> <v-col cols="12">
<v-sheet> <v-sheet>
<v-table <v-table

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

@ -632,7 +632,7 @@ onMounted(() => {
</v-sheet> </v-sheet>
<!-- 목록 --> <!-- 목록 -->
<v-card class="rounded-lg pa-8"> <v-card class="rounded-lg pa-8" color="grey-lighten-4">
<v-col cols="12"> <v-col cols="12">
<v-sheet> <v-sheet>
<v-table <v-table

2
src/components/templates/run/experiment/ListComponent.vue
Unescape View File

@ -390,7 +390,7 @@ onMounted(() => {
</v-sheet> </v-sheet>
<!-- 목록 --> <!-- 목록 -->
<v-card class="rounded-lg pa-8"> <v-card class="rounded-lg pa-8" color="grey-lighten-4">
<v-col cols="12"> <v-col cols="12">
<v-sheet> <v-sheet>
<v-table <v-table

2
src/components/templates/stepconfig/ListComponent.vue
Unescape View File

@ -407,7 +407,7 @@ onMounted(() => {
</v-sheet> </v-sheet>
<!-- 테이블 --> <!-- 테이블 -->
<v-card class="rounded-lg pa-8"> <v-card class="rounded-lg pa-8" color="grey-lighten-4">
<v-col cols="12"> <v-col cols="12">
<v-sheet> <v-sheet>
<v-table <v-table

2
src/components/templates/trainingscript/ListComponent.vue
Unescape View File

@ -463,7 +463,7 @@ watch(
</v-sheet> </v-sheet>
<!-- 목록 --> <!-- 목록 -->
<v-card class="rounded-lg pa-8"> <v-card class="rounded-lg pa-8" color="grey-lighten-4">
<v-col cols="12"> <v-col cols="12">
<v-sheet> <v-sheet>
<v-table <v-table

2
src/components/templates/trainingscriptgroup/ListComponent.vue
Unescape View File

@ -462,7 +462,7 @@ onMounted(fetchList);
</v-sheet> </v-sheet>
<!-- Table --> <!-- Table -->
<v-card class="rounded-lg pa-8"> <v-card class="rounded-lg pa-8" color="grey-lighten-4">
<v-col cols="12"> <v-col cols="12">
<v-sheet> <v-sheet>
<v-table <v-table

2
src/components/templates/users/ListComponent.vue
Unescape View File

@ -484,7 +484,7 @@ onMounted(async () => {
</v-sheet> </v-sheet>
<!-- 테이블 --> <!-- 테이블 -->
<v-card class="rounded-lg pa-8"> <v-card class="rounded-lg pa-8" color="grey-lighten-4">
<v-col cols="12"> <v-col cols="12">
<v-sheet> <v-sheet>
<v-table <v-table

2
src/components/templates/workflow/ListComponent.vue
Unescape View File

@ -432,7 +432,7 @@ onMounted(() => {
</v-sheet> </v-sheet>
</v-sheet> </v-sheet>
<v-card class="rounded-lg pa-8"> <v-card class="rounded-lg pa-8" color="grey-lighten-4">
<v-col cols="12"> <v-col cols="12">
<v-sheet> <v-sheet>
<v-table <v-table

8
src/pages/LoginView.vue
Unescape View File

@ -89,7 +89,7 @@ const signIn = () => {
<v-text-field <v-text-field
v-model="data.username" v-model="data.username"
:readonly="data.loading" :readonly="data.loading"
class="mb-2" class="mb-2 text-white"
variant="outlined" variant="outlined"
color="secondary" color="secondary"
placeholder="아이디를 입력해주세요." placeholder="아이디를 입력해주세요."
@ -98,10 +98,10 @@ const signIn = () => {
<v-text-field <v-text-field
v-model="data.password" v-model="data.password"
:readonly="data.loading" :readonly="data.loading"
type="password" type="password "
variant="outlined" variant="outlined"
color="secondary" color="secondary"
class="mb-2" class="mb-2 text-white"
placeholder="비밀번호를 입력해주세요." placeholder="비밀번호를 입력해주세요."
></v-text-field> ></v-text-field>
@ -118,7 +118,7 @@ const signIn = () => {
</v-btn> </v-btn>
</v-form> </v-form>
<div class="mt-4 text-center"> <div class="mt-4 text-center text-white">
<span>계정이 없으십니까?</span> <span>계정이 없으십니까?</span>
<router-link <router-link
to="/signup" to="/signup"

10
src/pages/SignupView.vue
Unescape View File

@ -96,7 +96,7 @@ const signUp = () => {
<v-text-field <v-text-field
v-model="data.username" v-model="data.username"
:readonly="data.loading" :readonly="data.loading"
class="mb-2" class="mb-2 text-white"
variant="outlined" variant="outlined"
color="secondary" color="secondary"
placeholder="아이디를 입력해주세요." placeholder="아이디를 입력해주세요."
@ -104,7 +104,7 @@ const signUp = () => {
<v-text-field <v-text-field
v-model="data.email" v-model="data.email"
:readonly="data.loading" :readonly="data.loading"
class="mb-2" class="mb-2 text-white"
variant="outlined" variant="outlined"
color="secondary" color="secondary"
placeholder="이메일을 입력해주세요." placeholder="이메일을 입력해주세요."
@ -115,7 +115,7 @@ const signUp = () => {
:rules="[(v) => !!v || '역할을 선택해주세요.']" :rules="[(v) => !!v || '역할을 선택해주세요.']"
variant="outlined" variant="outlined"
placeholder="Role" placeholder="Role"
class="mb-2" class="mb-2 text-white"
/> />
<v-text-field <v-text-field
v-model="data.password" v-model="data.password"
@ -123,7 +123,7 @@ const signUp = () => {
type="password" type="password"
variant="outlined" variant="outlined"
color="secondary" color="secondary"
class="mb-2" class="mb-2 text-white"
placeholder="비밀번호를 입력해주세요." placeholder="비밀번호를 입력해주세요."
></v-text-field> ></v-text-field>
@ -140,7 +140,7 @@ const signUp = () => {
</v-btn> </v-btn>
</v-form> </v-form>
<div class="mt-4 text-center"> <div class="mt-4 text-center text-white">
<span>계정이 있으십니까?</span> <span>계정이 있으십니까?</span>
<router-link <router-link
to="/login" to="/login"

24
src/plugins/vuetify.js
Unescape View File

@ -1,19 +1,21 @@
/**
* plugins/vuetify.js
*
* Framework documentation: https://vuetifyjs.com`
*/
// Styles
import "@mdi/font/css/materialdesignicons.css"; import "@mdi/font/css/materialdesignicons.css";
import "vuetify/styles"; import "vuetify/styles";
// Composables
import { createVuetify } from "vuetify"; import { createVuetify } from "vuetify";
// https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides
export default createVuetify({ export default createVuetify({
theme: { theme: {
defaultTheme: "dark", defaultTheme: "light",
themes: {
light: {
colors: {
background: "#ffffff", // ⬅️ 페이지 배경을 흰색으로
surface: "#ffffff", // 기본 표면도 흰색
card: "#f7f8fa", // 카드만 아주 연한 회색(원하면 #ffffff로)
border: "#e7e9ee",
text: "#2b2f33",
muted: "#6b7280",
},
},
},
}, },
}); });

Write Preview
Loading…
Cancel
Save