From bcd76b208bb12d1483e907c5b99496a04c87e7cc Mon Sep 17 00:00:00 2001
From: hanaTsuk1 <101488209+hanaTsuk1@users.noreply.github.com>
Date: Sun, 16 Apr 2023 10:22:09 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0config=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src-tauri/tauri.conf.json    |  4 ++--
 src/components.d.ts          |  7 +++++++
 src/components/NavDrawer.vue |  9 +++++++--
 src/hooks/useConfig.ts       |  5 ++---
 src/locales/en-US.yaml       |  9 ++++++---
 src/locales/zh-CN.yaml       |  3 +++
 src/pages/config.vue         | 34 +++++++++++++++++++++++++++++++++-
 src/pages/label.vue          |  3 +++
 8 files changed, 63 insertions(+), 11 deletions(-)
 create mode 100644 src/pages/label.vue

diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json
index dcf865c5..9b3a3cad 100644
--- a/src-tauri/tauri.conf.json
+++ b/src-tauri/tauri.conf.json
@@ -40,8 +40,8 @@
         "fullscreen": false,
         "resizable": true,
         "title": "shion",
-        "width": 800,
-        "height": 600
+        "width": 960,
+        "height": 540
       }
     ]
   }
diff --git a/src/components.d.ts b/src/components.d.ts
index aa65ba55..7305aeeb 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -9,10 +9,17 @@ export {}
 
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
+    AButton: typeof import('ant-design-vue/es')['Button']
+    ACheckbox: typeof import('ant-design-vue/es')['Checkbox']
+    AForm: typeof import('ant-design-vue/es')['Form']
+    AFormItem: typeof import('ant-design-vue/es')['FormItem']
+    AInput: typeof import('ant-design-vue/es')['Input']
+    AInputPassword: typeof import('ant-design-vue/es')['InputPassword']
     ALayout: typeof import('ant-design-vue/es')['Layout']
     ALayoutSider: typeof import('ant-design-vue/es')['LayoutSider']
     AMenu: typeof import('ant-design-vue/es')['Menu']
     AMenuItem: typeof import('ant-design-vue/es')['MenuItem']
+    ASelect: typeof import('ant-design-vue/es')['Select']
     NavDrawer: typeof import('./components/NavDrawer.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
diff --git a/src/components/NavDrawer.vue b/src/components/NavDrawer.vue
index dfc3f8f8..439720f1 100644
--- a/src/components/NavDrawer.vue
+++ b/src/components/NavDrawer.vue
@@ -2,7 +2,7 @@
 const { t } = useI18n()
 const route = useRoute()
 
-const menu = [{
+const menu = computed(() => [{
   icon: 'i-mdi:view-grid',
   key: 'index',
   tip: t('nav.plan'),
@@ -12,12 +12,17 @@ const menu = [{
   key: 'time',
   tip: t('nav.time'),
   to: '/time',
+}, {
+  icon: 'i-mdi:label',
+  key: 'label',
+  tip: t('nav.label'),
+  to: '/label',
 }, {
   icon: 'i-mdi:cog',
   key: 'config',
   tip: t('nav.config'),
   to: '/config',
-}]
+}])
 
 const name = computed(() => route.name as string)
 </script>
diff --git a/src/hooks/useConfig.ts b/src/hooks/useConfig.ts
index e14f6267..fb3a8fb4 100644
--- a/src/hooks/useConfig.ts
+++ b/src/hooks/useConfig.ts
@@ -27,10 +27,9 @@ export function useConfig() {
 
 async function init() {
   const len = await store.length()
-  if (len != 0)
-    return
+  if (len == 0)
+    await create()
 
-  await create()
   await read()
 }
 
diff --git a/src/locales/en-US.yaml b/src/locales/en-US.yaml
index 3224d2c5..e1d75b79 100644
--- a/src/locales/en-US.yaml
+++ b/src/locales/en-US.yaml
@@ -1,4 +1,7 @@
 nav:
-  plan: plan
-  time: time
-  config: config
+  plan: Plan
+  time: Time
+  label: Label
+  config: Config
+config:
+  locale: Language
diff --git a/src/locales/zh-CN.yaml b/src/locales/zh-CN.yaml
index d6cb975a..54fcff03 100644
--- a/src/locales/zh-CN.yaml
+++ b/src/locales/zh-CN.yaml
@@ -1,4 +1,7 @@
 nav:
   plan: 计划
   time: 计时
+  label: 标签
   config: 设置
+config:
+  locale: 语言
diff --git a/src/pages/config.vue b/src/pages/config.vue
index 9b72b904..2a9ee965 100644
--- a/src/pages/config.vue
+++ b/src/pages/config.vue
@@ -1,3 +1,35 @@
+<script setup lang="ts">
+import type { SelectProps } from 'ant-design-vue'
+
+const { locale } = useI18n()
+const config = useConfig()
+
+watch(() => config.value.locale, v => locale.value = v)
+
+const localeOptions: SelectProps['options'] = [
+  {
+    label: '简体中文',
+    value: 'zh-CN',
+  },
+  {
+    label: 'English (United States)',
+    value: 'en-US',
+  },
+]
+</script>
+
 <template>
-  config
+  <a-form
+    :model="config"
+    layout="vertical"
+  >
+    <a-form-item
+      :label="$t('config.locale')"
+    >
+      <a-select
+        v-model:value="config.locale"
+        :options="localeOptions"
+      />
+    </a-form-item>
+  </a-form>
 </template>
diff --git a/src/pages/label.vue b/src/pages/label.vue
new file mode 100644
index 00000000..b158cfac
--- /dev/null
+++ b/src/pages/label.vue
@@ -0,0 +1,3 @@
+<template>
+  label
+</template>