mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-04-22 07:19:41 +00:00
1221756e05
## Summary Enable `better-tailwindcss/enforce-canonical-classes` lint rule and auto-fix all 611 violations across 173 files. Stacked on #9417. ## Changes - **What**: Simplify Tailwind classes to canonical forms via `eslint --fix`: - `h-X w-X` → `size-X` - `overflow-x-hidden overflow-y-hidden` → `overflow-hidden` - and other canonical simplifications - Enable `enforce-canonical-classes` as `'error'` in eslint config ## Review Focus Mechanical auto-fix PR — all changes produced by `eslint --fix`. No visual or behavioral changes; canonical forms are functionally identical. **Stack:** #9417 → **this PR** → PR 3 (class order) Fixes #9300 (partial — 2 of 3 rules) ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-9427-fix-enable-enforce-canonical-classes-tailwind-lint-rule-31a6d73d365081a49340d7d4640ede45) by [Unito](https://www.unito.io)
95 lines
2.5 KiB
Vue
95 lines
2.5 KiB
Vue
<template>
|
|
<div class="size-full bg-transparent">
|
|
<p v-if="errorMessage" class="p-4 text-center">
|
|
{{ errorMessage }}
|
|
</p>
|
|
<ProgressSpinner
|
|
v-else-if="loading"
|
|
class="relative inset-0 z-10 flex h-full items-center justify-center"
|
|
/>
|
|
<BaseTerminal v-show="!loading" @created="terminalCreated" />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { until } from '@vueuse/core'
|
|
import { storeToRefs } from 'pinia'
|
|
import ProgressSpinner from 'primevue/progressspinner'
|
|
import type { Ref } from 'vue'
|
|
import { onMounted, onUnmounted, ref } from 'vue'
|
|
|
|
import type { useTerminal } from '@/composables/bottomPanelTabs/useTerminal'
|
|
import type { LogEntry, LogsWsMessage } from '@/schemas/apiSchema'
|
|
import { api } from '@/scripts/api'
|
|
import { useExecutionStore } from '@/stores/executionStore'
|
|
|
|
import BaseTerminal from './BaseTerminal.vue'
|
|
|
|
const errorMessage = ref('')
|
|
const loading = ref(true)
|
|
|
|
const terminalCreated = (
|
|
{ terminal, useAutoSize }: ReturnType<typeof useTerminal>,
|
|
root: Ref<HTMLElement | undefined>
|
|
) => {
|
|
// Auto-size terminal to fill container width.
|
|
// minCols: 80 ensures minimum width for colab environments.
|
|
// See https://github.com/comfyanonymous/ComfyUI/issues/6396
|
|
useAutoSize({ root, autoRows: true, autoCols: true, minCols: 80 })
|
|
|
|
const update = (entries: Array<LogEntry>) => {
|
|
terminal.write(entries.map((e) => e.m).join(''))
|
|
}
|
|
|
|
const logReceived = (e: CustomEvent<LogsWsMessage>) => {
|
|
update(e.detail.entries)
|
|
}
|
|
|
|
const loadLogEntries = async () => {
|
|
const logs = await api.getRawLogs()
|
|
update(logs.entries)
|
|
}
|
|
|
|
const watchLogs = async () => {
|
|
const { clientId } = storeToRefs(useExecutionStore())
|
|
if (!clientId.value) {
|
|
await until(clientId).not.toBeNull()
|
|
}
|
|
await api.subscribeLogs(true)
|
|
api.addEventListener('logs', logReceived)
|
|
}
|
|
|
|
onMounted(async () => {
|
|
try {
|
|
await loadLogEntries()
|
|
} catch (err) {
|
|
console.error('Error loading logs', err)
|
|
// On older backends the endpoints won't exist
|
|
errorMessage.value =
|
|
'Unable to load logs, please ensure you have updated your ComfyUI backend.'
|
|
return
|
|
}
|
|
|
|
await watchLogs()
|
|
loading.value = false
|
|
})
|
|
|
|
onUnmounted(async () => {
|
|
if (api.clientId) {
|
|
await api.subscribeLogs(false)
|
|
}
|
|
api.removeEventListener('logs', logReceived)
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
:deep(.p-terminal) .xterm {
|
|
overflow-x: auto;
|
|
}
|
|
|
|
:deep(.p-terminal) .xterm-screen {
|
|
overflow-y: hidden;
|
|
}
|
|
</style>
|