theluyuan/layui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

ci: 集成 pinia 提供主题持久化

Browse Source
This commit is contained in:
就眠儀式 2022-04-06 00:21:26 +08:00
parent e77738e974
commit 0f7d25bc09
8 changed files with 127 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package/component/src/provider/index.vue
View File

@ -58,10 +58,8 @@ const changeTheme = (theme: string) => {
disableStyleSheetsProxy: false,
}
);
localStorage.setItem("layui-vue-theme-dark", "true");
} else {
disableDarkMode();
localStorage.setItem("layui-vue-theme-dark", "false");
}
};

4
package/document/package.json
View File

@ -12,7 +12,9 @@
"dependencies": {
"vue-router": "^4.0.12",
"vue-i18n": "^9.2.0-beta.34",
"@vueuse/core": "^7.6.2"
"@vueuse/core": "^7.6.2",
"pinia": "^2.0.9",
"pinia-plugin-persist": "^1.0.0"
},
"devDependencies": {
"@babel/core": "^7.15.8",

77
package/document/src/layouts/Layout.vue
View File

@ -1,9 +1,9 @@
<template>
<lay-config-provider
:theme="theme"
:locale="locale"
:locales="locales"
:themeVariable="themeVariable"
:theme="appStore.theme"
:themeVariable="appStore.themeVariable"
>
<lay-layout class="layui-layout-document" style="height: 100%">
<lay-header
@ -77,66 +77,66 @@
<template #content>
<div style="width: 380px; padding: 0px 10px 10px 10px">
<lay-color-picker
v-model="themeVariable['--global-primary-color']"
v-model="appStore.themeVariable['--global-primary-color']"
></lay-color-picker
>&nbsp;
<lay-color-picker
v-model="themeVariable['--global-normal-color']"
v-model="appStore.themeVariable['--global-normal-color']"
></lay-color-picker
>&nbsp;
<lay-color-picker
v-model="themeVariable['--global-warm-color']"
v-model="appStore.themeVariable['--global-warm-color']"
></lay-color-picker
>&nbsp;
<lay-color-picker
v-model="themeVariable['--global-danger-color']"
v-model="appStore.themeVariable['--global-danger-color']"
></lay-color-picker
>&nbsp;
<lay-color-picker
v-model="themeVariable['--global-checked-color']"
v-model="appStore.themeVariable['--global-checked-color']"
></lay-color-picker
>&nbsp;
<lay-input
v-model="themeVariable['--global-border-radius']"
v-model="appStore.themeVariable['--global-border-radius']"
style="display: inline-block; width: 130px"
></lay-input>
<lay-color-picker
v-model="themeVariable['--global-neutral-color-1']"
v-model="appStore.themeVariable['--global-neutral-color-1']"
></lay-color-picker
>&nbsp;
<lay-color-picker
v-model="themeVariable['--global-neutral-color-2']"
v-model="appStore.themeVariable['--global-neutral-color-2']"
></lay-color-picker
>&nbsp;
<lay-color-picker
v-model="themeVariable['--global-neutral-color-3']"
v-model="appStore.themeVariable['--global-neutral-color-3']"
></lay-color-picker
>&nbsp;
<lay-color-picker
v-model="themeVariable['--global-neutral-color-4']"
v-model="appStore.themeVariable['--global-neutral-color-4']"
></lay-color-picker
>&nbsp;
<lay-color-picker
v-model="themeVariable['--global-neutral-color-5']"
v-model="appStore.themeVariable['--global-neutral-color-5']"
></lay-color-picker
>&nbsp;
<lay-color-picker
v-model="themeVariable['--global-neutral-color-6']"
v-model="appStore.themeVariable['--global-neutral-color-6']"
></lay-color-picker
>&nbsp;
<lay-color-picker
v-model="themeVariable['--global-neutral-color-7']"
v-model="appStore.themeVariable['--global-neutral-color-7']"
></lay-color-picker
>&nbsp;
<lay-color-picker
v-model="themeVariable['--global-neutral-color-8']"
v-model="appStore.themeVariable['--global-neutral-color-8']"
></lay-color-picker>
<lay-color-picker
v-model="themeVariable['--global-dark-text-color']"
v-model="appStore.themeVariable['--global-dark-text-color']"
></lay-color-picker
>&nbsp;
<lay-color-picker
v-model="themeVariable['--global-dark-background-color']"
v-model="appStore.themeVariable['--global-dark-background-color']"
></lay-color-picker>
<lay-button fluid="true">导 出 配 置</lay-button>
@ -168,7 +168,7 @@
<li class="layui-nav-item">
<a href="javascript:void(0)">
<lay-switch
v-model="theme"
v-model="appStore.theme"
class="switch"
onswitch-value="dark"
unswitch-value="light"
@ -240,12 +240,13 @@
</lay-config-provider>
</template>
<script>
import { ref, watch, computed, provide } from "vue";
import { ref, watch, provide } from "vue";
import { useRouter, useRoute } from "vue-router";
import menu from "../view/utils/menus";
import { useI18n } from "vue-i18n";
import zh_CN from "../language/zh_CN.ts";
import en_US from "../language/en_US.ts";
import { useAppStore } from "../store/app";
export default {
setup() {
@ -257,32 +258,10 @@ export default {
{ name: "zh_CN", locale: zh_CN, merge: true },
{ name: "en_US", locale: en_US, merge: true },
];
let isDark =
localStorage.getItem("layui-vue-theme-dark") !== "false" ||
window.matchMedia("prefers-color-scheme: dark").matches;
const theme = ref(isDark ? "dark" : "light");
const themeVariable = ref({
"--global-primary-color": "#009688",
"--global-normal-color": "#1e9fff",
"--global-warm-color": "#ffb800",
"--global-danger-color": "#ff5722",
"--global-checked-color": "#5fb878",
"--global-border-radius": "2px",
"--global-neutral-color-1": "#FAFAFA",
"--global-neutral-color-2": "#F6F6F6",
"--global-neutral-color-3": "#eeeeee",
"--global-neutral-color-4": "#e2e2e2",
"--global-neutral-color-5": "#dddddd",
"--global-neutral-color-6": "#d2d2d2",
"--global-neutral-color-7": "#cccccc",
"--global-neutral-color-8": "#c2c2c2",
"--global-dark-text-color": "#FFFFFFc9",
"--global-dark-background-color": "#22272E",
});
const appStore = useAppStore();
const menus = [];
const currentPath = ref("/zh-CN/guide");
watch(
() => route.path,
(val) => {
@ -293,6 +272,7 @@ export default {
deep: true,
}
);
menu.forEach((m) => {
m.children.forEach((c) => {
menus.push(c);
@ -315,22 +295,15 @@ export default {
locale.value = lang;
};
window
.matchMedia("(prefers-color-scheme: dark)")
.addListener((e) => (theme.value = e.matches ? "dark" : "light"));
provide("theme", theme);
return {
t,
menus,
theme,
locale,
locales,
appStore,
currentPath,
handleClick,
changeLocale,
themeVariable,
};
},
};

2
package/document/src/main.ts
View File

@ -3,6 +3,7 @@ import { App, createApp as _createApp } from "vue";
import { createRouter } from "./router/index";
import { Router } from "vue-router";
import layui from "@layui/layui-vue";
import Store from './store';
import "@layui/layui-vue/lib/index.css";
import LayCode from "./components/LayCode.vue";
import LaySearch from "./components/LaySearch.vue";
@ -20,6 +21,7 @@ export function createApp(): {
app
.use(layui)
.use(router)
.use(Store)
.component("LayCode", LayCode)
.component("LaySearch", LaySearch)
.component("LayTableBox", LayTableBox)

44
package/document/src/store/app.ts Normal file
View File

@ -0,0 +1,44 @@
import { defineStore } from 'pinia'
export const useAppStore = defineStore({
id: 'app',
state: () => {
return {
theme: 'light',
themeVariable: {
"--global-primary-color": "#009688",
"--global-normal-color": "#1e9fff",
"--global-warm-color": "#ffb800",
"--global-danger-color": "#ff5722",
"--global-checked-color": "#5fb878",
"--global-border-radius": "2px",
"--global-neutral-color-1": "#FAFAFA",
"--global-neutral-color-2": "#F6F6F6",
"--global-neutral-color-3": "#eeeeee",
"--global-neutral-color-4": "#e2e2e2",
"--global-neutral-color-5": "#dddddd",
"--global-neutral-color-6": "#d2d2d2",
"--global-neutral-color-7": "#cccccc",
"--global-neutral-color-8": "#c2c2c2",
},
}
},
getters: {
},
actions: {
},
persist: {
enabled: true,
strategies: [
{
key: 'theme',
storage: localStorage
},{
key: 'themeVariable',
storage: localStorage
}
]
}
})

7
package/document/src/store/index.ts Normal file
View File

@ -0,0 +1,7 @@
import { createPinia } from 'pinia'
import piniaPluginPersist from 'pinia-plugin-persist'
const store = createPinia();
store.use(piniaPluginPersist);
export default store;

15
package/document/src/view/index.vue
View File

@ -21,7 +21,7 @@
href="javascript:void(0);"
@click="changeTheme"
>
{{ theme === "dark" ? "Turn Off" : "Turn On" }}
{{ appStore.theme === "dark" ? "Turn Off" : "Turn On" }}
</a>
</div>
<div class="site-version">
@ -111,25 +111,26 @@
</template>
<script>
import { inject, provide } from "vue";
import { useI18n } from "vue-i18n";
import { useAppStore } from "../store/app";
export default {
name: "index",
setup() {
const { t } = useI18n();
const theme = inject("theme");
const appStore = useAppStore();
const changeTheme = () => {
if (theme.value === "dark") {
theme.value = "light";
if (appStore.theme === "dark") {
appStore.theme = "light";
} else {
theme.value = "dark";
appStore.theme = "dark";
}
};
return {
t,
theme,
appStore,
changeTheme,
};
},

37
pnpm-lock.yaml
View File

@ -116,6 +116,8 @@ importers:
escape-html: ^1.0.3
less: ^4.1.2
markdown-it-container: ^3.0.0
pinia: ^2.0.9
pinia-plugin-persist: ^1.0.0
prismjs: ^1.25.0
rimraf: ^3.0.2
rollup: ^2.70.1
@ -126,6 +128,8 @@ importers:
vue-router: ^4.0.12
dependencies:
'@vueuse/core': 7.7.1_vue@3.2.31
pinia: 2.0.13_typescript@4.6.3+vue@3.2.31
pinia-plugin-persist: 1.0.0_pinia@2.0.13+vue@3.2.31
vue-i18n: 9.2.0-beta.34_vue@3.2.31
vue-router: 4.0.14_vue@3.2.31
devDependencies:
@ -4041,6 +4045,39 @@ packages:
dev: true
optional: true
/pinia-plugin-persist/1.0.0_pinia@2.0.13+vue@3.2.31:
resolution: {integrity: sha512-M4hBBd8fz/GgNmUPaaUsC29y1M09lqbXrMAHcusVoU8xlQi1TqgkWnnhvMikZwr7Le/hVyMx8KUcumGGrR6GVw==}
peerDependencies:
'@vue/composition-api': ^1.0.0
pinia: ^2.0.0
vue: ^2.0.0 || >=3.0.0
peerDependenciesMeta:
'@vue/composition-api':
optional: true
dependencies:
pinia: 2.0.13_typescript@4.6.3+vue@3.2.31
vue: 3.2.31
vue-demi: 0.12.5_vue@3.2.31
dev: false
/pinia/2.0.13_typescript@4.6.3+vue@3.2.31:
resolution: {integrity: sha512-B7rSqm1xNpwcPMnqns8/gVBfbbi7lWTByzS6aPZ4JOXSJD4Y531rZHDCoYWBwLyHY/8hWnXljgiXp6rRyrofcw==}
peerDependencies:
'@vue/composition-api': ^1.4.0
typescript: '>=4.4.4'
vue: ^2.6.14 || ^3.2.0
peerDependenciesMeta:
'@vue/composition-api':
optional: true
typescript:
optional: true
dependencies:
'@vue/devtools-api': 6.1.4
typescript: 4.6.3
vue: 3.2.31
vue-demi: 0.12.5_vue@3.2.31
dev: false
/postcss/8.4.12:
resolution: {integrity: sha512-lg6eITwYe9v6Hr5CncVbK70SoioNQIq81nsaG86ev5hAidQvmOeETBqs7jm43K2F5/Ley3ytDtriImV6TpNiSg==}
engines: {node: ^10 || ^12 || >=14}