fix: logs viewer scoller
This commit is contained in:
engigu
@@ -22,8 +22,9 @@ password =
|
||||
dbname = baihu
|
||||
# 数据库文件路径 (仅 sqlite)
|
||||
path = data/baihu.db
|
||||
# 数据库 DSN (仅 mysql/mariadb, 如果设置则优先使用。注意：需同时将 type 设置为 mysql)
|
||||
# 例如: user:password@unix(/var/run/mysqld/mysqld.sock)/dbname?charset=utf8mb4&parseTime=True&loc=Local
|
||||
# 数据库 DSN (仅 mysql/postgres, 如果设置则优先使用。注意：需同时将 type 设置为 mysql 或 postgres)
|
||||
# 例如 (MySQL): user:password@unix(/var/run/mysqld/mysqld.sock)/dbname?charset=utf8mb4&parseTime=True&loc=Local
|
||||
# 例如 (Postgres): postgres://user:password@localhost:5432/dbname?sslmode=disable
|
||||
dsn =
|
||||
# 表前缀
|
||||
table_prefix = baihu_
|
||||
|
||||
@@ -20,7 +20,7 @@
|
||||
| `BH_DB_PASSWORD` | database.password | 数据库密码 | - |
|
||||
| `BH_DB_NAME` | database.dbname | 数据库库名 | baihu |
|
||||
| `BH_DB_PATH` | database.path | SQLite 物理文件存储路径 | ./data/baihu.db |
|
||||
| `BH_DB_DSN` | database.dsn | 数据库 DSN (仅 mysql, 优先级高。**需同时设置 type=mysql**) | - |
|
||||
| `BH_DB_DSN` | database.dsn | 数据库 DSN (仅 mysql/postgres, 优先级高。**需对应设置 type**) | - |
|
||||
| `BH_DB_TABLE_PREFIX` | database.table_prefix | 数据库表前缀 | baihu_ |
|
||||
|
||||
---
|
||||
@@ -46,9 +46,10 @@ url_prefix = /baihu
|
||||
[database]
|
||||
type = sqlite
|
||||
path = /app/data/baihu.db
|
||||
# mysql 连接示例 (Unix Socket):
|
||||
# 注意：使用 dsn 时，type 必须设为 mysql
|
||||
# 数据库连接示例 (Unix Socket / DSN):
|
||||
# 注意：使用 dsn 时，type 必须设为 mysql 或 postgres
|
||||
# dsn = user:password@unix(/var/run/mysqld/mysqld.sock)/dbname?charset=utf8mb4&parseTime=True&loc=Local
|
||||
# dsn = postgres://user:password@localhost:5432/dbname?sslmode=disable
|
||||
table_prefix = baihu_
|
||||
```
|
||||
|
||||
|
||||
@@ -48,8 +48,11 @@ func Init(cfg *Config) error {
|
||||
}
|
||||
dialector = mysql.Open(dsn)
|
||||
case "postgres":
|
||||
dsn := fmt.Sprintf("host=%s port=%d user=%s password=%s dbname=%s sslmode=disable TimeZone=Asia/Shanghai",
|
||||
cfg.Host, cfg.Port, cfg.User, cfg.Password, cfg.DBName)
|
||||
dsn := cfg.DSN
|
||||
if dsn == "" {
|
||||
dsn = fmt.Sprintf("host=%s port=%d user=%s password=%s dbname=%s sslmode=disable TimeZone=Asia/Shanghai",
|
||||
cfg.Host, cfg.Port, cfg.User, cfg.Password, cfg.DBName)
|
||||
}
|
||||
dialector = postgres.Open(dsn)
|
||||
default:
|
||||
return fmt.Errorf("unsupported database type: %s", cfg.Type)
|
||||
|
||||
@@ -1,22 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onUnmounted, watch } from 'vue'
|
||||
import { Terminal } from '@xterm/xterm'
|
||||
import { FitAddon } from '@xterm/addon-fit'
|
||||
import '@xterm/xterm/css/xterm.css'
|
||||
|
||||
const lightTheme = {
|
||||
background: '#f4f4f5', // zinc-100
|
||||
foreground: '#18181b', // zinc-900
|
||||
cursor: '#18181b',
|
||||
selectionBackground: 'rgba(0, 0, 0, 0.15)',
|
||||
}
|
||||
|
||||
const darkTheme = {
|
||||
background: '#09090b', // zinc-950
|
||||
foreground: '#e4e4e7', // zinc-200
|
||||
cursor: '#e4e4e7',
|
||||
selectionBackground: 'rgba(255, 255, 255, 0.2)',
|
||||
}
|
||||
import { ref, onMounted, nextTick, watch } from 'vue'
|
||||
import Ansi from 'ansi-to-vue3'
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
@@ -32,109 +16,76 @@ const props = withDefaults(
|
||||
}
|
||||
)
|
||||
|
||||
const terminalRef = ref<HTMLDivElement | null>(null)
|
||||
let terminal: Terminal | null = null
|
||||
let fitAddon: FitAddon | null = null
|
||||
const lightBackgroundClass = 'terminal-theme-light'
|
||||
const darkBackgroundClass = 'terminal-theme-dark'
|
||||
const scrollContainerRef = ref<HTMLDivElement | null>(null)
|
||||
const lightBackgroundClass = 'bg-zinc-100 text-zinc-900'
|
||||
const darkBackgroundClass = 'bg-zinc-950 text-zinc-300' // 稍微调亮一点暗色模式文字
|
||||
|
||||
function getTheme() {
|
||||
return props.theme === 'dark' ? darkTheme : lightTheme
|
||||
// 自动滚动到底部逻辑
|
||||
const scrollToBottom = () => {
|
||||
if (props.autoScroll && scrollContainerRef.value) {
|
||||
scrollContainerRef.value.scrollTop = scrollContainerRef.value.scrollHeight
|
||||
}
|
||||
}
|
||||
|
||||
function initTerminal() {
|
||||
if (!terminalRef.value) return
|
||||
|
||||
terminal = new Terminal({
|
||||
fontSize: props.fontSize,
|
||||
fontFamily: "'JetBrains Mono', 'Fira Code', monospace",
|
||||
theme: getTheme(),
|
||||
allowProposedApi: true,
|
||||
convertEol: true,
|
||||
disableStdin: true,
|
||||
cursorBlink: false,
|
||||
rows: 10,
|
||||
})
|
||||
|
||||
fitAddon = new FitAddon()
|
||||
terminal.loadAddon(fitAddon)
|
||||
terminal.open(terminalRef.value)
|
||||
|
||||
if (props.content) {
|
||||
terminal.write(props.content)
|
||||
}
|
||||
|
||||
setTimeout(() => {
|
||||
fitAddon?.fit()
|
||||
}, 50)
|
||||
}
|
||||
|
||||
watch(() => props.content, (newContent, oldContent) => {
|
||||
if (!terminal) return
|
||||
|
||||
if (newContent.length < oldContent.length) {
|
||||
terminal.clear()
|
||||
terminal.write(newContent)
|
||||
} else {
|
||||
const appended = newContent.slice(oldContent.length)
|
||||
terminal.write(appended)
|
||||
}
|
||||
|
||||
watch(() => props.content, () => {
|
||||
if (props.autoScroll) {
|
||||
terminal.scrollToBottom()
|
||||
nextTick(scrollToBottom)
|
||||
}
|
||||
})
|
||||
|
||||
watch(() => props.theme, () => {
|
||||
if (terminal) {
|
||||
terminal.options.theme = getTheme()
|
||||
}
|
||||
})
|
||||
|
||||
function handleResize() {
|
||||
fitAddon?.fit()
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
window.addEventListener('resize', handleResize)
|
||||
setTimeout(initTerminal, 100)
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('resize', handleResize)
|
||||
if (terminal) {
|
||||
terminal.dispose()
|
||||
if (props.autoScroll) {
|
||||
setTimeout(scrollToBottom, 50)
|
||||
}
|
||||
})
|
||||
|
||||
defineExpose({
|
||||
fit: () => fitAddon?.fit(),
|
||||
clear: () => terminal?.clear()
|
||||
fit: () => { },
|
||||
clear: () => { },
|
||||
scrollToBottom
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
ref="terminalRef"
|
||||
class="w-full h-full min-h-0"
|
||||
ref="scrollContainerRef"
|
||||
class="w-full h-full overflow-y-auto overflow-x-auto log-container native-scroll"
|
||||
:class="theme === 'dark' ? darkBackgroundClass : lightBackgroundClass"
|
||||
/>
|
||||
:style="{ fontSize: fontSize + 'px' }"
|
||||
><div class="inline-block min-w-full p-3 font-mono leading-normal whitespace-pre text-left"><Ansi>{{ content }}</Ansi></div></div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.terminal-theme-light {
|
||||
background-color: #f4f4f5;
|
||||
.native-scroll {
|
||||
scrollbar-gutter: stable;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
overscroll-behavior-y: contain;
|
||||
}
|
||||
|
||||
.terminal-theme-dark {
|
||||
background-color: #09090b;
|
||||
/* 强制覆盖 ansi-to-vue3 可能生成的 code 样式 */
|
||||
:deep(code) {
|
||||
background: transparent !important;
|
||||
font-family: inherit;
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
:deep(.xterm) {
|
||||
padding: 8px;
|
||||
/* 滚动条美化 */
|
||||
.native-scroll::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
:deep(.xterm-viewport),
|
||||
:deep(.xterm-screen) {
|
||||
background-color: inherit !important;
|
||||
|
||||
.native-scroll::-webkit-scrollbar-thumb {
|
||||
background: rgba(128, 128, 128, 0.2);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.native-scroll::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(128, 128, 128, 0.4);
|
||||
}
|
||||
|
||||
.native-scroll::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, computed, watch, nextTick } from 'vue'
|
||||
import { ref, onMounted, computed, watch } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { TASK_STATUS, TASK_TYPE } from '@/constants'
|
||||
import { Button } from '@/components/ui/button'
|
||||
@@ -175,11 +175,6 @@ async function selectLog(log: TaskLog) {
|
||||
wsContent.value = event.data
|
||||
} else {
|
||||
wsContent.value += event.data
|
||||
// 自动滚动到底部
|
||||
nextTick(() => {
|
||||
const pre = document.querySelector('.log-pre')
|
||||
if (pre) pre.scrollTop = pre.scrollHeight
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -56,9 +56,9 @@ onUnmounted(() => {
|
||||
<div
|
||||
class="bg-background rounded-lg shadow-lg flex flex-col w-full sm:w-[90vw] md:w-[80vw] max-w-5xl h-[90vh] sm:h-[85vh]">
|
||||
<div
|
||||
class="flex flex-col sm:flex-row sm:items-center justify-between px-3 sm:px-4 py-2 sm:py-3 border-b shrink-0 gap-2">
|
||||
<div class="flex items-center gap-3 min-w-0">
|
||||
<span class="text-sm font-medium truncate">{{ title }}</span>
|
||||
class="flex items-center justify-between px-3 sm:px-4 py-2 sm:py-3 border-b shrink-0 gap-3">
|
||||
<div class="flex items-center gap-3 min-w-0 flex-1">
|
||||
<span class="text-sm font-medium truncate" :title="title">{{ title }}</span>
|
||||
<div v-if="status"
|
||||
class="flex items-center gap-1.5 px-2 py-0.5 rounded text-[10px] font-bold uppercase transition-colors shrink-0"
|
||||
:class="status === 'success' ? 'bg-green-500/10 text-green-500 border border-green-500/20' :
|
||||
@@ -72,8 +72,8 @@ onUnmounted(() => {
|
||||
{{ status === 'success' ? '成功' : status === 'failed' ? '失败' : '执行中' }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<Button variant="ghost" size="icon" class="h-7 w-7 shrink-0" @click="close">
|
||||
<div class="flex items-center gap-2 shrink-0">
|
||||
<Button variant="ghost" size="icon" class="h-8 w-8 sm:h-7 sm:w-7" @click="close">
|
||||
<X class="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user