{"id":26958868,"url":"https://github.com/kylebing/diary","last_synced_at":"2025-04-03T04:33:53.766Z","repository":{"id":37710980,"uuid":"305941712","full_name":"KyleBing/diary","owner":"KyleBing","description":"《标题日记》web 纯文字日记应用，分类日记，共享日记 Headline Diary, web app, text only, summary of the day | Vue3 | PC \u0026 Mobile","archived":false,"fork":false,"pushed_at":"2023-12-19T11:12:16.000Z","size":3876,"stargazers_count":152,"open_issues_count":4,"forks_count":21,"subscribers_count":1,"default_branch":"master","last_synced_at":"2023-12-19T14:22:53.656Z","etag":null,"topics":["date-picker","diary","js","tool","vue","vue3","vuejs","vuex","web","webapp","website"],"latest_commit_sha":null,"homepage":"http://kylebing.cn/diary","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/KyleBing.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null},"funding":{"github":["KyleBing"],"patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"lfx_crowdfunding":null,"custom":["kylebing.cn"]}},"created_at":"2020-10-21T07:23:47.000Z","updated_at":"2023-12-20T15:58:03.782Z","dependencies_parsed_at":"2023-12-20T16:11:13.386Z","dependency_job_id":null,"html_url":"https://github.com/KyleBing/diary","commit_stats":null,"previous_names":[],"tags_count":32,"template":null,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KyleBing%2Fdiary","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KyleBing%2Fdiary/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KyleBing%2Fdiary/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KyleBing%2Fdiary/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/KyleBing","download_url":"https://codeload.github.com/KyleBing/diary/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246939195,"owners_count":20857916,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["date-picker","diary","js","tool","vue","vue3","vuejs","vuex","web","webapp","website"],"created_at":"2025-04-03T04:32:29.704Z","updated_at":"2025-04-03T04:33:53.761Z","avatar_url":"https://github.com/KyleBing.png","language":"Vue","readme":"\u003cimg width=\"120px\" src=\"https://user-images.githubusercontent.com/12215982/225367174-f967aa05-5f35-474e-8ae2-0ea0619bd5d8.svg\"/\u003e\n\n# 标题日记\n\n一个纯文本 web 日记应用，专注记录生活琐事。\n\n\n\u003e 线上地址  \n\u003e [http://kylebing.cn/diary](http://kylebing.cn/diary)  \n\n\n\n\n## 一、界面\n\n\u003cimg width=\"2032\" alt=\"list-diary\" src=\"https://github.com/user-attachments/assets/4c3efa8f-322c-41ae-bb0d-0b20c6143bea\"\u003e\n\n\n## 二、日记的使用\n\n### 1. 推荐使用方式\n\n**标题**：20字以内，概括  \n**内容**：如果你还有许多想记的\n\n记录一天里你感觉值得记录的事，生活、学习、工作、运动 等等方面。\n\n当你用它记录了足够多小事的时候，就知道这个日记该怎么用了。  \n就是记下你一天的重要时刻，怕忘的内容，日后好查找。\n\n### 2. 主要特性\n\n- 以文本为主\n- 支持 Markdown **不提供图片存储服务，图床自行解决**\n- 记录天气、环境温度（需要资料里提前设置好地址）\n- 关键字搜索 标题、内容\n- 日期、类别筛选日记\n- 分享某篇日记  \n  \u003e 比如当前这篇日记的分享链接是：  \n  \u003e [http://kylebing.cn/diary/#/share/6766](http://kylebing.cn/diary/#/share/6766)\n- 自动跟随系统切换 `明亮` `暗黑` 两种显示样式\n- 日记统计：类别统计、账单统计、温湿度变化曲线\n- 日记完整导出，多种格式： `json`, `txt`, `json`, `csv`\n- 账单（需要指定格式书写）\n  - 选择 `账单` 类别\n  - 标题无所谓\n  - 内容区为账单条目\n  - 格式为\n    ```bash\n    条目[空格][+-]花费\n    # 如\n    早餐 -3\n    午餐 -45\n    生活-电费 -100\n    话费 -100\n    ```\n    \u003e 我一般每周整理一次账单  \n    为了方便整理，建议你统一支付出口，只用一个作为主要支付手段：支付宝、微信，这样在统计的时候好统计，不然还需要去多个地方统计。\n\n### 3. 适配电脑、手机\n\n通过浏览器访问，电脑、移动端 都能完美显示。\n\n### 4. 文本编辑时支持 `JetBrains` 相关快捷键\n\n\n| 快捷键                               | 功能                                 |\n|-----------------------------------|------------------------------------|\n| \u003ckbd\u003eCTRL\u003c/kbd\u003e+ \u003ckbd\u003eD \u003c/kbd\u003e    | 复制当前行。                             |\n| \u003ckbd\u003eTab\u003c/kbd\u003e                    | 在前面插入 4 个空格。                       |\n| \u003ckbd\u003eShift\u003c/kbd\u003e + \u003ckbd\u003eTab\u003c/kbd\u003e | 删除行前的空格，多于4个，一次性删除4个，小于四个，清除前面的空格。 |\n| \u003ckbd\u003eCTRL\u003c/kbd\u003e+ \u003ckbd\u003e← \u003c/kbd\u003e    | 移动到行最左端                            |\n| \u003ckbd\u003eCTRL\u003c/kbd\u003e+ \u003ckbd\u003e→ \u003c/kbd\u003e    | 移动到行最右端                            |\n\n\n\n\n## 三、项目历程\n\n1. 2017 年的时候学 iOS 顺便做了个不太成熟的 iOS 版 app，当时日记是存储在 `iCloud` 中，有了 app 的界面样子，但并不能很完美的使用。\n2. 后来到 2019 年的时候感觉自己前端技术差不多了，就想以前端的方式实现它，最初用的是 `HTML` + `jQuery`。\n3. 之后对 `Vue` 了解的足够多之后，就改成了 `HTML` + `Vue`。最初只有移动端的，添加了 PC 版界面。\n4. 再后来就大改了，改成了纯 `Vue` 模式，此时的 PC 版和移动端还是在两个分支上。\n5. 又过了好久，总算把移动端和 PC 两个版本融合到了一起。\n6. 2024年1月，改写成 `vite` + `ts` 版本\n\n\n## 四、项目周期\n\n`2017-09-27` ~ `现在`\n\n因为自己在用这个，也是自己最喜欢、使用频率最高的项目，所以只要我还健在，这个项目就会被一直维护下去。\n\n--- \n\n# 部署自己的日记系统\n\n## 一、部署自己的日记系统\n前后端完全开源，你可以部署一套自己的日记系统。\n\n该项目包含两个部分：\n\n- 前端：[https://github.com/KyleBing/diary-vue](https://github.com/KyleBing/diary-vue) `vue3`+`ts`+`vite`\n- 后台：[https://github.com/KyleBing/portal](https://github.com/KyleBing/portal) `nodejs`\n\u003e 具体的部署方式在各个项目中都有介绍\n\n\n**`http` `https` 不同部署环境对功能的影响**  \n- 编辑页面中，内容输入区在 \u003ckbd\u003ectrl\u003c/kbd\u003e + \u003ckbd\u003ex\u003c/kbd\u003e 的时候无法将内容放置到剪贴板上。\n- 整个程序在打开的时候无法以 `ServiceWorker` 的形式快速载入，只有完整的从服务器再次载入。\n- `ServiceWorker` 和  `navigator.clipboard` 只在环境是 `https` 或 `localhost` 的时候生效。\n\n\n## 二、邀请码系统\n\n新用户注册需要邀请码，邀请码分为两种：  \n- 一种是万能的，在后台系统的配置文件中配置\n- 一种是一次性的，一人一码\n\n1. 登入系统后，点开菜单，选择邀请码菜单（用户默认注册后的 `group_id` 为 `2`，只有用户 `group_id` 为 `1` 的用户才能看到，需要手动去数据库中指定管理员账户），可以生成新的邀请码，点击邀请码就可以复制内容，分享给别人就可以了。\n2. 邀请码页面中显示的是都是未注册的码，复制后邀请码变为绿色，表示已被分享还未使用。\n3. 已使用的将会隐藏，不再显示在列表中。\n\n\u003e 目前初始化的过程还不是很好，还是代码层面的，所以先手动修改数据吧\n\n\n## 三、项目配置\n\n### 1. 图片存储配置 `[选配]`\n\u003e 如若不配置：只是不能显示用户头像而已  \n头像文件是存储到 [七牛云](https://www.qiniu.com/) 上的，免费注册会有免费额度，够用。  \n需要修改 `/src/projectConfig.ts` 文件内容，改成你的七牛云配置。\n\n```js\nexport default {\n  // 七牛云\n  // 地址： https://portal.qiniu.com/kodo/overview\n  QiniuImgBaseURL: 'http://rnov15v13.hb-bkt.clouddn.com/', // 空间域名，最后面带 `/`\n  QiniuBucketName: 'diary-container', // 七牛云对象存储空间的名称\n}\n```\n\n### 2. 和风天气配置 `[选配]`\n\u003e 如若不配置：只是不能自动获取当地天气和温度而已  \n用于从 [和风天气](https://www.qweather.com/) 中获取地域的天气和温度信息，也是在 `/src/projectConfig.ts` 文件中\n\n```js\nexport default {\n  // 和风天气开发 key\n  // 地址：https://dev.qweather.com/\n  HefengWeatherKey: '',\n}\n```\n\n### 3. nginx gzip 配置\n部署前端项目时，最好在 `nginx` 中添加 `gzip` 开关，这样能有效加快项目载入速度，比如我的 1.3M 的 `js` 文件，在 `gzip` 处理后压缩到了 360kb。\n\u003e 可以参阅：[1.3mb js 文件压缩至 360kb，加快 vue 项目的加载速度，nginx gzip设置](https://blog.csdn.net/KimBing/article/details/127934749)\n```ini\ngzip on;\ngzip_static on;\ngzip_min_length 1k;\ngzip_http_version 1.1;\ngzip_comp_level 9;\ngzip_types  text/css application/javascript application/json;\n```\n\n## 四、开发说明\n\n所有配置信息都保存在 `LocalStorage` 中\n- `DiaryConfig`: 用户的配置信息（类别筛选，日期筛选，关键字）\n- `Authorization`: 用户信息（`avatar`,`city`,`email`,`geolocation`,`group_id`,`nickname`,`phone`,`token`,`uid`）\n\n## 五、用到的 npm 包\n\n- `vue3` + `ts` + `vite` \n  - `vue-router`\n  - `pinia`\n- `axios` \n- `clipboard` 剪贴板\n- `moment` 时间处理\n- `v-calendar`  日期选择\n- `marked` MarkDown 渲染\n- `echarts` 图表\n- `floating-vue` 悬窗\n- `qiniu-js` 七牛云相关文件\n- `js-base64` base64 处理\n\n\n---\n\n# 支持\n\n感谢 [JetBrains](https://www.jetbrains.com/?from=diary-vue@KyleBing) 提供的工具支持\n\n![JetBrains](https://resources.jetbrains.com/storage/products/company/brand/logos/jb_beam.svg?_ga=2.54620846.401568951.1648434626-301403838.1648434626)\n\n---\n\n# 界面截图 - 详细\n\n\u003cimg width=\"2032\" alt=\"login\" src=\"https://github.com/user-attachments/assets/234429c0-4d86-4969-ac8f-60013a1e970a\"\u003e\n\u003cimg width=\"2032\" alt=\"list-diary\" src=\"https://github.com/user-attachments/assets/4c3efa8f-322c-41ae-bb0d-0b20c6143bea\"\u003e\n\u003cimg width=\"2032\" alt=\"detail\" src=\"https://github.com/user-attachments/assets/e702f377-fd4f-4b15-ae88-17b9971b8bd3\"\u003e\n\u003cimg width=\"2032\" alt=\"todo-list\" src=\"https://github.com/user-attachments/assets/5064f46f-c0ee-4e80-bb50-b04d7a6c516a\"\u003e\n\u003cimg width=\"2032\" alt=\"diary-filter\" src=\"https://github.com/user-attachments/assets/52a64cf6-512f-4338-bd3f-de208652b996\"\u003e\n\u003cimg width=\"2032\" alt=\"bill\" src=\"https://github.com/user-attachments/assets/c1ba8b28-a201-422e-bcda-063aa506f852\"\u003e\n\u003cimg width=\"2032\" alt=\"bill-filter\" src=\"https://github.com/user-attachments/assets/3511c0aa-85e0-4df0-84ed-a0f8960ecc26\"\u003e\n\u003cimg width=\"2032\" alt=\"function\" src=\"https://github.com/user-attachments/assets/f315c3e8-5498-4cd4-afd1-1a6deb3910c8\"\u003e\n\u003cimg width=\"2032\" alt=\"statistic\" src=\"https://github.com/user-attachments/assets/3bb1e1e8-8d5b-4253-bd5c-29e33ca3b763\"\u003e\n","funding_links":["https://github.com/sponsors/KyleBing","kylebing.cn"],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkylebing%2Fdiary","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkylebing%2Fdiary","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkylebing%2Fdiary/lists"}