mower-ng/launcher
5
0
Fork 0
Code Issues 13 Pull requests Releases 9 Activity

界面优化

Browse source 
1.启动程序界面字体对齐
2.编辑实例名称时保持行高和实例名称位置不变
3.修改实例名称输入框添加可清除选项
4.打开配置路径按钮移到右侧按钮处
This commit is contained in:
li-xiaochen 2025-03-22 20:39:56 +08:00
parent e3c2627fc5
commit 06fab427aa
2 changed files with 22 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
ui/src/main.js
View file

@ -1,4 +1,3 @@
import 'vfonts/Lato.css'
import 'vfonts/FiraCode.css' import 'vfonts/FiraCode.css'
import './styles/global.css' import './styles/global.css'

32
ui/src/pages/Launch.vue
View file

@ -175,8 +175,8 @@ async function handle_migrate(key) {
显示日志 显示日志
</div> </div>
</n-space> </n-space>
<n-list class="instance-list" bordered> <n-list class="instance_list" bordered>
<n-list-item> <n-list-item class="instance_list_item">
<template #prefix> <template #prefix>
<n-checkbox <n-checkbox
v-model:checked="check_all" v-model:checked="check_all"
@ -187,29 +187,26 @@ async function handle_migrate(key) {
> >
</template> </template>
</n-list-item> </n-list-item>
<n-list-item v-for="(item, index) in conf.instances" :key="index"> <n-list-item class="instance_list_item" v-for="(item, index) in conf.instances" :key="index">
<template #prefix> <template #prefix>
<n-checkbox v-model:checked="item.checked"></n-checkbox> <n-checkbox v-model:checked="item.checked"></n-checkbox>
</template> </template>
<n-space vertical> <n-space vertical>
<n-space v-if="update_instance_name_index != index"> <n-space v-if="update_instance_name_index != index">
<n-text>{{ item.name }}</n-text> <n-text class="instance_name">{{ item.name }}</n-text>
<n-button size="tiny" @click="start_update_instance_name(index)"> <n-button size="tiny" @click="start_update_instance_name(index)">
<template #icon> <template #icon>
<n-icon :component="Pencil"></n-icon> <n-icon :component="Pencil"></n-icon>
</template> </template>
</n-button> </n-button>
<n-button @click="open_folder(item.path)" size="tiny">
<template #icon>
<n-icon :component="Folder"></n-icon>
</template>
</n-button>
</n-space> </n-space>
<n-input <n-input
v-else v-else
class="instance_name_input"
:ref="(el) => setInstanceNameInputRef(el, index)" :ref="(el) => setInstanceNameInputRef(el, index)"
v-model:value="item.name" v-model:value="item.name"
@blur="end_update_instance_name" @blur="end_update_instance_name"
clearable
></n-input> ></n-input>
</n-space> </n-space>
<template #suffix> <template #suffix>
@ -234,6 +231,11 @@ async function handle_migrate(key) {
<n-icon :component="Stop"></n-icon> <n-icon :component="Stop"></n-icon>
</template> </template>
</n-button> </n-button>
<n-button type="primary" ghost size="small" @click="open_folder(item.path)">
<template #icon>
<n-icon :component="Folder"></n-icon>
</template>
</n-button>
<n-popconfirm @positive-click="delete_instance(index, item.path)"> <n-popconfirm @positive-click="delete_instance(index, item.path)">
<template #trigger> <template #trigger>
<n-button type="error" ghost size="small"> <n-button type="error" ghost size="small">
@ -256,9 +258,18 @@ async function handle_migrate(key) {
.launch-btn { .launch-btn {
height: 38px; height: 38px;
} }
.instance-list { .instance_list {
overflow: auto; overflow: auto;
} }
.instance_list_item {
height: 50px;
}
.instance_name {
margin-left: 12px;
}
.instance_name_input {
height: 35px;
}
.log { .log {
min-height: 40vh; min-height: 40vh;
max-height: 40vh; max-height: 40vh;
@ -269,5 +280,6 @@ async function handle_migrate(key) {
} }
.is_show_log_switch { .is_show_log_switch {
margin-right: 20px; margin-right: 20px;
text-align: center;
} }
</style> </style>