study/uTools-quickcommand
1
0
Fork 0
mirror of https://github.com/fofolee/uTools-quickcommand.git synced 2026-02-28 10:02:41 +08:00
Code Issues Packages Projects Releases Wiki Activity

二列卡片视图布局调整

Browse Source
This commit is contained in:
fofolee
2024-12-21 13:52:26 +08:00
parent ffdb737750
commit 4baab60804
17 changed files with 630 additions and 389 deletions
Download Patch File Download Diff File Expand all files Collapse all files

96
src/components/card/layouts/DenseLayout.vue Normal file
View File

@@ -0,0 +1,96 @@
<template>
<q-card-section>
<!-- logo -->
<div class="row">
<q-avatar
square
size="48px"
:class="{
featureIco: 1,
featureIcoHover: isHovered,
'feature-disabled': !isActivated,
}"
>
<img :src="commandInfo.features.icon" />
</q-avatar>
</div>
<!-- 名称 -->
<div class="row justify-end">
<div
class="text-ellipsis"
v-html="commandInfo.features.explain.trim() || '<br/>'"
/>
</div>
<!-- 匹配模式 -->
<div class="row justify-end">
<CommandTypeTag
:cmds="commandInfo.features.cmds"
:isGrayColor="!isPlatformSupported || !isActivated"
/>
</div>
<!-- 语言类型 -->
<div
:class="{
'platform-icons': 1,
'platform-icons-disabled': !isActivated,
}"
>
<q-img
v-for="platform in commandInfo.features.platform"
:key="platform"
:src="platformTypes[platform].icon"
width="16px"
/>
<div>|</div>
<q-img :src="$root.programs[commandInfo.program].icon" width="16px" />
<div class="text-subtitle2">{{ programName }}</div>
</div>
</q-card-section>
</template>
<script>
import CommandTypeTag from "../CommandTypeTag.vue";
import platformTypes from "js/options/platformTypes.js";
export default {
name: "DenseLayout",
components: { CommandTypeTag },
props: {
commandInfo: Object,
isActivated: Boolean,
isPlatformSupported: Boolean,
isHovered: Boolean,
},
data() {
return {
platformTypes,
};
},
computed: {
program() {
return this.$root.programs[this.commandInfo.program];
},
programName() {
return this.program.shortName ?? this.program.name;
},
},
};
</script>
<style scoped>
.platform-icons {
display: flex;
gap: 2px;
}
.text-ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 100%;
font-size: 14px;
}
</style>

90
src/components/card/layouts/ListLayout.vue Normal file
View File

@@ -0,0 +1,90 @@
<template>
<div class="wrapper">
<!-- logo -->
<div class="row items-center q-gutter-sm">
<q-avatar
square
size="38px"
:class="{
featureIco: 1,
featureIcoHover: isHovered,
'feature-disabled': !isActivated,
}"
>
<img :src="commandInfo.features.icon" />
</q-avatar>
<div class="column">
<!-- 名称 -->
<div
class="text-ellipsis"
v-html="commandInfo.features.explain.trim() || '<br/>'"
/>
<!-- 匹配模式 -->
<CommandTypeTag
:cmds="commandInfo.features.cmds"
:isGrayColor="!isPlatformSupported || !isActivated"
/>
</div>
</div>
<!-- 语言类型 -->
<div
:class="{
'platform-icons': 1,
'platform-icons-disabled': !isActivated,
}"
>
<q-img
v-for="platform in commandInfo.features.platform"
:key="platform"
:src="platformTypes[platform].icon"
width="16px"
/>
<div>|</div>
<q-img :src="program.icon" width="16px" />
<div class="text-subtitle2">{{ program.name }}</div>
</div>
</div>
</template>
<script>
import CommandTypeTag from "../CommandTypeTag.vue";
import platformTypes from "js/options/platformTypes.js";
export default {
name: "ListLayout",
components: { CommandTypeTag },
props: {
commandInfo: Object,
isActivated: Boolean,
isPlatformSupported: Boolean,
isHovered: Boolean,
},
data() {
return {
platformTypes,
};
},
computed: {
program() {
return this.$root.programs[this.commandInfo.program];
},
},
};
</script>
<style scoped>
/* 网格布局 */
.wrapper {
display: flex;
flex-direction: column;
gap: 8px;
padding: 10px 12px;
}
.text-ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 14px;
}
</style>

74
src/components/card/layouts/MiniLayout.vue Normal file
View File

@@ -0,0 +1,74 @@
<template>
<div class="mini-layout">
<!-- logo -->
<div class="row justify-center">
<q-avatar
square
size="48px"
:class="{
featureIco: 1,
featureIcoHover: isHovered,
}"
>
<img :src="commandInfo.features.icon" />
</q-avatar>
</div>
<!-- 名称 -->
<div class="row justify-center w-100">
<div
class="text-ellipsis text-center"
v-html="commandInfo.features.explain.trim() || '<br/>'"
/>
</div>
<!-- 匹配模式 -->
<div class="row justify-center w-100">
<CommandTypeTag :cmds="commandInfo.features.cmds" />
</div>
</div>
</template>
<script>
import CommandTypeTag from "../CommandTypeTag.vue";
import platformTypes from "js/options/platformTypes.js";
import { computed } from "vue";
export default {
name: "MiniLayout",
components: { CommandTypeTag },
props: {
commandInfo: Object,
isHovered: Boolean,
},
setup() {
return {
platformTypes,
};
},
};
</script>
<style scoped>
.mini-layout {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
padding: 16px;
}
.w-100 {
width: 100%;
}
.text-ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 90%;
margin: 0 auto;
padding: 0 8px;
font-size: 14px;
}
</style>