feat: own visible

33b519b0 · xjh22222228 · 8bfc3ade · 33b519b0 · 33b519b0 · 33b519b0
17 changed file
--- a/README.md
+++ b/README.md
@@ -197,6 +197,6 @@ Thank you for your [contribution](https://github.com/xjh22222228/nav/issues), me
 感谢您的认可：
 | 姓名    | 支持金额              |
 | --------------------------------------- |----------- |
-| [aiyou9](https://github.com/aiyou9)     | ￥40.00     |
+| [aiyou9](https://github.com/aiyou9)     | ￥50.00     |
 | 路人甲     | ￥50.00     |

--- a/src/components/create-web/index.component.html
+++ b/src/components/create-web/index.component.html
 <nz-modal
+  [nzWidth]="560"
  [(nzVisible)]="visible"
  [nzTitle]="detail ? '编辑' : '新增'"
  (nzOnCancel)="handleCancel()"
@@ -24,29 +25,30 @@
      <div class="row">
        <div class="col">
          <nz-form-item>
-            <nz-form-label [nzSpan]="8" nzRequired>快捷方式</nz-form-label>
-            <nz-form-control [nzSpan]="16">
+            <nz-form-label [nzSpan]="15" nzRequired>快捷方式</nz-form-label>
+            <nz-form-control [nzSpan]="9">
              <nz-switch formControlName="top"></nz-switch>
            </nz-form-control>
          </nz-form-item>
        </div>
        <div class="col">
-          <!-- <nz-form-item>
-            <nz-form-label [nzSpan]="8" nzRequired>是否公开</nz-form-label>
-            <nz-form-control [nzSpan]="16">
-              <nz-switch formControlName="visible"></nz-switch>
+          <nz-form-item>
+            <nz-form-label [nzSpan]="15" nzRequired>仅自己可见</nz-form-label>
+            <nz-form-control [nzSpan]="9">
+              <nz-switch formControlName="ownVisible"></nz-switch>
+            </nz-form-control>
+          </nz-form-item>
+        </div>
+        <div class="col">
+          <nz-form-item>
+            <nz-form-label [nzSpan]="8">推荐指数</nz-form-label>
+            <nz-form-control [nzSpan]="24">
+              <nz-rate formControlName="rate" nzAllowHalf></nz-rate>
            </nz-form-control>
-          </nz-form-item> -->
+          </nz-form-item>
        </div>
      </div>

-      <nz-form-item>
-        <nz-form-label [nzSpan]="4">推荐指数</nz-form-label>
-        <nz-form-control [nzSpan]="20">
-          <nz-rate formControlName="rate" nzAllowHalf></nz-rate>
-        </nz-form-control>
-      </nz-form-item>
-
      <nz-form-item>
        <nz-form-label [nzSpan]="4">图标地址</nz-form-label>
        <nz-form-control [nzSpan]="20">

--- a/src/components/create-web/index.component.scss
+++ b/src/components/create-web/index.component.scss
@@ -4,8 +4,5 @@

 .row {
  display: flex;
-
-  .col {
-    flex: 1;
-  }
+  justify-content: space-around;
 }
--- a/src/components/create-web/index.component.ts
+++ b/src/components/create-web/index.component.ts
@@ -42,6 +42,7 @@ export class CreateWebComponent implements OnInit {
      title: ['', [Validators.required]],
      url: ['', [Validators.required]],
      top: [false],
+      ownVisible: [false],
      rate: [5],
      url0: [''],
      url1: [''],
@@ -68,6 +69,7 @@ export class CreateWebComponent implements OnInit {
        this.validateForm.get('icon')!.setValue(detail.icon || '')
        this.validateForm.get('url')!.setValue(detail.url || '')
        this.validateForm.get('top')!.setValue(detail.top ?? false)
+        this.validateForm.get('ownVisible')!.setValue(detail.ownVisible ?? false)
        this.validateForm.get('rate')!.setValue(detail.rate ?? 5)
  
        if (typeof detail.urls === 'object') {
@@ -184,6 +186,7 @@ export class CreateWebComponent implements OnInit {
      icon,
      url,
      top,
+      ownVisible,
      rate,
      desc,
      url0,
@@ -214,6 +217,7 @@ export class CreateWebComponent implements OnInit {
      rate: rate ?? 0,
      desc: desc || '',
      top: top ?? false,
+      ownVisible: ownVisible ?? false,
      icon,
      url,
      urls

--- a/src/components/fixbar/index.component.ts
+++ b/src/components/fixbar/index.component.ts
@@ -173,7 +173,7 @@ export class FixbarComponent {
    this.modal.info({
      nzTitle: '同步数据到远端',
      nzOkText: '确定同步',
-      nzContent: '确定将所有数据同步到远端吗？这可能需要消耗一定的时间。',
+      nzContent: '确定将所有数据同步到远端吗？',
      nzOnOk: () => {
        this.syncLoading = true;


--- a/src/styles.scss
+++ b/src/styles.scss
@@ -112,6 +112,12 @@ em {
  -webkit-box-orient: vertical;
 }

+.remove {
+  position: fixed !important;
+  top: -10000px !important;
+  left: -10000px !important;
+}
+
 /* 搜索高亮关键字 */
 b {
  color: #f50 !important;

--- a/src/types/index.d.ts
+++ b/src/types/index.d.ts
@@ -25,6 +25,7 @@ export interface INavFourProp {
  rate?: number // 0-5
  top?: boolean
  index?: number // sort
+  ownVisible?: boolean
  urls?: {
    [tagName: string]: string
  }
@@ -35,6 +36,7 @@ export interface INavThreeProp {
  icon?: string | null
  createdAt?: string
  collapsed?: boolean
+  ownVisible?: boolean
  nav: INavFourProp[]
 }

@@ -43,6 +45,7 @@ export interface INavTwoProp {
  icon?: string | null
  createdAt?: string
  collapsed?: boolean
+  ownVisible?: boolean
  nav: INavThreeProp[]
 }

@@ -51,6 +54,7 @@ export interface INavProps extends Object {
  id?: number
  icon?: string | null
  createdAt?: string
+  ownVisible?: boolean
  nav: INavTwoProp[]
 }


--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -4,12 +4,13 @@
 import qs from 'qs'
 import config from '../../nav.config'
 import Clipboard from 'clipboard'
-import { INavFourProp, INavProps, ISearchEngineProps } from '../types'
+import { INavFourProp, INavThreeProp, INavProps, ISearchEngineProps } from '../types'
 import * as db from '../../data/db.json'
 import * as s from '../../data/search.json'
 import { STORAGE_KEY_MAP } from '../constants'
+import { isLogin } from './user'

-export const websiteList = getWebsiteList()
+export const websiteList: INavProps[] = getWebsiteList()

 let total = 0
 const { lightThemeConfig } = config
@@ -188,7 +189,7 @@ export function adapterWebsiteList(websiteList: any[], parentItem?: any) {
  return websiteList;
 }

-export function getWebsiteList() {
+export function getWebsiteList(): INavProps[] {
  let webSiteList = adapterWebsiteList((db as any).default)
  const scriptElAll = document.querySelectorAll('script')
  const scriptUrl = scriptElAll[scriptElAll.length - 1].src
@@ -247,10 +248,13 @@ export function toggleCollapseAll(wsList?: INavProps[]): boolean {
 export function setLocation() {
  const { page, id } = queryString()

-  window.localStorage.setItem(STORAGE_KEY_MAP.location, JSON.stringify({
-    page,
-    id
-  }))
+  window.localStorage.setItem(
+    STORAGE_KEY_MAP.location,
+    JSON.stringify({
+      page,
+      id
+    }
+  ))
 }

 export function getDefaultSearchEngine(): ISearchEngineProps {
@@ -265,7 +269,10 @@ export function getDefaultSearchEngine(): ISearchEngineProps {
 }

 export function setDefaultSearchEngine(engine: ISearchEngineProps) {
-  window.localStorage.setItem(STORAGE_KEY_MAP.engine, JSON.stringify(engine))
+  window.localStorage.setItem(
+    STORAGE_KEY_MAP.engine,
+    JSON.stringify(engine)
+  )
 }

 export function isDark(): boolean {
@@ -429,3 +436,24 @@ export function getTextContent(value: string): string {
  div.innerHTML = value
  return div.textContent
 }
+
+export function matchCurrentList(): INavThreeProp[] {
+  const { id, page } = queryString()
+  let data = []
+
+  try {
+    if (
+      websiteList[page] &&
+      websiteList[page]?.nav?.length > 0 &&
+      (isLogin || !websiteList[page].nav[id].ownVisible)
+    ) {
+      data = websiteList[page].nav[id].nav
+    } else {
+      data = []
+    }
+  } catch {
+    data = []
+  }
+
+  return data
+}
--- a/src/utils/user.ts
+++ b/src/utils/user.ts
@@ -8,3 +8,5 @@ export function getToken() {
 export function setToken(token: string) {
  return window.localStorage.setItem('token', token)
 }
+
+export const isLogin: boolean = !!getToken()
--- a/src/view/admin/index.component.html
+++ b/src/view/admin/index.component.html
 <div class="admin">
-  <button nz-button style="margin-bottom: 15px;" (click)="goBack()">返回主页</button>
-  <button nz-button style="margin-left: 15px;" (click)="handleSync()" [nzLoading]="syncLoading">同步到远端</button>
-  <button nz-button style="margin-left: 15px;" (click)="handleReset()">重置初始数据</button>
+  <button
+    nz-button
+    style="margin-bottom: 15px;"
+    (click)="goBack()"
+  >
+    返回主页
+  </button>
+  <button
+    nz-button
+    style="margin-left: 15px;"
+    (click)="handleSync()"
+    [nzLoading]="syncLoading"
+  >
+    同步到远端
+  </button>
+  <button
+    nz-button
+    style="margin-left: 15px;"
+    (click)="handleReset()"
+  >
+    重置初始数据
+  </button>

  <div class="content">
    <p><b>1、所有数据设置完毕后点击 “同步到远端”，拖拽表格进行排序</b></p>
@@ -44,6 +63,7 @@
          <tr>
            <th>图标</th>
            <th>分类名称</th>
+            <th>仅自己可见</th>
            <th>创建时间</th>
            <th>操作</th>
          </tr>
@@ -58,6 +78,9 @@
              </app-logo>
            </td>
            <td>{{ data.title }}</td>
+            <td>
+              <i *ngIf="data.ownVisible" nz-icon nzType="check" nzTheme="outline"></i>
+            </td>
            <td>{{ data.createdAt }}</td>
            <td>
              <a (click)="handleEditBtn(data, idx)">编辑</a>
@@ -105,6 +128,7 @@
          <tr>
            <th>图标</th>
            <th>分类名称</th>
+            <th>仅自己可见</th>
            <th>创建时间</th>
            <th>操作</th>
          </tr>
@@ -119,6 +143,9 @@
              </app-logo>
            </td>
            <td>{{ data.title }}</td>
+            <td>
+              <i *ngIf="data.ownVisible" nz-icon nzType="check" nzTheme="outline"></i>
+            </td>
            <td>{{ data.createdAt }}</td>
            <td>
              <a (click)="handleEditBtn(data, idx)">编辑</a>
@@ -181,6 +208,7 @@
          <tr>
            <th>图标</th>
            <th>分类名称</th>
+            <th>仅自己可见</th>
            <th>创建时间</th>
            <th>操作</th>
          </tr>
@@ -195,6 +223,9 @@
              </app-logo>
            </td>
            <td>{{ data.title }}</td>
+            <td>
+              <i *ngIf="data.ownVisible" nz-icon nzType="check" nzTheme="outline"></i>
+            </td>
            <td>{{ data.createdAt }}</td>
            <td>
              <a (click)="handleEditBtn(data, idx)">编辑</a>
@@ -273,6 +304,7 @@
            <th>图标</th>
            <th>网站名称</th>
            <th>网站分类</th>
+            <th>仅自己可见</th>
            <th nzWidth="300px">网站描述</th>
            <th>创建时间</th>
            <th>操作</th>
@@ -295,6 +327,9 @@
                <a [href]="data.urls[key]" target="_blank">{{ key }}</a>
              </nz-tag>
            </td>
+            <td>
+              <i *ngIf="data.ownVisible" nz-icon nzType="check" nzTheme="outline"></i>
+            </td>
            <td>
              <pre class="desc">{{ data.desc }}</pre>
            </td>
@@ -334,15 +369,22 @@
  <ng-container *nzModalContent>
    <form nz-form [formGroup]="validateForm">
      <nz-form-item>
-        <nz-form-label [nzSpan]="4" nzRequired>分类名称</nz-form-label>
-        <nz-form-control [nzSpan]="20" nzErrorTip="请输入名称">
+        <nz-form-label [nzSpan]="6" nzRequired>分类名称</nz-form-label>
+        <nz-form-control [nzSpan]="18" nzErrorTip="请输入名称">
          <input formControlName="title" nz-input placeholder="发现导航" />
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
-        <nz-form-label [nzSpan]="4">图标地址</nz-form-label>
-        <nz-form-control [nzSpan]="20">
+        <nz-form-label [nzSpan]="6" nzRequired>仅自己可见</nz-form-label>
+        <nz-form-control [nzSpan]="18">
+          <nz-switch formControlName="ownVisible"></nz-switch>
+        </nz-form-control>
+      </nz-form-item>
+
+      <nz-form-item>
+        <nz-form-label [nzSpan]="6">图标地址</nz-form-label>
+        <nz-form-control [nzSpan]="18">
          <nz-input-group [nzPrefix]="prefixIcon">
            <input formControlName="icon" nz-input placeholder="https://example.com/favicon.png" />
          </nz-input-group>

--- a/src/view/admin/index.component.ts
+++ b/src/view/admin/index.component.ts
@@ -59,6 +59,7 @@ export default class WebpComponent {
    this.validateForm = this.fb.group({
      title: ['', [Validators.required]],
      icon: [''],
+      ownVisible: [false],
    })
  }

@@ -295,7 +296,7 @@ export default class WebpComponent {
    this.modal.info({
      nzTitle: '同步数据到远端',
      nzOkText: '确定同步',
-      nzContent: '确定将所有数据同步到远端吗？这可能需要消耗一定的时间。',
+      nzContent: '确定将所有数据同步到远端吗？',
      nzOnOk: () => {
        this.syncLoading = true

@@ -328,7 +329,7 @@ export default class WebpComponent {
      this.validateForm.controls[i].updateValueAndValidity()
    }

-    let { title, icon } = this.validateForm.value
+    let { title, icon, ownVisible } = this.validateForm.value

    if (!title) return

@@ -338,6 +339,7 @@ export default class WebpComponent {
        case 0: {
          this.websiteList[this.editIdx].title = title
          this.websiteList[this.editIdx].icon = icon
+          this.websiteList[this.editIdx].ownVisible = ownVisible
        }
          break
  
@@ -345,6 +347,7 @@ export default class WebpComponent {
        case 1: {
          this.twoTableData[this.editIdx].title = title
          this.twoTableData[this.editIdx].icon = icon
+          this.twoTableData[this.editIdx].ownVisible = ownVisible
        }
          break
  
@@ -352,6 +355,7 @@ export default class WebpComponent {
        case 2: {
          this.threeTableData[this.editIdx].title = title
          this.threeTableData[this.editIdx].icon = icon
+          this.threeTableData[this.editIdx].ownVisible = ownVisible
        }
          break
      }
@@ -370,6 +374,7 @@ export default class WebpComponent {
            createdAt,
            title,
            icon,
+            ownVisible,
            nav: []
          })
        }
@@ -386,6 +391,7 @@ export default class WebpComponent {
            createdAt,
            title,
            icon,
+            ownVisible,
            nav: []
          })
        }
@@ -402,6 +408,7 @@ export default class WebpComponent {
            createdAt,
            title,
            icon,
+            ownVisible,
            nav: []
          })
        }

--- a/src/view/index/light/index.component.html
+++ b/src/view/index/light/index.component.html
@@ -13,6 +13,7 @@
        (click)="handleCilckTopNav(i)" 
        [class.active]="page === i" 
        [class.dark-text-active]="page === i" 
+        [class.remove]="!isLogin && item.ownVisible"
        class="ripple-btn dark-text"
      >
        {{ item.title }}
@@ -28,6 +29,7 @@
            [class.dark-item-active]="id === i" 
            (click)="handleSidebarNav(i)"
            *ngFor="let item of websiteList[page].nav; index as i" 
+            [class.remove]="!isLogin && item.ownVisible"
          >
            <div class="ripple-btn">{{ item.title }}</div>
          </li>
@@ -38,7 +40,7 @@
        <app-search-engine></app-search-engine>
 
        <div *ngIf="currentList.length > 0; else noData">
-          <div *ngFor="let item of currentList; index as i">
+          <div *ngFor="let item of currentList; index as i" [class.remove]="!isLogin && item.ownVisible">
            <app-toolbar-title
              [dataSource]="item"
              (onCollapse)="onCollapse(item, i)"
@@ -52,7 +54,13 @@
              [nzGutter]="[16, 16]"
              [style.display]="item.collapsed ? 'none' : ''"
            >
-              <div class="gutter-row" nz-col [nzSpan]="8" *ngFor="let el of item.nav">
+              <div
+                class="gutter-row"
+                nz-col
+                [nzSpan]="8"
+                *ngFor="let el of item.nav"
+                [class.remove]="!isLogin && el.ownVisible"
+              >
                <app-card [dataSource]="el"></app-card>
              </div>
            </div>

--- a/src/view/index/light/index.component.ts
+++ b/src/view/index/light/index.component.ts
@@ -10,7 +10,9 @@ import {
  queryString,
  setWebsiteList,
  toggleCollapseAll,
+  matchCurrentList
 } from '../../../utils'
+import { isLogin } from '../../../utils/user'
 import { initRipple, setAnnotate } from '../../../utils/ripple'
 import { websiteList } from '../../../store'

@@ -27,22 +29,11 @@ export default class LightComponent {
  currentList: INavThreeProp[] = []
  id: number = 0
  page: number = 0
+  isLogin = isLogin

  ngOnInit() {
    randomBgImg()

-    const initList = () => {
-      try {
-        if (this.websiteList[this.page] && this.websiteList[this.page]?.nav?.length > 0) {
-          this.currentList = this.websiteList[this.page].nav[this.id].nav
-        } else {
-          this.currentList = []
-        }
-      } catch (error) {
-        this.currentList = []
-      }
-    }
-
    this.activatedRoute.queryParams.subscribe(() => {
      const tempPage = this.page
      const { id, page, q } = queryString()
@@ -52,7 +43,7 @@ export default class LightComponent {
      if (q) {
        this.currentList = fuzzySearch(this.websiteList, q)
      } else {
-        initList()
+        this.currentList = matchCurrentList()
      }

      if (tempPage !== page) {

--- a/src/view/index/side/index.component.html
+++ b/src/view/index/side/index.component.html
@@ -11,11 +11,14 @@
          [(nzOpen)]="pageIdx === openIndex"
          [nzTitle]="item.title"
          *ngFor="let item of websiteList; index as pageIdx;"
+          [class.remove]="!isLogin && item.ownVisible"
          (nzOpenChange)="openIndex = pageIdx"
        >
          <ul>
            <li
-              nz-menu-item *ngFor="let el of item.nav; let idIdx = index;"
+              nz-menu-item
+              *ngFor="let el of item.nav; let idIdx = index;"
+              [class.remove]="!isLogin && item.ownVisible"
              [nzSelected]="page === pageIdx && id === idIdx"
              (click)="handleSidebarNav(pageIdx, idIdx)" 
            >
@@ -60,6 +63,7 @@
                  <div
                    *ngFor="let el of item.nav"
                    class="gutter-row"
+                    [class.remove]="!isLogin && el.ownVisible"
                    nz-col
                    [nzSpan]="6"
                    [nzXs]="24"

--- a/src/view/index/side/index.component.ts
+++ b/src/view/index/side/index.component.ts
@@ -10,7 +10,9 @@ import {
  queryString,
  setWebsiteList,
  toggleCollapseAll,
+  matchCurrentList
 } from '../../../utils'
+import { isLogin } from '../../../utils/user'
 import { websiteList } from '../../../store'
 import { LOGO_CDN } from '../../../constants'
 import * as s from '../../../../data/search.json'
@@ -34,22 +36,11 @@ export default class SideComponent {
  searchEngineList = searchEngineList
  marginTop: number = searchEngineList.length > 0 ? 157 : 50
  isFirst = false
+  isLogin = isLogin

  constructor (private router: Router, private activatedRoute: ActivatedRoute) {}

  ngOnInit() {
-    const initList = () => {
-      try {
-        if (this.websiteList[this.page] && this.websiteList[this.page]?.nav?.length > 0) {
-          this.currentList = this.websiteList[this.page].nav[this.id].nav
-        } else {
-          this.currentList = []
-        }
-      } catch (error) {
-        this.currentList = []
-      }
-    }
-
    this.activatedRoute.queryParams.subscribe(() => {
      const { id, page, q } = queryString()
      this.page = page
@@ -58,7 +49,7 @@ export default class SideComponent {
      if (q) {
        this.currentList = fuzzySearch(this.websiteList, q)
      } else {
-        initList()
+        this.currentList = matchCurrentList()
      }

      setWebsiteList(this.websiteList)

--- a/src/view/index/sim/index.component.html
+++ b/src/view/index/sim/index.component.html
@@ -10,6 +10,7 @@
      *ngFor="let item of websiteList; let i = index;" 
      [class.active]="page === i" 
      [class.dark-text-active]="page === i" 
+      [class.remove]="!isLogin && item.ownVisible"
      class="ripple-btn dark-text"
      (click)="handleCilckTopNav(i)" 
    >
@@ -25,6 +26,7 @@
          (click)="handleSidebarNav(i)" 
          [class.active]="id === i" 
          [class.dark-item-active]="id === i" 
+          [class.remove]="!isLogin && item.ownVisible"
          class="ripple-btn dark-text"
        >
          {{ item.title }}
@@ -39,7 +41,13 @@
            <app-toolbar-title [dataSource]="item" (onCollapse)="onCollapse(item, i)" [index]="i"></app-toolbar-title>
  
            <div nz-row [nzGutter]="[16, 16]" [style.display]="item.collapsed ? 'none' : ''">
-              <div class="gutter-row" nz-col [nzSpan]="8" *ngFor="let el of item.nav; let idx=index">
+              <div
+                class="gutter-row"
+                nz-col
+                [nzSpan]="8"
+                *ngFor="let el of item.nav; let idx=index"
+                [class.remove]="!isLogin && el.ownVisible"
+              >
                <app-card [dataSource]="el"></app-card>
              </div>
            </div>

--- a/src/view/index/sim/index.component.ts
+++ b/src/view/index/sim/index.component.ts
@@ -10,7 +10,9 @@ import {
  setWebsiteList,
  toggleCollapseAll,
  totalWeb,
+  matchCurrentList
 } from '../../../utils'
+import { isLogin } from '../../../utils/user'
 import { initRipple, setAnnotate } from '../../../utils/ripple'
 import { websiteList } from '../../../store'

@@ -34,20 +36,9 @@ export default class SimComponent {
  title: string = title
  posterImageUrls?: string = simThemeConfig.posterImageUrls[0]
  description: string = simThemeConfig.description.replace('${total}', String(totalWeb()))
+  isLogin = isLogin

  ngOnInit() {
-    const initList = () => {
-      try {
-        if (this.websiteList[this.page] && this.websiteList[this.page]?.nav?.length > 0) {
-          this.currentList = this.websiteList[this.page].nav[this.id].nav
-        } else {
-          this.currentList = []
-        }
-      } catch (error) {
-        this.currentList = []
-      }
-    }
-
    this.activatedRoute.queryParams.subscribe(() => {
      const tempPage = this.page
      const { id, page, q } = queryString()
@@ -57,7 +48,7 @@ export default class SimComponent {
      if (q) {
        this.currentList = fuzzySearch(this.websiteList, q)
      } else {
-        initList()
+        this.currentList = matchCurrentList()
      }

      if (tempPage !== page) {