docs: 完善

choukin · Jan 2, 2024 · 3e99689 · 3e99689
1 parent 720c42d
commit 3e99689
Show file tree

Hide file tree

Showing 19 changed files with 197 additions and 44 deletions.
diff --git a/docs/guide/chrome/Readme.md b/docs/guide/chrome/Readme.md
@@ -0,0 +1,10 @@
+# chrome 插件
+
+## 插件组成
+
+- background scripts 后台脚本
+- content scripts 内容脚本
+- options page 选项页面
+- UI elements UI 元素
+- 各种逻辑文件
+- manifest.json
diff --git a/docs/guide/chrome/demo1/background.js b/docs/guide/chrome/demo1/background.js
@@ -0,0 +1,8 @@
+let color = '#3aa757';
+
+chrome.runtime.onInstalled.addListener(() => {
+  chrome.storage.sync.set({ color });
+  console.log("🚀 ~ file: background.js:5 ~ chrome.runtime.onInstalled.addListener ~ color:", color)
+
+  console.log('Default background color set to %cgreen', `color: ${color}`);
+})
diff --git a/docs/guide/chrome/demo1/button.css b/docs/guide/chrome/demo1/button.css
@@ -0,0 +1,12 @@
+button{
+  height:30px;
+  width:30px;
+  outline:none;
+  margin:10px;
+  border:none;
+  border-radius:2px;
+}
+buton.current{
+  box-shadow:0 0 0 2px white,
+             0 0 0 4px black;
+}
diff --git a/docs/guide/chrome/demo1/icons/128.png b/docs/guide/chrome/demo1/icons/128.png
diff --git a/docs/guide/chrome/demo1/icons/32.png b/docs/guide/chrome/demo1/icons/32.png
diff --git a/docs/guide/chrome/demo1/icons/512.png b/docs/guide/chrome/demo1/icons/512.png
diff --git a/docs/guide/chrome/demo1/icons/72.png b/docs/guide/chrome/demo1/icons/72.png
diff --git a/docs/guide/chrome/demo1/icons2/128.png b/docs/guide/chrome/demo1/icons2/128.png
diff --git a/docs/guide/chrome/demo1/icons2/16.png b/docs/guide/chrome/demo1/icons2/16.png
diff --git a/docs/guide/chrome/demo1/icons2/19.png b/docs/guide/chrome/demo1/icons2/19.png
diff --git a/docs/guide/chrome/demo1/icons2/48.png b/docs/guide/chrome/demo1/icons2/48.png
diff --git a/docs/guide/chrome/demo1/manifest.json b/docs/guide/chrome/demo1/manifest.json
@@ -0,0 +1,25 @@
+{
+  "name": "Demo1",
+  "description": "A simple demo cion",
+  "version": "1.0",
+  "manifest_version": 3,
+  "background": {
+    "service_worker": "background.js"
+  },
+  "permissions": [
+    "storage",
+    "activeTab",
+    "scripting"
+  ],
+  "action": {
+    "default_popup": "popup.html",
+    "default_icon": {
+      "32": "icons/32.png"
+    }
+  },
+  "options_page": "options.html",
+  "icons": {
+    "32": "icons/32.png",
+    "512": "icons/512.png"
+  }
+}
diff --git a/docs/guide/chrome/demo1/options.html b/docs/guide/chrome/demo1/options.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Document</title>
+</head>
+<body>
+  <div id=""buttonDiv""></div>
+  <div>
+    <p>选择一个不同的背景颜色</p>
+  </div>
+</body>
+<script src="options.js"></script>
+</html>
diff --git a/docs/guide/chrome/demo1/options.js b/docs/guide/chrome/demo1/options.js
@@ -0,0 +1,14 @@
+let page = document.getElementById('buttonDiv')
+let selectedClassName = 'current'
+const presetButtonColors = ["#3aa757", "#e8453c", "#f9bb2d", "#4688f1"]
+
+
+function handleButtonClick(event) {
+  let current = event.target.parentElement.querySelector(`.${selectedClassName}`)
+  if (current && current !== event.target) {
+    current.classList.remove(selectedClassName)
+  }
+  let color = event.target.dataset.color
+  event.target.classList.add(selectedClassName);
+  chrome.storage.sync.set({ color })
+}
diff --git a/docs/guide/chrome/demo1/popup.html b/docs/guide/chrome/demo1/popup.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" href="button.css">
+  <title>Document</title>
+</head>
+<body>
+  <button id="changeColor"></button>
+  <script src="popup.js"></script>
+</body>
+</html>
diff --git a/docs/guide/chrome/demo1/popup.js b/docs/guide/chrome/demo1/popup.js
@@ -0,0 +1,32 @@
+
+let changeColor = document.getElementById('changeColor')
+
+// chrome.storage.sync.get('color', ({ color }) => {
+//   changeColor.style.backgroundColor = color
+
+// })
+
+
+
+// let changeColor = document.getElementById('changeColor')
+changeColor.addEventListener('click', async () => {
+  let [tab] = await chrome.tabs.query({ active: true, currentWindow: true })
+
+  chrome.scripting.executeScript({
+    target: { tabId: tab.id },
+    function: setPageBackgroundColor
+  })
+})
+
+function setPageBackgroundColor() {
+  chrome.storage.sync.get('color', ({ color }) => {
+    debugger
+    document.body.style.backgroundColor = color
+  })
+}
+
+
+// chrome.storage.sync.get('color', ({ color }) => {
+//   changeColor.style.backgroundColor = color
+
+// })
diff --git a/docs/guide/main.md b/docs/guide/main.md
@@ -10,9 +10,6 @@
 这是默认主题内置的 `<Badge />` 组件 <Badge text="演示" />
 [[toc]] -->
 
-
-
-
 ## TODO
 
 - [ ] 学习 sass
@@ -37,16 +34,18 @@
 - [] [头像生成1](https://kfs479.smartapps.cn/pages/blogdetail/blogdetail?id=3311880&_swebfr=1&_swebFromHost=baiduboxapp)
      [头像生成2](https://www.cnblogs.com/blueVictory/p/15457894.html)
       [github头像生成3](https://github.com/YMAndroid/photoDemo)
-- [x] [chrome调试](https://blog.openreplay.com/
+- [x] [chrome调试](https://blog.openreplay.com/)
 - [] [](https://blog.openreplay.com/15-devtool-secrets-for-javascript-developers)
-how-to-use-chrome-as-a-code-editor-and-debugger)      
+how-to-use-chrome-as-a-code-editor-and-debugger)  
+
+- [] [gasp](https://blog.csdn.net/changbb/article/details/131675810)
 
 - [] [emmet](https://docs.emmet.io/actions/expand-abbreviation/)
 - [] [ssh 登陆android](https://www.jianshu.com/p/c65773acce48)
 - [] [android作为服务器](https://lbrito1.github.io/blog/2020/02/repurposing-android.html)
 - [] [temir VUE开发命令行工具](https://github.com/webfansplz/temir/blob/main/README.zh-CN.md)
 - [] [神经网络](https://tensorflow.google.cn/js/tutorials?hl=zh-cn)
-- [][nestjs](https://docs.nestjs.cn/9/introduction)
+- [] [nestjs](https://docs.nestjs.cn/9/introduction)
 - [] [knexjs](https://knexjs.org/)
 - [] [Koa RESTfual API 实战](https://www.bookstack.cn/read/koa-todo-api/%E6%90%AD%E5%BB%BA%E9%A1%B9%E7%9B%AE%E5%BC%80%E5%8F%91%E7%8E%AF%E5%A2%83.md)
 - [] [jest](https://jestjs.io/zh-Hans/)
@@ -282,30 +281,27 @@ var htmlSTring =
 
 http://[fe80::461c:a8ff:fe2a:accf%2]:3911/1ed680d5-6138-4608-a269-8840850a96f9
 
-
-
 ## 项目模版
 
 - [vue3 + setup + ts， vw + rem等来搭建的移动端项目](https://github.com/cll123456/template-varlet-v3-ts)
 
 - [vue3 企业端项目](https://vvbin.cn/doc-next/)
 
-
-
 ## 免费的软件
 
 ### 桌面软件
 
 ### 加速工具
 
 - [Steam](https://steampp.net/)
-    
+
 #### 办公
+
 - [WPS](https://www.wps.cn/) office的替代品
 - [snipaste](https://www.snipaste.com/)截图工具
-- 
 
 #### 开发
+
 - [git](https://git-scm.com/)
 - [Visual Studio Code](https://code.visualstudio.com/)
   - 插件
@@ -321,28 +317,20 @@ http://[fe80::461c:a8ff:fe2a:accf%2]:3911/1ed680d5-6138-4608-a269-8840850a96f9
     - Prettier - code Formatter
     - auto Import
     - indent-rainbow
-    - open in browser 
+    - open in browser
     - code Runner
     - 生成的代码 codeium.com
 
 - [PostMan](https://www.postman.com/)
 
 - [oh my zsh](https://ohmyz.sh/)
-- [asdf](https://asdf-vm.com/) 
+- [asdf](https://asdf-vm.com/)
 - [iTerm2](https://iterm2.com/)
 
 - [https://dber.tech/] 开源免费的设计数据库的web应用，可以导出sql
 
-
-
-
-
 ### 数据库
-#### 图形化界面
-- [DBeaver](https://dbeaver.io/)
-
-
-
-
 
+#### 图形化界面
 
+- [DBeaver](https://dbeaver.io/)
diff --git a/docs/guide/tools.md b/docs/guide/tools.md
@@ -1,32 +1,30 @@
 # 工具集🔧
 
-
 - [学习单词的好工具](https://qwerty.cooleryue.cn/gallery)
 
-
 ## 图片相关
-  - [图片美化](https://devtool.tech/image-share)
-  - [SVG 图片库](https://svgsilh.com/)
-  - [像素图片](https://dotown.maeda-design-room.net/)
-  - [Tinypng 压缩图片](https://tinypng.com/)
-  - [智图 压缩](https://zhitu.isux.us/)
-  - [up up to you 生产举牌小人图片](http://upuptoyou.com/)
-  - [生成文字云图片](https://wordart.com/create)
-  - [网页编辑图片工具](https://nhnent.github.io/tui.image-editor/latest/)
-  - [免费商用的插画](https://illlustrations.co/)
-  - [1000多个 svg icons](https://iconoir.com/)
-  - [自动扣图](https://bgsub.cn/webapp/)
 
+- [图片美化](https://devtool.tech/image-share)
+- [SVG 图片库](https://svgsilh.com/)
+- [像素图片](https://dotown.maeda-design-room.net/)
+- [Tinypng 压缩图片](https://tinypng.com/)
+- [智图 压缩](https://zhitu.isux.us/)
+- [up up to you 生产举牌小人图片](http://upuptoyou.com/)
+- [生成文字云图片](https://wordart.com/create)
+- [网页编辑图片工具](https://nhnent.github.io/tui.image-editor/latest/)
+- [免费商用的插画](https://illlustrations.co/)
+- [1000多个 svg icons](https://iconoir.com/)
+- [自动扣图](https://bgsub.cn/webapp/)
+- [文字描述生成图片](https://drawing-prompt.com/en#generate-image)
 
 ## js/css
-  - [显示浏览器可以收集的所有用户设备信息](https://www.deviceinfo.me/)
-  - [正则表达式可视化编辑器](https://github.com/Bowen7/regex-vis)
-    -  [网站](https://regex-vis.com/)
-  - [BPMN, DMN and Forms.](https://bpmn.io/)
-
 
+- [显示浏览器可以收集的所有用户设备信息](https://www.deviceinfo.me/)
+- [正则表达式可视化编辑器](https://github.com/Bowen7/regex-vis)
+- [网站](https://regex-vis.com/)
+- [BPMN, DMN and Forms.](https://bpmn.io/)
 
-  ## 博客
+## 博客
 
 - [美团技术团队](https://tech.meituan.com/)
 - [朱嘉伟](http://buzhundong.com/)
@@ -37,10 +35,12 @@
 - [前端工程化三十八讲](https://q.shanyue.tech/engineering/)
 - [博客推荐](https://liujiacai.net/podcast/)
 
-
 ## 软件
+
 - [打造一个高效的开发终端](https://zhuanlan.zhihu.com/p/438124776)
 - [asdf](http://asdf-vm.com/zh-hans/)
   管理多个运行环境版本的简单命令行工具
 
 - [bilibili视频下载工具](https://github.com/sansui-orz/bilibili2local)
+
+- [打字的方式记单次](https://dazi.kedaoi.cn/)
diff --git a/docs/nestjs/index.md b/docs/nestjs/index.md
@@ -0,0 +1,36 @@
+# nestjs cli
+
+## 安装
+
+```bash
+npm install -g @nestjs/cli
+```
+
+## 创建项目
+
+```bash
+nest new myapp
+```
+
+### 项目 src 目录
+
+```sh
+.
+├── app.controller.spec.ts
+├── app.controller.ts
+├── app.module.ts
+├── app.service.ts
+└── main.ts
+```
+
+1、`main.ts` 入口文件主文件，类似 vue 的 main.ts. 通过 NestFactory.create() 方法创建一个应用实例。app.listen(3000) 监听一个端口
+2、`app.controller.ts` 路由文件
+3、`app.service.ts` 服务文件，编写业务逻辑
+4、`app.module.ts` 模块文件
+
+## nestjs cli 常用命令
+
+```sh
+# 查看 nestjs cli 所有命令
+nest --help
+```