Skip to content

Commit

Permalink
feat: add settings page
Browse files Browse the repository at this point in the history
  • Loading branch information
YunYouJun committed Aug 19, 2023
1 parent 95ce2c4 commit 98123b0
Show file tree
Hide file tree
Showing 14 changed files with 1,640 additions and 973 deletions.
23 changes: 23 additions & 0 deletions components/common/YlfForm.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
<template>
<div class="ylf-form" flex="~ col">
<slot />
</div>
</template>

<style lang="scss">
.ylf-form {
background-color: var(--ylf-c-bg-alt);
border-top: 1px solid var(--ylf-c-border);
border-bottom: 1px solid var(--ylf-c-border);
margin: 10px 0;
.ylf-form-item {
border-bottom: 1px solid var(--ylf-c-border);
&:last-child {
border-bottom: none;
}
}
}
</style>
33 changes: 33 additions & 0 deletions components/common/YlfFormItem.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
<script lang="ts" setup>
import { NuxtLink } from '#components'
defineProps<{
icon?: string
label?: string
/**
* Router link
*/
to?: string
}>()
</script>

<template>
<component
:is="to ? NuxtLink : 'div'"
:to="to"
class="ylf-form-item"
w-full flex cursor-pointer items-center justify-between p-3
hover:bg-gray-100
dark:hover:bg-dark-400
>
<div v-if="label" class="text-md" inline-flex items-center justify-center>
<div v-if="icon" :class="icon" mr-2 inline-flex />
<span>{{ label }}</span>
</div>
<div inline-flex>
<slot>
<div v-if="to" i-ri-arrow-right-s-line />
</slot>
</div>
</component>
</template>
28 changes: 28 additions & 0 deletions components/common/YlfSwitch.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
<script lang="ts" setup>
import { Switch } from '@headlessui/vue'
defineProps<{
modelValue: boolean
}>()
const emit = defineEmits(['update:modelValue'])
function updateModelValue(value: boolean) {
emit('update:modelValue', value)
}
</script>

<template>
<Switch
:model-value="modelValue"
:class="modelValue ? 'bg-blue-600' : 'bg-gray'"
class="relative h-6 w-11 inline-flex shrink-0 cursor-pointer border-2 border-transparent rounded-full transition-colors duration-200 ease-in-out focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75"
@update:model-value="updateModelValue"
>
<span class="sr-only">Use setting</span>
<span
aria-hidden="true"
:class="modelValue ? 'translate-x-5' : 'translate-x-0'"
class="pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow-lg ring-0 transition duration-200 ease-in-out"
/>
</Switch>
</template>
6 changes: 6 additions & 0 deletions composables/store/app.ts
Original file line number Diff line number Diff line change
@@ -1,10 +1,16 @@
import { acceptHMRUpdate, defineStore } from 'pinia'
import { useStorage } from '@vueuse/core'
import { defaultSettings } from '~/utils/settings'
import { namespace } from '~/constants'

export const useAppStore = defineStore('app', () => {
const deferredPrompt = ref<Event | any>()
const settings = useStorage(`${namespace}:settings`, defaultSettings)

return {
deferredPrompt,

settings,
}
})

Expand Down
7 changes: 4 additions & 3 deletions composables/store/recipe.ts
Original file line number Diff line number Diff line change
Expand Up @@ -17,17 +17,18 @@ export type SearchMode = 'survival' | 'loose' | 'strict'

export const useRecipeStore = defineStore('recipe', () => {
const gtm = useGtm()
const { settings } = useAppStore()

/**
* 搜索关键字
*/
const keyword = ref('')

// can not exported
const curStuff = useStorage(`${namespace}:stuff`, new Set<string>())
const curStuff = settings.keepLocalData ? useStorage(`${namespace}:stuff`, new Set<string>()) : ref(new Set<string>())
// const curTools = ref(new Set<string>())
const curTool = useStorage(`${namespace}:tool`, '')
const curMode = useStorage<SearchMode>(`${namespace}:mode`, 'loose')
const curTool = settings.keepLocalData ? useStorage(`${namespace}:tool`, '') : ref('')
const curMode = settings.keepLocalData ? useStorage<SearchMode>(`${namespace}:mode`, 'loose') : ref<SearchMode>('loose')

const selectedStuff = computed(() => Array.from(curStuff.value))
// const selectedTools = computed(() => Array.from(curTools.value))
Expand Down
2 changes: 1 addition & 1 deletion layouts/default.vue
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<main class="text-center text-gray-700 dark:text-gray-200" p="x-2 t-8 b-15">
<main class="text-center text-gray-700 dark:text-gray-200" p="t-8 b-15">
<slot />
<DarkToggle absolute right-5 top-5 />
<TheBottomMenu fixed bottom-0 left-0 right-0 />
Expand Down
2 changes: 1 addition & 1 deletion nuxt.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ export default defineNuxtConfig({
},
prerender: {
crawlLinks: false,
routes: ['/'],
routes: ['/', '/random', 'help', '/user'],
ignore: ['/hi'],
},
},
Expand Down
32 changes: 16 additions & 16 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -24,21 +24,21 @@
"vue-about-me": "^1.2.7"
},
"devDependencies": {
"@antfu/eslint-config": "^0.40.0",
"@headlessui/vue": "^1.7.15",
"@iconify-json/carbon": "^1.1.18",
"@iconify-json/fe": "^1.1.6",
"@iconify-json/gg": "^1.1.5",
"@iconify-json/ic": "^1.1.13",
"@iconify-json/mdi": "^1.1.53",
"@iconify-json/ri": "^1.1.11",
"@iconify-json/twemoji": "^1.1.11",
"@nuxt/devtools": "^0.7.4",
"@antfu/eslint-config": "^0.40.2",
"@headlessui/vue": "^1.7.16",
"@iconify-json/carbon": "^1.1.19",
"@iconify-json/fe": "^1.1.7",
"@iconify-json/gg": "^1.1.6",
"@iconify-json/ic": "^1.1.14",
"@iconify-json/mdi": "^1.1.54",
"@iconify-json/ri": "^1.1.12",
"@iconify-json/twemoji": "^1.1.12",
"@nuxt/devtools": "^0.8.0",
"@nuxtjs/color-mode": "^3.3.0",
"@pinia/nuxt": "^0.4.11",
"@pinia/testing": "^0.1.3",
"@unocss/eslint-config": "^0.54.1",
"@unocss/nuxt": "^0.54.1",
"@unocss/eslint-config": "^0.55.2",
"@unocss/nuxt": "^0.55.2",
"@vite-pwa/nuxt": "^0.1.0",
"@vue/test-utils": "^2.4.1",
"@vueuse/nuxt": "^10.3.0",
Expand All @@ -47,17 +47,17 @@
"consola": "^3.2.3",
"cross-env": "^7.0.3",
"dexie": "^3.2.4",
"eslint": "^8.46.0",
"eslint": "^8.47.0",
"fake-indexeddb": "^4.0.2",
"jsdom": "^22.1.0",
"nuxt": "^3.6.5",
"pinia": "^2.1.6",
"sass": "^1.64.2",
"sass": "^1.66.1",
"star-markdown-css": "^0.4.2",
"tsx": "^3.12.7",
"typescript": "^5.1.6",
"unocss": "^0.54.1",
"vitest": "^0.34.1",
"unocss": "^0.55.2",
"vitest": "^0.34.2",
"vue-tsc": "^1.8.8"
}
}
85 changes: 85 additions & 0 deletions pages/help.vue
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,10 @@
<FeedbackActions />

<div class="mx-auto max-w-md w-full rounded-2xl p-2" text-left>
<FAQItem title="未来计划?">
计划增加新功能,如自定义菜谱,与使用其他用户分享的菜谱。
</FAQItem>

<FAQItem title="什么是模式?">
<ul>
<li><b>模糊匹配</b>:展示所有含当前选中任意食材的菜谱</li>
Expand Down Expand Up @@ -80,6 +84,87 @@
</li>
</ol>
</FAQItem>

<hr h="1" my="4" bg-black>

<FAQItem :default-open="true" title="关于">
<div text-left>
<ul>
<li>
它诞生于 2022 年 4 月,时值疫情风控期间,希望能帮助期间的伙伴根据现有食材寻找到合适的菜谱。故原名「隔离食用手册」。
</li>
<li>
如今那个时期已离我们远去,故去掉「隔离」二字。但也很高兴能在这里继续与你相遇,希望它能继续发光发热,在日常生活中帮助到大家。
</li>
<li>
<div class="inline-flex items-center justify-center">
代码仓库:<a class="inline-flex items-center justify-center" href="https://github.com/YunYouJun/cook" target="_blank">
<div m="r-1" i-ri-github-line inline-flex />YunYouJun/cook</a>
</div>
</li>
<li>
<div class="inline-flex items-center justify-center">
菜谱视频来源:
<a class="inline-flex items-center text-sm text-blue-600 dark:text-blue-400" href="https://docs.qq.com/sheet/DQk1vdkhFV0twQVNS" target="_blank">
<div m="r-1" i-ri-bilibili-line inline-flex />
<span class="inline-flex">隔离食用手册大全</span>
</a>
</div>
</li>
</ul>
</div>
</FAQItem>

<FAQItem title="关于我">
<div text-left>
我的个人微信公众号「云游君」,会分享一些生活和写的<a href="https://sponsors.yunyoujun.cn/projects" target="_blank">
小玩具们
</a>。

<a inline-flex py-4 href="https://cdn.yunyoujun.cn/img/about/white-qrcode-and-search.jpg" target="_blank">
<img src="https://cdn.yunyoujun.cn/img/about/white-qrcode-and-search.jpg">
</a>
</div>
<AboutMe />
</FAQItem>

<FAQItem title="致谢">
<p>
感谢以下小伙伴为本项目提供的数据支持和 QA !
</p>

<ul mt-2 text-left text-sm>
<li>
<a href="https://weibo.com/runny" target="_blank">Runny</a>
</li>
<li>
山竹太凉
</li>
<li>
leo
</li>
<li>
麒麟
</li>
<li>
晴方啾
</li>
<li>
课代表阿伟
</li>
</ul>
</FAQItem>

<FAQItem title="赞助者们">
<div>
感谢至今以来所有的<a href="https://afdian.net/a/yunyoujun" class="text-purple" target="_blank">赞助者</a>们,你们的支持是我持续维护和开发新项目的动力!
</div>
<div pt-2>
<a href="https://sponsors.yunyoujun.cn" target="_blank">
<img src="https://sponsors.yunyoujun.cn/sponsors.svg">
</a>
</div>
</FAQItem>
</div>
</div>
<BaseFooter mt-4 />
Expand Down
Loading

1 comment on commit 98123b0

@vercel
Copy link

@vercel vercel bot commented on 98123b0 Aug 19, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

cook – ./

cook-today.vercel.app
cook-yunyoujun.vercel.app
cook-git-dev-yunyoujun.vercel.app
cook.yunle.app

Please sign in to comment.