feat: 支持后台更换LOGO

README.md

@@ -28,6 +28,7 @@
 - [Sim 在线预览](https://nav3.cn/#/sim)
 - [Light 在线预览](https://nav3.cn/#/light)
 - [Side 在线预览](https://nav3.cn/#/side)
+- [App 在线预览](https://nav3.cn/#/app)
 
 ![Preview](https://raw.githubusercontent.com/xjh22222228/public/gh-pages/nav/1.png)
 ![Preview](https://raw.githubusercontent.com/xjh22222228/public/gh-pages/nav/2.png)
@@ -38,13 +39,14 @@
 
 
 
-## 拥有出色的特性
+## 特性
 `发现导航` 的理念就是做一款无需依赖后端服务既简单又方便，没有繁杂的配置和数据库等配置概念, 做到开箱即用。
 
 - 🍰 内置 `800+` 实用网站。
-- 🍰 支持SEO, 没有可不行。
+- 🍰 支持 SEO。
 - 🍰 完全纯静态, 提供自动化部署功能。
 - 🍰 三叉树分类、结构清晰、分类清晰。
+- 🍰 支持一个网站多个分类。
 - 🍰 颜值与简约并存，不再是杀马特时代。
 - 🍰 支持多种浏览模式，创新。
 - 🍰 支持足迹记忆。
@@ -55,7 +57,7 @@
 - 🍰 多款主题切换。
 - 🍰 支持暗黑模式。
 - 🍰 支持快捷键操作，一步到位。
-- 🍰 支持在线新增数据, 没有传统的后台概念。
+- 🍰 支持后台管理, 无需部署。
 
 
 
@@ -91,14 +93,11 @@ server {
 ```
 
 
-## 配置
-所有可配置位于文件 `nav.config.ts`。
 
 
 
-
-## 关于升级
-在升级之前请保存根目录下的 `data` 文件夹,最好把 `nav.config.ts` 配置文件也保存一份以防万一, 升级完后替换即可。
+## 升级
+在升级之前请备份根目录下的 `data` 文件夹和 `nav.config.ts`, 升级完后替换即可。
 
 点击右上角 `Watch` 按钮第一时间跟踪版本升级。
 

nav.config.ts

@@ -1,6 +1,5 @@
 import { IConfig } from './src/types'
 
-// 网站 LOGO 替换根目录下的 logo.png， 务必为 png 后缀
 const c: IConfig = {
   // [必填], 请填写您的仓库地址
   gitRepoUrl: 'https://github.com/xjh22222228/nav',
@@ -20,7 +19,7 @@ const c: IConfig = {
   // 网站关键字
   keywords: '导航,前端资源,社区站点,设计师,实用工具,学习资源,运营,网络安全,node.js',
 
-  // 默认主题: Light | Sim | Side
+  // 默认主题: Light | Sim | Side | App
   theme: 'Light',
 
   // 搜索引擎列表, 为空时不显示搜索引擎

src/components/fixbar/index.component.ts

@@ -41,6 +41,10 @@ export class FixbarComponent {
     {
       name: '切换到 Side',
       url: '/side'
+    },
+    {
+      name: '切换到 App',
+      url: '/app'
     }
   ]
 

src/constants/index.ts

@@ -9,7 +9,9 @@ export const DB_PATH = 'data/db.json'
 
 export const TAG_PATH = 'data/tag.json'
 
-export const VERSION = '5.1.0'
+export const LOGO_PATH = 'logo.png'
+
+export const VERSION = '5.1.1'
 
 // keyboard event
 const prefix = isMac() ? 'command' : 'ctrl'

src/services/index.ts

@@ -43,17 +43,18 @@ type Iupdate = {
   message: string
   content: string
   path: string
+  isEncode?: boolean
 }
 export async function updateFileContent(
-  { message, content, path }: Iupdate,
+  { message, content, path, isEncode = true }: Iupdate,
   authToken?: string
 ) {
   const _token = `${authToken ? authToken : token}`.trim()
   const fileInfo = await getFileContent(path, _token)
 
   return http.put(`/repos/${authorName}/${branchName}/contents/${path}`, {
     message: `rebot(CI): ${message}`,
-    content: encode(content),
+    content: isEncode ? encode(content) : content,
     sha: fileInfo.data.sha
   }, {
     headers: {

src/types/index.d.ts

@@ -5,6 +5,7 @@ export type ThemeType =
   | 'Light'
   | 'Sim'
   | 'Side'
+  | 'App'
 
 export interface ITagProp {
   [tagName: string]: {

src/view/admin/index.component.html

@@ -3,9 +3,24 @@
   <button nz-button style="margin-left: 15px;" (click)="handleSync()" [nzLoading]="syncLoading">同步到远端</button>
   <button nz-button style="margin-left: 15px;" (click)="handleReset()">重置初始数据</button>
 
-  <div>
+  <div class="content">
     <p><b>1、所有数据设置完毕后点击 “同步到远端”，拖拽表格进行排序</b></p>
-    <p><b>2、网站分类需手动维护, 编辑 <a [href]="gitRepoUrl + '/edit/main/data/tag.json'" target="_blank">tag.json</a></b></p>
+    <p><b>2、网站分类需手动维护, <a [href]="gitRepoUrl + '/edit/main/data/tag.json'" target="_blank">点击编辑</a></b></p>
+
+    <div class="logo-wrapper">
+      <label id="file">
+        <img src="assets/logo.png" alt="" class="logo">
+        <p style="white-space: nowrap; margin-top: 5px;">
+          {{ uploading ? '上传中...' : '更换LOGO, 仅支持 PNG' }}
+        </p>
+        <input
+          type="file"
+          name="file"
+          (change)="onFileChange($event)"
+          accept="image/png"
+        >
+      </label>
+    </div>
   </div>
 
   <nz-tabset *ngIf="isLogin" [nzSelectedIndex]="tabActive" (nzSelectedIndexChange)="onTabChange($event)">

src/view/admin/index.component.scss

@@ -1,3 +1,29 @@
 .admin {
   padding: 50px;
+}
+
+.content {
+  position: relative;
+
+  .logo-wrapper {
+    position: absolute;
+    top: -45px;
+    left: 480px;
+    width: 180px;
+    text-align: center;
+    cursor: pointer;
+    text-align: center;
+  }
+
+  .logo {
+    width: 100px;
+    height: 100px;
+    border: 1px solid #f2f2f2;
+    border-radius: 50%;
+    cursor: pointer;
+  }
+
+  input[type="file"] {
+    display: none;
+  }
 }

src/view/admin/index.component.ts

@@ -12,7 +12,7 @@ import { NzNotificationService } from 'ng-zorro-antd/notification'
 import { FormBuilder, FormGroup, Validators } from '@angular/forms'
 import { setWebsiteList, getLogoUrl } from '../../utils'
 import { updateFileContent } from '../../services'
-import { DB_PATH } from '../../constants'
+import { DB_PATH, LOGO_PATH } from '../../constants'
 import * as __tag from '../../../data/tag.json'
 import config from '../../../nav.config'
 
@@ -31,6 +31,7 @@ export default class WebpComponent {
   isLogin = !!getToken()
   showCreateModal = false
   syncLoading = false
+  uploading = false
   tabActive = 0
   editIdx = 0
   isEdit = false
@@ -69,6 +70,44 @@ export default class WebpComponent {
     });
   }
 
+  onFileChange(e) {
+    const that = this
+    const { files } = e.target
+    if (files.length <= 0) return;
+    const file = files[0]
+
+    if (file.type !== 'image/png') {
+      return this.message.error('仅支持 PNG 格式')
+    }
+
+    const fileReader = new FileReader()
+    fileReader.readAsDataURL(file)
+    fileReader.onload = function() {
+      that.uploading = true
+      const url = (this.result as string).split(',')[1]
+      const logoEL = document.querySelector('.logo') as HTMLImageElement
+      const tempSrc = logoEL.src
+      logoEL.src = this.result as string
+
+      updateFileContent({
+        message: 'update logo',
+        content: url,
+        isEncode: false,
+        path: LOGO_PATH
+      }).then(() => {
+        that.message.success('更换成功，需要等待5分钟同步时间')
+      }).catch(res => {
+        logoEL.src = tempSrc
+        that.notification.error(
+          `错误: ${res?.response?.status ?? 401}`,
+          '更换LOGO失败，请重试！'
+        )
+      }).finally(() => {
+        that.uploading = false
+      })
+    }
+  }
+
   addMoreUrl() {
     this.urlArr.push(null)
   }