🔨 设置页适配暗黑

This commit is contained in:
layyback 2023-04-08 20:30:01 +08:00
parent edbc4d0749
commit 794235c72d
4 changed files with 69 additions and 37 deletions

View File

@ -222,13 +222,19 @@ const deletePlugin = async (plugin) => {
}; };
</script> </script>
<style lang="less"> <style lang="less" scoped>
.installed { .installed {
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;
background: var(--color-body-bg); background: var(--color-body-bg);
height: calc(~'100vh - 46px'); height: calc(~'100vh - 46px');
:deep(.ant-result-title) {
color: var(--color-text-primary);
}
:deep(.ant-result-subtitle) {
color: var(--color-text-desc);
}
.container { .container {
box-sizing: border-box; box-sizing: border-box;
@ -298,7 +304,7 @@ const deletePlugin = async (plugin) => {
} }
} }
.ant-tabs { .ant-tabs {
.ant-tabs-bar { :deep(.ant-tabs-bar) {
color: var(--color-text-content); color: var(--color-text-content);
border-bottom: 1px solid var(--color-border-light); border-bottom: 1px solid var(--color-border-light);
} }

View File

@ -36,19 +36,19 @@
</a-form> </a-form>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref, toRaw } from "vue"; import { ref, toRaw } from 'vue';
import { message } from "ant-design-vue"; import { message } from 'ant-design-vue';
let _rev: any; let _rev: any;
let defaultConfig = { let defaultConfig = {
register: "https://registry.npm.taobao.org", register: 'https://registry.npm.taobao.org',
database: "https://gitcode.net/rubickcenter/rubick-database/-/raw/master", database: 'https://gitcode.net/rubickcenter/rubick-database/-/raw/master',
access_token: "" access_token: '',
}; };
try { try {
const dbdata = window.rubick.db.get("rubick-localhost-config"); const dbdata = window.rubick.db.get('rubick-localhost-config');
defaultConfig = dbdata.data; defaultConfig = dbdata.data;
_rev = dbdata._rev; _rev = dbdata._rev;
} catch (e) { } catch (e) {
@ -58,26 +58,26 @@ try {
const formState = ref(JSON.parse(JSON.stringify(defaultConfig))); const formState = ref(JSON.parse(JSON.stringify(defaultConfig)));
const rules = { const rules = {
register: [{ required: true, trigger: "change" }], register: [{ required: true, trigger: 'change' }],
database: [{ required: true, trigger: "change" }] database: [{ required: true, trigger: 'change' }],
}; };
const layout = { const layout = {
labelCol: { span: 6 }, labelCol: { span: 6 },
wrapperCol: { span: 18 } wrapperCol: { span: 18 },
}; };
const resetForm = () => { const resetForm = () => {
formState.value = { formState.value = {
register: "https://registry.npm.taobao.org", register: 'https://registry.npm.taobao.org',
database: "https://gitcode.net/rubickcenter/rubick-database/-/raw/master", database: 'https://gitcode.net/rubickcenter/rubick-database/-/raw/master',
access_token: "" access_token: '',
}; };
}; };
const submit = () => { const submit = () => {
const changeData: any = { const changeData: any = {
_id: "rubick-localhost-config", _id: 'rubick-localhost-config',
data: toRaw(formState.value) data: toRaw(formState.value),
}; };
if (_rev) { if (_rev) {
@ -85,13 +85,17 @@ const submit = () => {
} }
window.rubick.db.put(changeData); window.rubick.db.put(changeData);
message.success("设置成功!重启插件市场后生效!"); message.success('设置成功!重启插件市场后生效!');
}; };
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
:deep(label) { .ant-form {
:deep(.ant-form-item) {
label {
color: var(--color-text-content); color: var(--color-text-content);
}
}
} }
:deep(.ant-input) { :deep(.ant-input) {
background: var(--color-input-hover); background: var(--color-input-hover);

View File

@ -1,14 +1,27 @@
<template> <template>
请选择需要添加到超级面板中的常用插件 <p>请选择需要添加到超级面板中的常用插件</p>
<div class="super-list-item panel-item"> <div class="super-list-item panel-item">
<a-list :grid="{ gutter: 16, column: 2 }" :data-source="localPlugins.filter(item => !!item)"> <a-list
:grid="{ gutter: 16, column: 2 }"
:data-source="localPlugins.filter((item) => !!item)"
>
<template #renderItem="{ item }"> <template #renderItem="{ item }">
<a-list-item v-if="item"> <a-list-item v-if="item">
<template #actions> <template #actions>
<a-button v-if="!hasAdded(item)" @click="addPluginToSuperPanel(item)" style="color: #7ec699" type="text"> <a-button
v-if="!hasAdded(item)"
@click="addPluginToSuperPanel(item)"
style="color: #7ec699"
type="text"
>
添加 添加
</a-button> </a-button>
<a-button v-else @click="removePluginToSuperPanel(item)" style="color: #ff4ea4;" type="text"> <a-button
v-else
@click="removePluginToSuperPanel(item)"
style="color: #ff4ea4"
type="text"
>
移除 移除
</a-button> </a-button>
</template> </template>
@ -20,7 +33,7 @@
<span class="ellipse">{{ item.pluginName }}</span> <span class="ellipse">{{ item.pluginName }}</span>
</template> </template>
<template #avatar> <template #avatar>
<a-avatar :src="item.logo"/> <a-avatar :src="item.logo" />
</template> </template>
</a-list-item-meta> </a-list-item-meta>
</a-list-item> </a-list-item>
@ -29,13 +42,15 @@
</div> </div>
</template> </template>
<script setup> <script setup>
import {useStore} from "vuex"; import { useStore } from 'vuex';
import {computed, ref, toRaw} from "vue"; import { computed, ref, toRaw } from 'vue';
const store = useStore(); const store = useStore();
const localPlugins = computed(() => const localPlugins = computed(() =>
store.state.localPlugins.filter( store.state.localPlugins.filter(
plugin => plugin.name !== "rubick-system-feature" && plugin.name !== "rubick-system-super-panel" (plugin) =>
plugin.name !== 'rubick-system-feature' &&
plugin.name !== 'rubick-system-super-panel'
) )
); );
@ -51,10 +66,12 @@ const hasAdded = (plugin) => {
return added; return added;
}; };
const superPanelPlugins = ref(window.rubick.db.get("super-panel-db") || { const superPanelPlugins = ref(
window.rubick.db.get('super-panel-db') || {
data: [], data: [],
_id: "super-panel-db", _id: 'super-panel-db',
}); }
);
const addPluginToSuperPanel = (plugin) => { const addPluginToSuperPanel = (plugin) => {
superPanelPlugins.value.data.push(toRaw(plugin)); superPanelPlugins.value.data.push(toRaw(plugin));
@ -62,13 +79,18 @@ const addPluginToSuperPanel = (plugin) => {
}; };
const removePluginToSuperPanel = (plugin) => { const removePluginToSuperPanel = (plugin) => {
superPanelPlugins.value.data = toRaw(superPanelPlugins.value).data.filter((item) => { superPanelPlugins.value.data = toRaw(superPanelPlugins.value).data.filter(
(item) => {
return item.name !== plugin.name; return item.name !== plugin.name;
}); }
);
window.rubick.db.put(toRaw(superPanelPlugins.value)); window.rubick.db.put(toRaw(superPanelPlugins.value));
}; };
</script> </script>
<style lang="less"> <style lang="less" scoped>
p {
color: var(--color-text-primary);
}
.super-list-item.panel-item { .super-list-item.panel-item {
&:after { &:after {
display: none; display: none;

View File

@ -1,6 +1,6 @@
{ {
"name": "rubick", "name": "rubick",
"version": "2.2.0", "version": "2.2.1",
"author": "muwoo <2424880409@qq.com>", "author": "muwoo <2424880409@qq.com>",
"private": true, "private": true,
"scripts": { "scripts": {