移除平台svg图标的引用,改用font

This commit is contained in:
fofolee
2022-04-14 16:23:10 +08:00
parent 2a8c52f9b3
commit 472c353b20
13 changed files with 200 additions and 139 deletions

View File

@@ -77,9 +77,9 @@
<q-card
@click="handleCardClick"
v-ripple
:class="{ [`text-${disabledColor}`]: !isCommandActivated }"
:style="{
color: isCommandActivated ? 'unset' : 'grey',
background: $q.dark.isActive ? '#ffffff08' : '#00000008',
background: cardBgColor,
}"
>
<q-card-section>
@@ -183,20 +183,17 @@
class="row justify-end items-center q-gutter-xs"
v-show="cardStyleVars.showLanguages"
>
<span :style="'color:' + allProgrammings[commandInfo.program].color"
></span
>
<span :class="`text-${programColor}`"></span>
<span class="text-subtitle2">{{ commandInfo.program }}</span>
<!-- mini small 模式下不显示适配系统 -->
<!-- 适配系统 -->
<div class="flex" v-show="cardStyleVars.showPlatforms">
|&nbsp;
<img
width="16"
<div class="q-gutter-xs" v-show="cardStyleVars.showPlatforms">
<span
v-for="platform in commandInfo.features.platform"
:key="platform"
:src="'/img/' + platform + '.svg'"
/>
:class="`iconfont icon-${platformTypes[platform].icon} text-${programColor}`"
style="font-size: 12px"
></span>
</div>
</div>
</q-card-section>
@@ -207,6 +204,7 @@
<script>
import commandTypes from "../js/options/commandTypes.js";
import platformTypes from "../js/options/platformTypes.js";
export default {
data() {
@@ -214,6 +212,7 @@ export default {
allProgrammings: this.$programmings,
maxCmdStingLen: 8,
commandTypes: commandTypes,
platformTypes: platformTypes,
};
},
computed: {
@@ -250,11 +249,22 @@ export default {
// 匹配类型的颜色
matchTypeColor() {
return (cmdType = "key") => {
if (!this.isCommandActivated)
return this.$q.dark.isActive ? "grey-9" : "grey-5";
return this.commandTypes[cmdType].color;
return this.isCommandActivated
? this.commandTypes[cmdType].color
: this.disabledColor;
};
},
programColor() {
return this.isCommandActivated
? this.allProgrammings[this.commandInfo.program].color
: this.disabledColor;
},
disabledColor() {
return this.$q.dark.isActive ? "grey-9" : "grey-5";
},
cardBgColor() {
return this.$q.dark.isActive ? "#ffffff08" : "#00000008";
},
},
props: {
commandInfo: Object,

View File

@@ -214,11 +214,11 @@ export default {
? this.$utools.getDB(this.$utools.DBPRE.CFG + "preferences")
?.codeHistory[this.action.type]
: this.action.data;
_.merge(this.quickcommandInfo, quickCommandInfo);
Object.assign(this.quickcommandInfo, _.cloneDeep(quickCommandInfo));
// monaco 相关
this.$refs.editor.setEditorValue(this.quickcommandInfo.cmd);
this.setLanguage(this.quickcommandInfo.program);
this.$refs.editor.setCursorPosition(this.quickcommandInfo.cursorPosition)
this.$refs.editor.setCursorPosition(this.quickcommandInfo.cursorPosition);
// 默认命令不可编辑
if (this.quickcommandInfo.tags?.includes("默认") && !utools.isDev()) {
this.canCommandSave = false;

View File

@@ -218,7 +218,7 @@
transition-hide="jump-up"
borderless
square
:options="['win32', 'linux', 'darwin']"
:options="Object.keys(platformTypes)"
use-chips
@blur="platformVerify()"
v-model="currentCommand.features.platform"
@@ -228,6 +228,28 @@
<template v-slot:prepend>
<q-icon color="primary" name="window" />
</template>
<template v-slot:selected-item="scope">
<q-chip
removable
dense
@remove="scope.removeAtIndex(scope.index)"
:tabindex="scope.tabindex"
>
{{ platformTypes[scope.opt].label }}
</q-chip>
</template>
<template v-slot:option="scope">
<q-item v-bind="scope.itemProps">
<q-item-section avatar>
<span
:class="`iconfont icon-${platformTypes[scope.opt].icon}`"
></span>
</q-item-section>
<q-item-section>
<q-item-label v-html="platformTypes[scope.opt].label" />
</q-item-section>
</q-item>
</template>
</q-select>
</div>
</div>
@@ -244,6 +266,7 @@
import commandTypes from "../js/options/commandTypes.js";
import outputTypes from "../js/options/outputTypes.js";
import specialVars from "../js/options/specialVars.js";
import platformTypes from "../js/options/platformTypes.js";
import iconPicker from "components/IconPicker.vue";
let commandTypesOptions = Object.values(commandTypes);
@@ -261,6 +284,7 @@ export default {
},
},
commandTypes: commandTypes,
platformTypes: platformTypes,
commandTypesOptions: commandTypesOptions,
currentMatchType: "关键字",
cmdType: commandTypesOptions[0],
@@ -293,9 +317,9 @@ export default {
let currentQuickCommandCmds = this.getCommandType();
this.cmdType = this.commandTypes[currentQuickCommandCmds.type];
this.cmdMatch = currentQuickCommandCmds.match;
_.merge(
Object.assign(
this.currentCommand,
_.pick(this.quickcommandInfo, "tags", "output", "features")
_.cloneDeep(_.pick(this.quickcommandInfo, "tags", "output", "features"))
);
this.setIcon(this.quickcommandInfo.program);
this.platformVerify();
@@ -326,7 +350,7 @@ export default {
// 平台为空自动补充
platformVerify() {
this.currentCommand.features.platform?.length > 0 ||
this.currentCommand.features.platform.push(window.processPlatform);
(this.currentCommand.features.platform = [window.processPlatform]);
},
// 正则不和规则自动加斜杠
regexVerify() {