• Stars
    star
    256
  • Rank 159,274 (Top 4 %)
  • Language Vue
  • License
    GNU General Publi...
  • Created about 4 years ago
  • Updated 2 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

《标题日记》web 纯文本日记应用,PC+移动端。 Headline Diary, web app, text only, summary of the day vue3,ts,PC,Mobile

标题日记

一个纯文本的日记 web 应用,专注记录生活琐事。

http://kylebing.cn/diary
右下角,体验账号登录试用

界面

2023-08-31 11 27 29


一、日记的使用

1. 正确使用方式

用概括的标题列表来概览你的近期生活。
建议标题字数控制在 20 字以内,这样更方便从列表概览内容。

不要流水帐一样记录很多内容,每天记录一下当天比较重要的事,需要记录的点,比如:

  • 今天干嘛了?理发了?
  • 学习了什么?
  • 看了什么电影,感觉如何
  • 加油了#92 加了多少?油价多少?
  • 回老家了,几点回的家,油耗多少?
  • 等等。。。

其实我感觉最重要的功能就是搜索,搜索过去的某件事发生在什么时间:

  • 上次理发什么时候
  • 上次回老家什么时候
  • 6月12日我做了什么工作
  • 我这个月的支出/收入分别是多少

当你用它记录了足够多小事的时候,就知道这个日记该怎么用了。
就是记下你一天的重要时刻,你怕忘的内容,日后好查找。

2. 主要特性

  • 记录天气、环境温度。
  • 多个关键字搜索日记标题、内容。
  • 日期、类别筛选日记。
  • 分享某篇日记 比如当前这篇日记的分享链接是:http://kylebing.cn/diary/#/share/6766
  • 自动切换黑白两种样式。
  • 日记统计
  • 日记导出,多种格式: json, txt, json, csv
  • 账单(需要指定格式书写) 我一般每周整理一次账单,为了方便整理,建议你统一支付出口,只用一个作为主要支付手段:支付宝、微信,这样在统计的时候好统计,不然你还需要去多个地方统计。

3. 适配多端

有浏览器就能访问,电脑 + 移动端:都能完美显示

4. 文本编辑时支持 JetBrains 相关快捷键

快捷键 功能
CTRL+ D 复制当前行。
Tab 在前面插入 4 个空格。
Shift + Tab 删除行前的空格,多于4个,一次性删除4个,小于四个,清除前面的空格。
CTRL+ 移动到行最左端
CTRL+ 移动到行最右端

二、服务部署

该项目包含两个部分,具体的部署方式在各个项目中都有介绍:

部署环境对功能的影响
这里需要注意,ServiceWorkernavigator.clipboard 只在环境是 httpslocalhost 的时候生效。

影响的功能:

  • 编辑页面中,内容输入区在 ctrl + x 的时候无法将内容放置到剪贴板上。
  • 整个程序在打开的时候无法以 ServiceWorker 的形式快速载入,只有完整的从服务器再次载入。

三、邀请码的使用

新用户注册需要邀请码,邀请码有两种:

  • 一种是万能的,在后台系统的配置文件中配置;
  • 另外一种是一次性的,一人一码。
  1. 登入系统后,点开菜单,选择邀请码菜单(用户默认注册后的 group_id2,只有用户 group_id1 的用户才能看到,需要手动去数据库中指定管理员账户),可以生成新的邀请码,点击邀请码就可以复制内容,分享给别人就可以了。
  2. 邀请码页面中显示的是都是未注册的码,复制后邀请码变为绿色,表示已被分享还未使用。

目前初始化的过程还不是很好,所以先手动修改数据吧

四、项目配置

1. 图片存储配置 [选配]

如若不配置:只是不能显示用户头像而已
头像文件是存储到 七牛云 上的,免费注册会有免费额度,够用。
需要修改 /src/projectConfig.ts 文件内容,改成你的七牛云配置。

export default {
  // 七牛云
  // 地址: https://portal.qiniu.com/kodo/overview
  QiniuImgBaseURL: 'http://rnov15v13.hb-bkt.clouddn.com/', // 空间域名,最后面带 `/`
  QiniuBucketName: 'diary-container', // 七牛云对象存储空间的名称
}

2. 和风天气配置 [选配]

如若不配置:只是不能自动获取当地天气和温度而已
用于从 和风天气 中获取地域的天气和温度信息,也是在 /src/projectConfig.ts 文件中

export default {
  // 和风天气开发 key
  // 地址:https://dev.qweather.com/
  HefengWeatherKey: '',
}

3. nginx gzip 配置

部署前端项目时,最好在 nginx 中添加 gzip 开关,这样能有效加快项目载入速度,比如我的 1.3M 的 js 文件,在 gzip 处理后压缩到了 360kb。

可以参阅:1.3mb js 文件压缩至 360kb,加快 vue 项目的加载速度,nginx gzip设置

gzip on;
gzip_static on;
gzip_min_length 1k;
gzip_http_version 1.1;
gzip_comp_level 9;
gzip_types  text/css application/javascript application/json;

五、开发说明

配置存储:
所有配置信息都保存在 LocalStorage

  • DiaryConfig: 用户的配置信息(类别筛选,日期筛选,关键字)
  • Authorization: 用户信息(avatar,city,email,geolocation,group_id,nickname,phone,token,uid

六、用到的 npm 包

  • vue3 + ts + vite
  • vue-router
  • pinia
  • axios
  • clipboard
  • moment
  • @vuepic/vue-datepicker
  • marked
  • echarts
  • floating-vue
  • qiniu-js

七、项目历程

  1. 2017 年的时候想学 iOS 了顺便做了个不太成熟的 iOS 版 app,当时日记是存储在 iCloud 中的,有了 app 的界面样子,但并不能很完美的使用。
  2. 后来过了很久,到 2019 年的时候感觉自己前端技术差不多了,就想把它实现了,最初使用的是 HTML + jQuery
  3. 后来对 Vue 了解的足够多之后,就改成了 HTML + Vue。最初只有移动端的,添加了 PC 版界面。
  4. 再后来就大改了,改成了纯 Vue 模式,此时的 PC 版和移动端还是在两个分支上的。
  5. 又过了好久,移动端和 PC 两个版本整合到一起。
  6. 2024年1月,改写成 vite + ts 版本

八、项目周期

2017-09-27 ~ 现在

因为自己在用这个,也是自己最喜欢、使用频率最高的项目,所以只要我还健在,这个项目就会被一直维护下去。

九、支持

感谢 JetBrains 提供的工具支持

JetBrains

十、界面截图 - 详细

PC 2023-08-31 11 25 31 2023-08-31 11 24 39 2023-08-31 11 23 48

登录
登录

编辑页面
编辑页面

日记详情
日记详情

统计
统计

银行卡列表
银行卡列表

共享日记
共享日记

资料编辑
资料编辑

一键隐藏所有内容
一键隐藏所有内容

账单
账单

类别筛选
类别筛选

菜单
菜单

iPad Pro 截图

主页

移动端

More Repositories

1

rime-wubi86-jidian

86五笔极点码表 for 鼠须管(macOS)、小狼毫(Windows)、中州韵(Ubuntu) 、仓(iOS)、同文(Android)五笔输入方案,五笔输入法,Rime 方案。Chinese wubi input method schema
Lua
1,088
star
2

english-vocabulary

英文单词,英语单词,英语四六级、考研、SAT单词,txt 文件, json 文件,CET4 CET6,乱序,单词
467
star
3

typepad

玫枫跟打器:五笔跟打器(网页版)
JavaScript
217
star
4

wubi-dict-editor

五笔码表助手 for Rime ( Windows、macOS、Ubuntu ) 基于 electron 开发
JavaScript
210
star
5

map

路书,路线规划,高德地图 api 示例,地图信息 vue3 ts vite
Vue
78
star
6

sslist

优化访问速度的小型 gfw (Great Fire Wall) 规则列表 gfwlist
68
star
7

iphone

iPhone 所有机型参数大全
JavaScript
61
star
8

ipad

iPad 所有机型参数大全
JavaScript
45
star
9

animate-heart-canvas

animated heart canvas
JavaScript
33
star
10

demo-map-loca

高德地图 Loca 和 路线规划 vue 演示项目
Vue
31
star
11

diary-portal

《标题日记》 - 后台 nodejs
JavaScript
31
star
12

TouchbarBBT

美化 Macbook Pro Touch Bar
28
star
13

animate-clock-canvas

Analog clock, js, canvas 模拟时钟页面
JavaScript
26
star
14

apple-chip

苹果处理器 参数大全
JavaScript
21
star
15

wubi-jidan-dict

极点五笔码表集合
18
star
16

WubiBuddy

《码表助手》鼠须管五笔用户词添加工具 (macOS)
Swift
17
star
17

apple-watch

Apple 所有 Apple Watch 参数大全
JavaScript
17
star
18

blackberry-keyboard

BlackBerry Keyboard Layout,9900、Q10、Q20
Vue
14
star
19

animate-canvas-bg

a animated canvas bg, with lot of blocks
JavaScript
11
star
20

portal

《标题日记》 - 后台 nodejs 版,包含所有个人项目的后台
JavaScript
8
star
21

canvas-my-hole-life

人生日历,我的整个人生
JavaScript
5
star
22

animate-canvas-lost

发呆界面 LOST
JavaScript
5
star
23

v2ex-css-kylebing

v2ex 野鸡主题
HTML
4
star
24

bandwagon-panel

方便展示 Bandwagon Host (搬瓦工) 主机信息的工具
PHP
4
star
25

onion-theme-wireframe

A theme for MiyooMiniPlus's Onion OS
4
star
26

wubi-dict-editor-web

五笔码表助手 web 版,五笔工具
JavaScript
4
star
27

canvas-mine

JavaScript
3
star
28

rtsp-player-chrome

play rtsp stream in chrome browser
HTML
3
star
29

voila

装逼页面,科幻 science,黑客 hacker,高级 top,电影 film,未来 future
Vue
3
star
30

iosDemo

Test all of iOS components, UIView, UITableView, UIPickerView, UIScrollView, UserNotification etc.
Swift
2
star
31

airpods

AirPods 参数大全
JavaScript
2
star
32

show-keyname

show keyboard key name
SCSS
2
star
33

electron-demo

electron-demo
JavaScript
1
star
34

onion-theme-cosy

A theme for MiyooMiniPlus's Onion OS
1
star
35

string-manipulation

String manipulation tool for HBuilder IDE
JavaScript
1
star
36

waterfall

jQuery WatherFall effect
JavaScript
1
star
37

calculator-skin

a simple calculator with history
Vue
1
star
38

tamper-monkey-js

一些自己用的 js 工具(for 插件 Tamper Monkey JS )
JavaScript
1
star
39

province-json-for-element

省市区地区数据源:for Element's Cascader 级联选择器
1
star
40

chinese-name-creator

一个起名的工具,自动生成名字
SCSS
1
star
41

clock

网页全屏时钟,数字时钟,digital clock
JavaScript
1
star
42

v2ex-image

1
star