Merge pull request #13 from DesnLee/master

feat(): complete my profile page

src/api/env/index.ts

@@ -0,0 +1,12 @@
+import request from '@/api';
+
+export function useEnvApi() {
+  return {
+    getEnv: () => {
+      return request({
+        url: '/api/utils/env',
+        method: 'get',
+      });
+    },
+  };
+}

src/api/settings/index.ts

@@ -0,0 +1,25 @@
+import request from '@/api';
+
+export function useSettingsApi() {
+  return {
+    getSettings: () => {
+      return request({
+        url: '/api/settings',
+        method: 'get',
+      });
+    },
+    setSettings: (data: SettingsPostData) => {
+      return request({
+        url: '/api/settings',
+        method: 'patch',
+        data,
+      });
+    },
+    syncSettings: (query: 'download' | 'upload') => {
+      return request({
+        url: '/api/utils/backup?action=' + query,
+        method: 'get',
+      });
+    },
+  };
+}

src/components/SubListItem.vue

@@ -135,7 +135,7 @@
     } else {
       const displayNameList = nameList.map(name => {
         const sub = subsStore.getOneSub(name);
-        return sub?.displayName || sub?.['display-name'];
+        return sub?.displayName || sub?.['display-name'] || sub.name;
       });
       return `${t('subPage.collectionItem.contain')}：${displayNameList.join(
         '、'

src/layout/AppLayout.vue

@@ -6,34 +6,34 @@
 </template>
 
 <script lang="ts" setup>
-  import TabBar from '@/components/TabBar.vue'
-  import { useRoute } from 'vue-router'
-  import { computed } from 'vue'
-  import { storeToRefs } from 'pinia'
-  import { useGlobalStore } from '@/store/global'
-  import router from '@/router'
+  import TabBar from '@/components/TabBar.vue';
+  import { useRoute } from 'vue-router';
+  import { computed } from 'vue';
+  import { storeToRefs } from 'pinia';
+  import { useGlobalStore } from '@/store/global';
+  import router from '@/router';
 
-  const globalStore = useGlobalStore()
-  const { bottomSafeArea } = storeToRefs(globalStore)
+  const globalStore = useGlobalStore();
+  const { bottomSafeArea } = storeToRefs(globalStore);
 
-  const route = useRoute()
+  const route = useRoute();
 
   const isNeedTabBar = computed(() => {
-    return route.meta?.needTabBar ?? false
-  })
+    return route.meta?.needTabBar ?? false;
+  });
 
   const height = computed(() => {
     if (route.meta.needTabBar) {
-      return 44 + bottomSafeArea.value + 'px'
+      return 44 + 12 + bottomSafeArea.value + 'px';
     } else {
-      return '16px'
+      return '16px';
     }
-  })
+  });
 
   // 每次切换路由后，将页面位置置顶
   router.afterEach(() => {
-    document.querySelector('.app-layout-wrapper')?.scrollTo({ top: 0 })
-  })
+    document.querySelector('.app-layout-wrapper')?.scrollTo({ top: 0 });
+  });
 </script>
 
 <style scoped lang="scss">

src/locales/en.ts

@@ -291,6 +291,34 @@ export default {
       },
     },
   },
+  myPage: {
+    placeholder: {
+      name: 'Gist Sync not set',
+      des: 'Sync available after Gist configuration',
+      syncTime: 'Last sync time ',
+      haveNotSync: 'Not sync yet',
+      githubUser: 'Please input Github username',
+      gistToken: 'Please input Gist Token',
+    },
+    btn: {
+      sync: 'Sync',
+      upload: 'Upload',
+      cancel: 'Cancel',
+      edit: 'Edit',
+      save: 'Save',
+    },
+    notify: {
+      download: {
+        succeed: 'Download succeed',
+        failed: 'Download failed',
+      },
+      upload: {
+        succeed: 'Upload succeed',
+        failed: 'Upload failed',
+      },
+    },
+    config: 'Gist Configuration',
+  },
   comparePage: {
     title: 'Conversion results comparison',
     remain: {

src/locales/zh.ts

@@ -300,6 +300,34 @@ export default {
       },
     },
   },
+  myPage: {
+    placeholder: {
+      name: '未设置 Gist 同步',
+      des: '同步功能配置 Gist 后可用',
+      syncTime: '上次同步 ',
+      haveNotSync: '暂无同步记录',
+      githubUser: '请输入 Github 用户名',
+      gistToken: '请输入 Gist Token',
+    },
+    notify: {
+      download: {
+        succeed: '下载成功',
+        failed: '下载失败',
+      },
+      upload: {
+        succeed: '同步成功',
+        failed: '同步失败',
+      },
+    },
+    btn: {
+      sync: '同步',
+      upload: '上传',
+      cancel: '取消',
+      edit: '编辑',
+      save: '保存',
+    },
+    config: 'Gist 配置',
+  },
   comparePage: {
     title: '即时预览',
     remain: {

src/plugin/awesomeIcon.ts

@@ -17,6 +17,10 @@ import {
   faCode,
   faArrowRotateRight,
   faAnglesRight,
+  faCloudArrowDown,
+  faCloudArrowUp,
+  faBan,
+  faPenToSquare,
 } from '@fortawesome/free-solid-svg-icons';
 
 library.add(faLanguage);
@@ -35,3 +39,7 @@ library.add(faLocationArrow);
 library.add(faCode);
 library.add(faArrowRotateRight);
 library.add(faAnglesRight);
+library.add(faCloudArrowDown);
+library.add(faCloudArrowUp);
+library.add(faBan);
+library.add(faPenToSquare);

src/store/global.ts

@@ -1,4 +1,7 @@
 import { defineStore } from 'pinia';
+import { useEnvApi } from '@/api/env';
+
+const envApi = useEnvApi();
 
 export const useGlobalStore = defineStore('globalStore', {
   state: (): GlobalStoreState => {
@@ -7,6 +10,7 @@ export const useGlobalStore = defineStore('globalStore', {
       fetchResult: false,
       bottomSafeArea: 0,
       isDarkMode: false,
+      env: {},
     };
   },
   getters: {},
@@ -23,5 +27,9 @@ export const useGlobalStore = defineStore('globalStore', {
     setDarkMode(isDarkMode: boolean) {
       this.isDarkMode = isDarkMode;
     },
+    async getEnv() {
+      const { data } = await envApi.getEnv();
+      this.env = data;
+    },
   },
 });

src/store/settings.ts

@@ -0,0 +1,38 @@
+import { defineStore } from 'pinia';
+import { useSettingsApi } from '@/api/settings';
+
+const settingsApi = useSettingsApi();
+
+export const useSettingsStore = defineStore('settingsStore', {
+  state: (): SettingsStoreState => {
+    return {
+      gistToken: '',
+      githubUser: '',
+      syncTime: 0,
+      theme: {
+        darkMode: false,
+      },
+      avatarUrl: '',
+    };
+  },
+  getters: {},
+  actions: {
+    async fetchSettings() {
+      const { data } = await settingsApi.getSettings();
+      this.gistToken = data.gistToken || '';
+      this.githubUser = data.githubUser || '';
+      this.syncTime = data.syncTime || 0;
+      this.theme = data.theme || { darkMode: false };
+      this.avatarUrl = data.avatarUrl || '';
+    },
+    async editSettings(data: SettingsPostData) {
+      const { data: res } = await settingsApi.setSettings(data);
+      console.log(res);
+      this.gistToken = res.gistToken || '';
+      this.githubUser = res.githubUser || '';
+      this.syncTime = res.syncTime || 0;
+      this.theme = res.theme || { darkMode: false };
+      this.avatarUrl = res.avatarUrl || '';
+    },
+  },
+});

src/types/store/globalStore.d.ts

@@ -3,4 +3,17 @@ interface GlobalStoreState {
   fetchResult: boolean;
   bottomSafeArea: number;
   isDarkMode: boolean;
+  env: ENV;
+}
+
+interface ENV {
+  version?: string;
+  backend?:
+    | 'Stash'
+    | 'QX'
+    | 'Loon'
+    | 'Surge'
+    | 'ShadowRocket'
+    | 'Clash'
+    | 'Node';
 }

src/types/store/settings.d.ts

@@ -0,0 +1,14 @@
+interface SettingsStoreState {
+  gistToken: string;
+  githubUser: string;
+  syncTime: number;
+  theme: {
+    darkMode: boolean;
+  };
+  avatarUrl: string;
+}
+
+interface SettingsPostData {
+  gistToken: string;
+  githubUser: string;
+}

src/utils/initApp.ts

@@ -13,7 +13,7 @@ export const initStores = async (
   const notify = {
     type: '',
     msg: '',
-    duration: 2500,
+    duration: 2000,
   };
 
   globalStore.setLoading(true);
@@ -53,8 +53,8 @@ export const initStores = async (
       notify.msg += msg ? code + ', ' + msg : code;
     }
 
-    subsStore.subs = {};
-    subsStore.collections = {};
+    subsStore.subs = [];
+    subsStore.collections = [];
   }
   globalStore.setLoading(false);