Fiber学习


## に至って
「に至って」和「に至っても」是两个相关的日语语法结构，它们用来表示事情发展到了某个阶段或程度，或者即使到了某个阶段或程度。这两个结构强调了事情的进展或结果，以及在特定情况下的行为或态度。

1. 「に至って」
这个结构用来表示事情发展到了某个特定的阶段或程度，通常暗示着事情已经达到了一个重要的转折点或高潮。

接续方式：
「名詞」 + 「に至って」
「動詞連体形」 + 「に至って」

例句：
- 彼は最後の瞬間に至って、ようやく真実を語った。
  （他在最后一刻终于说出了真相。）
- 会議の最後に至って、ようやく問題が解決した。
  （会议到了最后，问题终于得到了解决。）

2. 「に至っても」
这个结构用来表示即使事情发展到了某个阶段或程度，情况依然没有改变，或者某人依然保持某种态度或行为。

接续方式：
「名詞」 + 「に至っても」
「動詞連体形」 + 「に至っても」

例句：
- 期限に至っても、彼はまだ仕上げていなかった。
  （即使到了期限，他还是没有完成。）
- 何回説明に至っても、彼は理解しようとしない。
  （即使解释了很多次，他还是不愿意理解。）

这两个结构在日语中常用于书面语和正式场合的口语中，用来强调事情发展的阶段或程度，以及在特定情况下的行为或态度。


## ~に至っては
「~に至っては」是一个日语语法结构，用来表示当事情发展到某个特定的阶段或程度时，情况已经变得非常严重或特别，以至于需要采取特别的措施或应对方法。这个结构强调了事情的严重性或问题的紧迫性，暗示着到了这个阶段，通常的处理方式已经不再适用。

接续方式：
「名詞」 + 「に至っては」
「動詞連体形」 + 「に至っては」

例句从简单到复杂：

1. この問題に至っては、専門家の意見を聞くしかない。
   （到了这个问题，只能听取专家的意见。）

2. ここまで悪化に至っては、もう手遅れかもしれない。
   （到了这种恶化程度，可能已经为时已晚。）

3. 彼の態度に至っては、もう我慢の限界だ。
   （他的态度到了这个地步，我已经忍无可忍了。）

4. 事故が発生してからでは遅すぎる。予防策を講じるべきに至っては、今しかない。
   （事故发生后再采取措施就太迟了。到了需要采取预防措施的地步，现在是唯一的机会。）

5. ここまで来ると、全面的な改革に至っては避けられないだろう。
   （到了这个地步，全面的改革恐怕是不可避免的了。）

「~に至っては」这个结构在日语中常用于表达对当前状况的严重关切或对问题紧迫性的认识，它在书面语和正式场合的口语中使用较多。

## ~始末だ
「~始末だ」是一个日语语法结构，用来表达某事的状况或结果达到了令人遗憾、失望或难以接受的程度。这个结构通常带有负面的情感色彩，强调了事情的严重性或问题的复杂性。它由「始末」（しょくまつ）这个词和助词「だ」组成，「始末」在这里表示事情的经过或结果。

接续方式：
「動詞連体形」 + 「始末だ」

例句从简单到复杂：

1. 彼は約束を守らず、結局は信頼を失う始末だ。
    （他没有遵守约定，结果是失去了信任。）

2. せっかくのチャンスを逃してしまって、後悔する始末だ。
    （错过了难得的机会，结果是感到后悔。）

3. そのプロジェクトは予算オーバーで、混乱する始末だ。
    （那个项目超出了预算，结果是一片混乱。）

4. 彼女は一生懸命勉強したのに、試験に落ちて、残念な始末だ。
    （她尽管努力学习，但考试还是没通过，真是令人遗憾。）

5. あの人はいつも遅刻ばかりで、信用を失う始末だ。
    （那个人总是迟到，结果是失去了信用。）

「~始末だ」这个结构在日语中常用于口语和书面语中，用来表达对某事结果的不满或失望。它能够有效地传达出说话者对于事情状况的负面评价。

## ~っぱなしだ
「~っぱなしだ」是一个日语语法结构，用来表示某动作或状态一直持续着，没有改变或结束。这个结构通常带有负面的含义，暗示着某种情况或行为的持续是不理想的、不受欢迎的，或者需要被解决。它由「っぱなし」（表示动作或状态的持续）和「だ」（助动词，表示状态）组成。

接续方式：
「動詞ます形」 + 「っぱなし」 + 「だ」

例句从简单到复杂：

1. この部屋は散らかったっぱなしで、片付けないといけない。
    （这个房间乱七八糟的，得收拾一下。）

2. 机の上に置いたままの本は、読んだっぱなしにしてはいけない。
    （桌子上放着的书，不能读完就不管了。）

3. 彼は約束を破ったっぱなしで、謝罪もしない。
    （他违反了约定，却连道歉都没有。）

4. 仕事の資料を机の上に散らかしたっぱなしで、出かけた。
    （他把工作资料乱放在桌上就出门了。）

5. この問題は放置したっぱなしでは、解決しないだろう。
    （这个问题如果一直置之不理，是不会得到解决的。）

「~っぱなしだ」这个结构在日语中常用于口语和书面语中，用来指出某事需要被处理或改善，因为持续的状态是不恰当的。它能够有效地传达出说话者对于持续状况的不满或担忧。


N1语法第十六弹--结尾，最终状态

今天工作很早结束，趁着空闲时间研究了一下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. 彼女は一流の歌手ではないまでも、十分に魅力的な歌声を持っている。
       （她虽然不是一流的歌手，但她的歌声确实很有魅力。）

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