Nuxt 3手写一个搜索页面

前言

前面做了一个小型搜索引擎，虽然上线了，但总体来说还略显粗糙。所以最近花了点时间打磨了一下这个搜索引擎的前端部分，使用的技术是Nuxt，UI组件库使用的是Vuetify，关于UI组件库的选择，你也可以查看我之前写的这篇对比。

本文不会介绍搜索引擎的其余部分，算是一篇前端技术文...

重要的：开源地址，应用部分的代码我也稍微整理了一下开源了，整体来说偏简单，毕竟只有一个页面，算是真正的“单页面应用”了🤣🤣🤣

演示

为什么要重写

这次重写的目的如下：

具体如下：

这样，用户之后不仅可以通过搜索“阿里云盘搜索引擎”能搜到这个网站，还有可能通过其他资源的关键词搜索到该网站

页面布局

首先必须支持移动端，因为从后台的访问数据看，移动端的用户更多，所以整体布局以竖屏为主，至于宽屏PC，则增加一个类似于max-width的效果。

其次为了整体实现简单，采取的还是搜索框与搜索结果处在一个页面，而非google\baidu之类的搜索框主页与结果页分别是两个页面，笔者感觉主页也没啥存在的必要（单纯对于搜索功能而言）

页面除了搜索框、列表项，还应该有logo，菜单，最终经过排版如下图所示：

左右两边为移动端的效果演示图，中间为PC端的效果演示。

nitro服务端部分

这里只需要实现两个API:

说到这里就不得不夸一下nuxt的开发者体验，新建一个API是如此的方便：

对比nest-cli中新建一个service/controller要好用不少，毕竟我在nest-cli中基本要help一下。

回到这里，我的server目录结构如下：

├─api

│  └─search            # 搜索接口相关

│          index.ts    # 搜索

│          suggest.ts  # 搜索建议

│

└─elasticsearch

        index.ts       # es客户端

在elasticsearch目录中，我创建了一个ES的客户端，并在search中使用：

// elasticsearch/index.ts



import { Client } from '@elastic/elasticsearch';



export const client = new Client({

  node: process.env.ES_URL,

  auth: {

    username: process.env.ES_AUTH_USERNAME || '',

    password: process.env.ES_AUTH_PASSWORD || ''

  }

});

然后使用，使用部分基本上没有做任何的特殊逻辑，就是调用ES client提供的api，然后组装了一下参数就OK了：

// api/search/index

import { client } from "~/server/elasticsearch";



interface ISearchQuery {

  pageNo: number;

  pageSize: number;

  query: string;

}



export default defineEventHandler(async (event) => {

  const { pageNo = 1, pageSize = 10, query }: ISearchQuery = getQuery(event);



  const esRes = await client.search({

    index: process.env.ES_INDEX,

    body: {

      from: (pageNo - 1) * pageSize, // 从哪里开始

      size: pageSize, // 查询条数

      query: {

        match: {

          title: query, // 搜索查询到的内容

        },

      },

      highlight: {

        pre_tags: ["<span class='highlight'>"],

        post_tags: ['</span>'],

        fields: {

          title: {},

        },

        fragment_size: 40,

      },

    },

  });



  const finalRes = {

    took: esRes.body.took,

    total: esRes.body.hits.total.value,

    data: esRes.body.hits?.hits.map((item: any) => ({

      title: item._source.title,

      pan_url: item._source.pan_url,

      extract_code: item._source.extract_code,

      highlight: item.highlight?.title?.[0] || '',

    })),

  };



  return finalRes;

});

// api/search/suggest

import { client } from "~/server/elasticsearch";



interface ISuggestQuery {

  input: string;

}



export default defineEventHandler(async (event) => {

  const { input }: ISuggestQuery = getQuery(event);



  const esRes = await client.search({

    index: process.env.ES_INDEX,

    body: {

      suggest: {

        suggest: {

          prefix: input,

          completion: {

            field: "suggest"

          }

        }

      }

    },

  });



  const finalRes = esRes.body.suggest.suggest[0]?.options.map((item: any) => item._source.suggest)



  return finalRes;

});

值得注意的是，客户端的ES版本需要与服务端的ES版本相互对应，比如我服务端使用的是ES7，这路也当然得使用ES7，如果你是ES8，这里需要安装对应版本得ES8，并且返回参数有些变化，ES8中上述esRes就没有body属性，而是直接使用后面的属性

page界面部分

首先为了避免出现之前所有代码均写在一个文件中，这里稍微封装了几个组件以使得page/index这个组件看起来相对简单：

/components

    BaseEmpty.vue

    DataList.vue

    LoadingIndicator.vue

    MainMenu.vue

    PleaseInput.vue

    RunSvg.vue

    SearchBar.vue

具体啥意思就不赘述了，基本根据文件名就能猜得大差不差了...

然后下面就是我的主页面部分：

<template>

	<div

		class="d-flex justify-center bg-grey-lighten-5 overflow-hidden overflow-y-hidden"

	>

		<v-sheet

			class="px-md-16 px-2 pt-4"

			:elevation="2"

			height="100vh"

			:width="1024"

			border

			rounded

		>

			<v-data-iterator :items="curItems" :page="curPage" :items-per-page="10">

				<template #header>

					<div class="pb-4 d-flex justify-space-between">

						<span

							class="text-h4 font-italic font-weight-thin d-flex align-center"

						>

							<RunSvg style="height: 40px; width: 40px"></RunSvg>

							<span>Search Search Go...</span>

						</span>

						<MainMenu></MainMenu>

					</div>

					<SearchBar

						:input="curInput"

						@search="search"

						@clear="clear"

					></SearchBar>

				</template>

				<template #default="{ items }">

					<v-fade-transition>

						<DataList

							v-if="!pending"

							:items="items"

							:total="curTotal"

							:page="curPage"

							@page-change="pageChange"

						></DataList>

						<LoadingIndicator v-else></LoadingIndicator>

					</v-fade-transition>

				</template>

				<template #no-data>

					<template v-if="!curInput || !pending">

						<v-slide-x-reverse-transition>

							<BaseEmpty v-if="isInput"></BaseEmpty>

						</v-slide-x-reverse-transition>

						<v-slide-x-transition>

							<PleaseInput v-if="!isInput"></PleaseInput>

						</v-slide-x-transition>

					</template>

				</template>

			</v-data-iterator>

		</v-sheet>

	</div>

</template>



<script lang="ts" setup>

const route = useRoute();

const { query = "", page = 1 } = route.query;

const router = useRouter();

const defaultData = { data: [], total: 0 };



const descriptionPrefix = query ? `正在搜索“ ${query} ”... ，这是` : "";

useSeoMeta({

	ogTitle: "SearchSearchGo--新一代阿里云盘搜索引擎",

	ogDescription: `${descriptionPrefix}一款极简体验、优雅、现代化、资源丰富、免费、无需登录的新一代阿里云盘搜索引擎，来体验找寻资源的快乐吧~`,

	ogImage: "https://ssgo.app/logobg.png",

	twitterCard: "summary",

});



interface IResultItem {

	title: string;

	pan_url: string;

	extract_code: string;

	highlight: string;

}



interface IResult {

	data: IResultItem[];

	total: number;

}



const curPage = ref(+(page || 1));



const curInput = ref((query || "") as string);

const isInput = computed(() => !!curInput.value);



let { data, pending }: { data: Ref<IResult>; pending: Ref<boolean> } =

	await useFetch("/api/search", {

		query: { query: curInput, pageNo: curPage, pageSize: 10 },

		immediate: !!query,

	});

data.value = data.value || defaultData;



const curItems = computed(() => data.value.data);

const curTotal = computed(() => data.value.total);



function search(input: string) {

	curPage.value = 1;

	curInput.value = input;

	router.replace({ query: { ...route.query, query: input, page: 1 } });

}



function pageChange(page: number) {

	curPage.value = page;

	router.replace({ query: { ...route.query, page: page } });

}



function clear() {

	curInput.value = "";

	data.value = defaultData;

	// 这里就不替换参数了，保留上一次的感觉好一些

}

</script>

大部分代码都是调用相关的子组件，传递参数，监听事件之类的，这里也不多说了。比较关键的在于这两部分代码：

useSeoMeta({

	ogTitle: "SearchSearchGo--新一代阿里云盘搜索引擎",

	ogDescription: `${descriptionPrefix}一款极简体验、优雅、现代化、资源丰富、免费、无需登录的新一代阿里云盘搜索引擎，来体验找寻资源的快乐吧~`,

	ogImage: "https://ssgo.app/logobg.png",

	twitterCard: "summary",

});

这里的SEO显示的文字是动态的，比如当前用户正在搜索AI，那么url路径参数也会增加AI，分享出去的页面描述就会包含AI，在twitter中的显示效果如下：

还有部分代码是这一部分：

let { data, pending }: { data: Ref<IResult>; pending: Ref<boolean> } =

	await useFetch("/api/search", {

		query: { query: curInput, pageNo: curPage, pageSize: 10 },

		immediate: !!query,

	});

其中immediate: !!query表示如果当前路径包含搜索词，则会请求数据，渲染结果页，否则不立即执行该请求，而是等一些响应式变量如curInput、 curPage发生变化后执行请求。

子组件部分这里就不详细解释了，具体可以查看源码，整体来说并不是很复杂。

其他

除此之外，我还增加了google analytics和百度 analytics，代码都非常简单，在plugins/目录下，如果你需要使用该项目，记得将对应的id改为你自己的id。

最后

这次也算是第一次使用nuxt来开发一个应用，总体来说安装了nuxt插件之后的开发体验非常不错，按照目录规范写代码也可以少掉很多导入导出的一串串丑代码。

关于笔者--justin3go.com

前言

node-sass: Command failed.， gyp ERR! build error 这几个词相信很多小伙伴一定看着眼熟，当你的终端出现这些词时那么毫无疑问，你的项目跑不起来了。。。。。。

你可能通过各种方式去解决了这个报错，但是应该没有人去深究到底是咋回事，接下来让我们彻底弄懂，再遇到类似问题时能够举一反三，顺利解决。

关键词：node-sass libsass node-gyp

先来看个截图感受一下

熟悉吧？截图里我们看到了几个关键词 node-sass libsass node-gyp .cpp，我们一一来解释一下

node-sass

node-sass 是一个用于在 Node.js 中编译 Sass 文件的库，node-sass 可以将 .scss 或 .sass 文件编译为标准的 .css 文件，供浏览器或其他工具使用。

• node-sass 可以看作是 libsass 的一个包装器(wrapper)或者说是 nodejs 和 libsass 之间的桥梁。


• 它提供了一个 Node.js 友好的接口来使用 libsass 的功能。


• 当你使用 node-sass 时,实际的 Sass 编译工作是由底层的 libsass 完成的。

当你的项目中使用 sass 来写样式时，会直接或间接地引入这个这个库。

libsass

一个用 C++ 编写的高性能 Sass 编译器，这就是为什么你能在终端日志中看到 .cpp 的文件。

注意，搞这么麻烦就是为了高性能编译sass。

node-gyp

node-sass引入了 c++ 编写的库，那么直接在 node 中肯定是使用不了的，毕竟是两种不同的语言嘛，那么就需要 node-gyp 登场了。

node-gyp 是一个用于编译和构建原生 Node.js 模块的工具，这些原生模块通常是用 C++ 编写的。

node-sass 需要在安装时编译 libsass 的 C++ 代码，以生成可以在本地机器上运行的二进制文件。在这个编译过程中，node-gyp 就被用作构建工具，它负责调用 C++ 编译器（如 g++ 或 clang++），并将 libsass 的源代码编译为与当前系统兼容的二进制文件。

node-gyp 本身是一个用 JavaScript 编写的工具。它使用 Node.js 的标准模块（如 fs 和 path）来处理构建和配置任务，但是需要一些外部工具来实际进行编译和构建，例如 make、gcc等，这些工具必须安装在系统中，node-gyp 只是协调和使用这些工具。

普通模块（JavaScript/TypeScript）

普通模块是用 JavaScript 或 TypeScript 编写的，Node.js 本身可以直接执行或通过编译（如 TypeScript 编译器）转换为可执行代码，Node.js 使用 V8 引擎执行 JavaScript 代码。

原生模块（C/C++ 编写）

原生模块是用 C/C++ 编写的代码，这些模块通常用于高性能需求或需要直接与底层系统 API 交互的场景。它们通过 node-gyp 进行编译，并在 Node.js 中以二进制文件的形式加载。

例如以下模块：

• node-sass：编译 Sass 文件，依赖 libsass 进行高性能的样式编译。


• sharp：处理图像文件，使用 libvips(c++库) 提供高效的图像操作。


• bcrypt：进行加密处理，提供安全的密码哈希功能。


• fsevents：用于 macOS 系统的文件系统事件监听。

许多现有的高性能库和工具是用 C++ 编写的。为了利用这些库的功能，Node.js 可以通过模块接口调用这些 C++ 库，尤其某些高级功能，如加密算法、图像处理等，已经在 C++ 中得到了成熟的实现，Node.js 可以直接集成这些功能，而不必再重新造轮子而且性能还肯定不如用 c++ 写的库。

所谓的原生模块接口就是 node-gyp（还有Node-API (N-API)等），感兴趣的可以看看 node-gyp 的实现，或者了解下包信息 npm info node-gyp

node-gyp 基于 gyp，并在其之上添加了 Node.js 特定的功能，以支持 Node.js 模块的编译。

gyp

gyp（Generate Your Projects）是一个用于生成构建配置文件的工具，它负责将源代码（C++ 代码）转换为特定平台的构建配置文件（如 Makefile、Visual Studio 项目文件等），生成构建文件后，使用生成的构建文件来编译项目。例如，在 Unix 系统上，运行 make；在 Windows 上，使用 Visual Studio 编译项目。

从前端的角度来看，你可以把gyp理解成 webpack，而 make 命令则是 npm run build

为什么报错？

现在，我们已经了解了一些基本概念，并且知道了c++原生模块是需要在安装时编译才能使用的，那么很明显，上面的错误就是在编译时出错了，一般出现这个错误都是因为我们有一些老的项目的 node 版本发生了变化，例如上面的报错就是，在 node14 还运行的好好的，到了 node16 就报错了，我们再来看一下报错细节

这个错误发生在编译 node-sass 的过程中，具体是在编译 binding.cpp 文件时。
binding.cpp 是 node-sass 的一部分，用于将 libsass 与 Node.js 接口连接起来。

报错发生在 v8-internal.h 文件里，大概意思是这个c++头文件里使用了比较高级的语法，node-sass中的c++标准不支持这个语法，导致报错，就相当于你在 js 项目里引入一个三方库，这个三方库使用了 es13 的新特性（未编译为es5），但是你的项目只支持 es6，从而导致你的项目报错。

所以解决思路就很清晰了，要么降级 node 版本，要么升级 node-sass，要么干脆就不用node-sass了

解决方案

rebuild 大法

npm rebuild node-sass 重新编译模块，对于其他编译错误该方法可能会有效果，但是如果 node-sass 和 node 版本不匹配那就没得办法了，适合临时使用，不推荐。

升级node-sass

以下是 node-sass 支持的最低和最高版本的指南，找对应的版本升级就好了

但是！node-sass 与node版本强绑定，还得去想着保持版本匹配，心智负担较重，所以使用 sass 更好

更换为 sass

官方也说了，不再释放新版本，推荐使用 Dart Sass

Sass 和 node-sass 的区别

实现语言：

• Sass：Sass 是一个用 Ruby 编写的样式表语言，最初是基于 Ruby 的实现（ruby-sass）。在 Ruby 版本被弃用后，Sass 社区推出了 Dart 语言实现的版本，称为 dart-sass。这个版本是当前推荐的实现，提供了最新的功能和支持。


• node-sass：node-sass 封装了 libsass，一个用 C++ 编写的 Sass 编译器。node-sass 使用 node-gyp 编译 C++ 代码和链接 libsass 库。

构建和编译：

• Sass：dart-sass 是用 Dart 语言编写的，直接提供了一个用 JavaScript 实现的编译器，因此不需要 C++ 编译过程。它在 Node.js 环境中作为纯 JavaScript 模块运行，避免了编译问题。


• node-sass：node-sass 依赖于 libsass（C++ 编写），需要使用 node-gyp 进行编译。很容易导致各种兼容性问题。

功能和维护：

• Sass：dart-sass 是 Sass 的官方推荐实现，拥有最新的功能和最佳的支持。它的更新频繁，提供了对最新 Sass 语言特性的支持。


• node-sass：由于 node-sass 依赖于 libsass，而 libsass 的维护在 2020 年已停止，因此 node-sass 逐渐不再接收新的功能更新。它的功能和特性可能滞后于 dart-sass。

性能：

• Sass：dart-sass 的性能通常比 node-sass 更佳，因为 Dart 编译器的性能优化更加现代。


• node-sass：虽然 libsass 在性能上曾经表现良好，但由于它不再更新，可能不如现代的 Dart 实现高效。

总结

gyp ERR! 和 node-sass 问题是由 node-sass 与 node 版本兼容引起的编译问题，推荐使用 sass 替代，如果老项目不方便改的话就采用降级 node 版本或升级 node-sass 的办法。

其实这种问题没太大必要刨根究底的，但是如果这次简单解决了下次遇到类似的问题还是懵逼，主要还是想培养自己解决问题的思路，再遇到类似天书一样的坑时不至于毫无头绪，浪费大量时间。

基于MuPDF.js实现的 PDF 文件 A3 转 A4 小工具。（其实就是纵切分成2份🤓）

开发背景

表哥最近经常找我给我侄子的试卷 pdf 文件 A3 转 A4（因为他家只有 A4 纸，直接打印字太小了）。

WPS提供了pdf的分割工具，不过这是会员功能，我也不是总能在电脑前操作。于是我想着直接写一个小工具，拿Tauri打包成桌面应用就好了。

在掘金里刷到了柒八九大佬的文章：Rust 赋能前端：PDF 分页/关键词标注/转图片/抽取文本/抽取图片/翻转... 。发现MuPDF.js这个包有截取pdf文件的API，并且提供了编译好的wasm文件，这意味着可以在浏览器中直接体验到更高的裁切性能，于是我果断选择了基于MuPDF开发我的小工具。

项目简介

MuPDF-Crop-Kit是一个基于MuPDF.js、React、Vite和Tauri开发的小工具，用于将 PDF 文件从 A3 纸张大小裁切为 A4 纸张大小。它具有以下特点：

• 免费使用：无需任何费用；


• 无需后台服务：可以直接在浏览器中运行，无需依赖服务器；


• 高性能：利用 WebAssembly (WASM) 技术，提供高效的文件裁切性能；


• 轻量级桌面应用：通过 Tauri 打包成桌面软件，安装包体积小，方便部署；


• 开源项目：欢迎社区贡献代码和建议，共同改进工具。

项目代码地址

• Github：MuPDF-Crop-Kit

开发过程与踩坑

• MuPDF.js只支持ESM，官网中给出的要么使用.mjs文件，要么需要项目的type改成module：
  
  

  npm pkg set type=module
  
  

  
  

  我在我的Rsbuild搭建的项目中都没有配置成功🤷‍♂️，最后发现用Vite搭建的项目直接就可以用...



• 因为没有直接提供我想要的功能，肯定是要基于现有的API手搓了。但是截取页面的API会修改原页面，那么自然想到是要复制一份出来，一个截左边一个截右边了。但是MuPDF.js的copyPage复制出来的pdf页修改之后，原pdf页居然也会被修改。
  于是我想到了，一开始就new两个PDFDocument对象，一个截左边一个截右边，最后再合并到一起，我很快实现了两个文档的分别截取，并通过转png图片之后再合并，完成了裁切后的文档的浏览器预览。
  然后我考虑直接使用jspdf把png图片转pdf文件，结果2MB的原文件转换后变成了12MB，并且如果原文件是使用扫描全能王扫描出来的，生成的pdf文件会很糊。
  最后，终于让我在文档中发现merge方法：
  
  

  

  
  

  不过依赖包提供的方法很复杂：

  
  

  merge(sourcePDF, fromPage = 0, toPage = -1, startAt = -1, rotate = 0, copyLinks = true, copyAnnotations = true) {
  
    if (this.pointer === 0) {
  
        throw new Error("document closed");
  
    }
  
    if (sourcePDF.pointer === 0) {
  
        throw new Error("source document closed");
  
    }
  
    if (this === sourcePDF) {
  
        throw new Error("Cannot merge a document with itself");
  
    }
  
    const sourcePageCount = sourcePDF.countPages();
  
    const targetPageCount = this.countPages();
  
    // Normalize page numbers
  
    fromPage = Math.max(0, Math.min(fromPage, sourcePageCount - 1));
  
    toPage = toPage < 0 ? sourcePageCount - 1 : Math.min(toPage, sourcePageCount - 1);
  
    startAt = startAt < 0 ? targetPageCount : Math.min(startAt, targetPageCount);
  
    // Ensure fromPage <= toPage
  
    if (fromPage > toPage) {
  
        [fromPage, toPage] = [toPage, fromPage];
  
    }
  
    for (let i = fromPage; i <= toPage; i++) {
  
        const sourcePage = sourcePDF.loadPage(i);
  
        const pageObj = sourcePage.getObject();
  
        // Create a new page in the target document
  
        const newPageObj = this.addPage(sourcePage.getBounds(), rotate, this.newDictionary(), "");
  
        // Copy page contents
  
        const contents = pageObj.get("Contents");
  
        if (contents) {
  
            newPageObj.put("Contents", this.graftObject(contents));
  
        }
  
        // Copy page resources
  
        const resources = pageObj.get("Resources");
  
        if (resources) {
  
            newPageObj.put("Resources", this.graftObject(resources));
  
        }
  
        // Insert the new page at the specified position
  
        this.insertPage(startAt + (i - fromPage), newPageObj);
  
        if (copyLinks || copyAnnotations) {
  
            const targetPage = this.loadPage(startAt + (i - fromPage));
  
            if (copyLinks) {
  
                this.copyPageLinks(sourcePage, targetPage);
  
            }
  
            if (copyAnnotations) {
  
                this.copyPageAnnotations(sourcePage, targetPage);
  
            }
  
        }
  
    }
  
  }
  
  

  
  

  而且在循环调用这个MuPDF.js提供的merge方法时，wasm运行的内存被爆了🤣。
  仔细阅读代码发现其核心实现就是：

  
  
  
  
  • addPage新增页面；
  
  
  • put("Resources")复制原文档页面中的内容到新页面；
  
  
  • insertPage将新增的页面插入到指定文档中。
  
  
  
  

  因为我并没有后续添加的link和annotation，所以经过设计后，决定使用一个空的pdf文档，逐页复制原文档两次到空白文档中。主要逻辑如下：

  
  
  
  
  • 加载 PDF 文件：读取并解析原始 A3 PDF 文件。
  
  
  • 复制页面：创建两个新的 PDF 文档，分别截取每页的左半部分和右半部分。
  
  
  • 合并页面：将两个新文档中的页面合并到一个新的 PDF 文档中。
  
  
  • 设置裁剪框：根据 A4 纸张尺寸设置裁剪框（CropBox）和修整框（TrimBox）。
  
  
  
  

  export function merge(
  
    targetPDF: mupdfjs.PDFDocument,
  
    sourcePage: mupdfjs.PDFPage
  
  ) {
  
    const pageObj = sourcePage.getObject();
  
    const [x, y, width, height] = sourcePage.getBounds();
  
    // Create a new page in the target document
  
    const newPageObj = targetPDF.addPage(
  
      [x, y, width, height],
  
      0,
  
      targetPDF.newDictionary(),
  
      ""
  
    );
  
    // Copy page contents
  
    const contents = pageObj.get("Contents");
  
    if (contents) newPageObj.put("Contents", targetPDF.graftObject(contents));
  
    // Copy page resources
  
    const resources = pageObj.get("Resources");
  
    if (resources) newPageObj.put("Resources", targetPDF.graftObject(resources));
  
    // Insert the new page at the specified position
  
    targetPDF.insertPage(-1, newPageObj);
  
  }
  
  ​
  
  export function generateNewDoc(PDF: mupdfjs.PDFDocument) {
  
    const count = PDF.countPages();
  
    const mergedPDF = new mupdfjs.PDFDocument();
  
    for (let i = 0; i < count; i++) {
  
      const page = PDF.loadPage(i);
  
      merge(mergedPDF, page);
  
      merge(mergedPDF, page);
  
    }
  
  ​
  
    for (let i = 0; i < count * 2; i++) {
  
      const page = mergedPDF.loadPage(i); // 使用 mergedPDF 的页码
  
      const [x, y, width, height] = page.getBounds();
  
      if (i % 2 === 0)
  
        page.setPageBox("CropBox", [x, y, x + width / 2, y + height]);
  
      else page.setPageBox("CropBox", [x + width / 2, y, x + width, y + height]);
  
  ​
  
      page.setPageBox("TrimBox", [0, 0, 595.28, 841.89]);
  
    }
  
    return mergedPDF;
  
  }
  
  

  
  

  完成以上核心方法后，便可以成功将我侄子的试卷裁切为A4大小进行打印了✅。

体验与安装使用

浏览器版

• 直接访问网页链接（MuPdf-Crop-Kit）。
  
  

  

桌面版

• 下载并安装 Tauri 打包的桌面应用（Release tauri-x64-exe-0.1.0 · HyaCiovo/MuPdf-Crop-Kit）；


• 使用源码自行打包需要的安装包。

使用教程

使用本工具非常简单，只需几个步骤即可完成 PDF 文件的裁切：

不足

• 项目所使用的wasm文件大小有10MB，本工具真正用到的并没有那么多，但是优化需要修改原始文件并重新编译；


• 浏览器端的性能受限，并且wasm运行可以使用的内存也是有限的；


• 没有使用Web Worker，理论上转换这种高延迟的任务应当放在Woker线程中进行来防止堵塞主线程。

替代方案

如果在使用过程中遇到问题或需要更多功能，可以尝试以下在线工具：

• Split PDF Down the Middle A3 to A4 Online：每小时可以免费转换3次，作者亲测好用👍。

众所周知在做数字孪生相关项目的时候，会划出相当一部分费用会用于做建模工作，然而有一天老板跑过来告诉我，由于客户地处于偏远经济欠发达地区，没有多少项目经费，因此不会花很大的价钱做建模，换言之如果这个项目连建模师都请不起了，阁下该如何应对。

常规的场景建模方式无非就是CAD、激光点云辅助、倾斜摄影建模，人工建模的成本自不必说，几百平方公理的场景如果用无人机倾斜等等建模也是一笔不小的开销，在客户对场景还原度和模型精细度不高的前提下，最省成本的办法还是尽肯能让程序自动建模。经过几天摸索，我终于找到一些稍微靠谱的应对方法，本篇着重讲述如何获取场景的数据，以及处理为展示所需的数据格式。

准备工作

使用的工具

QGIS（全称Quantum GIS）是一个开源的地理信息系统， 提供了一种可视化、编辑和分析地理数据的途径。它支持各种矢量、栅格和数据库格式，并且支持丰富的GIS功能，包括地图制作、空间数据编辑、地图浏览等。

CesiumLab3是一款强大的3D地理信息数据处理软件，可以将各种类型的数据，如点云、模型、影像、地形等，转换为3D Tiles格式，以便在CesiumJS中可视化。此外，CesiumLab3还提供了一套完整的数据管理和分发服务，使得大规模3D地理信息数据的存储、管理和服务变得更加便捷。

CesiumJS是一款开源的JavaScript库，它用于创建世界级的3D地球和地图的Web应用程序。无论是高精度的地形、影像，还是高度详细的3D模型，CesiumJS都可以轻松地将它们集成到一个统一的地理空间上下文中。该库提供了丰富的接口和功能，让开发者可以轻松实现地理信息可视化、虚拟地球等应用。

基础数据

数据处理

1. 影像和地形

带有地形信息的卫星影像作为底图可以说是非常重要，所有其他图层都是它的基础上进行搭建，因此我们必须尽可保证在处理数据时的底图和最终展示时使用的底图是一致的，至少空间参考坐标系必须是一致的。

由于在后面步骤用到的cityEgine工具可选坐标系里没有ESPG43226，这里使用EPSG32650坐标系。

在编辑过程中需要用到TIF格式的卫星底图，可以使用QGIS对栅格图层，图层的数据在平面模式下进行编辑，主要工作是对齐数据、查漏补缺。

地形处理步驟如下：

2. 建筑轮廓

建筑轮廓通常为矢量数据，在2D模式下它就是由多个内封闭多边形组成的图层，而在3D模式下可以对这些多边形进行挤压形成体力几何体，并在此基础上做变形和贴图，形成大量城市建筑的视觉效果。

这部分数据很难在互联网上拿到，即使有免费的渠道（比如OMS下载），数据也是较为老旧的或者残缺的，有条件的话建议让业主提供或者购买水经注VIP会员下载。即使这样，我们还需要使用QGIS等工具进行二次编辑。

操作步骤如下：

3. 绿地和植被图层

绿地和植被图层为我们展示了特定区域内的自然或人工绿地及植被分布情况，包括公园、森林、草地、田地等各类植被区域。获取数据通常可以通过遥感卫星图像，或者通过地面调查和采集。这些数据经过处理后，可以以矢量或栅格的形式在GIS中进行展示和分析。

在本文案例中为了制作立体茂密树林的视觉效果，我们将植被图层数据转换为LOD图层，即在不同的地图缩放尺度下有不同的细节呈现。基本原理就是在指定的范围内随机生成一个树模型的大量实例操作步骤如下：

以上方法适合创建模型单一、更新频度低、且数据量巨大的模型图层，比如树木、城市设备如路灯、垃圾桶、井盖等等。

4. 水域分布

地理上水域包括湖泊、河流、海洋和各种人工水体，在专业领域项目水域的分布对研究环境生态有重大意义，而比较通用的场景就是跟卫星影像、地形底图结合展示，我们同样需要矢量数据绘制多边形，并加上动态材质出效果。

由于最终展示的地图引擎cesium自带水域材质效果，这里的操作也变得简单，只要把水域多边形获取到手就行：

组合数据

至此数据篇就介绍完了，由于cesiumlab3自带分发服务，我们可以直接在上面新建一个场景，将上文生成的数据图层组合到一个场景里作展示。另外还可以测试一些场景效果比如天气、轮廓、泛光等等，还挺有意思的。后续的单模型加载、可视化图层加载、鼠标事件交互等等就留在开发篇吧，今天就先这样。

相关链接

cesiumlab软件设置3dtiles模型位置

在Cesium中种植大量树木

地形和水面处理

植被3DTiles处理

前言

2024.02.20

下午摸鱼时接到一个客户的数字孪生项目的需求，客户什么也没说，就要求“炫酷”和“科技感”地图，还要把他们的模型都放上去，起初我以为又是一个可视化大屏的项目，准备用高德地图应付过去，然后他们又在群里发什么要求高之类的，我们的数据种类多，说什么高德、百度、Mapbox、Cesium之类框架都试过了，满足不了需求，好嘛，这下给我犯了难了，会的技术栈全都给我排除了, 手撸Three.js源码我可不干，于是就在网上晃悠，尝试找一些灵感

2024.02.24

又试了几个地图框架，还是不行，被客户和经理催了一顿，再不行他们要换人了

2024.02.28

在QQ群里闲逛，发现了群友发的一个叫 Mapmost SDK for WebGL 的地图框架，于是抱着试一试的态度做了一下，好家伙，一下就对客户味了

2024.03.04

后面我发现这个SDK蛮有意思，于是把我实现客户需求的过程记录下来，分享给大家

初始化

这个SDK看似是个商用软件，不过目前是免费试用，官网上申请一下就行了，然后按照他们的文档，填一下参数，就能初始化一个地图，和一般的地图SDK用法差不多

    <script src ='https://delivery.mapmost.com/cdn/sdk/webgl/v3.5.0/mapmost-webgl-min.js'></script>

    <script>

        let mapmost = window.mapmost

         /* 

        * 初始化地图

        */

        let map = new mapmost.Map({

            container: 'map', //地图容器

            style:'http://192.168.126.44/mms-style/darkMap.json', //矢量底图

            center: [120.74014004382997, 31.32975410974069], //地图中心点

            bearing: 50.399999999999636, //方位

            pitch: 78.99999999999993, //倾斜角

            zoom: 19.964625761228117, //缩放

            userId: '***',



        })

    </script>

不过，在此之前，要把底图中的矢量建筑图层隐藏掉，客户要加载真正的建筑三维模型。

代码和效果图如下：

const buildingLayers = [

    'buildings-di',

    'buildings-faguang-1',

    'buildings-faguang-2',

    'buildings-faguang-3',

    'buildings-high',

    'buildings-high-top',

    'buildings-low',

    'buildings-low-top',

    'buildings-lowmid',

    'buildings-lowmid-top',

    'buildings-mid',

    'buildings-mid-top',

    'buildings-midhigh',

    'buildings-midhigh-copy',

]



map.on('load', (e) => {

    buildingLayers.forEach((layer, index) => {

        let layerObj = map.getLayer(layer)

        map.setLayoutProperty(layerObj.id, 'visibility', 'none');

    })

})

加载建筑三维模型

这里我们准备了城市建筑的模型，格式为glb，按照文档描述，我们添加一个id为modelLayer的三维图层，代码和效果图如下

//...



/* 

* 加城市f载建筑模型

*/



let Gr0up = null

let Layer = null



let models = ["./model/YQ.glb"].map(item => ({

    type: 'glb',

    url: item

}));



map.on('load',(e) => {

     let modelOptions = {

        id: 'modelLayer',

        type: 'model',

        models: models,

        sky: "./sky/satara_night_no_lamps_2k.hdr",

        exposure: 2.4,

        center: [120.74155610348487, 31.328251735532746, 0],

        callback:  (group, layer) => {

            Gr0up = group

            Layer = layer                                    

        }

    };

    

    map.addLayer(modelOptions);       

})

添加三维效果

接下来就是客户的G点了，为三维场景添加特效：

添加建筑流光渐变效果

参考SDK的接口文档，给建筑加上流光渐变的效果

定义一个添加特效的函数addModelEffect,然后按照文档上的参数说明来配置相关属性

 const  addModelEffect = () =>{

    Layer.addModelEffect(Gr0up, [{

        type: "gradient",

        startColor: "rgba(63, 177, 245,.5)",

        endColor: "rgba(58, 142, 255,.8)",

        opacity: 0.8,

        percent: 0.5

    }, {

        type: "flow",

        speed: 1,

        color: "rgba(241, 99, 114, .4)",

        opacity: 0.8,

        percent: 0.05

    }])

    Gr0up.addFrame(0x3FB1F5);



  }

然后我们在模型加载完成后调用这个函数：

//...



map.on('load',(e) => {

     let modelOptions = {

        id: 'modelLayer',

        type: 'model',

        models: models,

        sky: "./sky/satara_night_no_lamps_2k.hdr",

        exposure: 2.4,

        center: [120.74155610348487, 31.328251735532746, 0],

        callback:  (group, layer) => {

            Gr0up = group

            Layer = layer   

            addModelEffect()

        }

    };

    

    map.addLayer(modelOptions);       

})

效果如下：

添加粒子飞线

同样，在SDK的文档上找到添加流动线的接口，定义一个addFlowLine的函数，然后按照要求配置参数：

这里我们借助了一个生成贝塞尔曲线的函数，以及一些随机的坐标点位数据。
他们的作用是为我们提供必要的模拟数据

import { getBSRPoints } from './bezierFunction.js'

import { flowLineData } from './flowLineData.js'



//...



const addFlowLine = () => {

    //生成贝塞尔曲线测试数据

    let data_trail1 = getBSRPoints(120.71541557869517, 31.316503949907542,

        120.73787560336916, 31.321925190347713, 800);

    let data_trail2 = getBSRPoints(120.71541557869517, 31.316503949907542,

        120.72619950480242, 31.33360076088249, 1500);

    let data_trail3 = getBSRPoints(120.71541557869517, 31.316503949907542,

        120.69933418653403, 31.332725809914024, 900);

        

    [data_trail1, data_trail2, data_trail3].map(data => {

        Layer.addFlowLine({

            type: "trail",

            color: '#1ffff8',

            speed: 4,

            opacity: 0.9,

            width: 8,

            data: {

                coordinate: data

            }

        });

    })



    flowLineData.map(data => {

        Layer.addFlowLine({

            type: "flow",

            color: '#ff680d',

            speed: 4,

            opacity: 1,

            percent: 0.08,

            gradient: 0.02,

            width: 5,

            data: {

                coordinate: data

            }

        });

    })

}

同样，我们在模型加载完成后调用这个函数：

//...



map.on('load',(e) => {

     let modelOptions = {

        id: 'modelLayer',

        type: 'model',

        models: models,

        sky: "./sky/satara_night_no_lamps_2k.hdr",

        exposure: 2.4,

        center: [120.74155610348487, 31.328251735532746, 0],

        callback:  (group, layer) => {

            Gr0up = group

            Layer = layer   

            addModelEffect()

            addFlowLine()

        }

    };

    

    map.addLayer(modelOptions);       

})

效果图如下：

添加特效球

类似的，文档上的添加特效球的接口，给场景里添加两个”能量半球“

代码和效果图如下：

const addSphere = () => {

    let sphere = Layer.addSphere({

        color: "rgb(53, 108, 222)",

        radius: 3300, //半径，单位米，默认为10米

        segment: 256, //构成圆的面片数

        phiLength: Math.PI,

        speed: 3,

        opacity: 1,

        center: [120.67727020663829, 31.31997024841401, 0.0]

    });



    let sphere2 = Layer.addSphere({

        color: "rgb(219, 74, 51)",

        radius: 2300, //半径，单位米，默认为10米

        segment: 256, //构成圆的面片数

        phiLength: Math.PI,

        speed: 6,

        opacity: 1,

        center: [120.67727020663829, 31.31997024841401, 0.0]

    });

}





//...



map.on('load',(e) => {

     let modelOptions = {

        id: 'modelLayer',

        type: 'model',

        models: models,

        sky: "./sky/satara_night_no_lamps_2k.hdr",

        exposure: 2.4,

        center: [120.74155610348487, 31.328251735532746, 0],

        callback:  (group, layer) => {

            Gr0up = group

            Layer = layer   

            addModelEffect()

            addFlowLine()

            addSphere()

        }

    };

    map.addLayer(modelOptions);       

})

环境效果调优

仔细看整个环境，发现天是白的，和整体环境不搭配

更改一下地图初始化时的参数，将天空设置为暗色：

let map = new mapmost.Map({

    container: 'map', //地图容器

    style: 'http://192.168.126.44/mms-style/darkMap.json', //矢量底图

    center: [120.74014004382997, 31.32975410974069], //地图中心点

    bearing: 60.399999999999636, //方位

    pitch: 78.99999999999993, //倾斜角

    zoom: 14.964625761228117, //缩放

    sky: 'dark' //天空颜色

})

然后整体效果如下：

如果觉得场景本身太亮，可以降低添加模型时的曝光度：

let modelOptions = {

    exposure: .4,

    callback:  (group, layer) => {

       //...

    }

};

这样整体环境就会偏暗一点，更有黑夜下的赛博朋克城市的味道

当然，在这我又换了一张更暗的底图：

最后，再调整一下特效球的半径和位置，行了，这就是客户喜欢的样子，哈哈哈，2小时搞定，而且不用手撸Three.js代码：

  const addSphere = () => {

    let sphere = Layer.addSphere({

        color: "rgb(53, 108, 222)",

        radius: 3300, //半径，单位米，默认为10米

        segment: 256, //构成圆的面片数

        phiLength: 180,

        speed: 3,

        opacity: 1,

        center: [120.67943361712065, 31.306450929918768]

    });



    let sphere2 = Layer.addSphere({

        color: "rgb(219, 74, 51)",

        radius: 2300, //半径，单位米，默认为10米

        segment: 256, //构成圆的面片数

        phiLength: 180,

        speed: 6,

        opacity: 1,

        center: [120.67727020663829, 31.31997024841401, 0.0]

    });

}

总结

仔细看，不难发现，这个SDK集成了 Mapbox 和 Three.js 的核心功能，主打的是一个高颜值的三维地图引擎，当然除了好看之外，其他地图框架该有的功能它也具备，只是官网给人的感觉过于粗糙，不够吸引人；另外产品试用的门槛有些高，希望后面能优化吧

Nest.js 中的 TypeSafe 方案

在现代 Web 开发中，类型安全（TypeSafe）是提升代码质量和减少运行时错误的关键因素。

Nest.js 作为一个渐进式的 Node.js 框架，结合了 TypeScript 的强大功能，提供了构建高效、可扩展服务器端应用的理想平台。

笔者在使用 Nest.js 构建全栈应用时最大的痛点是写了这么多类型检查，好像没有办法和前端通用啊～。相信许多人也有这个问题，所以也冒出了在 Nest.js 中集成 tRPC 的教程。

而本文介绍的 Nestia，一个专为 Nest.js 设计的类型安全解决方案，帮助开发者在构建应用时实现更高的类型安全性和开发效率。

韩国最好的程序员

Jeongho Nam，GitHub用户名为 samchon，他在 README 中自称为韩国最好的程序员。他自1998年开始编程，拥有25年的丰富经验。在这段时间里，他开发了许多程序，并不断提升自己的技能。他不仅在工作中开发程序，还在业余时间开发开源项目，以满足自身需求或改进现有功能。这些开源项目逐渐形成了新的开源库，其中最著名的就是 typia 和 nestia。

什么是Nestia？

Nestia 是一个专为 Nest.js 开发的库，旨在通过利用 TypeScript 的类型系统，提供更高效和类型安全的开发体验。Nestia 的核心目标是简化数据传输对象（DTOs）的定义和验证，减少类型错误，并提升代码的可维护性。

Nestia的主要功能

如何使用Nestia

安装Nestia

你可以运行以下命令通过模版代码来快速上手 Nestia。
模板将自动构建在<directory>中。作为参考，这是一个最小的模板项目，只集中于从 NestJS 服务器生成 SDK。它不包含数据库连接。

npx nestia start <directory>

你也可以运行下面的命令来将 Nestia 集成至现有的项目中。设置向导将自动安装并配置所有内容。

npx nestia setup

定义类型安全的DTO

你不需要掌握特殊的语法只使用 TypeScript 就可以编写一个带有类型检查的 DTO。当然，Nestia 也通过 Typia 提供了编写复杂类型检查的可能，例如，我们可以定义一个论坛完整的 DTO：

import { tags } from "typia";



export interface IBbsArticle {

  /* Primary Key. */

  id: string & tags.Format<"uuid">;



  /* Title of the article. */

  title: null | (string & tags.MinLength<5> & tags.MaxLength<100>);



  /*  Main content body of the article. */

  body: string;



  /* Creation time of article. */

  created_at: string & tags.Format<"date-time">;

}

在 Controller 中调用 Nestia 的装饰器

NestJS 原生的装饰器(如 @Get(), @Post() 等)虽然使用方便，但在性能和类型安全方面存在一些局限:

• 使用 class-validator 和 class-transformer 进行验证和转换,性能相对较低


• 需要定义额外的 DTO 类和装饰器,增加了代码量


• 类型安全性不够强,运行时可能出现类型错误

Nestia 的装饰器(如 @TypedRoute.Get(), @TypedBody() 等)则解决了这些问题:

• 利用 typia 库进行高性能的运行时类型验证,比 class-validator 快 20,000 倍


• 支持使用纯 TypeScript 接口定义 DTO,无需额外的类定义


• 在编译时进行类型检查,提供更强的类型安全性


• JSON 序列化速度比 class-transformer 快 200 倍

import { TypedRoute } from "@nestia/core";

import { Controller } from "@nestjs/common";

 

import { IBbsArticle } from "./IBbsArticle";

 

@Controller("bbs/articles")

export class BbsArticlesController {



  @TypedRoute.Get("random")

  public async random(): Promise<IBbsArticle> {

    return {

      id: "2b5e21d8-0e44-4482-bd3e-4540dee7f3d6",

      title: "Hello nestia users",

      body: "Just use `TypedRoute.Get()` function like this",

      created_at: "2023-04-23T12:04:54.168Z",

      files: [],

    };

  }

  

  @TypedRoute.Post()

  public async store(

    @TypedBody() input: IBbsArticle.IStore,

  ): Promise<IBbsArticle> {

    return {

      ...input,

      id: "2b5e21d8-0e44-4482-bd3e-4540dee7f3d6",

      created_at: "2023-04-23T12:04:54.168Z",

    };

  }

}

自动生成API客户端

Nestia可以根据服务器端的API定义，自动生成类型安全的API客户端。在根目录配置 nestia.config.ts 文件

import { INestiaConfig } from '@nestia/sdk';

import { NestFactory } from '@nestjs/core';

import { FastifyAdapter } from '@nestjs/platform-fastify';



import { AppModule } from './src/app.module';



const NESTIA_CONFIG: INestiaConfig = {

  input: async () => {

    const app = await NestFactory.create(AppModule, new FastifyAdapter());

    app.setGlobalPrefix('api');

    return app;

  },

  output: 'src/api',

  clone: true,

  distribute: 'sdk',

};

export default NESTIA_CONFIG;

运行命令 npx nestia sdk 即可生成 SDK package，你可以直接在 Monorepo 中使用它，也可以将其分发到 npm.

尝试使用生成的 SDK 看到类型提示的那一刻，整个人都通畅了~

结论

Nestia 作为一个专为 Nest.js 设计的类型安全解决方案，通过简化 DTO 定义和验证、自动生成 API 客户端以及高效的 JSON 序列化和反序列化功能，帮助开发者在构建应用时实现更高的类型安全性和开发效率。无论是大型企业级应用还是个人项目，Nestia 都是提升代码质量和开发效率的理想选择。

通过本文的介绍，希望您对 Nestia 有了更深入的了解，并能在您的 Nest.js 项目中尝试使用这一强大的工具，享受类型安全带来的诸多好处。

环境变量文件

将 .env.dev 文件重命名为 .env.development，以及将 .env.prod 文件重命名为 .env.production，以适配环境配置。

为了演示如何使用环境变量，我们在 .env.development 文件中添加两个变量 TARO_APP_ID 和 TARO_APP_API，然后在源代码中读取这些变量的值。

TARO_APP_ID="xxxxxxxxxxxxxxxxxx"



TARO_APP_API="https://api.tarojs.com"

接下来需要在 project.config.json 文件中更新 appid 的值。因为上一章节中为了测试修改了这个值，现在我们需要把它改回原来的 appid：

"appid": "touristappid",

在完成以上操作后，重新启动项目（使用命令 pnpm dev:weapp），控制台会显示相关的提示信息，并且可以看到 dist/project.config.json 文件中的 appid 已经变成了我们在 .env.development 文件中指定的 TARO_APP_ID 值。

为了在代码中使用环境变量，可以在 src/pages/index/index.tsx 文件的 useLoad 钩子中添加 console.log 语句来打印 TARO_APP_API 的值：

console.log(process.env.TARO_APP_API)

这样做的结果是，当程序运行时，可以在微信开发者工具的控制台中看到 TARO_APP_API 环境变量的值被成功打印出来。

这里需要记得将环境变量的appid改为你正常使用的appid，否则小程序会报错。

之后运行程序，并在微信开发者工具中浏览：

需要注意的是，只有以 TARO_APP_ 开头的环境变量才会被 webpack 的 DefinePlugin 插件静态嵌入到客户端代码中。这是为了避免环境变量与系统内置变量冲突。在构建过程中，代码中的 process.env.TARO_APP_API 会被替换为实际的环境变量值。例如，我们在小程序开发者工具中查看编译后的代码，会看到 console.log(process.env.TARO_APP_API) 被替换成了 console.log("https://api.tarojs.com");。

编译配置

编译配置是 Taro 项目开发过程中重要的一部分，它决定了项目的编译行为。Taro 的编译配置主要存放在项目根目录下的 config 文件夹内，由 index.ts 文件统一导出。其中，index.ts 通过合并 dev.ts 和 prod.ts 来分别处理开发时的配置和构建时的生产配置。dev.js 适用于项目预览时的设置，而 prod.js 则适用于项目打包时的设置。

在 Taro 的编译配置中，可以设置项目名称、创建日期、设计稿尺寸、源码目录等基本配置信息。下面的代码片段展示了一部分编译配置的内容：

const config = {

  // 项目名称

  projectName: 'learn-taro-wxapp',

  // 项目创建日期

  date: '2024-3-11',

  // 设计稿尺寸

  designWidth: 750,

  // 设计稿尺寸换算规则

  deviceRatio: {

    640: 2.34 / 2,

    750: 1,

    375: 2,

    828: 1.81 / 2

  },

  // 项目源码目录

  sourceRoot: 'src',

  // 项目产出目录

  outputRoot: 'dist',

  // Taro 插件配置

  plugins: [],

  // 全局变量设置

  defineConstants: {},

  // 文件 copy 配置

  copy: {

    patterns: [],

    options: {},

  },

  // 框架，react，nerv，vue, vue3 等

  framework: 'react',

  // 使用 webpack5 编译

  compiler: 'webpack5',

  cache: {

      enable: false // Webpack 持久化缓存配置，建议开启

  },

  // 小程序端专用配置

  mini: {

    postcss: {

      pxtransform: {

        enable: true,

        config: {



        }

      },

      autoprefixer: {

        enable: true,

      },

      cssModules: {

        enable: false, // 默认为 false，如需使用 css modules 功能，则设为 true

        config: {

          namingPattern: 'module', // 转换模式，取值为 global/module

          generateScopedName: '[name]__[local]___[hash:base64:5]',

        },

      },

    },

    // 自定义 Webpack 配置

    webpackChain(chain) {

        chain.resolve.plugin('tsconfig-paths').use(TsconfigPathsPlugin)

    }

  },

  // H5 端专用配置

  h5: {

    publicPath: '/',

    staticDirectory: 'static',

    postcss: {

      autoprefixer: {

        enable: true,

      },

      cssModules: {

        enable: false, // 默认为 false，如需使用 css modules 功能，则设为 true

        config: {

          namingPattern: 'module', // 转换模式，取值为 global/module

          generateScopedName: '[name]__[local]___[hash:base64:5]',

        },

      },

    },

    // 自定义 Webpack 配置

    webpackChain(chain, webpack) {},

    devServer: {},

  },

  rn: {

      appName: 'taroDemo',

      postcss: {

        cssModules: {

          enable: false, // 默认为 false，如需使用 css modules 功能，则设为 true

        }

      }

    }

}



module.exports = function (merge) {

  if (process.env.NODE_ENV === 'development') {

    return merge({}, config, require('./dev'))

  }

  return merge({}, config, require('./prod'))

}

在编译配置文件中，alias 被用来设置路径别名，避免在代码中书写过多的相对路径。在配置文件中，默认已经将 @ 设置为指向 src 目录，这样，在代码中就可以使用 @ 快捷引用 src 下的文件了。

我们还可以增加额外的配置，例如：

alias: {

  '@/components': path.resolve(__dirname, '..', 'src/components'),

}

使用 defineConstants 可以定义全局常量，例如，可以基于不同的环境设置不同的全局变量。

defineConstants: {

  __DEV__: JSON.stringify(process.env.NODE_ENV === 'development'),

  __PROD__: JSON.stringify(process.env.NODE_ENV === 'production')

}

等等...
如果想要查阅每个配置项的具体意义和用法，可以按住 Ctrl + 鼠标左键 点击属性名，跳转到 project.d.ts 类型声明文件中查看对应注释和示例代码。

designWidth 用于指定设计稿的宽度，这里设置的是 750px，这意味着使用的 UI 设计稿的宽度标准是 750px。Taro 提供了多个设计稿尺寸的换算规则，当前项目中已经设置了几种不同尺寸对应的换算比例。如下所示：

  // 设计稿尺寸换算规则

  deviceRatio: {

    640: 2.34 / 2,

    750: 1,

    375: 2,

    828: 1.81 / 2

  },

对于 UI 设计师而言，推荐使用 750px 作为设计尺寸标准，它便于开发者使用 Taro 进行开发时，进行适配和转换。

对于更详细的编译配置，可以查询官方文档中的编译配置详情。

app.config.ts 通用配置文件

在 Taro 框架中，app.config.ts 是小程序的通用配置文件，其主要职责是定义小程序的页面及其全局属性。以下是针对 app.config.ts 文件中一些关键配置项的说明：

pages

pages 数组用于指明组成小程序的页面列表，每个元素都指向一个页面的路径加文件名，无需包含文件扩展名。由于 Taro 会自动处理寻找文件，这会带来方便。改变小程序页面结构时，如新增或删除页面，都应相应地更新 pages 配置。

pages: [

  'pages/index/index',

  'pages/other/other',

  // ... 其他页面路径

]

其中，数组中的第一个条目表示小程序的入口页面（首页）。

window

window 对象用于设置小程序的状态栏、导航条、标题和窗口背景色等界面表现。

window: {

  navigationBarBackgroundColor: '#ffffff',

  navigationBarTextStyle: 'black',

  backgroundColor: '#eeeeee',

  // ... 其他窗口属性

}

查看属性详细信息和支持程度，你可以通过按住 Ctrl + 鼠标左键 点击任意属性，跳转至 taro.config.d.ts 类型声明文件。支持程度不同的平台详细请查阅官方文档。

tabBar

对于包含多个 tab（在客户端窗口底部或顶部有 tab 栏切换页面的）的小程序，tabBar 配置用于定义 tab 栏的外观以及每个 tab 对应的页面。

tabBar: {

  color: "#434343",

  selectedColor: "#333333",

  // ... tabBar 属性和 tab 列表

}

tabBar 中的 list 属性是一个包含若干对象的数组，每个对象定义了一个 tab 项的页面路径、图标和文字等。点击 tab 时，应用会切换到对应的页面。

关于 tabBar 的更多详细配置项，也可以通过点击属性，跳转至 TypeScript 的类型声明文件中查看功能描述。

支持程度不同的平台详细请查阅官方文档

页面的config.ts配置文件

单个页面也可以有自己的配置文件，通常是 config.ts。页面配置会被 definePageConfig 函数包裹，并作为参数传入，其参数类型是 Taro.PageConfig。PageConfig 继承自 CommonConfig 类型。

export default definePageConfig({

  navigationBarTitleText: '页面标题'

})

project.config.json 微信小程序配置文件

除了 Taro 的配置外，微信小程序也需一个 project.config.json，这个配置文件包含了微信小程序的专有配置。关于此配置你可以参考微信小程序官方文档。

引言

最近，看到不少开发者在讨论如何“优雅地”封装 axios 时，我的内心不禁发出一声叹息——“收手吧阿祖，别再封装了！”我们都知道，axios 是一个轻量级的 http 客户端库，广泛用于前端和 node.js 环境中，因其简洁易用、功能丰富而备受喜爱。但问题来了：为什么那么多人非要二次封装它？是想追求什么“优雅”代码，还是只是满足某种程序员的“封装癖”？在我看来，二次封装 axios 的行为，其实更多的是“低效”和“麻烦”！

在这篇文章中，我将分析二次封装 axios 的现象，揭示它的弊端，并提出更合理的解决方案。

二次封装 axios 背后的动机

首先，得承认，在许多开发者的心目中，二次封装 axios 是“提升代码复用性”、“提升可维护性”的一种手段。究竟是什么驱动他们这么做呢？让我们来看看，通常的封装动机有哪些。

这些动机听起来有理有据，似乎是为了减少重复代码、提高效率。但，二次封装真的是解决问题的最佳方法吗？

二次封装 axios 的弊端：看似优雅，实际繁琐

虽然二次封装看起来很“高级”，但它带来的问题也是显而易见的。

1. 失去灵活性，降低可维护性

当我们通过二次封装 axios 将所有请求逻辑集中到一个地方时，代码复用的确得到了提高，但灵活性却大大下降。每当我们需要调整请求方式、处理特殊错误、或者添加新的请求功能时，必须在封装层修改代码，这意味着对每一个新请求的修改都变得更加复杂，导致代码膨胀，维护成本上升。

举个例子，假设你有一个简单的请求需要添加一个额外的请求头或参数，但你的封装类已经把一切都“包裹”得很严实，你不得不进入封装类的内部进行修改。这种情况下，封装的意义反而变得虚假。

2. 过度封装，增加不必要的复杂性

封装本应是为了简化代码，但过度封装反而让事情变得更加复杂。例如，很多二次封装的 axios 都包含了一堆的“自定义配置”，导致请求时你不得不先了解封装类的具体实现，甚至可能在不同项目之间迁移时也要重新学习一套封装规范。每次需要调用 api 的时候，都要与一个封装层打交道，这显然不是开发者想要的高效体验。

3. 性能问题：拦截器是双刃剑

请求和响应拦截器的设计初衷无疑是为了统一处理请求逻辑，但过多的拦截器往往会导致性能瓶颈。特别是在大型项目中，拦截器的链式执行可能带来额外的延迟。此外，拦截器中常常会加入错误处理、token 刷新等额外逻辑，这会影响整个请求链的执行效率。

4. 可能引发版本兼容性问题

随着项目的不断迭代，封装的代码与 axios 原生的更新频繁不一致，导致二次封装的代码容易发生维护上的“断层”或兼容性问题。每当 axios 更新时，可能需要你手动修复封装类中的依赖，甚至重构整个封装层，造成额外的开发工作量。

为什么我们不需要二次封装 axios？

那么，既然二次封装带来了这么多麻烦，我们应该如何解决 axios 使用中的痛点呢？

1. 使用 axios 的内置功能

axios 本身就有非常强大的功能，很多二次封装中提到的配置（比如 baseURL、headers 等）都可以直接通过 axios 的实例化来轻松解决。例如：

const axiosInstance = axios.create({

  baseURL: 'https://api.example.com',

  timeout: 1000,

  headers: {'X-Custom-Header': 'foobar'}

});

这样，所有请求都可以通过统一的实例管理，无需复杂的封装，且灵活性保持不变。

2. 合理使用拦截器

axios 的请求和响应拦截器非常强大，用得好可以让你的代码更简洁。错误处理、token 刷新、请求取消等功能，都可以直接在 axios 拦截器中完成，而不需要一个额外的封装类。

axios.interceptors.response.use(

  response => response,

  error => {

    if (error.response.status === 401) {

      // Token 刷新逻辑

    }

    return Promise.reject(error);

  }

);

通过这种方式，我们在全局进行处理，而不需要一层一层的封装，让代码保持简洁并且具有良好的扩展性。

3. 利用第三方库增强功能

如果你确实需要一些特殊的功能（比如请求重试、缓存、自动重定向等），可以使用现成的第三方库，而不是自己重复造轮子。比如：

• axios-retry：轻松实现请求重试


• axios-cache-adapter：请求缓存


• axios-auth-refresh：自动刷新 token

这些库都能与 axios 配合得很好，帮助你解决二次封装中出现的某些功能问题，避免在项目中增加冗余的封装层。

4. 模块化的请求管理

而对于需要统一管理的 api 请求，推荐将每个请求模块化，分层管理，而不是在一个封装类中把所有请求都硬编码。你可以根据需求将每个 api 的请求抽象成一个独立的函数或模块，保持高内聚低耦合的设计。

// api/user.js

export function getUserInfo(userId) {

  return axios.get(`/users/${userId}`);

}

这样做的好处是，当某个接口发生变化时，只需要修改相应的模块，而不需要担心影响到其他的请求。

总结

二次封装 axios 是一种源自“代码复用”的良好初衷，但它往往带来了灵活性不足、复杂度增加、性能损失等一系列问题。在面对实际开发中的 http请求时，我们可以通过直接使用 axios 的内置功能、合理利用拦截器、借助现成的第三方库以及模块化管理等方式来更高效、更优雅地解决问题。

所以，不要再二次封装 axios 了，它并不是“灵丹妙药”。让我们回归简单，享受 axios 原生的优雅与高效吧！

苹果的 Vision Pro 已经发布了，虽然没有拿到手，但我还是对它的操作界面充满了好奇。

我看到很多小伙伴写了 Windows for Web，Mac OS for Web，所以我也想来实现一下 Vision Pro 的系统主页。

一开始，我以为这不会太难，当头一棒的就是苹果祖传优势: 动画。

这动画，这模糊，还是从中心点开始逐渐向外层扩散，应该根据人眼的视觉特征进行设计的。

问题是，该如何实现呢？

模糊我知道怎么实现，

filter: blur(15px);

从中心点开始逐渐向外层扩散的效果，我直接来个
transition-delay: 0.1s;

一通操作之下，也实现就似是而非的效果。而且边缘处app图标的缓缓落下的效果也不好。

然后就是光影效果的实现，因为它的很美，让人很难忽略。

在 Vision Pro 系统演示中可以看出，为了模拟菜单栏使用了磨砂玻璃材质，而为了营造真实感，会模拟光照射到玻璃上而形成的光线边框。

我不知道这是不是菲涅尔效应，但问题是，这又该如何在前端实现呢？

我想到了 CSS Houdini，可以利用 Houdini 开放的底层能力 paint 函数来实现一个菜单栏效果。

if ('paintWorklet' in CSS) {

    CSS.paintWorklet.addModule('data:text/javascript,' + encodeURIComponent(`

    

        class FresnelAppRectPainter {

            static get inputProperties() { return ['--light-angle']; }



            paint(ctx, size, properties) {

                const borderRadius = 30;

                const fresnelColor = 'rgba(255, 255, 255, .9)';

                const lightAngle = parseFloat(properties.get('--light-angle')[0]) || 0;



                // 绘制圆角矩形

                ctx.beginPath();

                ctx.moveTo(borderRadius, 0);

                ctx.lineTo(size.width - borderRadius, 0);

                ctx.arcTo(size.width, 0, size.width, borderRadius, borderRadius);

                ctx.lineTo(size.width, size.height - borderRadius);

                ctx.arcTo(size.width, size.height, size.width - borderRadius, size.height, borderRadius);

                ctx.lineTo(borderRadius, size.height);

                ctx.arcTo(0, size.height, 0, size.height - borderRadius, borderRadius);

                ctx.lineTo(0, borderRadius);

                ctx.arcTo(0, 0, borderRadius, 0, borderRadius);

                ctx.closePath();

                ctx.fillStyle = 'rgba(163, 163, 163)';

                ctx.fill();



                // 模拟光照效果

                const gradient = create360Gradient(ctx, size, lightAngle)

                ctx.fillStyle = gradient;

                ctx.fill();



                // 添加菲涅尔效果

                const borderGradient = ctx.createLinearGradient(0, 0, size.width, size.height);

                borderGradient.addColorStop(0, fresnelColor);

                borderGradient.addColorStop(0.2, 'rgba(255,255,255, 0.7)');

                borderGradient.addColorStop(1, fresnelColor);



                ctx.strokeStyle = borderGradient;

                ctx.lineWidth = 1.5;

                ctx.stroke();

            }

        }



        registerPaint('fresnelAppRect', FresnelAppRectPainter);

    `));

}

结果效果还可以，我甚至可以接收一个光的入射角度，来实时绘制光影效果。

 function create360Gradient(ctx, size, angle) {

      // 将角度转换为弧度

      const radians = angle * Math.PI / 180;



      // 计算渐变的起点和终点

      const x1 = size.width / 2 + size.width / 2 * Math.cos(radians);

      const y1 = size.height / 2 + size.height / 2 * Math.sin(radians);

      const x2 = size.width / 2 - size.width / 2 * Math.cos(radians);

      const y2 = size.height / 2 - size.height / 2 * Math.sin(radians);



      // 创建线性渐变

      const gradient = ctx.createLinearGradient(x1, y1, x2, y2);

      gradient.addColorStop(0, 'rgba(255, 255, 255, 0.2)');

      gradient.addColorStop(1, 'rgba(255, 255, 255, 0)');



      return gradient;

   }

演示效果图

哦对了，还有一个弹层底边角的缩放效果，我目前还没想到什么好办法来实现，年底还得抓紧搬砖，只能先搁置了，如果小伙伴们有好办法，欢迎告知或者讨论。

最终效果图

这里是 Demo 地址。

本来是冲着纯粹娱乐（蹭流量）来写的，但写着写着就发现好像没那么简单，三个晚上过去，也只写了个首页，不得不感慨苹果真的太细了呀。

以上。