feat: add store

templates-collective · Jun 7, 2024 · 3ed93de · 3ed93de
1 parent 449f15a
commit 3ed93de
Show file tree

Hide file tree

Showing 8 changed files with 123 additions and 5 deletions.
diff --git a/locales/en.json b/locales/en.json
@@ -9,7 +9,9 @@
       "get-todo-list": "Get Todo List"
     },
     "about": {
-      "title": "About"
+      "title": "About",
+      "show-logo": "Show Logo",
+      "hide-logo": "Hide Logo"
     }
   },
   "button": {

diff --git a/locales/zh.json b/locales/zh.json
@@ -9,7 +9,9 @@
       "get-todo-list": "获取待办事项列表"
     },
     "about": {
-      "title": "关于"
+      "title": "关于",
+      "show-logo": "显示 Logo",
+      "hide-logo": "隐藏 Logo"
     }
   },
   "button": {

diff --git a/src/constants/constants.ts b/src/constants/constants.ts
@@ -0,0 +1,16 @@
+import { version } from '../../package.json'
+
+/**
+ * The key of the application.
+ */
+export const APP_KEY = 'opuntia'
+
+/**
+ * The version of the application.
+ */
+export const APP_VERSION = version
+
+/**
+ * The storage key of the application.
+ */
+export const APP_STORAGE_KEY = `${APP_KEY}-v${APP_VERSION}-`
diff --git a/src/layouts/default.vue b/src/layouts/default.vue
@@ -7,6 +7,8 @@ const route = useRoute()
 
 const router = useRouter()
 
+const { showLogo } = storeToRefs(useSettingStore())
+
 function goPage(path: string) {
   router.push(path)
 }
@@ -19,9 +21,10 @@ function openGithub() {
 <template>
   <main w-full h-full dark:color-warm-gray>
     <header mb-10 py-10 text-center>
-      <img alt="Opuntia logo" src="@/assets/logo.svg" w-18 m-auto mb-4>
+      <img v-if="showLogo" alt="Opuntia logo" src="@/assets/logo.svg" w-18 m-auto mb-4>
       <p text-6 font-bold mb-4>
         {{ t('app.title') }}
+        <sup><i>{{ APP_VERSION }}</i></sup>
       </p>
       <p mb-4 text-base>
         {{ t('app.description') }}

diff --git a/src/pages/about.vue b/src/pages/about.vue
@@ -10,10 +10,27 @@
 
 <script lang="ts" setup>
 const route = useRoute()
+
+const { t } = useI18n()
+
+const { showLogo } = storeToRefs(useSettingStore())
+
+const { updateSetting } = useSettingStore()
+
+function toggleLogo() {
+  updateSetting({
+    logo: !showLogo.value,
+  })
+}
 </script>
 
 <template>
   <h1 text-center text-lg font-bold mb-5>
     {{ route.meta.title }}
   </h1>
+  <div flex justify-center items-center my-5>
+    <TheButton lh-4 @click="toggleLogo">
+      {{ showLogo ? t('page.about.hide-logo') : t('page.about.show-logo') }}
+    </TheButton>
+  </div>
 </template>
diff --git a/src/stores/setting.ts b/src/stores/setting.ts
@@ -0,0 +1,30 @@
+import { computed } from 'vue'
+import { defineStore } from 'pinia'
+import { assign } from 'lodash-es'
+
+/**
+ * Setting state
+ */
+export interface SettingState {
+  /**
+   * Control whether to show the logo.
+   */
+  logo: boolean
+}
+
+/**
+ * Setting store.
+ */
+export const useSettingStore = defineStore('setting', () => {
+  const setting = useStorage(`${APP_STORAGE_KEY}setting`, {
+    logo: true,
+  })
+
+  const showLogo = computed(() => setting.value.logo)
+
+  function updateSetting(_setting: SettingState) {
+    setting.value = assign(setting.value, _setting)
+  }
+
+  return { setting, showLogo, updateSetting }
+})
diff --git a/typings/auto-imports.d.ts b/typings/auto-imports.d.ts
@@ -5,10 +5,13 @@
 // Generated by unplugin-auto-import
 export {}
 declare global {
+  const APP_KEY: typeof import('../src/constants/constants')['APP_KEY']
+  const APP_NAME: typeof import('../src/constants/constants')['APP_NAME']
+  const APP_STORAGE_KEY: typeof import('../src/constants/constants')['APP_STORAGE_KEY']
+  const APP_VERSION: typeof import('../src/constants/constants')['APP_VERSION']
   const ContentTypeEnum: typeof import('../src/constants/enum')['ContentTypeEnum']
   const EffectScope: typeof import('vue')['EffectScope']
-  const RequestCode: typeof import('../src/constants/enum')['RequestCode']
-  const RequestHeader: typeof import('../src/constants/enum')['RequestHeader']
+  const acceptHMRUpdate: typeof import('pinia')['acceptHMRUpdate']
   const asyncComputed: typeof import('@vueuse/core')['asyncComputed']
   const autoResetRef: typeof import('@vueuse/core')['autoResetRef']
   const computed: typeof import('vue')['computed']
@@ -22,6 +25,7 @@ declare global {
   const createEventHook: typeof import('@vueuse/core')['createEventHook']
   const createGlobalState: typeof import('@vueuse/core')['createGlobalState']
   const createInjectionState: typeof import('@vueuse/core')['createInjectionState']
+  const createPinia: typeof import('pinia')['createPinia']
   const createReactiveFn: typeof import('@vueuse/core')['createReactiveFn']
   const createReusableTemplate: typeof import('@vueuse/core')['createReusableTemplate']
   const createSharedComposable: typeof import('@vueuse/core')['createSharedComposable']
@@ -35,10 +39,12 @@ declare global {
   const defineComponent: typeof import('vue')['defineComponent']
   const defineLoader: typeof import('vue-router/auto')['defineLoader']
   const definePage: typeof import('unplugin-vue-router/runtime')['_definePage']
+  const defineStore: typeof import('pinia')['defineStore']
   const deleteTodoItemApi: typeof import('../src/apis/todo')['deleteTodoItemApi']
   const eagerComputed: typeof import('@vueuse/core')['eagerComputed']
   const effectScope: typeof import('vue')['effectScope']
   const extendRef: typeof import('@vueuse/core')['extendRef']
+  const getActivePinia: typeof import('pinia')['getActivePinia']
   const getCurrentInstance: typeof import('vue')['getCurrentInstance']
   const getCurrentScope: typeof import('vue')['getCurrentScope']
   const getTodoItemApi: typeof import('../src/apis/todo')['getTodoItemApi']
@@ -55,6 +61,11 @@ declare global {
   const isReadonly: typeof import('vue')['isReadonly']
   const isRef: typeof import('vue')['isRef']
   const makeDestructurable: typeof import('@vueuse/core')['makeDestructurable']
+  const mapActions: typeof import('pinia')['mapActions']
+  const mapGetters: typeof import('pinia')['mapGetters']
+  const mapState: typeof import('pinia')['mapState']
+  const mapStores: typeof import('pinia')['mapStores']
+  const mapWritableState: typeof import('pinia')['mapWritableState']
   const markRaw: typeof import('vue')['markRaw']
   const nextTick: typeof import('vue')['nextTick']
   const onActivated: typeof import('vue')['onActivated']
@@ -96,9 +107,12 @@ declare global {
   const resolveComponent: typeof import('vue')['resolveComponent']
   const resolveRef: typeof import('@vueuse/core')['resolveRef']
   const resolveUnref: typeof import('@vueuse/core')['resolveUnref']
+  const setActivePinia: typeof import('pinia')['setActivePinia']
+  const setMapStoreSuffix: typeof import('pinia')['setMapStoreSuffix']
   const shallowReactive: typeof import('vue')['shallowReactive']
   const shallowReadonly: typeof import('vue')['shallowReadonly']
   const shallowRef: typeof import('vue')['shallowRef']
+  const storeToRefs: typeof import('pinia')['storeToRefs']
   const syncRef: typeof import('@vueuse/core')['syncRef']
   const syncRefs: typeof import('@vueuse/core')['syncRefs']
   const templateRef: typeof import('@vueuse/core')['templateRef']
@@ -242,6 +256,7 @@ declare global {
   const useScroll: typeof import('@vueuse/core')['useScroll']
   const useScrollLock: typeof import('@vueuse/core')['useScrollLock']
   const useSessionStorage: typeof import('@vueuse/core')['useSessionStorage']
+  const useSettingStore: typeof import('../src/stores/setting')['useSettingStore']
   const useShare: typeof import('@vueuse/core')['useShare']
   const useSlots: typeof import('vue')['useSlots']
   const useSorted: typeof import('@vueuse/core')['useSorted']
@@ -315,8 +330,12 @@ import { UnwrapRef } from 'vue'
 declare module 'vue' {
   interface GlobalComponents {}
   interface ComponentCustomProperties {
+    readonly APP_KEY: UnwrapRef<typeof import('../src/constants/constants')['APP_KEY']>
+    readonly APP_STORAGE_KEY: UnwrapRef<typeof import('../src/constants/constants')['APP_STORAGE_KEY']>
+    readonly APP_VERSION: UnwrapRef<typeof import('../src/constants/constants')['APP_VERSION']>
     readonly ContentTypeEnum: UnwrapRef<typeof import('../src/constants/enum')['ContentTypeEnum']>
     readonly EffectScope: UnwrapRef<typeof import('vue')['EffectScope']>
+    readonly acceptHMRUpdate: UnwrapRef<typeof import('pinia')['acceptHMRUpdate']>
     readonly asyncComputed: UnwrapRef<typeof import('@vueuse/core')['asyncComputed']>
     readonly autoResetRef: UnwrapRef<typeof import('@vueuse/core')['autoResetRef']>
     readonly computed: UnwrapRef<typeof import('vue')['computed']>
@@ -330,6 +349,7 @@ declare module 'vue' {
     readonly createEventHook: UnwrapRef<typeof import('@vueuse/core')['createEventHook']>
     readonly createGlobalState: UnwrapRef<typeof import('@vueuse/core')['createGlobalState']>
     readonly createInjectionState: UnwrapRef<typeof import('@vueuse/core')['createInjectionState']>
+    readonly createPinia: UnwrapRef<typeof import('pinia')['createPinia']>
     readonly createReactiveFn: UnwrapRef<typeof import('@vueuse/core')['createReactiveFn']>
     readonly createReusableTemplate: UnwrapRef<typeof import('@vueuse/core')['createReusableTemplate']>
     readonly createSharedComposable: UnwrapRef<typeof import('@vueuse/core')['createSharedComposable']>
@@ -343,10 +363,12 @@ declare module 'vue' {
     readonly defineComponent: UnwrapRef<typeof import('vue')['defineComponent']>
     readonly defineLoader: UnwrapRef<typeof import('vue-router/auto')['defineLoader']>
     readonly definePage: UnwrapRef<typeof import('unplugin-vue-router/runtime')['_definePage']>
+    readonly defineStore: UnwrapRef<typeof import('pinia')['defineStore']>
     readonly deleteTodoItemApi: UnwrapRef<typeof import('../src/apis/todo')['deleteTodoItemApi']>
     readonly eagerComputed: UnwrapRef<typeof import('@vueuse/core')['eagerComputed']>
     readonly effectScope: UnwrapRef<typeof import('vue')['effectScope']>
     readonly extendRef: UnwrapRef<typeof import('@vueuse/core')['extendRef']>
+    readonly getActivePinia: UnwrapRef<typeof import('pinia')['getActivePinia']>
     readonly getCurrentInstance: UnwrapRef<typeof import('vue')['getCurrentInstance']>
     readonly getCurrentScope: UnwrapRef<typeof import('vue')['getCurrentScope']>
     readonly getTodoItemApi: UnwrapRef<typeof import('../src/apis/todo')['getTodoItemApi']>
@@ -363,6 +385,11 @@ declare module 'vue' {
     readonly isReadonly: UnwrapRef<typeof import('vue')['isReadonly']>
     readonly isRef: UnwrapRef<typeof import('vue')['isRef']>
     readonly makeDestructurable: UnwrapRef<typeof import('@vueuse/core')['makeDestructurable']>
+    readonly mapActions: UnwrapRef<typeof import('pinia')['mapActions']>
+    readonly mapGetters: UnwrapRef<typeof import('pinia')['mapGetters']>
+    readonly mapState: UnwrapRef<typeof import('pinia')['mapState']>
+    readonly mapStores: UnwrapRef<typeof import('pinia')['mapStores']>
+    readonly mapWritableState: UnwrapRef<typeof import('pinia')['mapWritableState']>
     readonly markRaw: UnwrapRef<typeof import('vue')['markRaw']>
     readonly nextTick: UnwrapRef<typeof import('vue')['nextTick']>
     readonly onActivated: UnwrapRef<typeof import('vue')['onActivated']>
@@ -404,9 +431,12 @@ declare module 'vue' {
     readonly resolveComponent: UnwrapRef<typeof import('vue')['resolveComponent']>
     readonly resolveRef: UnwrapRef<typeof import('@vueuse/core')['resolveRef']>
     readonly resolveUnref: UnwrapRef<typeof import('@vueuse/core')['resolveUnref']>
+    readonly setActivePinia: UnwrapRef<typeof import('pinia')['setActivePinia']>
+    readonly setMapStoreSuffix: UnwrapRef<typeof import('pinia')['setMapStoreSuffix']>
     readonly shallowReactive: UnwrapRef<typeof import('vue')['shallowReactive']>
     readonly shallowReadonly: UnwrapRef<typeof import('vue')['shallowReadonly']>
     readonly shallowRef: UnwrapRef<typeof import('vue')['shallowRef']>
+    readonly storeToRefs: UnwrapRef<typeof import('pinia')['storeToRefs']>
     readonly syncRef: UnwrapRef<typeof import('@vueuse/core')['syncRef']>
     readonly syncRefs: UnwrapRef<typeof import('@vueuse/core')['syncRefs']>
     readonly templateRef: UnwrapRef<typeof import('@vueuse/core')['templateRef']>
@@ -550,6 +580,7 @@ declare module 'vue' {
     readonly useScroll: UnwrapRef<typeof import('@vueuse/core')['useScroll']>
     readonly useScrollLock: UnwrapRef<typeof import('@vueuse/core')['useScrollLock']>
     readonly useSessionStorage: UnwrapRef<typeof import('@vueuse/core')['useSessionStorage']>
+    readonly useSettingStore: UnwrapRef<typeof import('../src/stores/setting')['useSettingStore']>
     readonly useShare: UnwrapRef<typeof import('@vueuse/core')['useShare']>
     readonly useSlots: UnwrapRef<typeof import('vue')['useSlots']>
     readonly useSorted: UnwrapRef<typeof import('@vueuse/core')['useSorted']>
@@ -613,8 +644,12 @@ declare module 'vue' {
 declare module '@vue/runtime-core' {
   interface GlobalComponents {}
   interface ComponentCustomProperties {
+    readonly APP_KEY: UnwrapRef<typeof import('../src/constants/constants')['APP_KEY']>
+    readonly APP_STORAGE_KEY: UnwrapRef<typeof import('../src/constants/constants')['APP_STORAGE_KEY']>
+    readonly APP_VERSION: UnwrapRef<typeof import('../src/constants/constants')['APP_VERSION']>
     readonly ContentTypeEnum: UnwrapRef<typeof import('../src/constants/enum')['ContentTypeEnum']>
     readonly EffectScope: UnwrapRef<typeof import('vue')['EffectScope']>
+    readonly acceptHMRUpdate: UnwrapRef<typeof import('pinia')['acceptHMRUpdate']>
     readonly asyncComputed: UnwrapRef<typeof import('@vueuse/core')['asyncComputed']>
     readonly autoResetRef: UnwrapRef<typeof import('@vueuse/core')['autoResetRef']>
     readonly computed: UnwrapRef<typeof import('vue')['computed']>
@@ -628,6 +663,7 @@ declare module '@vue/runtime-core' {
     readonly createEventHook: UnwrapRef<typeof import('@vueuse/core')['createEventHook']>
     readonly createGlobalState: UnwrapRef<typeof import('@vueuse/core')['createGlobalState']>
     readonly createInjectionState: UnwrapRef<typeof import('@vueuse/core')['createInjectionState']>
+    readonly createPinia: UnwrapRef<typeof import('pinia')['createPinia']>
     readonly createReactiveFn: UnwrapRef<typeof import('@vueuse/core')['createReactiveFn']>
     readonly createReusableTemplate: UnwrapRef<typeof import('@vueuse/core')['createReusableTemplate']>
     readonly createSharedComposable: UnwrapRef<typeof import('@vueuse/core')['createSharedComposable']>
@@ -641,10 +677,12 @@ declare module '@vue/runtime-core' {
     readonly defineComponent: UnwrapRef<typeof import('vue')['defineComponent']>
     readonly defineLoader: UnwrapRef<typeof import('vue-router/auto')['defineLoader']>
     readonly definePage: UnwrapRef<typeof import('unplugin-vue-router/runtime')['_definePage']>
+    readonly defineStore: UnwrapRef<typeof import('pinia')['defineStore']>
     readonly deleteTodoItemApi: UnwrapRef<typeof import('../src/apis/todo')['deleteTodoItemApi']>
     readonly eagerComputed: UnwrapRef<typeof import('@vueuse/core')['eagerComputed']>
     readonly effectScope: UnwrapRef<typeof import('vue')['effectScope']>
     readonly extendRef: UnwrapRef<typeof import('@vueuse/core')['extendRef']>
+    readonly getActivePinia: UnwrapRef<typeof import('pinia')['getActivePinia']>
     readonly getCurrentInstance: UnwrapRef<typeof import('vue')['getCurrentInstance']>
     readonly getCurrentScope: UnwrapRef<typeof import('vue')['getCurrentScope']>
     readonly getTodoItemApi: UnwrapRef<typeof import('../src/apis/todo')['getTodoItemApi']>
@@ -661,6 +699,11 @@ declare module '@vue/runtime-core' {
     readonly isReadonly: UnwrapRef<typeof import('vue')['isReadonly']>
     readonly isRef: UnwrapRef<typeof import('vue')['isRef']>
     readonly makeDestructurable: UnwrapRef<typeof import('@vueuse/core')['makeDestructurable']>
+    readonly mapActions: UnwrapRef<typeof import('pinia')['mapActions']>
+    readonly mapGetters: UnwrapRef<typeof import('pinia')['mapGetters']>
+    readonly mapState: UnwrapRef<typeof import('pinia')['mapState']>
+    readonly mapStores: UnwrapRef<typeof import('pinia')['mapStores']>
+    readonly mapWritableState: UnwrapRef<typeof import('pinia')['mapWritableState']>
     readonly markRaw: UnwrapRef<typeof import('vue')['markRaw']>
     readonly nextTick: UnwrapRef<typeof import('vue')['nextTick']>
     readonly onActivated: UnwrapRef<typeof import('vue')['onActivated']>
@@ -702,9 +745,12 @@ declare module '@vue/runtime-core' {
     readonly resolveComponent: UnwrapRef<typeof import('vue')['resolveComponent']>
     readonly resolveRef: UnwrapRef<typeof import('@vueuse/core')['resolveRef']>
     readonly resolveUnref: UnwrapRef<typeof import('@vueuse/core')['resolveUnref']>
+    readonly setActivePinia: UnwrapRef<typeof import('pinia')['setActivePinia']>
+    readonly setMapStoreSuffix: UnwrapRef<typeof import('pinia')['setMapStoreSuffix']>
     readonly shallowReactive: UnwrapRef<typeof import('vue')['shallowReactive']>
     readonly shallowReadonly: UnwrapRef<typeof import('vue')['shallowReadonly']>
     readonly shallowRef: UnwrapRef<typeof import('vue')['shallowRef']>
+    readonly storeToRefs: UnwrapRef<typeof import('pinia')['storeToRefs']>
     readonly syncRef: UnwrapRef<typeof import('@vueuse/core')['syncRef']>
     readonly syncRefs: UnwrapRef<typeof import('@vueuse/core')['syncRefs']>
     readonly templateRef: UnwrapRef<typeof import('@vueuse/core')['templateRef']>
@@ -848,6 +894,7 @@ declare module '@vue/runtime-core' {
     readonly useScroll: UnwrapRef<typeof import('@vueuse/core')['useScroll']>
     readonly useScrollLock: UnwrapRef<typeof import('@vueuse/core')['useScrollLock']>
     readonly useSessionStorage: UnwrapRef<typeof import('@vueuse/core')['useSessionStorage']>
+    readonly useSettingStore: UnwrapRef<typeof import('../src/stores/setting')['useSettingStore']>
     readonly useShare: UnwrapRef<typeof import('@vueuse/core')['useShare']>
     readonly useSlots: UnwrapRef<typeof import('vue')['useSlots']>
     readonly useSorted: UnwrapRef<typeof import('@vueuse/core')['useSorted']>

diff --git a/vite.config.ts b/vite.config.ts
@@ -82,6 +82,7 @@ export default defineConfig(({ mode, command }) => {
           },
           'vue-i18n',
           '@vueuse/core',
+          'pinia',
         ],
         dts: 'typings/auto-imports.d.ts',
         dirs: [