FEAT: add settings page

locales/en-US/en-US.yml

@@ -12,3 +12,9 @@ translation:
   add_to_nav: Add to nav
   title: Title
   url: URL
+  settings:
+    reload_to_save: Reload to save
+    title: Settings
+    custom_css: Custom CSS
+    bool:
+      disable_img: Disable link image

locales/zh-CN/zh-CN.yml

@@ -12,3 +12,9 @@ translation:
   add_to_nav: 固定到顶部
   title: 标题
   url: 链接
+  settings:
+    reload_to_save: 刷新以保存
+    title: 设置
+    custom_css: 自定义CSS
+    bool:
+      disable_img: 不在链接上显示图标

src/App.vue

@@ -6,8 +6,11 @@ import { storage } from './store';
 import { computed, ref, type Ref } from 'vue';
 import i18n from './i18n';
 import { useTranslation } from 'i18next-vue';
+import { settings } from '@/settings_store';
 const { t, i18next } = useTranslation();
 
+const custom_css = settings.custom_css;
+
 const favoratedBookmarks = computed(() => {
   const res: {
     id: string;
@@ -28,13 +31,20 @@ function getBookmarkName(bookmarkid: string): Ref<string> {
   });
   return res;
 }
+
+window.addEventListener('DOMContentLoaded', () => {
+  const styleNode = document.createElement('style');
+  styleNode.innerHTML = custom_css.value;
+  document.head.appendChild(styleNode);
+});
 </script>
 
 <template>
   <nav>
     <RouterLink to="/bookmarks/0">{{ t('bookmark') }}</RouterLink>
     <RouterLink to="/local"> {{ t('local') }}</RouterLink>
     <RouterLink to="/topsites">{{ t('top_sites') }}</RouterLink>
+    <RouterLink to="/settings">{{ t('settings.title') }}</RouterLink>
     <a v-if="favoratedBookmarks.length > 0">|</a>
     <RouterLink v-for="item in favoratedBookmarks" :key="item.id" :to="`/bookmarks/${item.id}`">
       {{ item.name.value }}

src/assets/main.css

@@ -44,4 +44,4 @@ body {
 
 .btn.btn-link:not(.active):hover {
   border-bottom: 1px solid var(--color-heading);
-}
+}

src/components/EditableLink.vue

@@ -3,6 +3,7 @@ import { far } from '@fortawesome/free-regular-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 import { computed, nextTick, ref } from 'vue';
 import { useTranslation } from 'i18next-vue';
+import { settings } from '@/settings_store';
 const { t } = useTranslation();
 
 const model = defineProps<{
@@ -48,6 +49,8 @@ const iconURL = computed(() => {
 });
 
 const isFolder = computed(() => model.url.startsWith('/'));
+
+const iconDisabled = computed(() => settings.bool_configs.value.disable_img);
 </script>
 
 <template>
@@ -60,7 +63,7 @@ const isFolder = computed(() => model.url.startsWith('/'));
       </RouterLink>
     </template>
     <template v-else>
-      <img :src="iconURL" width="16" height="16" />
+      <img v-if="!iconDisabled" :src="iconURL" width="16" height="16" />
       <a :href="model.url"> {{ model.title ?? 'No title' }} </a>
     </template>
     <div class="control-group" v-if="!editing">

src/pages/SettingsPage.vue

@@ -0,0 +1,45 @@
+<template>
+  <h1 class="page-title">
+    {{ t('settings.title') }}
+  </h1>
+  <main>
+    <p v-for="(value, key) in bool_configs" :key="key">
+      <input
+        type="checkbox"
+        :checked="value"
+        @change="
+          (v) => {
+            console.log(v);
+            bool_configs[key] = !bool_configs[key];
+          }
+        "
+      />
+      <span class="description"> {{ t(`settings.bool.${key}`) }} </span>
+    </p>
+    <section>
+      <h3>{{ t(`settings.custom_css`) }}</h3>
+      <p class="description">{{ t('settings.reload_to_save') }}</p>
+      <textarea v-model="custom_css"></textarea>
+    </section>
+  </main>
+</template>
+
+<script setup lang="ts">
+import { useTranslation } from 'i18next-vue';
+import { settings } from '@/settings_store';
+const { t } = useTranslation();
+
+const bool_configs = settings.bool_configs;
+const custom_css = settings.custom_css;
+</script>
+
+<style lang="stylus" scoped>
+.description
+  margin-left: 10px
+input
+  scale 150%
+textarea
+  width 300px
+  height 200px
+  resize both
+</style>

src/router/index.ts

@@ -1,5 +1,6 @@
 import { createRouter, createWebHashHistory } from 'vue-router';
 import NewPage from '@/pages/NewPage.vue';
+import SettingsPage from '@/pages/SettingsPage.vue';
 import { storage } from '@/store';
 
 const router = createRouter({
@@ -35,6 +36,11 @@ const router = createRouter({
         source: 'topsites',
       },
     },
+    {
+      path: '/settings',
+      name: 'settings',
+      component: SettingsPage,
+    },
   ],
 });
 

src/settings_store.ts

@@ -0,0 +1,16 @@
+import { useStorage, type RemovableRef } from '@vueuse/core';
+
+const SETTINGS_CONFIG_DEFAULT = {
+  bool_configs: {
+    disable_img: false,
+  },
+  custom_css: '',
+};
+
+export const settings: {
+  [K in keyof typeof SETTINGS_CONFIG_DEFAULT]: RemovableRef<(typeof SETTINGS_CONFIG_DEFAULT)[K]>;
+} = {} as never;
+
+for (const [key, val] of Object.entries(SETTINGS_CONFIG_DEFAULT)) {
+  (settings as Record<string, unknown>)[key] = useStorage(`SETT_${key}`, val, localStorage);
+}