纸砚双拼介绍

https://appstore.lazycat.cloud/#/shop/detail/xu.deploy.shuangpin > **定位** > 这是一款开箱即用的双拼输入法练习平台，面向想要快速掌握或巩固双拼输入的用户。它提供多样化练习模式、可扩展的双拼方案与进度统计，让学习过程更系统、更有成就感。  --- ## 1 产品亮点 | 功能 | 说明 | | -------------- | ------------------------------ | | **多练习模式** | 随机、声母、韵母、长句 —— 覆盖从单字到文本的全流程训练。 | | **内置多套双拼方案** | 支持小鹤、朙月、自然码等常见方案；也可自己添加或切换。 | | **实时进度统计** | 击键数、正确率、击键/分钟 (KPM) 等关键指标一目了然。 | | **成就系统 (WIP)** | 完成里程碑任务可解锁徽章，持续保持练习动力。 | | **键盘可视化** | 在设置页直观查看当前方案的按键映射。 |  --- ## 2 快速开始 1. **打开网页 / 桌面应用** 无需注册，首次进入默认采用「随机模式」。 2. **选择练习模式** 主页顶部切换： * **随机模式**：单字随机，均衡覆盖声母+韵母。 * **声母模式**：聚焦声母打字，适合早期纠正手型。 * **韵母模式**：专练韵母，提升组合速度。 * **长句模式**：模拟真实输入场景，侧重连贯性。 3. **开始练习** * 按提示输入双拼。 * 页面底部实时展示 **KPM / 击键数 / 正确率**。 * 错误会高亮显示正确键位，帮助及时纠偏。 4. **查看统计** 练习结束后自动弹出成绩面板，支持历史记录追踪。 

懒猫微服进阶心得（六）：以纸砚双拼为例，快速移植纯前端项目到懒猫微服

https://appstore.lazycat.cloud/#/shop/detail/xu.deploy.shuangpin 之前移植了一款颜值极高的纸砚双拼，想着纯前端类的软件应该都是一样的操作，所以把操作记录下来，方便以后复习查看，也相当于一个教程吧。  对于这种场景来说，前端项目开发完成后，我们将构建好的静态页面部署到服务器上。借助 Docker 和 Nginx，可以实现一套**轻量、快速、可移植**的部署方式，特别适合懒猫微服这种容器化的环境，也很适合日常调试测试使用。 下面将手把手教你如何打包一个 Vue 或 React 项目，并通过 Docker + Nginx 构建一个可复用的前端部署容器镜像，然后就可以把这个部署到懒猫微服删，当然也适用于各种 Linux + Docker 环境。 --- ### 1 · 准备目录结构 纸砚双拼是Vue的项目，所以直接执行这个命令打包 ```bash npm i npm run build ``` 打包完成后，项目根目录下会生成一个 `dist/` 文件夹，里面包含： * `index.html` * 静态 JS、CSS 资源 * 图片等其他引用资源 基本所有前端工程化的流程都是部署这个dist/静态目录。 在开始容器化之前，我们先来整理一下项目结构。 ``` my-static-site/ ├── dist/ # 前端打包后的静态资源目录 ├── nginx.conf # Nginx 配置文件 ├── Dockerfile # Docker 构建文件 └── docker-compose.yml # docker-compose 管理配置（可选） ``` 主要就是把 `dist/ ` 目录映射到Nginx的根目录。 #### `.dockerignore`（防止把 node\_modules 等大文件复制进镜像） 项目根目录建议加个 `.dockerignore` 文件，防止无用文件进入镜像、浪费空间： ``` node_modules .git .vscode *.log dist ``` 这里的 `dist` 虽然是构建产物，但因为我们用的是双阶段构建，会在容器里重新生成，不需要提前放入。 ### 2 · Dockerfile（双阶段构建：先构建，再用 Nginx 托管） 我们采用双阶段构建方案，能够最大限度减小最终镜像体积，只包含运行时必须的内容。 ```dockerfile # 构建阶段 FROM node:18-alpine AS build WORKDIR /app # 复制package.json和package-lock.json COPY package*.json ./ # 安装依赖 - 使用npm install代替npm ci RUN npm install # 复制源代码 COPY . . # 构建应用 RUN npm run build # 生产阶段 FROM nginx:alpine # 复制构建产物到nginx目录 COPY --from=build /app/build /usr/share/nginx/html # 复制nginx配置 COPY nginx.conf /etc/nginx/conf.d/default.conf # 暴露80端口 EXPOSE 80 # 启动nginx CMD ["nginx", "-g", "daemon off;"] ``` > - 使用 `node:alpine` 和 `nginx:alpine` 轻量镜像，构建出来的镜像体积非常小 > - 分阶段构建，确保生产镜像中没有多余文件 --- ### nginx.conf（自定义 Nginx 配置） Nginx 配置文件如下： ```nginx server { listen 80; server_name localhost; location / { root /usr/share/nginx/html; index index.html index.htm; try_files $uri $uri/ /index.html; } # 禁止缓存 index.html，确保始终获取最新版本（避免缓存导致更新不生效） location = /index.html { root /usr/share/nginx/html; add_header Cache-Control "no-store, no-cache, must-revalidate"; } # 静态资源缓存设置 location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ { root /usr/share/nginx/html; expires 1d; } error_page 500 502 503 504 /50x.html; location = /50x.html { root /usr/share/nginx/html; } } ``` --- ### 3 · 构建与部署 #### 3.1 本地构建测试 执行以下命令构建镜像并启动： ```bash docker build -t my-frontend . docker run -p 8080:80 my-frontend ``` 打开浏览器访问 `http://localhost:8080`，确认页面正常显示。如果用的是懒猫微服，可通过它的 web 浏览器或 ssh 转发方式访问容器。 #### 3.2 可选使用 docker-compose 如果本地调试可以使用 ```yaml version: '3' services: cors-tester: build: context: . dockerfile: Dockerfile ports: - "80:80" restart: unless-stopped ``` #### 之前打包踩的坑 打包多了之后Docker 会积累不少旧镜像、缓存和挂载卷，下面这些命令能够清理磁盘空间： > 使用pg-docker或者lzc-docker来替代 #### 强制无缓存构建镜像 ```bash docker compose build --no-cache ``` > 不使用任何缓存，适合依赖变动或调试构建问题时使用。 #### 📦 查看磁盘空间占用详情 ```bash docker system df -v ```  > 查看镜像、容器、网络和卷的占用情况，排查“空间去哪了”。 #### 🧹 强制清理所有未使用资源（含挂载卷） ```bash docker system prune -af --volumes ```  > 删除所有未使用的镜像、容器、网络和卷，释放最大磁盘空间。 > **注意：慎用，可能会清掉你没保存的 volume 数据。**