mirror of
https://github.com/fofolee/uTools-quickcommand.git
synced 2025-06-30 13:02:46 +08:00
为小界面优化布局
This commit is contained in:
fofolee
parent
41484991ab
commit
3ffe0d2c82
@ -1,13 +1,13 @@
|
||||
<template>
|
||||
<div class="command-composer">
|
||||
<!-- 主体内容 -->
|
||||
<div class="composer-body row no-wrap q-pa-sm q-gutter-sm">
|
||||
<div class="composer-body row no-wrap">
|
||||
<!-- 左侧命令列表 -->
|
||||
<div class="col-3 command-section">
|
||||
<div class="section-header">
|
||||
<div class="col-3 command-section command-list">
|
||||
<!-- <div class="section-header">
|
||||
<q-icon name="list" size="20px" class="q-mr-sm text-primary" />
|
||||
<span class="text-subtitle1">可用命令</span>
|
||||
</div>
|
||||
</div> -->
|
||||
<q-scroll-area class="command-scroll">
|
||||
<ComposerList
|
||||
:commands="availableCommands"
|
||||
@ -17,28 +17,21 @@
|
||||
</div>
|
||||
|
||||
<!-- 右侧命令流程 -->
|
||||
<div class="col q-pl-md command-section">
|
||||
<div class="col command-section command-flow">
|
||||
<div class="section-header">
|
||||
<q-icon name="timeline" size="20px" class="q-mr-sm text-primary" />
|
||||
<span class="text-subtitle1">命令流程</span>
|
||||
<q-space />
|
||||
<CodePreview :generate-code="generateFlowCode" />
|
||||
<ComposerButtons
|
||||
:generate-code="generateFlowCode"
|
||||
@action="handleComposer"
|
||||
/>
|
||||
</div>
|
||||
<q-scroll-area class="command-scroll">
|
||||
<ComposerFlow v-model="commandFlow" @add-command="addCommand" />
|
||||
</q-scroll-area>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 固定底部 -->
|
||||
<div class="composer-footer q-pa-sm row justify-end">
|
||||
<div class="action-buttons q-gutter-sm">
|
||||
<q-btn label="取消" v-close-popup />
|
||||
<q-btn color="primary" label="插入" @click="handleComposer('insert')" />
|
||||
<q-btn color="primary" label="应用" @click="handleComposer('apply')" />
|
||||
<q-btn color="positive" label="运行" @click="handleComposer('run')" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -46,7 +39,7 @@
|
||||
import { defineComponent, provide, ref } from "vue";
|
||||
import ComposerList from "./ComposerList.vue";
|
||||
import ComposerFlow from "./ComposerFlow.vue";
|
||||
import CodePreview from "./CodePreview.vue";
|
||||
import ComposerButtons from "./ComposerButtons.vue";
|
||||
import { commandCategories } from "js/composer/composerConfig";
|
||||
import { generateCode } from "js/composer/generateCode";
|
||||
// 从commandCategories中提取所有命令
|
||||
@ -64,7 +57,7 @@ export default defineComponent({
|
||||
components: {
|
||||
ComposerList,
|
||||
ComposerFlow,
|
||||
CodePreview,
|
||||
ComposerButtons,
|
||||
},
|
||||
setup() {
|
||||
const variables = ref([]);
|
||||
@ -143,6 +136,8 @@ export default defineComponent({
|
||||
.composer-body {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
gap: 8px;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.command-section {
|
||||
@ -163,6 +158,7 @@ export default defineComponent({
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 12px 16px;
|
||||
height: 28px;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
@ -173,16 +169,8 @@ export default defineComponent({
|
||||
.command-scroll {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.composer-footer {
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.05);
|
||||
background: white;
|
||||
}
|
||||
|
||||
.body--dark .composer-footer {
|
||||
border-top-color: rgba(255, 255, 255, 0.1);
|
||||
background: #1d1d1d;
|
||||
border-radius: 8px;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
|
||||
/* 滚动美化 */
|
||||
|
||||
@ -1,15 +1,33 @@
|
||||
<template>
|
||||
<div class="code-preview">
|
||||
<div class="composer-buttons">
|
||||
<q-btn
|
||||
@click="$q.dark.toggle()"
|
||||
:icon="$q.dark.isActive ? 'dark_mode' : 'light_mode'"
|
||||
flat
|
||||
dense
|
||||
v-if="isDev"
|
||||
>
|
||||
</q-btn>
|
||||
<q-btn icon="logout" dense flat v-close-popup>
|
||||
<q-tooltip>退出可视化编排</q-tooltip>
|
||||
</q-btn>
|
||||
<q-btn dense icon="publish" flat @click="$emit('action', 'insert')">
|
||||
<q-tooltip>插入到编辑器光标处</q-tooltip>
|
||||
</q-btn>
|
||||
<q-btn dense flat icon="done_all" @click="$emit('action', 'apply')">
|
||||
<q-tooltip>清空编辑器内容并插入</q-tooltip>
|
||||
</q-btn>
|
||||
<q-btn
|
||||
flat
|
||||
round
|
||||
dense
|
||||
icon="preview"
|
||||
class="preview-btn"
|
||||
@mouseenter="handleMouseEnter"
|
||||
@mouseleave="handleMouseLeave"
|
||||
>
|
||||
</q-btn>
|
||||
<q-btn dense flat icon="play_circle" @click="$emit('action', 'run')">
|
||||
<q-tooltip>运行</q-tooltip>
|
||||
</q-btn>
|
||||
|
||||
<transition name="preview-fade">
|
||||
<div v-if="isVisible" class="preview-popup">
|
||||
@ -27,7 +45,7 @@
|
||||
import { defineComponent } from "vue";
|
||||
|
||||
export default defineComponent({
|
||||
name: "CodePreview",
|
||||
name: "ComposerButtons",
|
||||
|
||||
props: {
|
||||
generateCode: {
|
||||
@ -36,11 +54,14 @@ export default defineComponent({
|
||||
},
|
||||
},
|
||||
|
||||
emits: ["action"],
|
||||
|
||||
data() {
|
||||
return {
|
||||
isVisible: false,
|
||||
code: "",
|
||||
previewTimer: null,
|
||||
isDev: window.utools.isDev(),
|
||||
};
|
||||
},
|
||||
|
||||
@ -65,25 +86,26 @@ export default defineComponent({
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.code-preview {
|
||||
.composer-buttons {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.preview-btn {
|
||||
color: var(--q-primary);
|
||||
opacity: 0.7;
|
||||
.composer-buttons > .q-btn {
|
||||
opacity: 0.6;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.preview-btn:hover {
|
||||
.composer-buttons > .q-btn:hover {
|
||||
opacity: 1;
|
||||
transform: scale(1.1);
|
||||
transform: translateY(-2px);
|
||||
color: var(--q-primary);
|
||||
}
|
||||
|
||||
.preview-popup {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: calc(100% + 12px);
|
||||
top: 40px;
|
||||
right: 30px;
|
||||
min-width: 300px;
|
||||
max-width: 600px;
|
||||
background: #fff;
|
||||
@ -46,7 +46,9 @@
|
||||
<div class="text-body2 q-mt-sm">从左侧拖拽命令到这里开始编排</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="drop-area"></div>
|
||||
<div v-else class="drop-area">
|
||||
<q-icon name="add" size="32px" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -247,17 +249,29 @@ export default defineComponent({
|
||||
background-color: rgba(32, 32, 32, 0.8);
|
||||
}
|
||||
|
||||
.flow-list {
|
||||
/* .flow-list {
|
||||
min-height: 50px;
|
||||
}
|
||||
} */
|
||||
|
||||
.drop-area {
|
||||
flex: 1;
|
||||
min-height: 100px;
|
||||
min-height: 50px;
|
||||
border-radius: 8px;
|
||||
margin: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #9994;
|
||||
border: 2px dashed #9994;
|
||||
}
|
||||
|
||||
.body--dark .drop-area {
|
||||
color: #6664;
|
||||
border: 2px dashed #6664;
|
||||
}
|
||||
|
||||
.empty-flow {
|
||||
height: 100px;
|
||||
min-height: 200px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@ -282,17 +296,6 @@ export default defineComponent({
|
||||
background-color: #303132;
|
||||
}
|
||||
|
||||
/* 拖拽时的视觉反馈 */
|
||||
.command-flow-container.drag-over {
|
||||
background-color: #f0f4ff;
|
||||
border-color: #2196f3;
|
||||
}
|
||||
|
||||
.body--dark .command-flow-container.drag-over {
|
||||
background-color: #303132;
|
||||
border-color: #676666;
|
||||
}
|
||||
|
||||
/* 滑动淡出动画 */
|
||||
.slide-fade-enter-active,
|
||||
.slide-fade-leave-active {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user