今天工作很早结束，趁着空闲时间研究了一下React,因为前端功底不怎么好，所以研究了很久，研究出来这么个东西，之前一直在想把iTakeaway的IM服务整理出来，但是最近忙于项目汇报和赶进度，没时间弄，后面再找时间吧，可以搭配React写一个仿微信的，但是只是仅仅支持聊天的程序，技术栈就React + Go

下午做了一些原型验证


![image.png](/static/img/80044c24ad691dff4aa926cfaecc1cbf.image.webp)

这个是仿的微信Style的登陆页面，，因为是在浏览器实现，但是又不想做全屏（谁家用微信全屏），所以说就做成平常大小，但是这个微信窗口是可以拖动，上下左右拖动

我工作主要是Golang和Vue3，Vue3主要是简单的后台管理系统，React知识学习了基础知识，所以还不是很清楚一些功能怎么实现，Vue里面做过拖动的Dialog,但是React,还没有，所以我把这个登陆页面做成了拖动的


![QQ2024111-02935.gif](/static/img/e0c50fe942f7cfe75f95da33cd3daf62.QQ2024111-02935.gif)

这样虽然没什么用，但是很方便

```
npm install react-draggable
```
安装这个插件，用Draggable组件包裹你的组件代码就可以，[他的文档在这里](https://juejin.cn/post/7206974675027984443)，它支持用参数设置初始位置，也就是组件渲染后的位置，但是更好的方式是用css去定义初始位置，比如居中

用这个属性可以设置在容器上显示游标，但是我觉得很丑

```

    cursor: move;
```

为了不再拖动的时候出现横纵滚动条影响美观，
```
  html, body {
    overflow: hidden;
    height: 100vh;
  }
```
添加这个属性，完全满足我的需求

React研究

今天记录一下vite.config.js配置文件的学习，，每次有点问题就要去查（百度），然后复制粘贴，最近好好学习一下



### 1. `plugins`

用于配置 Vite 插件。通常情况下，你会使用 `@vitejs/plugin-react` 来支持 React。

```ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
});
```

### 2. `resolve.alias`

用于配置路径别名，方便在代码中使用相对路径。

```ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import path from 'path';

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
    },
  },
});
```

### 3. `server`

用于配置开发服务器的行为。

```ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  server: {
    port: 3000, // 指定开发服务器的端口
    open: true, // 启动开发服务器时自动打开浏览器
    proxy: {
      '/api': {
        target: 'http://localhost:5000', // 代理API请求到后端服务器
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ''),
      },
    },
  },
});
```

### 4. `build`

用于配置构建选项。

```ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  build: {
    outDir: 'dist', // 指定构建输出目录
    assetsDir: 'assets', // 指定静态资源输出目录
    sourcemap: true, // 生成 source map 文件
    minify: 'esbuild', // 使用 esbuild 进行代码压缩
  },
});
```

### 5. `css`

用于配置 CSS 相关选项。

```ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "./src/styles/variables.scss";`, // 在每个 SCSS 文件中自动引入变量文件
      },
    },
  },
});
```

### 6. `optimizeDeps`

用于配置依赖优化选项。

```ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  optimizeDeps: {
    include: ['react', 'react-dom'], // 指定需要优化的依赖
  },
});
```

### 7. `define`

用于定义全局常量。

```ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  define: {
    'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
  },
});
```

### 8. `base`

用于配置应用的公共基础路径。

```ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  base: '/my-app/', // 指定应用的公共基础路径
});
```

### 9. `esbuild`

用于配置 esbuild 选项。

```ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  esbuild: {
    jsxInject: `import React from 'react'`, // 自动注入 React import
  },
});
```

### 10. `assetsInclude`

用于配置静态资源包含规则。

```ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  assetsInclude: ['**/*.svg', '**/*.png'], // 指定包含的静态资源类型
});
```



vite.config.js配置文件

## ~にひきかえ
「~にひきかえ」是一个日语语法结构，用来表示对比或对照，意味着“与……相反”或“与……形成对比”。这个结构通常用于强调两个事物或情况之间的差异，指出一方与另一方在某种特征或行为上的对立或不同。

接续方式：
「名詞」 + 「にひきかえ」
「動詞連体形」 + 「にひきかえ」

例句从简单到复杂：

1. 彼はいつも明るいのにひきかえ、弟は内向的だ。
      （他总是很开朗，而弟弟则很内向。）

2. 春は花が咲き乱れるのにひきかえ、冬は木々が静かに眠る。
      （春天花开繁盛，而冬天树木静静地沉睡。）

3. 他の人は忙しく働いているのにひきかえ、彼はのんびりと過ごしている。
      （其他人忙于工作，而他却悠闲地度过时光。）

4. 期待していた新製品は機能が限定的なのにひきかえ、旧型の方が多機能だ。
      （期待中的新产品功能有限，而旧型产品功能却更多。）

5. 彼女はいつも真面目に勉強しているのにひきかえ、友人は遊んでばかりいる。
      （她总是认真学习，而她的朋友却总是玩耍。）

「~にひきかえ」这个结构在日语中常用于描述对比情况，强调两个事物或情况之间的差异，它在口语和书面语中都广泛使用。

## ~にもまして
「~にもまして」是一个日语语法结构，用来表示程度上的进一步增加或强调，相当于中文的“比……更加……”或“比……更甚”。这个结构通常用于强调某事物或情况在原有的基础上变得更加显著或强烈。

接续方式：
「名詞」 + 「にもまして」
「動詞・形容動詞連体形」 + 「にもまして」

例句从简单到复杂：

1. 昨日よりも今日、寒さがひどく、昨日よりもっと寒い。
       （比昨天更冷，今天更加寒冷。）

2. 彼は以前にもまして、仕事に熱心になった。
       （他比以前更加热衷于工作了。）

3. この夏は例年にもまして暑い日が続いた。
       （这个夏天比往年更加热，连续多日高温。）

4. 彼女は以前にもまして、美しくなった。
       （她比以前更加美丽了。）

5. 今年の花火大会は去年にもまして、盛大に行われた。
       （今年的烟花大会比去年更加盛大。）

「~にもまして」这个结构在日语中常用于强调事物或情况的变化和对比，特别是在描述天气、情感、态度等方面的变化时。它在口语和书面语中都广泛使用。

## ~ないまでも
「~ないまでも」是一个日语语法结构，用来表达“即使不……至少……”或“虽然不……但是……”的意思。这个结构通常用于表达一种折衷或让步的态度，指出虽然没有达到某个极端的程度，但至少达到了某种程度或情况。它强调了即使没有完全满足某个条件，也存在某种程度上的相似或接近。

接续方式：
「動詞ない形」 + 「までも」

例句从简单到复杂：

1. 完璧でないまでも、彼の努力は評価に値する。
       （即使不完美，他的努力也值得评价。）

2. その問題を完全に解決できなかったまでも、ある程度の進展はあった。
       （虽然没有完全解决那个问题，但至少取得了一定的进展。）

3. 彼はプロの選手ではないまでも、かなりの実力者だ。
       （他虽然不是职业选手，但也是相当有实力的人。）

4. その映画が最高傑作ではないまでも、間違いなく面白い作品だ。
       （那部电影虽然不是最伟大的杰作，但无疑是一部有趣的作品。）

5. 彼女は一流の歌手ではないまでも、十分に魅力的な歌声を持っている。
       （她虽然不是一流的歌手，但她的歌声确实很有魅力。）

「~ないまでも」这个结构在日语中常用于表达一种让步或折衷的态度，强调即使没有达到最高标准，也存在某种程度上的认可或价值。它在口语和书面语中都广泛使用。

N1语法十五弹--比较对照

最近项目赶汇报进度，甲方要求赶紧上线，所以一直都处在下午开会，其他时间全力赶进度的状态，几乎没什么时间写文章，今天的进度已经完成，前端那边还在赶页面，闲下来写点自己的东西，上次去fiber社区逛了一下，解决的vue项目代理部署的问题，今天测试一下之前的转发思路发现不行，现在在验证
```go
package main

import (
	"strings"

	"github.com/gofiber/fiber/v2"
	"github.com/gofiber/fiber/v2/middleware/proxy"
)

func main() {
	// 创建一个新的 Fiber 实例
	app := fiber.New()

	// 使用自定义中间件来处理请求
	app.Use(func(c *fiber.Ctx) error {
		// 获取请求的 URI
		uri := c.OriginalURL()

		// 检查 URI 前缀是否是 /min/
		if strings.HasPrefix(uri, "/min/") {
			// 提取 min. 后面的部分
			minPath := strings.TrimPrefix(uri, "/min/")
			// 构建新的目标 URL
			targetURL := "http://localhost:8080/" + minPath
			// 转发请求到目标 URL
			return proxy.Do(c, targetURL)
		} else {
			// 转发请求到另一个地址
			return proxy.Do(c, "http://localhost:8088"+c.OriginalURL())

		}
	})

	// 启动服务器并监听 3000 端口
	err := app.Listen(":3000")
	if err != nil {
		panic(err)
	}
}

```
发现用这个中间件就很可以,修改一下代码测试，反正不考虑性能，自己用，等有优化再来吧

发现运行在80端口有问题，别的端口没问题

![image.png](/static/img/8c32d1bae043538d0bb0c63b667a7579.image.webp)

测试过程被一股神秘的力量阻止，算了下次在公司服务器试下

Minty实现思路验证

## ときたら
「ときたら」是一个日语语法结构，用来表达说话者对某人或某事的不满、责难或惊讶。它通常用于指出某人做了什么出乎意料或不适当的事情，带有轻微的责备语气。这个结构由「と」和「きたら」组成，「と」在这里表示引用或提及某人说过的话或行为，「きたら」则表示“一提到就……”。

接续方式：
「名詞」 + 「ときたら」

例句从简单到复杂：

1. 彼女ときたら、約束をすっぽかしたんだよ。
    （她啊，竟然爽约了。）

2. うちの子ときたら、宿題もしないでゲームばかりしている。
    （我家孩子啊，竟然不做作业只顾玩游戏。）

3. あの人ときたら、いつも遅刻してくるから困る。
    （那个人啊，总是迟到，真是让人头疼。）

4. この間、友達と話していたら、彼ときたら急に結婚したって。
    （前几天和朋友聊天时，他啊，突然说他结婚了。）

5. うちの上司ときたら、仕事が忙しい時に限って休暇を取るんだから。
    （我们上司啊，偏偏在工作最忙的时候请假。）

「ときたら」这个结构在口语中非常常见，它能够有效地传达说话者对某人或某事的不满或惊讶情绪。

## ともなると
「ともなると」和「~共（とも）なれば」是两个相似的日语语法结构，它们都用来表示“一旦……就……”或“当……的时候”。这两个结构强调了某个条件或情况一旦出现，随之而来的结果或变化。它们通常用于描述在特定条件下事物的自然反应或必然趋势。

接续方式：
「名詞」 + 「ともなると」
「動詞連用形」 + 「共（とも）なれば」

例句从简单到复杂：

1. 夏休みともなると、子供たちは毎日プールに行く。
     （一到暑假，孩子们每天都会去游泳池。）

2. 雨が降り出すともなると、この道はすぐに渋滞する。
     （一旦开始下雨，这条路就会立刻堵车。）

3. 旅行ともなると、いつも荷物が多くなりがちだ。
     （一到旅行的时候，总是容易行李变得很多。）

4. 本番ともなると、緊張して実力を発揮できないことが多い。
     （一旦到了正式场合，经常因为紧张而无法发挥实力。）

5. その話題が出るとなれば、彼はいつも熱く語り始める。
     （每当提到那个话题，他总是开始热情地谈论起来。）

6. 金曜日ともなると、みんな仕事が終わるのが早くなる。
     （一到周五，大家下班都变得特别快。）

7. その映画が公開されるとなれば、多くの人が映画館に殺到するだろう。
     （一旦那部电影上映，许多人可能会蜂拥而至电影院。）

「ともなると」和「~共（とも）なれば」这两个结构在日语中常用于口语和书面语，用来描述在特定条件下可能出现的情况或行为。它们能够有效地表达出条件和结果之间的必然联系。


## ~ともあろう
「~ともあろう」是一个日语语法结构，用来表示某人或某物具有某种特定的身份、地位或特征，但即便如此，却做出了与其身份不符的行为或发生了不适当的事情。这个结构通常带有责备或失望的语气，强调了对某人或某物的期望与实际行为之间的落差。

接续方式：
「名詞」 + 「ともあろう」 + 「名詞/動詞」
「名詞」 + 「の」 + 「名詞」 + 「ともあろう」 + 「名詞/動詞」

例句从简单到复杂：

1. 先生ともあろう人が遅刻するなんて、信じられない。
      （作为老师却迟到，真是难以置信。）

2. 大学教授ともあろう人がそんな間違いを犯すとは。
      （作为大学教授却犯这样的错误，真是令人惊讶。）

3. 彼は医者ともあろう人が、自分の健康に無頓着だ。
      （他作为一名医生，对自己的健康却毫不关心。）

4. 有名な学者ともあろう人が、そのような不正行為に手を染めるとは。
      （作为一位著名的学者，竟然涉足那样的不正当行为。）

5. せっかくのチャンスともあろうものを、彼は簡単に放棄してしまった。
      （明明是难得的机会，他却轻易地放弃了。）

「~ともあろう」这个结构在日语中常用于表达对某人或某物的期望与实际行为之间的落差，通常用于批评或表达失望。它在口语和书面语中都可能使用，特别是在表达不满或责难时。


## ~たるもの（は）
「~たるもの（は）」是一个日语语法结构，用于表达“作为……的人应该……”或“既然……就应该……”的意思。它通常用于强调某人或某物所承担的角色、地位或身份，以及与之相应的责任、义务或行为准则。这个结构由动词的过去形「たる」（相当于“是”）和助词「もの」（表示人或事物）以及「は」（主题标记）组成。

接续方式：
「動詞連体形（た形）」 + 「たるもの」 + 「は」 + 「動詞連用形」 + 「ものです」/「べきです」等

例句从简单到复杂：

1. 大人たるもの、子供の前では常に礼儀正しくあるべきだ。
     （作为大人，在孩子面前应该始终保持礼貌。）

2. 学生たるもの、勉強に励むのは当然のことだ。
     （作为学生，努力学习是理所当然的。）

3. 父親たるもの、家族を養う責任がある。
     （作为父亲，有抚养家庭的责任。）

4. 選手たるもの、試合中は全力を尽くすべきだ。
     （作为选手，在比赛中应该全力以赴。）

5. 管理者たるもの、部下の意見に耳を傾けるべきだ。
     （作为管理者，应该倾听下属的意见。）

「~たるもの（は）」这个结构在日语中常用于强调某种身份或角色所应承担的责任和义务，它在书面语和正式场合的口语中使用较多，特别是在强调道德规范或职业操守时。


## ~なりに
「~なりに」是一个日语语法结构，用来表达“按照……的方式”或“以……自己的方式”之意。它强调了某人或某物按照自己的标准、方法或能力进行某事，即使这可能与他人的标准不同。这个结构由「なり」（相当于“方式”、“样子”）和助词「に」（表示方向、对象）组成。

接续方式：
「名詞」 + 「の」 + 「なりに」
「動詞連体形」 + 「なりに」

例句从简单到复杂：

1. 彼は自分のペースで、仕事を進めるなりに頑張っている。
      （他按照自己的节奏，以自己的方式努力工作。）

2. 子供なりに、一生懸命に勉強している。
      （孩子们按照自己的方式，努力学习。）

3. 彼女は自分の考えで、問題を解決するなりに努力した。
      （她按照自己的想法，努力以自己的方式解决问题。）

4. それぞれが自分のやり方で、プロジェクトを進めるなりにしている。
      （每个人都按照自己的方法，以自己的方式推进项目。）

5. その作家は独自のスタイルで、小説を書くなりにしている。
      （那位作家以自己独特的风格，按照自己的方式写作小说。）

「~なりに」这个结构在日语中常用于表达尊重个人差异和独特性，强调每个人都有自己的方式和方法来完成任务或表达自己。它在口语和书面语中都广泛使用。