Code Monkey home page Code Monkey logo

littletext's Introduction

icon宫格记事本

平时在做东西的时候可能会开很多记事本,临时记一些东西。不止开一个,可能会开很多个记事本窗口。

这个项目做成了六宫格,并放在浏览器里存储,好处是实时保存。窗口方便管理,不乱。

b站链接:https://www.bilibili.com/video/BV1Hx4y1Z7ud

用途

  1. 临时记录东西
  2. 做一些简单的小计划
  3. 捋捋思路,记录思维、思考,把不同类型的事情写在不同的格子里

使用

直接打开链接就可以使用,无需下载。当然下载也可以,直接双击 index.html 用浏览器打开就可以运行。

注意:不同的浏览器使用的存储不一样。用上面的体验地址打开和用本地直接打开存储的位置也不一样。因为此项目的存储是依据浏览器的 localStorage 来存储的。

注意

该项目可能随时更新!更新导致自动部署,目前不太稳定,先不要写太重要的信息。

特色功能

隐私保护锁:这里可以写思维的草稿,思维是一个人相当隐私的部分,因此该项目设计了一个隐私保护锁的功能。目的是防止上厕所或者临时离开电脑,其他人路过,来乱看你写的东西。

  • 当超过60秒不动鼠标或键盘时,会自动进入隐私保护状态。
  • 在隐私保护状态下,只显示一个default面板,其他面板都被隐藏了
  • ctrl+Q 解锁,退出隐私保护状态。
  • 可以在设置中是否开启这个功能。开启后左上角会有一个60秒进度条。进度条满就会进入保护状态。

部署

为了方便部署,直接使用githubPages进行了部署,省去了服务器过期的顾虑。

体验地址:

https://littlefean.github.io/LittleText/

项目架构

js 文件夹下,分成四层架构

  1. 组件层:components
  2. 业务层:service
  3. 子系统层:systems
  4. 工具底层:tools

key-value存储结构

// 存放所有的面板 其作用仅仅像一个索引表一样。
`panelList`: "['default', '面板1', '计划']"

// 增加更详细的信息
`${name}-data`: `{
    width: 2,
    height: 3,
    createTime: 177756447.5456,
}`

// name为面板,i为从上往下从左往右第几个宫格
// i 是从0开始的
// [0][1][2]
// [3][4][5]
`${name}-text-${i}`: "xxxx"

`GLOBAL_DATA`: `{
  lock: false, // 隐私保护功能是否开启
}`

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.