study/uTools-quickcommand
1
0
Fork 0
mirror of https://github.com/fofolee/uTools-quickcommand.git synced 2025-06-07 21:46:12 +08:00
Code Issues Packages Projects Releases Wiki Activity

quickcommandUI样式统一调整

Browse Source
This commit is contained in:
fofolee 2025-01-20 16:55:43 +08:00
parent e6bd6df550
commit d64f00a8b4
6 changed files with 124 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/quickcommandUI/ButtonBox.vue
View File

@ -1,9 +1,9 @@
<template>
<q-card class="q-dialog-plugin">
<q-card-section>
<div class="text-h5" align="center" v-text="options.title"></div>
<q-card class="q-dialog-plugin quickcommand-ui">
<q-card-section v-if="options.title">
<div class="text-h8" align="center" v-text="options.title"></div>
</q-card-section>
<q-card-section class="q-gutter-lg">
<q-card-section class="q-gutter-md">
<div v-for="(label, index) in options.labels" :key="index">
<q-btn
class="full-width"

28
src/components/quickcommandUI/ConfirmBox.vue
View File

@ -1,11 +1,19 @@
<template>
<q-card class="q-dialog-plugin" :style="{
width: options.width ? options.width + 'px' : '450px'
}">
<q-card-section>
<div class="text-h5" align="left" v-text="options.title"></div>
<q-card
class="quickcommand-ui q-dialog-plugin"
:style="{
width: options.width ? options.width + 'px' : '450px',
}"
>
<q-card-section class="row items-center q-gutter-sm">
<q-img src="logo.png" width="1.5rem" />
<div class="text-h8" align="left" v-text="options.title"></div>
</q-card-section>
<q-card-section v-if="options.isHtml" v-html="options.message" class="content" />
<q-card-section
v-if="options.isHtml"
v-html="options.message"
class="content"
/>
<q-card-section v-else v-text="options.message" class="content" />
<q-card-section class="flex justify-end q-gutter-sm">
<q-btn flat label="取消" color="grey" @click="hide" />
@ -36,4 +44,12 @@ export default {
overflow: auto;
max-height: 350px;
}
.q-card {
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}
.q-card--dark {
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}
</style>

28
src/components/quickcommandUI/InputBox.vue
View File

@ -1,14 +1,15 @@
<template>
<q-card class="q-dialog-plugin">
<q-card-section>
<q-card class="quickcommand-ui q-dialog-plugin" style="width: 60vw">
<q-card-section v-if="options.title">
<div class="text-h5" align="center" v-text="options.title"></div>
</q-card-section>
<q-card-section class="q-gutter-sm">
<q-card-section class="input-container">
<div v-for="(label, index) in options.labels" :key="index">
<div class="q-pa-xs">{{ label }}</div>
<q-input
outlined
dense
v-model="results[index]"
:label="label"
:hint="options.hints[index]"
hide-hint
:autofocus="index === 0"
@ -16,9 +17,9 @@
/>
</div>
</q-card-section>
<q-card-actions align="right">
<q-btn color="negative" label="取消" @click="hide" />
<q-btn color="blue-9" label="确定" @click="clickOK" />
<q-card-actions align="right" class="button-container">
<q-btn label="取消" color="grey" flat @click="hide" />
<q-btn color="primary" label="确定" flat @click="clickOK" />
</q-card-actions>
</q-card>
</template>
@ -44,3 +45,16 @@ export default {
},
};
</script>
<style scoped>
.input-container {
padding: 15px 15px 0 15px;
display: flex;
flex-direction: column;
gap: 5px;
}
.button-container {
padding: 5px 15px;
}
</style>

12
src/components/quickcommandUI/QuickCommand.vue
View File

@ -188,7 +188,7 @@ export default {
*
* 如需对每个选项单独注册点击事件，可以在initItems的元素中添加id和clickFn，如：
* initItems = [{id:1, title: "1", description: "1", clickFn:function(e){console.log(e)}}, {id:2, title: "2", description: "2", clickFn:function(e){console.log(e)}}]
*
*
* @example
* initItems = ["<div>1</div>", "<div>2</div>", "<div>3</div>"]
* options = {placeholder: "输入进行筛选，支持拼音", optionType: "html", enableSearch: true, showCancelButton: false, closeOnSelect: true}
@ -315,3 +315,13 @@ export default {
},
};
</script>
<style>
.quickcommand-ui.q-card {
background-color: #f4f4f4;
}
.body--dark .quickcommand-ui.q-card {
background-color: var(--q-dark-page);
}
</style>

10
src/components/quickcommandUI/SelectList.vue
View File

@ -1,5 +1,5 @@
<template>
<q-card @mousewheel="mouseHandler">
<q-card class="quickcommand-ui q-dialog-plugin" @mousewheel="mouseHandler">
<q-virtual-scroll
ref="scrollBar"
@scroll="scrollHandler"
@ -258,14 +258,6 @@ export default {
</script>
<style scoped>
.q-card {
background: #f4f4f4;
}
.q-card--dark {
background: #303133;
}
.shortcut {
user-select: none;
transition: 0;

77
src/components/quickcommandUI/TextArea.vue
View File

@ -1,25 +1,22 @@
<template>
<q-card class="q-dialog-plugin">
<q-card class="quickcommand-ui q-dialog-plugin">
<textarea
v-model="result"
:placeholder="options.placeholder"
autofocus
class="fixed container"
:style="{
top: 0,
bottom: 0,
left: 0,
right: 0,
background: '#00000000',
fontSize: '16px',
outline: 'none',
border: '3px solid #3577cb',
borderRadius: '5px',
}"
/>
<div class="fixed-bottom-right q-pa-md q-gutter-sm">
<q-btn round color="blue-grey" icon="arrow_back" @click="hide" />
<q-btn round color="primary" icon="done" @click="clickOK" />
<div class="fixed-bottom-right q-gutter-xs button-container">
<q-btn flat @click="hide" class="action-btn cancel-btn" label="取消" />
<q-btn
flat
@click="clickOK"
class="action-btn confirm-btn"
label="确定"
/>
</div>
</q-card>
</template>
@ -45,3 +42,59 @@ export default {
},
};
</script>
<style scoped>
textarea {
top: 10px;
bottom: 10px;
left: 10px;
right: 10px;
background: rgba(0, 0, 0, 0.03);
font-size: 16px;
padding: 16px;
border-radius: 4px;
border: none;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
textarea:focus {
box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.1);
background: rgba(0, 0, 0, 0.05);
}
.body--dark textarea {
background: rgba(255, 255, 255, 0.05);
box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.1);
color: #fff;
}
.body--dark textarea:focus {
background: rgba(255, 255, 255, 0.08);
}
.button-container {
padding-bottom: 25px;
padding-right: 30px;
}
.action-btn {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
padding: 0 5px;
}
.action-btn:hover {
transform: scale(1.05);
}
.confirm-btn {
color: var(--q-primary);
}
.cancel-btn {
color: rgba(0, 0, 0, 0.5);
}
.body--dark .cancel-btn {
color: rgba(255, 255, 255, 0.5);
}
</style>