mirror of
https://github.com/fofolee/uTools-quickcommand.git
synced 2025-06-09 23:16:18 +08:00
动态修改主题色功能
This commit is contained in:
parent
b16087d270
commit
981027de53
@ -4,11 +4,14 @@
|
|||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { defineComponent } from "vue";
|
import { defineComponent } from "vue";
|
||||||
|
import { setCssVar } from 'quasar'
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
name: "App",
|
name: "App",
|
||||||
data() {
|
data() {
|
||||||
return {};
|
return {
|
||||||
|
setCssVar: setCssVar
|
||||||
|
};
|
||||||
},
|
},
|
||||||
computed: {},
|
computed: {},
|
||||||
created: function () {
|
created: function () {
|
||||||
@ -26,6 +29,8 @@ export default defineComponent({
|
|||||||
});
|
});
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
// 默认主题色
|
||||||
|
this.setCssVar("primary", this.$profile.primaryColor)
|
||||||
utools.onPluginEnter((enter) => {
|
utools.onPluginEnter((enter) => {
|
||||||
// 暗黑模式
|
// 暗黑模式
|
||||||
this.$q.dark.set(utools.isDarkColors());
|
this.$q.dark.set(utools.isDarkColors());
|
||||||
|
@ -1,10 +1,31 @@
|
|||||||
import { boot } from 'quasar/wrappers'
|
import {
|
||||||
|
boot
|
||||||
|
} from 'quasar/wrappers'
|
||||||
import UTOOLS from "../js/utools.js";
|
import UTOOLS from "../js/utools.js";
|
||||||
import programmings from '../js/programs.js';
|
import programmings from '../js/programs.js';
|
||||||
|
|
||||||
|
// 配置数据存取
|
||||||
|
let defaultProfile = {
|
||||||
|
commandCardStyle: "normal",
|
||||||
|
primaryColor: "#419488"
|
||||||
|
}
|
||||||
|
let userProfile = UTOOLS.getDB(
|
||||||
|
UTOOLS.DBPRE.CFG + "preferences"
|
||||||
|
);
|
||||||
|
Object.assign(defaultProfile, userProfile)
|
||||||
|
utools.onPluginOut(() => {
|
||||||
|
UTOOLS.putDB(
|
||||||
|
defaultProfile,
|
||||||
|
UTOOLS.DBPRE.CFG + "preferences"
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
// "async" is optional;
|
// "async" is optional;
|
||||||
// more info on params: https://v2.quasar.dev/quasar-cli/boot-files
|
// more info on params: https://v2.quasar.dev/quasar-cli/boot-files
|
||||||
export default boot(async ({ app }) => {
|
export default boot(async({
|
||||||
|
app
|
||||||
|
}) => {
|
||||||
app.config.globalProperties.$utools = UTOOLS
|
app.config.globalProperties.$utools = UTOOLS
|
||||||
app.config.globalProperties.$programmings = programmings
|
app.config.globalProperties.$programmings = programmings
|
||||||
|
app.config.globalProperties.$profile = defaultProfile
|
||||||
})
|
})
|
@ -31,7 +31,7 @@
|
|||||||
运行
|
运行
|
||||||
</q-tooltip></q-btn
|
</q-tooltip></q-btn
|
||||||
>
|
>
|
||||||
<q-btn v-if="canCommandEdit" dense flat round color="primary" icon="share">
|
<q-btn v-if="canCommandEdit" dense flat round color="blue-9" icon="share">
|
||||||
<q-tooltip anchor="top middle" self="center middle">
|
<q-tooltip anchor="top middle" self="center middle">
|
||||||
导出
|
导出
|
||||||
</q-tooltip>
|
</q-tooltip>
|
||||||
|
@ -13,21 +13,56 @@
|
|||||||
<div class="row q-pa-md q-gutter-md">
|
<div class="row q-pa-md q-gutter-md">
|
||||||
<q-img width="48px" :src="commandIcon" />
|
<q-img width="48px" :src="commandIcon" />
|
||||||
<div>
|
<div>
|
||||||
<q-input standout="bg-teal text-white" dense square
|
<q-input
|
||||||
|
standout="bg-primary text-white"
|
||||||
|
dense
|
||||||
|
square
|
||||||
v-model="quickcommandInfo.features.explain"
|
v-model="quickcommandInfo.features.explain"
|
||||||
type="text"
|
type="text"
|
||||||
label="说明"
|
label="说明"
|
||||||
/>
|
/>
|
||||||
<q-input standout="bg-teal text-white" dense square v-model="commandType" type="text" label="匹配类型" />
|
<q-input
|
||||||
<q-input standout="bg-teal text-white" dense square
|
standout="bg-primary text-white"
|
||||||
|
dense
|
||||||
|
square
|
||||||
|
v-model="commandType"
|
||||||
|
type="text"
|
||||||
|
label="匹配类型"
|
||||||
|
/>
|
||||||
|
<q-input
|
||||||
|
standout="bg-primary text-white"
|
||||||
|
dense
|
||||||
|
square
|
||||||
v-model="quickcommandInfo.features.cmds[0]"
|
v-model="quickcommandInfo.features.cmds[0]"
|
||||||
type="text"
|
type="text"
|
||||||
label="关键字"
|
label="关键字"
|
||||||
/>
|
/>
|
||||||
<q-input standout="bg-teal text-white" dense square v-model="quickcommandInfo.tags" type="text" label="标签" />
|
<q-input
|
||||||
<q-input standout="bg-teal text-white" dense square type="text" label="变量" />
|
standout="bg-primary text-white"
|
||||||
<q-input standout="bg-teal text-white" dense square type="text" label="输出" />
|
dense
|
||||||
<q-input standout="bg-teal text-white" dense square
|
square
|
||||||
|
v-model="quickcommandInfo.tags"
|
||||||
|
type="text"
|
||||||
|
label="标签"
|
||||||
|
/>
|
||||||
|
<q-input
|
||||||
|
standout="bg-primary text-white"
|
||||||
|
dense
|
||||||
|
square
|
||||||
|
type="text"
|
||||||
|
label="变量"
|
||||||
|
/>
|
||||||
|
<q-input
|
||||||
|
standout="bg-primary text-white"
|
||||||
|
dense
|
||||||
|
square
|
||||||
|
type="text"
|
||||||
|
label="输出"
|
||||||
|
/>
|
||||||
|
<q-input
|
||||||
|
standout="bg-primary text-white"
|
||||||
|
dense
|
||||||
|
square
|
||||||
v-model="quickcommandInfo.features.platform"
|
v-model="quickcommandInfo.features.platform"
|
||||||
type="text"
|
type="text"
|
||||||
label="平台"
|
label="平台"
|
||||||
@ -38,7 +73,7 @@
|
|||||||
<q-btn-group spread class="absolute-bottom">
|
<q-btn-group spread class="absolute-bottom">
|
||||||
<q-btn color="red" icon="close" label="退出" @click="closeEditor" />
|
<q-btn color="red" icon="close" label="退出" @click="closeEditor" />
|
||||||
<q-btn
|
<q-btn
|
||||||
color="primary"
|
color="blue-9"
|
||||||
icon="save"
|
icon="save"
|
||||||
label="保存"
|
label="保存"
|
||||||
@click="clickHandler2"
|
@click="clickHandler2"
|
||||||
@ -53,13 +88,12 @@
|
|||||||
<div>
|
<div>
|
||||||
<q-select
|
<q-select
|
||||||
dense
|
dense
|
||||||
filled
|
standout="bg-primary text-white"
|
||||||
square
|
square
|
||||||
hide-bottom-space
|
hide-bottom-space
|
||||||
color="teal"
|
color="primary"
|
||||||
transition-show="jump-down"
|
transition-show="jump-down"
|
||||||
transition-hide="jump-up"
|
transition-hide="jump-up"
|
||||||
label-color="teal"
|
|
||||||
@update:model-value="programChanged"
|
@update:model-value="programChanged"
|
||||||
v-model="quickcommandInfo.program"
|
v-model="quickcommandInfo.program"
|
||||||
:options="programLanguages"
|
:options="programLanguages"
|
||||||
@ -87,10 +121,10 @@
|
|||||||
<div class="col-auto">
|
<div class="col-auto">
|
||||||
<q-input
|
<q-input
|
||||||
dense
|
dense
|
||||||
filled
|
standout="bg-primary text-white"
|
||||||
square
|
square
|
||||||
hide-bottom-space
|
hide-bottom-space
|
||||||
color="teal"
|
color="primary"
|
||||||
input-style="width: 120px;"
|
input-style="width: 120px;"
|
||||||
v-model="quickcommandInfo.scptarg"
|
v-model="quickcommandInfo.scptarg"
|
||||||
label="脚本参数"
|
label="脚本参数"
|
||||||
@ -101,7 +135,7 @@
|
|||||||
<q-btn-group>
|
<q-btn-group>
|
||||||
<q-btn
|
<q-btn
|
||||||
flat
|
flat
|
||||||
color="teal"
|
color="primary"
|
||||||
icon="help"
|
icon="help"
|
||||||
@click="showHelp"
|
@click="showHelp"
|
||||||
v-show="quickcommandInfo.program === 'quickcommand'"
|
v-show="quickcommandInfo.program === 'quickcommand'"
|
||||||
@ -109,7 +143,7 @@
|
|||||||
>
|
>
|
||||||
<q-btn
|
<q-btn
|
||||||
flat
|
flat
|
||||||
color="teal"
|
color="primary"
|
||||||
icon="code"
|
icon="code"
|
||||||
@click="showCustomOptions"
|
@click="showCustomOptions"
|
||||||
v-show="quickcommandInfo.program !== 'quickcommand'"
|
v-show="quickcommandInfo.program !== 'quickcommand'"
|
||||||
@ -117,13 +151,13 @@
|
|||||||
>
|
>
|
||||||
<q-btn
|
<q-btn
|
||||||
flat
|
flat
|
||||||
color="teal"
|
color="primary"
|
||||||
icon="format_size"
|
icon="format_size"
|
||||||
@click="showCodingPage()"
|
@click="showCodingPage()"
|
||||||
v-show="quickcommandInfo.program !== 'quickcommand'"
|
v-show="quickcommandInfo.program !== 'quickcommand'"
|
||||||
><q-tooltip>脚本及输出编码设置</q-tooltip></q-btn
|
><q-tooltip>脚本及输出编码设置</q-tooltip></q-btn
|
||||||
>
|
>
|
||||||
<q-btn flat color="teal" icon="send" @click="runCurrentCommand()"
|
<q-btn flat color="primary" icon="send" @click="runCurrentCommand()"
|
||||||
><q-tooltip>运行命令</q-tooltip></q-btn
|
><q-tooltip>运行命令</q-tooltip></q-btn
|
||||||
>
|
>
|
||||||
</q-btn-group>
|
</q-btn-group>
|
||||||
@ -158,7 +192,7 @@
|
|||||||
></pre>
|
></pre>
|
||||||
</q-card-section>
|
</q-card-section>
|
||||||
<q-card-actions align="right">
|
<q-card-actions align="right">
|
||||||
<q-btn flat label="关闭" color="teal" v-close-popup />
|
<q-btn flat label="关闭" color="primary" v-close-popup />
|
||||||
</q-card-actions>
|
</q-card-actions>
|
||||||
</q-card>
|
</q-card>
|
||||||
</q-dialog>
|
</q-dialog>
|
||||||
|
@ -40,7 +40,7 @@
|
|||||||
<q-tooltip>当前启用的「快捷命令』数</q-tooltip>
|
<q-tooltip>当前启用的「快捷命令』数</q-tooltip>
|
||||||
</q-chip>
|
</q-chip>
|
||||||
<q-chip dense square>
|
<q-chip dense square>
|
||||||
<q-avatar color="teal" text-color="white">
|
<q-avatar color="primary" text-color="white">
|
||||||
{{ userLevel.number }}</q-avatar
|
{{ userLevel.number }}</q-avatar
|
||||||
>Level
|
>Level
|
||||||
<q-tooltip
|
<q-tooltip
|
||||||
@ -148,6 +148,40 @@
|
|||||||
类似于旧版本的「快捷面板」</q-tooltip
|
类似于旧版本的「快捷面板」</q-tooltip
|
||||||
>
|
>
|
||||||
</q-item>
|
</q-item>
|
||||||
|
<!-- 选项 -->
|
||||||
|
<q-item clickable>
|
||||||
|
<q-item-section side>
|
||||||
|
<q-icon name="keyboard_arrow_left" />
|
||||||
|
</q-item-section>
|
||||||
|
<q-item-section>偏好设置</q-item-section>
|
||||||
|
<q-menu anchor="top end" self="top start">
|
||||||
|
<q-list>
|
||||||
|
<q-item clickable>
|
||||||
|
<q-item-section side>
|
||||||
|
<q-icon name="color_lens" />
|
||||||
|
</q-item-section>
|
||||||
|
<q-item-section>主颜色</q-item-section>
|
||||||
|
<q-tooltip>你可以更改界面的主题色,Level 2 以上限定</q-tooltip>
|
||||||
|
<q-menu nchor="top left" self="bottom end">
|
||||||
|
<q-card>
|
||||||
|
<q-color
|
||||||
|
no-header
|
||||||
|
no-footer
|
||||||
|
@change="setPrimaryColor"
|
||||||
|
v-model="$profile.primaryColor"
|
||||||
|
/>
|
||||||
|
<q-btn
|
||||||
|
color="primary"
|
||||||
|
label="重置为默认"
|
||||||
|
class="full-width"
|
||||||
|
@click="resetPrimary"
|
||||||
|
/>
|
||||||
|
</q-card>
|
||||||
|
</q-menu>
|
||||||
|
</q-item>
|
||||||
|
</q-list>
|
||||||
|
</q-menu>
|
||||||
|
</q-item>
|
||||||
<!-- 帮助 -->
|
<!-- 帮助 -->
|
||||||
<q-item clickable v-close-popup>
|
<q-item clickable v-close-popup>
|
||||||
<q-item-section side>
|
<q-item-section side>
|
||||||
@ -160,6 +194,8 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import { setCssVar } from "quasar";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
@ -169,6 +205,7 @@ export default {
|
|||||||
process: 0.4,
|
process: 0.4,
|
||||||
},
|
},
|
||||||
configurationPage: this.$parent.$parent.$parent,
|
configurationPage: this.$parent.$parent.$parent,
|
||||||
|
setCssVar: setCssVar,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
@ -206,6 +243,13 @@ export default {
|
|||||||
.querySelectorAll(".q-toggle[aria-checked='true']")
|
.querySelectorAll(".q-toggle[aria-checked='true']")
|
||||||
.forEach((x) => x.click());
|
.forEach((x) => x.click());
|
||||||
},
|
},
|
||||||
|
setPrimaryColor() {
|
||||||
|
this.setCssVar("primary", this.$profile.primaryColor);
|
||||||
|
},
|
||||||
|
resetPrimary() {
|
||||||
|
this.$profile.primaryColor = "#419488";
|
||||||
|
this.setPrimaryColor();
|
||||||
|
},
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
@ -18,7 +18,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</q-card-section>
|
</q-card-section>
|
||||||
<q-card-actions align="right">
|
<q-card-actions align="right">
|
||||||
<q-btn color="primary" label="确定" @click="onOKClick" />
|
<q-btn color="blue-9" label="确定" @click="onOKClick" />
|
||||||
<q-btn color="negative" label="取消" @click="onCancelClick" />
|
<q-btn color="negative" label="取消" @click="onCancelClick" />
|
||||||
</q-card-actions>
|
</q-card-actions>
|
||||||
</q-card>
|
</q-card>
|
||||||
|
@ -10,7 +10,12 @@
|
|||||||
zIndex: 1,
|
zIndex: 1,
|
||||||
}"
|
}"
|
||||||
>
|
>
|
||||||
<q-tabs v-model="currentTag" vertical outside-arrows class="text-teal">
|
<q-tabs
|
||||||
|
v-model="currentTag"
|
||||||
|
vertical
|
||||||
|
outside-arrows
|
||||||
|
class="text-primary"
|
||||||
|
>
|
||||||
<!-- 所有标签 -->
|
<!-- 所有标签 -->
|
||||||
<q-tab
|
<q-tab
|
||||||
:alert="activatedQuickPanels.includes(tag)"
|
:alert="activatedQuickPanels.includes(tag)"
|
||||||
@ -19,7 +24,7 @@
|
|||||||
:key="tag"
|
:key="tag"
|
||||||
:name="tag"
|
:name="tag"
|
||||||
:content-class="
|
:content-class="
|
||||||
tag === '搜索结果' ? 'text-primary text-weight-bold' : ''
|
tag === '搜索结果' ? 'text-blue-9 text-weight-bold' : ''
|
||||||
"
|
"
|
||||||
v-show="!(tag === '搜索结果' && !commandSearchKeyword)"
|
v-show="!(tag === '搜索结果' && !commandSearchKeyword)"
|
||||||
>
|
>
|
||||||
@ -112,8 +117,8 @@
|
|||||||
<!-- 切换视图 -->
|
<!-- 切换视图 -->
|
||||||
<q-btn-toggle
|
<q-btn-toggle
|
||||||
v-model="commandCardStyle"
|
v-model="commandCardStyle"
|
||||||
@click="$userProfile.commandCardStyle = commandCardStyle"
|
@click="$profile.commandCardStyle = commandCardStyle"
|
||||||
toggle-color="teal"
|
toggle-color="primary"
|
||||||
flat
|
flat
|
||||||
:options="[
|
:options="[
|
||||||
{ slot: 'normal', value: 'normal' },
|
{ slot: 'normal', value: 'normal' },
|
||||||
@ -147,18 +152,18 @@
|
|||||||
split
|
split
|
||||||
flat
|
flat
|
||||||
@click="addNewCommand"
|
@click="addNewCommand"
|
||||||
color="teal"
|
color="primary"
|
||||||
label="新建"
|
label="新建"
|
||||||
icon="add"
|
icon="add"
|
||||||
/>
|
/>
|
||||||
<q-separator vertical />
|
<q-separator vertical />
|
||||||
<!-- 下拉菜单 -->
|
<!-- 下拉菜单 -->
|
||||||
<q-btn color="teal" flat size="xs"
|
<q-btn color="primary" flat size="xs"
|
||||||
><q-spinner-bars color="teal" size="1.5em" />
|
><q-spinner-bars color="primary" size="1.5em" />
|
||||||
<ConfigurationMenu
|
<ConfigurationMenu
|
||||||
:allQuickcommandsLength="Object.keys(allQuickCommands).length"
|
:allQuickcommandsLength="Object.keys(allQuickCommands).length"
|
||||||
:allFeaturesLength="activatedQuickCommandFeatureCodes.length"
|
:allFeaturesLength="activatedQuickCommandFeatureCodes.length"
|
||||||
:isTagStared="allQuickCommandTags.includes(currentTag)"
|
:isTagStared="activatedQuickPanels.includes(currentTag)"
|
||||||
></ConfigurationMenu>
|
></ConfigurationMenu>
|
||||||
</q-btn>
|
</q-btn>
|
||||||
</q-btn-group>
|
</q-btn-group>
|
||||||
@ -207,7 +212,7 @@ export default {
|
|||||||
maximizedToggle: true,
|
maximizedToggle: true,
|
||||||
commandEditorAction: {},
|
commandEditorAction: {},
|
||||||
footerBarHeight: "40px",
|
footerBarHeight: "40px",
|
||||||
commandCardStyle: this.$userProfile.commandCardStyle,
|
commandCardStyle: this.$profile.commandCardStyle,
|
||||||
commandCardStyleSheet: {
|
commandCardStyleSheet: {
|
||||||
mini: {
|
mini: {
|
||||||
width: "20%",
|
width: "20%",
|
||||||
@ -454,7 +459,7 @@ export default {
|
|||||||
if (!featureCode.includes("default_"))
|
if (!featureCode.includes("default_"))
|
||||||
delete this.allQuickCommands[featureCode];
|
delete this.allQuickCommands[featureCode];
|
||||||
});
|
});
|
||||||
this.currentTag = "默认"
|
this.currentTag = "默认";
|
||||||
quickcommand.showMessageBox(
|
quickcommand.showMessageBox(
|
||||||
"清空完毕,为防止误操作,已将所有命令复制到剪贴板,可通过导入命令恢复"
|
"清空完毕,为防止误操作,已将所有命令复制到剪贴板,可通过导入命令恢复"
|
||||||
);
|
);
|
||||||
|
Loading…
x
Reference in New Issue
Block a user