离职第一剑，先斩公司

工人与老板存在天然矛盾，必须仲裁安排！
诉求：加班费 + 拖欠工资赔偿

离开我工作的地方

租房的街道和公司写字楼，准备骑单车蹬回家（半路家人来接我的）

回家种地

分享学习资料被抓

在群里分享了点学习资料，被找上门来了
我猜是买到正版的同学气不过把我举报的

找工作

总在家闲着不行，我得去找工作了
之前早走的同事入职新公司了，他说可以内推我，约好了面试
最终没谈拢，算了。

就业形势一片向好

去济南找工作走了一圈，路过济南火车站，去图书馆补了一下山东火车的历史

找不到工作，看到群里群主都开始接单了，逐渐焦虑😥

没工作在家喂喂猫，写点开源项目

在家闲鱼接单的日子

没事干了，去闲鱼接点单，从最开始的帮配置开发环境开始做的，边做边在家闲玩
村里买的鸡腿带血，就这炸鸡腿水平还敢跟城里要一个价？

自己用微波炉做了，太简单了，叮3分钟就能吃了

给家里添置一个热水器，这个闲鱼花200买的，原价1千多，苏州人真有钱😄

太阳能发电后鸣叫，说是赶鸟用的，娱乐一下

姨姥爷送的两只母兔子

给妹妹买点衣服，非要这个浅蓝色，也不管穿着舒不舒服，自己选的自己穿吧我不管了

家里的林地被推平了，说是有耕地指标，这里是耕地就得种粮食，不准栽树

接单稍有起色

有临沂的老板在闲鱼要找我驻场开发了，问了一下情况，说是前端那边遇到问题了让我去救场？自己解决吧，别让我跑空了

同时也在QQ技术群有兄弟拉我入伙，后来因为接单耽误了

内蒙古网友寄来特产，非常感谢，第一次吃到奶香味这么浓的千层酥和奶茶

后来有老板私聊让我做项目了，需求整理了一周，我们报价6w，老板同时找的人报价2-3w，直接把我吓傻了，后来还是找的我们。
跟之前合作过的兄弟一起接下来的，后面又找的之前公司同事做设计，做的不错

项目做完出去溜溜

找一起合作做项目的兄弟玩了，水平不错的
有本地人带着吃了顿真正的淄博烧烤，去古城逛了逛

路过潍坊，看到白浪河干了，说是被人工抽走的，潍坊要建地铁了？

小宠物陆续生崽

狗子，老猫，鸭子的小崽子们都出生了，日子越来越有盼头了

最后

今天写下总结，感觉1年时间也没多久，日子过得飞快。
总有人问我不工作么，实话讲工作没有意义，自己接单无非累点，倒也不至于饿死，留出来的闲空是很多的，目前感觉比上班划算（大概是我上班工资太低了）
今年年初就准备不找工作了，想做的事挺多的，最近准备抽出空来去深圳逛逛，因为机票300就能飞，还有其他原因…？还没想好😅
立志不到弹尽粮绝不找工作！

选择一个靠谱的表单编辑器，然后实现表单的数据处理是不得不深入研究的问题。

总的来说，自定义表单程序至少需要：设计器（支持拖拉拽修改各种参数）、数据管理（用户填写的表单数据进行处理）

展示层面

表单展示层面分为后台设计表单和用户填写表单页面。

表单编辑器 form-create

经过调研，我决定使用这款表单生成组件：form-create。

对，他是个组件，读取配置列表就可以生成不同类型的表单项，这种方式存储方便，展示也方便（没涉及复杂的功能）

form-create 是一个可以通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的表单生成组件。支持5个UI框架，并且支持生成任何 Vue 组件。内置20种常用表单组件和自定义组件，再复杂的表单都可以轻松搞定。

form-create: xaboy/form-create: 强大的动态表单生成器|form-create is a form generation component that can generate dynamic rendering, data collection, verification and submission functions through JSON. (github.com)

项目简介中说到：支持5个UI框架，分别是：

• element-plus
• ant-design-vue
• naive-ui
• arco-design
• tdesign

嗯，没有小程序版本，我们用的小程序是Vue3 + uniapp，项目作者虽说后续会支持小程序，但是我们等不了他了，自己手动实现好了。

实现思路大概是：编辑出来表单JSON，前台去读取渲染

其中作者实现了编辑器，通过form-create组件去渲染表单。

form-create-designer: xaboy/form-create-designer: 好用的vue可视化表单设计器 (github.com)

编辑器预览的样式是element-ui的，无所谓，我们用的是小程序，能生成配置，让我们小程序读到就可以了。

输入框JSON格式示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

{
    type: "input",
    title: "商品名称",
    //label名称
    field: "goods_name",
    //字段名称
    value: "",
    //input值,
    props: {
      "type": "text",
      //输入框类型，可选值为 text、password、textarea、url、email、date
      "clearable": false,
      //是否显示清空按钮
      "disabled": false,
      //设置输入框为禁用状态
      "readonly": false,
      //设置输入框为只读
      "rows": 4,
      //文本域默认行数，仅在 textarea 类型下有效
      "autosize": false,
      //自适应内容高度，仅在 textarea 类型下有效，可传入对象，如 { minRows: 2, maxRows: 6 }
      "number": false,
      //将用户的输入转换为 Number 类型
      "autofocus": false,
      //自动获取焦点
      "autocomplete": "off",
      //原生的自动完成功能，可选值为 off 和 on
      "placeholder": "请输入商品名称",
      //占位文本
      "size": "default",
      //输入框尺寸，可选值为large、small、default或者不设置,
      "spellcheck": false,
      //原生的 spellcheck 属性
      "required": false,
    },
    validate: [{
      required: true,
      message: '请输入商品名称',
      trigger: 'blur'
    }
  ]
}

其中props在编辑器面板右侧可以编码处理，这个是我定义的姓名表单项：用户可以配置placeholder，是否可清空，是否禁用，是否只读……. 当然你可以加任何属性，业务上的也不耽误渲染。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

import uniqueId from '@form-create/utils/lib/unique'
import { localeProps, makeRequiredRule, makeHiddenRule } from '@/utils'
import phoneCmp from '@/components/form-item/phone.vue'
const label = '姓名'
const name = 'name'

export default {
  icon: 'icon-input',
  label,
  name,
  rule({ t }) {
    return {
      type: name,
      field: uniqueId(),
      title: label,
      info: '',
      $required: false,
      props: {},
    }
  },
  component: phoneCmp,
  props(_, { t }) {
    return localeProps(t, name + '.props', [
      makeRequiredRule(),
      {
        type: 'input',
        field: 'placeholder',
        title: '输入框占位文本',
      },
      { type: 'switch', field: 'clearable', title: '是否可清空' },
      { type: 'switch', field: 'disabled', title: '禁用' },
      { type: 'switch', field: 'readonly', title: '是否只读' },
    ])
  },
}

uniapp 小程序端

小程序端因为设计器没有实现UI库适配，我使用相对稳定一些的uni-ui，相对比其他的功能少点，样式差点，不过这都不重要。

基本上，拿到了配置后走个v-for循环渲染一下表单项就可以了，大概是：

1
2
3
4
5
6
7
8
9
10
11

<!-- diy-form -->
<template>
  <uni-forms ref="baseFormRef" label-position="top" :rules="diyRules" :modelValue="diyFormPayload">
    <formItem
      v-for="item in formList"
      :key="item.id"
      :field="item"
      @change-data="changeOtherData"
    />
  </uni-forms>
</template>

uni-forms可以接收我自定义的rule，表单规则是根据生成的配置进行生成的，在尽量适配uni-ui的方式去实现，比如required，邮箱、身份证、手机号之类的验证，都是根据表单项中的参数来确定的。

对于表单项组件，为各种表单项添加v-if进行类型判断分别渲染。

重点说一下数据的流动：

uni-forms动态传入的rule，需要在onReady之后触发setRules()方法（最早要晚于ready）。

所以在生成自定义rule后要调用一下setRules()，但是请求可能早于onReady，那就在onReady同时调用一次即可。

1
2
3
4
5
6

onReady(() => {
  initForm()
})
watch(formList, () => {
  initForm()
})

从diy-form传来的field，经过computed处理一层统一适配form-item

1
2
3
4
5
6
7
8
9
10
11
12
13

// form-item.vue
const _field = computed(() => {
  const field = props.field
  return {
    ...field,
    ...(field?.props || {}),
    required: field.$required != false,
    readonly: field?.props?.readonly,
    disabled: field?.props?.disabled || field?.props?.readonly || false,
    placeholder: field?.props?.placeholder || `请输入${field.title}`,
    type: field.type
  }
})

这里的formVal是要绑定到表单项的，表单项的值要通过刚才说的uni-forms中绑定的modelValue中获取，所以为了不用统一传递，我直接从uni-forms中读取了。

修改也同样，直接改uni-forms中的modelValue即可。

1
2
3
4
5
6
7
8
9
10
11

const emit = defineEmits(['changeData'])
const formVal = computed({
  get: () => {
    const form = inject<any>('uniForm')
    let formVal = form._getDataValue(_field.value.field, form.localData)
    return formVal
  },
  set: (val) => {
    emit('changeData', _field.value.field, val)
  }
})

最后，给diy-form组件暴露两个方法：验证表单和更新表单数据。

1
2
3
4
5
6
7
8

defineExpose({
  validate: async () => {
    // 验证表单规则，最终返回用户表单数据
  },
  updateData: (data) => {
    // 更新表单中的值
  }
})

数据管理

关于结构，分为：Form(表单模型)，FormField(表单模型字段)，FormVal(表单数据主表)，FormFieldVal(表单字段数据)

使用到的工具：drawDB

其中表单模型存放表单主体，表单模型字段存储该表单中的所有字段
表单数据主表存放每个用户的表单数据，表单字段数据存放用户实际填写的表单数据

数据存储

前台获取表单时，查询表单模型所关联的业务ID，对应根据表单模型查出相应字段。
提交表单时，组装表单字段和表单值，后端通过前台提交的表单字段中的key查询对应表单字段，该key是自定义表单随机生成的，具有唯一性。整理后一同放入表单数据主表和字段数据表中。

后台编辑表单时，同样的对表单模型和表单模型字段联表管理。
查看用户表单数据，对表单数据主表和表单字段数据联表查出即可。

另外，对于前端提交的表单，需要进行规则验证，这里采取的方法是按照表单字段表中的type进行分类，去映射thinkphp自带规则以及自定义的规则，比较简单不贴代码了。

更新表单字段

对于后台编辑表单字段，保存时，有几种情况：

• 仅修改排序、字段属性
• 删掉表单某个字段
• 新增字段

最开始思路是直接把旧字段全部删掉，然后把现有字段添加上去。
但这样会导致问题：之前填写过的数据将会全都查不出来。
我们希望删掉的字段查不出来无所谓，但是没删过的数据要能查到。
所以加个diff：新与旧比较

• 现有字段则更新
• 新字段没有则删掉
• 新字段多出来则添加

附上代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70

/**
 * 更新表单字段
 */
public function updateFormField($payload)
{
    $form_id = $payload['form_id'];
    $form_list = $payload['form_list'];
    
    $formFieldDao = new FormField();
    // 查询之前所有的字段，如果存在则更新，不存在则删除
    $lastFields = $formFieldDao->where('form_id', $form_id)->select();

    // 计算新增字段，旧字段中不存在的新字段
    $newFields = [];
    foreach ($form_list as $idx => $item) {
        if (in_array($item['field'], array_column($lastFields, 'key'))) {
            continue;
        }
        $newFields[] = $item;
    }
    // newFields一定是新增的
    foreach ($newFields as $field) {
        $formFieldDao
          ->allowField(true)
          ->insert([
            'type' => $field['type'],
            'form_id' => $form_id,
            'sort' => $idx,
            'key' => $field['field'],
            'createtime' => time(),
            'payload' => json_encode($field, JSON_UNESCAPED_UNICODE),
        ]);
    }
    foreach ($form_list as $idx => $item) {
        // 此处更新
        $formFieldDao
          ->where('form_id', $form_id)
          ->where('key', $item['field'])
          ->update([
            'payload' => json_encode($item, JSON_UNESCAPED_UNICODE),
            'sort' => $idx
        ]);
        // 过滤掉更新过的
        $lastFields = array_filter($lastFields, 
          function ($field) use ($item) {
            return $field['key'] != $item['field'];
        });
    }
    // lastFields一定是删除的
    foreach ($lastFields as $field) {
        $formFieldDao->where('id', $field['id'])->delete();
    }
    
    // 旧版直接删掉之前的数据，然后添加新数据（已废弃）
    // if (isset ($form_id) && $form_id != '') {
    //     $formFieldDao->where('form_id', $form_id)->delete();
    // }
    // $toInsertData = [];
    // foreach ($form_list as $idx => $item) {
    //     $toInsertData[] = [
    //         'type' => $item['type'],
    //         'form_id' => $form_id,
    //         'sort' => $idx,
    //         'key' => $item['field'],
    //         'createtime' => time(),
    //         'payload' => json_encode($item, JSON_UNESCAPED_UNICODE),
    //     ];
    // }
    // $formFieldDao->allowField(true)->insertAll($toInsertData);
}

总结

关于后台编辑表单这里，最完美的解决方案应该是表单项删掉也不会导致查不出来数据，这让我想到直接隐藏即可，不是假删除，而是隐藏字段，后台也能看到被隐藏的字段，不过是前台不显示而已。
客户说存储空间有限，做成强制删除的，留一个隐藏按钮。作为两个方案的混合方案，这就结束了。

不足的地方：

• 表单规则应该支持自定义
• 适配更多字段
• 表单页面性能优化
• 后端安全防范

文档说明：

异常处理 · ThinkPHP5.1完全开发手册 · 看云 (kancloud.cn)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

// \thinkphp\helper.php
if (!function_exists('abort')) {
    /**
     * 抛出HTTP异常
     * @param integer|Response      $code 状态码 或者 Response对象实例
     * @param string                $message 错误信息
     * @param array                 $header 参数
     */
    function abort($code, $message = null, $header = [])
    {
        if ($code instanceof Response) {
            throw new HttpResponseException($code);
        } else {
            throw new HttpException($code, $message, null, $header);
        }
    }
}

调用thinkphp的abort函数可以方便地创建HTTP异常，从这里入手，看一下thinkphp是怎么处理http异常的。

这里通过$code区分了一下，相当于是实现了函数重载，$code参数是404，走HttpException。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

class HttpException extends \RuntimeException
{
    private $statusCode;
    private $headers;

    public function __construct($statusCode, $message = null, \Exception $previous = null, array $headers = [], $code = 0)
    {
        $this->statusCode = $statusCode;
        $this->headers    = $headers;

        parent::__construct($message, $code, $previous);
    }
    // ...
}

初始化之后，会自动被think\exception\Handle处理，调用内部render方法，

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

<?php
namespace think\exception;

class Handle
{
    /**
     * Render an exception into an HTTP response.
     *
     * @param  \Exception $e
     * @return Response
     */
    public function render(Exception $e)
    {
        if ($this->render && $this->render instanceof \Closure) {
            $result = call_user_func_array($this->render, [$e]);
            if ($result) {
                return $result;
            }
        }

        if ($e instanceof HttpException) {
            return $this->renderHttpException($e);
        } else {
            return $this->convertExceptionToResponse($e);
        }
    }

    /**
     * @param HttpException $e
     * @return Response
     */
    protected function renderHttpException(HttpException $e)
    {
        $status   = $e->getStatusCode();
        $template = Config::get('http_exception_template');
        if (!App::$debug && !empty($template[$status])) {
            return Response::create($template[$status], 'view', $status)->assign(['e' => $e]);
        } else {
            return $this->convertExceptionToResponse($e);
        }
    }

}

此时通过异常类型的判断，继续走renderHttpException，这个方法已经能够说明问题了，如果当前不是debug模式并且能够匹配到有对应模板，则会去找对应模板输出。显然我这里是走了else了，输出App::$debug值为'1'，但是我明明设置了$debug=false。继续查看$debug来源，发现初始化$debug是这样的：

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<?php
class App
{
    public static function initCommon()
    {
        // 初始化应用
        $config       = self::init();
        self::$suffix = $config['class_suffix'];

        // 应用调试模式
        self::$debug = Env::get('app_debug', Config::get('app_debug'));
// ...
    }
}

先读取env，再读取config.php，哦原来是我config.php写死之后，.env文件没有删掉。

在thinkphp官方文档其实有写：

环境变量中设置的APP_DEBUG和APP_TRACE参数会自动生效（优先于应用的配置文件），其它参数则必须通过Env::get方法才能读取。

使用Next.js开发博客平台的主要步骤

1. 使用Next.js创建项目

   使用pnpm create next-app命令可以快速创建一个Next.js项目。

2. 设计目录结构

   使用Next.js提供的app目录结构。

3. 实现Markdown解析

   可以使用next-mdx-remote等MDX解析库,将MDX文件解析为ReactNode。

4. 静态页面生成

   使用generateStaticParams实现文章静态页生成。

5. 添加样式

   可以使用SASS或tailwindcss给博客及mdx元素添加样式。

6. 部署上线

   可以部署到Vercel、Netlify等平台上。

Next.js的静态生成和路由功能可以方便实现一个简单的博客平台。

项目初始化

1

pnpm create next-app

默认创建的项目是nextjs 13.4版本(2023-7-20)，是最新使用app router的版本，相较于之前page router有些改动。

目录结构

由于我的文章文件名都是中文的，不利于网页的SEO，所以我为每一个文章通过文件名生成唯一id，使用id作为文章的路由。
目录结构大致是：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

app:
├─(site)
│  │  layout.tsx
│  │  page.tsx
│  │
    # 文章列表页
│  └─post
│      │  header.tsx
│      │  layout.tsx
│      │  page.tsx
│      │
        # 文章详情页
│      └─[slug]
│              not-found.tsx
│              page.tsx
│
└─data
        # 解析mdx文件
        post.ts

src:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

├─assets
│  │  globals.scss
│  │  md-el.scss
│  │
│  └─icons
│
├─components

├─lib
│      mdx.ts
│
├─posts
│      《函数式编程指北》练习题速通指南.mdx
│      使用chatgpt编写小说.mdx
│
└─utils

实现Markdown解析

实现了两个函数，获取所有meta数据和获取文章内容。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

const rootDirectory = path.join(process.cwd(), 'src', 'posts')

// 通过文件名获取文章
export const getPostBySlug = async (slug: string) => {
  const realSlug = slug.replace(/\.mdx$/, '')
  const filePath = path.join(rootDirectory, `${realSlug}.mdx`)

  const fileContent = fs.readFileSync(filePath, { encoding: 'utf8' })
  const { data, content } = matter(fileContent)

  const id = crc32(realSlug).toString(16)

  return { meta: { ...data, slug: realSlug, id, readingTime: readingTime(content) }, content: fileContent } as PostDetail
}

// 获取所有文章meta数据
export const getAllPostsMeta = async () => {
  const files = fs.readdirSync(rootDirectory)

  let metas = await Promise.all(files.map(async filename => {
    const { meta } = await getPostBySlug(filename)
    return meta
  }))
  return metas
}

// 通过id获取文章详情
export const getPost = async (id: string) => {
  // id to slug
  const slug = await getPostName(id);
  if (!slug) throw new Error('not found')
  const post = await getPostBySlug(slug)
  return post
}

关于生成文章唯一id，我使用了crc32算法，这个算法的特点是速度快，生成的id短，但是会有冲突，不过我觉得这个冲突概率很小，而且我也不会写那么多文章，所以就这样吧。

• 对于文章列表，直接使用getAllPostsMeta获取所有文章的meta数据，然后渲染列表即可。

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55

  interface PostProps { id: number | string title: string desc: string tags: string[] date: string } const Post = ({ ...props }: PostProps) => { const { title, desc: content, tags, date: time, id } = props return ( <div className="post-card"> <Link href={`/post/${id}`}> <div className="post-title"> {title} </div> </Link> <div className="post-content"> {content} </div> <div className="post-footer"> <TimeBar time={time} /> <div className="post-footer__tag"> { tags.length <= 0 && <Tag val={'未归档'} /> } { tags.map((tag, idx) => { if (idx > 3) return null; return <Tag key={tag} val={tag} /> }) } { tags.length > 3 && <Tag isMore /> } </div> </div> </div> ) } export default async function PagePostList() { const posts = await getPostList() return ( <div className="post-list"> { posts.map(post => { return <Post key={post.id} {...post} /> }) } </div> ) }

• 对于文章详情页，通过id获取文章内容，将内容传入MDXRemote组件中，然后渲染即可。

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

  import { MDXRemote } from 'next-mdx-remote/rsc' export default async function Post({ params, }: { params: { slug: string }; }) { try { const postPayload = await getPost(params.slug) return <> <div className="post-detail"> {/* ... */} {/* 文章内容 */} <div className="markdown-body w-full break-words whitespace-normal "> <Suspense fallback={<>Loading...</>}> {/* @ts-ignore */} <MDXRemote source={postPayload.content} options={{ parseFrontmatter: true, }} components={components} /> </Suspense> </div> {/* ... */} </div> </> } catch (e) { return notFound() } }

静态页面生成

在post/[slug]/page.tsx中，通过导出generateStaticParams函数，可以实现静态页面生成(app router)。
在app router中，生成静态页面路径的函数已经由原来的getStaticPaths改为generateStaticParams

1
2
3
4
5
6

export async function generateStaticParams() {
  const metas = await getAllPostsMeta()
  return metas.map(meta => {
    return { slug: meta.id }
  })
}

添加样式

mdx文件中的元素，可以通过components属性传入<MDXRemote />组件，然后在components对象中添加样式。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

const components = {
  // 代码高亮
  code: CodeBlock,
  img: Image,
  // 为其元素添加自定义类名
  h1: tagRenderer('h1'),
  h2: tagRenderer('h2'),
  h3: tagRenderer('h3'),
  h4: tagRenderer('h4'),
  h5: tagRenderer('h5'),
  h6: tagRenderer('h6'),
  p: tagRenderer('p'),
  a: tagRenderer('a'),
  blockquote: tagRenderer('blockquote'),
  table: tagRenderer('table'),
  thead: tagRenderer('thead'),
  tbody: tagRenderer('tbody'),
  tr: tagRenderer('tr'),
  th: tagRenderer('th'),
  td: tagRenderer('td'),
  em: tagRenderer('em'),
  strong: tagRenderer('strong'),
  del: tagRenderer('del'),
}

总结

app router用起来感觉别扭，比如文章生成那块，默认的MDXRemote组件并不是RSC(react-server-component)，导致外面引用该组件的组件必须使用’use client’，因为nextjs在服务端渲染不了useState函数，这样就导致了组件的复用性变差，不过这个问题可以通过自定义MDXRemote组件解决，官方示例有提供方法，这样就不如page router方便了。

另外，使用motion添加动画效果的时候，必须添加’use client’，这样就导致了动画效果在服务端渲染的时候不会生效，这个问题我还没想到解决方法。

先看一下目前情况，原项目是在网上看到的，发现箱顶的旋转有些诡异，决定练练手，看看能不能改进一下。

原项目链接：wrongakram/React-Three-Minecraft-Chest: Using React Three Fiber we will make a minecraft chest (github.com)

快速预览：React App (react-three-minecraft.netlify.app)

目标：将箱顶旋转改为贴合箱子旋转

网上找到两种方法，一种是通过计算旋转后的物体位置，然后设置对应position，这种比较麻烦，
[vue使用three.js实现盒子上下左右开关门的效果](https://blog.csdn.net/qq_39165556/article/
details/91870533)

另一种是将外部包一层group后，设置mesh的相对位置，然后只需要旋转外部的group就可以了，这个比较巧妙，我决定使用第二种。
首先将箱盖包裹起来，这里用group包裹，将group的position设置为0，0，0，然后将group的position设置为箱子的顶部位置，这样就可以通过旋转group来实现箱子的开合效果了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

return (
    <a.group
      position={[0, -0.99, 0]}
      onClick={handleAnimation} ref={group} {...props} dispose={null}>
      {/* 包裹原有mesh，将位置设置为原mesh位置 */}
      <a.group
        position={[
          -1.4557723082564422e-11,
          1.7300409078598022,
          -0.9812345504760742
        ]}
        rotation={chestOpen.rotation}
      >
        {/* 仅仅用来展示group位置 */}
        <a.mesh
          position={[0, 0, 0]}
        >
          <boxBufferGeometry attach="geometry" args={[1, 1, 1]} />
          <meshBasicMaterial color={0x000000} wireframe />
        </a.mesh>
        {/* 箱盖 */}
        <a.primitive object={nodes.Bone001}
          position={[0, 0, 0]}
        />
      </a.group>
      {/* 箱子体 */}
      <primitive object={nodes.Bone} />

      <skinnedMesh
        castShadow
        receiveShadow
        material={materials.Material}
        geometry={nodes.Cube.geometry}
        skeleton={nodes.Cube.skeleton}
      />
    </a.group>
  );

先看一下当前的效果

线框代表group，现在只需要将group向左下方移动，然后将mesh复原回原来的位置就可以了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

return (
  <a.group
    position={[0, -0.99, 0]}
    onClick={handleAnimation} ref={group} {...props} dispose={null}>
    <a.group
      position={[
        -1.4557723082564422e-11 - offset,
        1.7300409078598022 - offset,
        -0.9812345504760742
      ]}
      rotation={chestOpen.rotation}
    >
      <a.mesh
        position={[0, 0, 0]}
      >
        <boxBufferGeometry attach="geometry" args={[1, 1, 1]} />
        <meshBasicMaterial color={0x000000} wireframe />
      </a.mesh>

      <a.primitive object={nodes.Bone001}
        position={[offset, offset, 0]}
      />
    </a.group>
    <primitive object={nodes.Bone} />

    <skinnedMesh
      castShadow
      receiveShadow
      material={materials.Material}
      geometry={nodes.Cube.geometry}
      skeleton={nodes.Cube.skeleton}
    />
  </a.group>
);

最终效果：

在v站看过有v友写的vite插件，用于编写油猴脚本的，一直想拿来用用，今天成功把阿里云盘树状目录跑起来了。

创建项目

1

pnpm create monkey

我选择vanilla-ts模板，因为脚本很简单。

安装依赖

用到的模块：

• jQuery 管理dom
• jQuery.fancytree 展示列表

重点：
这俩模块需要处理一下，因为咱用到了vite，配置vite进行正确地编译。

关于常见的模块格式

• CommonJS（通用模块规范）是一种用于服务器端JavaScript的模块系统。它的目标是使JavaScript能够在不同的环境中共享和重用代码。在CommonJS中，模块使用require函数导入，使用module.exports或exports对象导出。
• UMD（通用模块定义）是一种兼容多种模块系统的模块格式。它可以在浏览器环境和服务器环境中使用。UMD模块首先检测是否支持AMD模块，如果不支持，则检测是否支持CommonJS模块，最后，如果都不支持，则将模块作为全局变量导出。
• AMD（异步模块定义）是一种用于浏览器端JavaScript的模块系统。它的设计目标是在浏览器中异步加载模块，以提高性能。AMD模块使用define函数定义模块，并使用require函数异步加载依赖模块。
• IIFE（立即调用函数表达式）是一种常见的JavaScript模块模式，它使用函数作用域来封装代码，并立即执行该函数。这种模式可以用于创建私有作用域，避免变量冲突，并将部分代码暴露给全局作用域。
• ESM（ECMAScript模块）是一种现代的JavaScript模块系统，它是ECMAScript标准的一部分，从ES6（ES2015）开始引入。ESM模块使用import语句导入模块，使用export关键字导出模块。ESM模块可以在浏览器和服务器环境中使用，并且可以进行静态分析和优化。

下面分别解释vite在dev模式和prod模式中的区别：

1
2
3
4
5
6
7
8
9
10

在 Vite 中，开发模式（dev）和生产模式（prod）之间的区别主要体现在打包工具和模块规范上。

开发模式（dev）：
打包工具：在开发模式下，Vite 使用了一种称为「原生 ESM」的打包方式。它利用浏览器原生的 ES Modules 支持，不进行传统的打包和捆绑操作。这意味着每个模块都是作为一个独立的文件进行加载，而不是将所有模块合并为一个或多个捆绑文件。
模块规范：在开发模式下，Vite 支持 ES Modules（ESM）规范，你可以使用 import 和 export 来导入和导出模块。此外，Vite 也支持 CommonJS 规范，因此你可以使用 require 和 module.exports。

生产模式（prod）：
打包工具：在生产模式下，Vite 使用 Rollup 作为打包工具。Rollup 是一个优化的 JavaScript 模块打包器，它会将应用程序的模块捆绑成更小、更高效的文件。
模块规范：在生产模式下，Vite 会将所有模块转换为符合 ES Modules（ESM）规范的代码，并且会进行代码压缩、混淆和优化，以减小文件大小并提高加载性能。这意味着你只能使用 import 和 export 来导入和导出模块，而不支持 CommonJS 规范。
总结起来，开发模式下的 Vite 使用原生 ESM 打包方式和支持多种模块规范，而生产模式下的 Vite 使用 Rollup 打包工具，并且只支持 ES Modules（ESM）规范。这种区别使得开发者可以在开发过程中享受到更快的冷启动和模块热替换等优势，并在生产环境中获得更高的性能和优化的代码。

• 在开发模式时，通过pnpm安装jquery和jquery.fancytree，两个模块都是支持esm导入的
• 在生产模式时，将jquery和jquery.fancytree都定义在vite-plugin-monkey的externalGlobals中，在此定义后，意味着该模块不经过处理而直接放到油猴脚本中的@require中，作为cdn依赖

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    // 将 jQuery 注入到每个模块中
    inject({
      $: "jquery",  // 这里会自动载入 node_modules 中的 jquery
      jQuery: "jquery",
      'jquery.fancytree': 'jquery.fancytree',
    }),

    monkey({
      entry: 'src/main.ts',
      userscript: {
        icon: 'https://vitejs.dev/logo.svg',
        namespace: 'npm/vite-plugin-monkey',
        match: ['https://www.aliyundrive.com/s/*'],
      },
      build: {
        // 替换外部依赖为头部@require
        externalGlobals:{
          jquery: $.concat(
            await util.fn2dataUrl(() => {
              // @ts-ignore
              window.jQuery = window.jquery = $;
            })
          ),
          'jquery.fancytree': fancytree,
        },
        externalResource: {
          'jquery.fancytree/dist/skin-lion/ui.fancytree.css': cdn.bootcdn()
        }
      }
    }),
  ],
  build: {
    commonjsOptions: {
      // 支持 commonjs 的 require
      transformMixedEsModules: true
    }
  }
});

模块中css引用相对路径资源问题

其中遇到了些问题，需要先了解dev模式下，vite-plugin-monkey是如何做到热更新的？
https://github.com/lisonge/vite-plugin-monkey/discussions/72

作者说到：脚本dev模式下生成的代码，实际更新只在脚本服务器中更新，插件页面上用到的环境是脚本服务器的

1
2
3
4
5
6
7
8
9
10
11
12
13
14

;(({ entrySrc = `` }) => {
  window.GM;
  document.__monkeyWindow = window;
  console.log(`[vite-plugin-monkey] mount monkeyWindow to document`);
  const entryScript = document.createElement("script");
  entryScript.type = "module";
  entryScript.src = entrySrc;
  document.head.insertBefore(entryScript, document.head.firstChild);
  console.log(`[vite-plugin-monkey] mount entry module to document.head`);
})(...[
  {
    "entrySrc": "http://127.0.0.1:5173/__vite-plugin-monkey.entry.js"
  }
]);

同时这也造成一个问题，在模块中引入的图片路径是相对/目录时，相对的是浏览器中的根目录，而不是脚本服务器的。
从而导致我的图片加载失败。

解决方案就是写一个链接替换插件，将原来指向根目录的链接替换为脚本服务器的链接。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

function modifyCssUrlsPlugin() {
  let rootUrl = '/'
  return {
    name: 'modify-css-urls',
    configureServer(_server) {
      rootUrl = 'http://' + server.config.server.host + ':' + server.config.server.port;
    },
    transform(code, id) {
      if (id.endsWith('.css')) {
        // 读取 CSS 文件内容
        const cssContent = code;
        // 修改 CSS 文件中的 URL 相对路径
        const modifiedCssContent = cssContent.replace(/url\((.*?)\)/g, (match, sourceUrl) => {
          // 处理 URL 相对路径
          const modifiedUrl = resolveRelativeUrl(rootUrl, sourceUrl);
          return `url(${modifiedUrl})`;
        });

        // 返回修改后的 CSS 代码
        return {
          code: modifiedCssContent,
          map: null, // 如果需要生成 Source Map，请配置正确的 Source Map
        };
      }
    },
  };
}
// vite.config.ts
export default defineConfig({
  plugins: [
    modifyCssUrlsPlugin(),
    // ...
  ]
})

问题成功解决！

效果预览

【AI孙燕姿】《遥远的歌》Cover 刘惜君_哔哩哔哩_bilibili
这位up主训练的不错，我的耳朵听不出来是AI唱的，而且还有孙燕姿的风格。

准备工作

• 安装Python，并配置环境变量 (本人使用python3.10)
• 人声提取：Ultimate Vocal Remover - ultimatevocalremover.com/
  https://github.com/Anjok07/ultimatevocalremovergui
• so-vits-svg GUI：so-vits-svc-fork/README_zh_CN.md at main · voicepaw/so-vits-svc-fork · GitHub，直接点击.bat下载
  打开bat可能出现访问不了huggingface，需要给终端配置代理

  1 2 3 4 5

  # 编辑终端配置文件 code $PROFILE # 将以下内容添加到文件末尾，端口需要根据你的代理软件设置，我这是clash $env:http_proxy="http://127.0.0.1:7890" $env:https_proxy="http://127.0.0.1:7890"

• 孙女士声音模型可在该博客下载：AI天后,在线飙歌,人工智能AI孙燕姿模型应用实践，复刻《遥远的歌》，原唱晴子(Python3.10)-刘悦 (v3u.cn)，下载后解压，得到config.json和G_27200.pth

开始制作

1. 首先下载你想让AI唱的歌，然后使用人声提取软件ltimate Vocal Remover提取人声
   
   如图，选择输入音频和输出位置，使用默认模型，点击Start，等待提取完成。

2. 双击bat文件打开so-vits-svg GUI
   
   选择模型和配置文件，选择刚才提取的人声，点击infer，等待生成完毕。

推理结束后就可以在输出目录那里看到孙女士唱的歌了。

项目地址

https://github.com/mshumer/gpt-author

使用方法

由于作者提供的代码是直接使用gpt4.0的，没有适配gpt3.5，所以在issue里有人提供了适配gpt3.5的代码，另外添加了多语言翻译。
issue: https://github.com/mshumer/gpt-author/issues/1#issuecomment-1602105017
进入colab后，点击标题栏复制到云端硬盘，将代码保存一份避免丢失。

在第一段代码中填写openai.api_key和stability_api_key，openai用于生成小说内容，stability用于生成封面。

1
2
3
4
5
6
7
8
9
10
11
12
13

!pip install openai --quiet
!pip install EbookLib --quiet

import openai
import os
from ebooklib import epub
import base64
import os
import requests


openai.api_key = "ENTER OPENAI KEY HERE"       # get it at https://platform.openai.com/
stability_api_key = "ENTER STABILITY KEY HERE" # get it at https://beta.dreamstudio.ai/

代码下方有一个setting面板，修改model（默认gpt-3.5-turbo-16k），num_chapters（想生成多少章的小说）…
其中destLanguage是翻译语言，可以设置为zh-cn，这样生成的小说就是中文的了。
更多语言请执行第3段代码，查看支持的语言。

1
2
3

# To find the language code to use in the cell form above.
for key, value in LANGUAGES.items():
    print(f"Code: {key}\t Language: {value}")

我这里测试gpt3.5，生成18章小说就会报错：InvalidRequestError: This model's maximum context length is 8192 tokens
这是我的设置：

myModel:
gpt-3.5-turbo-16k
num_chapters:
18
novelStyle:
写实主义和现实主义的结合
author:
GPT-Author
prompt:
一个普通的上班族，因为一次意外事件而失去了工作，他决定改变自己的生活，追求自己真正的梦想，并在困境中找到了新的机会和意义。
writing_style:
简洁明快，语言流畅自然。运用恰如其分的描写和对话，使得故事情节紧凑而引人入胜。叙述方式富有情感，能够深入人心，让读者对故事中的人物和事件产生共鸣，在小说中巧妙地融入一些哲学思考和社会观察。通过人物的内心独白和对社会现象的揭示，探讨了个人命运与社会环境的关系，引发读者对生活意义和社会问题的思考
destLanguage:
zh-cn

问题解决

执行中可能会出现以下问题：

1. 报错SyntaxError: invalid character ‘：’ (U+FF1A)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

step cost: 0.004595
step cost: 0.00587
step cost: 0.006504
step cost: 0.0024980000000000002
Generating storyline with chapters and high-level details...
step cost: 0.005292
step cost: 0.009691
Traceback (most recent call last):

  File "/usr/local/lib/python3.10/dist-packages/IPython/core/interactiveshell.py", line 3553, in run_code
    exec(code_obj, self.user_global_ns, self.user_ns)

  File "<ipython-input-19-ce40d1d73907>", line 1, in <cell line: 1>
    novel, title, chapters, chapter_titles = write_fantasy_novel(prompt, num_chapters, writing_style)

  File "<ipython-input-18-0c9dea3b0c8c>", line 168, in write_fantasy_novel
    chapter_titles = ast.literal_eval(storyline)

  File "/usr/lib/python3.10/ast.py", line 64, in literal_eval
    node_or_string = parse(node_or_string.lstrip(" \t"), mode='eval')

  File "/usr/lib/python3.10/ast.py", line 50, in parse
    return compile(source, filename, mode, flags,

  File "<unknown>", line 1
    这是我重写后的故事情节：
               ^
SyntaxError: invalid character '：' (U+FF1A)
在generate_storyline的prompt内添加`Just provide the code without replying`

2. This model’s maximum context length is 16385 tokens. However, your messages resulted in 16407 tokens. Please reduce the length of the messages

调小num_chapters，或者换个model

通常，图片加载失败会有一个默认的图片，但是如果默认图片也加载失败，就会导致死循环。

1

<img src="http://www.abc.com/1.jpg" onerror="this.src='http://www.abc.com/2.jpg'">

上述代码，如果2.jpg加载失败，则会走图片的onerror回调，再次加载2.jpg，如果2.jpg还是加载失败，就会再次走onerror回调，再次加载2.jpg，如此循环，浏览器就会卡死转圈。

解决方案：

1

<img   src="test.png"  alt="Alt Info" onerror="this.classList.add('error');">

1
2
3
4
5
6
7
8
9
10
11
12

img.error {
    position: relative;
    display: inline-block;
}

img.error::before {
  background: #f5f5f5 url("data:image/svg+xml,%3Csvg class='icon' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cpath d='M304.128 456.192c48.64 0 88.064-39.424 88.064-88.064s-39.424-88.064-88.064-88.064-88.064 39.424-88.064 88.064 39.424 88.064 88.064 88.064zm0-116.224c15.36 0 28.16 12.288 28.16 28.16s-12.288 28.16-28.16 28.16-28.16-12.288-28.16-28.16 12.288-28.16 28.16-28.16z' fill='%23e6e6e6'/%3E%3Cpath d='M887.296 159.744H136.704C96.768 159.744 64 192 64 232.448v559.104c0 39.936 32.256 72.704 72.704 72.704h198.144L500.224 688.64l-36.352-222.72 162.304-130.56-61.44 143.872 92.672 214.016-105.472 171.008h335.36C927.232 864.256 960 832 960 791.552V232.448c0-39.936-32.256-72.704-72.704-72.704zm-138.752 71.68v.512H857.6c16.384 0 30.208 13.312 30.208 30.208v399.872L673.28 408.064l75.264-176.64zM304.64 792.064H165.888c-16.384 0-30.208-13.312-30.208-30.208v-9.728l138.752-164.352 104.96 124.416-74.752 79.872zm81.92-355.84l37.376 228.864-.512.512-142.848-169.984c-3.072-3.584-9.216-3.584-12.288 0L135.68 652.8V262.144c0-16.384 13.312-30.208 30.208-30.208h474.624L386.56 436.224zm501.248 325.632c0 16.896-13.312 30.208-29.696 30.208H680.96l57.344-93.184-87.552-202.24 7.168-7.68 229.888 272.896z' fill='%23e6e6e6'/%3E%3C/svg%3E") no-repeat center / 50% 50%;
}
img.error::after {
    content: attr(alt);
    /** 定位代码 **/
}

来源：

现代图片性能优化及体验优化指南 - 图片资源的容错及可访问性处理 - ChokCoco - 博客园 (cnblogs.com)

图片加载失败后CSS样式处理最佳实践 « 张鑫旭-鑫空间-鑫生活 (zhangxinxu.com)

问题背景

之前遇到的问题：

列表页 跳到 编辑页，编辑完了返回，发现列表页数据没变化，是因为列表页加了keepalive

后来在 列表页 添加了onActivated时刷新数据，现在确实返回列表后能更新了，但是这同时把整个列表清空重新加载了。这时记录列表页进入详情页之前的scroll位置的插件（vue-scroll-behavior）就失效了，因为数据加载需要时间，而滚动是返回后立即滚动的。

或者更简单的，将列表页 keepalive 关掉，实际上和上面情况一样，也是重新刷新页面。

这个就是最终效果：前进刷新后退不刷新

实现原理

仓库地址：JoeshuTT/vue-page-stack-router: 一个 Vue.js 的页面栈路由管理器 (github.com)

闲话不多讲，看看代码

1
2
3
4
5

// index.js
export * from "./injectionSymbols";
export * from "./useApi";

export { createPageStackRouter } from "./pageStackRouter";

index.js中导出createPageStackRouter函数，看看里面咋写的

代码不贴了，讲讲思路算了

• install 中，在afterEach中注册跳转逻辑
• 如果该路由是keep-alive(默认都是)，计算当前路由和上一个路由的position差值，position代表位于页面栈的位置，越靠前越大。
• 根据差值判断pop还是push，如果push则记录当前滚动位置，如果pop则还原滚动位置，并根据路由操作维护一个pageStackList

其中路由router-view组件被替换成了插件中的PageStackRouterView，该组件包装了一层router-view，并根据模块维护的pageStackList来区分是否缓存组件

其实现后退还原位置，而进入刷新页面的方法是：

直接判断当前路由是否属于pageStackList中，如果是，则说明该操作是返回页面，则缓存并还原滚动位置；如果不属于，则说明是进入新页面，不缓存直接刷新走onMounted。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<template>
  <router-view v-slot="{ Component, route }">
    <keep-alive :include="cachedViews">
      <component :is="Component" :key="route.fullPath" />
    </keep-alive>
  </router-view>
</template>

<script>
import { computed } from "vue";
import { usePageStackList } from "../useApi";

export default {
  name: "PageStackRouterView",
  setup() {
    // 取出当前维护的路由栈
    const pageStackList = usePageStackList(); 
    const cachedViews = computed(() => pageStackList.map((v) => v.name));

    return {
      pageStackList,
      cachedViews,
    };
  },
};
</script>

正常看着是没什么毛病的

然而调一下系统缩放，到125%

其中图表的height算法是这样的

1
2

const clientHeight= (window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight)
const lineChartHeight = clientHeight - 475

lineChart:height = 浏览器高度 - header高度

然而实际缩放的时候，header高度并不是写死的475px，所以我的做法是

1
2

const clientHeight= (window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight)
const lineChartHeight = clientHeight - 475 / ratio

页面嵌套问题

正常来说，想要实现返回列表后保留原来位置，需要给列表页面添加keepAlive，保证数据切换页面不会丢失。

因为我在App.vue里面加了

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

// App.vue
<transition :name="$route.meta.transition" duration="300">
    <template v-if="noKeepAliveRoute">
<router-view v-slot="{ Component, route }">
    <component :is="Component" :key="route.path" />
        </router-view>
    </template>
    <template v-else>
        <KeepAlive :max="10">
            <router-view v-slot="{ Component, route }">
            <component :is="Component" :key="route.path" />
            </router-view>
        </KeepAlive>
    </template>
</transition>

并且我确定我的列表页不在noKeepAliveRoute之列，所以是能够缓存列表然后滚动的。

实际却是切换回来修改scrollTop不管改什么值都是0。

随后我在生命周期created中打印个字符串’inited’，切换页面后发现它打印了两遍：第一次一遍，再切页面一遍。

说明该页面没有缓存上。

遂检查路由，发现这个页面嵌了不止一层，所以说，在最近的一层上面加上keep-alive就好了。

动画问题

解决了吗，仍然没有，虽然上面的可以了，但是有些页面还是如以前一样。

我的方法是把源码copy到本地，引入后打断点。

果然，在设置返回列表页面的scrollTop的代码断点中，我发现列表页还没加载出来，还停留在详情页时就执行了。

碍于本人对加载时机极其敏感（写原生写的），这时候列表页面还没加载出来，设置scrollTop一定是无效的，所以应该等页面加载出来再设置scrollTop。

尝试setTimeout发现需要指定一个猜测出来的毫秒数，不过有些页面加载速度不一样，不能用这种土方法。

比较和之前修复的页面的区别，发现该页面添加了页面切换动画，记得动画是先生成了下一组件dom后添加css动画的

果然，现在#app上有两个页面，vueScrollBehavior插件用的querySelector选中元素默认选中了第一个，而第一个是旧的页面，设置旧的页面是没有意义的，我们要设置新的页面。

为了省事，干脆把querySeletor改成querySeletorAll即可。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

vue-scroll-behavior\src\utils\helpers.js
/**
 * Setting Scroll Position
 */
export function setScrollPosition(Vue, position = { x: 0, y: 0 }) {
  const scrollTo = () => {
    Vue.nextTick(() => {
+      const el = document.querySelectorAll(vueScrollBehavior._el)
+      if (el.length) {
+        el.forEach((el) => {
+          el.scrollLeft = position.x
+          el.scrollTop = position.y
+          el.scrollTo(position.x, position.y)
+        })
      }
      else {
        window.scrollTo(position.x, position.y)
      }
    })
  }
  if (vueScrollBehavior._delay > 0)
    setTimeout(scrollTo, vueScrollBehavior._delay)

  else
    scrollTo()
}

问题成功解决了！

程序员面试官揭秘：我是如何刁难候选人的？_哔哩哔哩_bilibili

根据UP主“欲三更”所说，好问题分为下面5类

高区分、多维度、防准备

题目要区分度高，任何人都能答上来两句，但水平不一样说的话也不一样

多维度：既考察思维，又考察经验，问题很宽泛

防准备：答案在网上搜不到，或者说答案不唯一

例如：谈谈你对XX的理解

听面试者回答不仅仅只看答案结果本身，还要看面试者语言组织能力，思维表达是否顺畅，回答的深度在项目中的占位

大体量

答案的体量非常大，甚至能写一本书。看面试者描述答案的系统性、全面性，对答案的前因后果的理解。

例如：我的网页加载很慢，如何优化？

好的回答应该从DNS，缓存，首屏加载优化，优化技巧（懒加载骨架屏预加载），代码裁剪，素材优化，渐进增强开始展开。

而差一点的，明显没有实际研究过的，只会背背网上答案。

面向切面提问

主要看知识的广度和深度。

比如问：react与vue的异同？为什么react需要各种性能优化手段，而vue不需要优化便能有很高的性能？

这通常是不同框架实现的不同，若是对框架有深入思考，回答这类问题就很简单了。

灵魂追问之认知层次

认知层次分为：

记忆->理解->应用->分析->评价->创新

一般问到分析，就可以了解面试者对一类知识的思考深度。

比如：前端路由是什么？是用来解决什么问题？是用什么方式解决问题的？

没有思考过的只知道使用，而不知道其存在的意义，其原理所在。

又如：前端vue-router配置路由表是通过统一定义到route里面，而像nestjs或者springboot是通过装饰器/注解定义到方法上面，比较分散。这两种方式的区别？优缺点？你会选择哪一种实现？理由是？

这类问题没有标准答案，需要言之有理，属于分析层次，类似问市面上竞品优缺点。

STAR分析法

有时候怀疑面试者项目经验造假，只需要问几个问题便知道深浅了。

S：situation情景，你当时为什么做这个项目，当时遇到了什么问题

T：task任务，这个项目的目标是什么，对团队有什么效果

A：action行动，为了实现目标，做了哪些事

R：result结果，项目做完后结果是什么，最好是量化数据

比如：

FAQ项目当时几个客服？每天订单量多少，是否是客服不够用了？这是S

当时做FAQ的目标是什么？这是T

你在FAQ项目中做了哪些事？这是A

FAQ为客服省了多少时间？这是R

提问时不会直接问题目，而是先猜测面试者处于项目中的位置，然后提问问题去验证。

事情经过

暂且将最近做的项目分为系统级项目A，小网页B

A项目在年前（2022年末）就做完了，一直没上线，后面有些新添的需求陆续在加，直到前天拿去青岛交付，主要就是向目标群体展示系统功能，教后台怎么操作。

如你所见，交付时翻车了，比如用户名不管怎么写都会提示重复、打开页面404、打开页面报php500的那种代码堆栈信息、没删干净的图形码（当时登录的获取验证码需要先填图形码，后来给删了，但是没考虑到其他依赖发送验证码的函数，导致发送验证码异常）

不止翻车，从青岛回来还带了一堆新需求回来，一些操作逻辑我们没想到的，或者说他们临时变卦，或者说沟通问题，需求不明确的地方是按照我们想法做的，这次都要给他们加上，或者说改动。

这事老板们知道了，请全技术部去办公室开会，直接就问负责人是谁：当然有我，还有一后端。

然后拿出客户反馈的截图，图上是一个登录界面（宽度特别宽，高度特别扁，这分明就是在电脑端打开的，我们项目是H5的，当时vw适配的）然后他就开始输出了：这是正常人能做出来的吗，我平时用的可不是这样，人家客户心里怎么想……（此处省略一堆唾沫星子）。这就属于胡搅蛮缠了

另外一个是登录界面正常在手机端打开的，说是登录按钮写的“登录/注册”，他找不到注册的地方。实际上我们做的是：如果有账号就登录，没有账号就自动注册。找不到情有可原，我们没有给标注，我背锅好吧。

再有，拿出之前做的项目B，其中关于我们页面留的电话是错的，立即试用跳的链接是错的。同样是一顿输出，再拿出别人网站和我们对比，结果可想而知。后来又扯到招我们进来的时候没走老板面试，直接让技术面的就过来了，以后要改这个。你们不要以为转正了就高枕无忧了，这都做不好，咱自研的项目更做不好。

其他的就是后端问题了，线上bug确实不应该，希望他接受批评认真改正吧，但我同样认为人身攻击不可取，即使是发生这种情况。

我们的态度

老板们叨叨完之后，问我们有什么想说的，我自然是指出客户是用电脑打开的，我们做的是手机端的项目，另外一个想说没插上嘴，算了你强你有理。

后端直接愣住了，不说话。

项目经理：（以下是长话短说版）我觉得沟通有问题，管理有问题，给技术们分配时间不合理。老板：哦哦还有要说的吗？

设计：确实，老板说的有道理，我之前公司要求更高。

回到工位，后端老老实实改bug，别的啥都不干了。

到了下午下班，之前他第一个拔腿就跑，这次说要加班，让我先走吧。我回去也没啥事，在公司找点学习资料看看陪他加班，直到9点，我们回去了。

我的看法

这感觉似曾相识，查了一下和PUA完全对应，与批评不同，PUA会打压弱者，挑弱者毛病，并人身攻击，利用你对他的信任，将黑的说成白的，让你怀疑自己黑的究竟是不是黑，或许真的就是他说的白。目的就是让你接受他的意识，完全按照他的想法来。

我和产品经理是不服的，我们谈论事实，为自己辩解，而不是全盘听老板怎么说，这属于第二阶段了。

后端不知道怎么回事，一句话不说，还加班到9点。

人难免犯错，若是一犯错就被打压、人身攻击，那我们只能谨小慎微，不敢轻易尝试新鲜东西。相反，若是犯了错没有人站出来指正，这个错误便会一直存在。如果一个事物不受到外力作用，那么它的运动轨迹是无法改变的。

为了免于陷入困境，我决定抛弃老板们的看法，就事论事，错了就是错了，没错就是没错，人身攻击什么的我不在乎，我也不是刻意要讨好你。对于错误的我认真改正，正确的我坚决维护

远比PUA恐怖的精神控制，可能就在你身边！3种煤气灯人如何一步步让你沦陷？如何摆脱煤气灯操控！_哔哩哔哩_bilibili

实现思路

类似pubsub，监听attr变化，更新dom
而数据处理部分仅仅需要往attr上写数据，不需要关心dom如何渲染

实现代码

稍微展示一下重点代码

看看界面长什么样吧！

未选中状态

选中状态

可以看到，未选中状态需要展示文本“添加自定义图片”，选中状态需要展示图片和删除按钮
若是直接编写代码，采用命令式的方式，需要判断当前状态，然后根据状态来决定如何渲染dom
这会导致状态切换逻辑混杂DOM操作，使代码不够清晰，不利于维护

而采用数据驱动的方式，只需要往attr上写数据，然后监听attr变化，根据attr的值来渲染dom，这样就可以把状态切换逻辑和DOM操作分离开来，使代码更加清晰

这是DOM结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<div class="editor-image-choice">
  <div class="editor-image--view rounded" style="display: none;">
    <img src="" class="image-view__img" />
    <div class=" init-text text-gray text-xs image-view__text">
      <p>请选择图片</p>
      <p>支持JPG，PNG，GIF</p>
    </div>
    <div class="del-icon image-view__del">
      <img   src="/edit3d/assets/image/icon/del.png"  alt="" >
    </div>
  </div>
  <div class="editor-image--content">
    <div class="editor-image--text">
      <div class="text text-xs text-gray">建议尺寸：50 x 50</div>
    </div>
    <button class="btn btn-primary editor-image--btn choice-logo-image-btn">
      <span class="text-sm">添加图片</span>
    </button>
  </div>
</div>

这里是配合该组件的脚本

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101

/**
 * @typedef Config
 * @property {string} url 初始图片链接
 * @property {Function} onChange 图片链接变更回调
 */
/**
 * @description 实现图片上传选择组件
 * 思路：初始化为容器设置当前选中的链接属性，删除后清空链接属性，上传后设置链接属性
 * 元素属性变更监听器：
 *  判断当前元素属性值
 *    1. 有值：显示图片，隐藏文字
 *    2. 无值：显示文字，隐藏图片
 * 
 * 
 * @param {string} selector 图片容器元素选择器
 * @param {Config} cfg 
**/
export const useImagePicker = (selector, cfg = {}) => {
  const $container = $(selector)
  const $viewContainer = $container.find('.editor-image--view')
  const $viewImg = $container.find('.image-view__img')
  const $viewText = $container.find('.image-view__text')
  const $delIcon = $container.find('.image-view__del')
  const $uploadBtn = $container.find('.editor-image--content .editor-image--btn')
  
  function setImageUrl(url) {
    $container.attr('image-url', url)
  }
  function isImgSetted() {
    return $container.attr('image-url') !== ''
  }
  function setError() {
    $viewContainer.addClass('error')
  }
  function removeError() {
    $viewContainer.removeClass('error')
  }
  // 监听attr变更
  tools.observeDomAttribute(selector, 'image-url', function (url) {
    $viewImg.attr('src', tools.urlResolve(url))
    if (url === '') {
      $viewImg.hide()
      $viewText.show()
      $delIcon.hide()
    } else {
      $viewImg.show()
      $viewText.hide()
      $delIcon.show()
      // 设置了图片后要清除错误状态
      removeError()
    }
    $viewContainer.show()
    // 执行change回调
    cfg.onChange && cfg.onChange(url)
  });
  
  // 初始化
  setImageUrl(cfg.url || '')
  // 上传按钮点击后打开媒体库选择图片，选择后设置当前图片链接状态
  $uploadBtn.click(function () {
    openMediaSourceDialog('image', function (url) {
      console.log('selected', url)
      setImageUrl(url)
    })
  })
  // 删除按钮点击后清空当前图片链接状态
  $delIcon.on('click', function () {
    setImageUrl('')
  })

  return {
    setImageUrl,
    setError,
    isImgSetted
  }
}
// 使用时，只需传入选择器，并且在图片变更时做外部的操作即可
let imgPicker = null
async function initImageView() {
  const imgUrl = await getImgUrl() 
  imgPicker = useImagePicker(".editor-image-choice", {
    url: imgUrl,
    onChange(url) {
      // dosomething(url) ... 
    },
  });
}
// 初始化图片预览框
window.onload = function () {
  initImageView()
}
// 提交时判断是否设置了图片
function onSubmit(){
  const isImgSet = imgPicker?.isImgSetted()
  if (!isImgSet) {
    imgPicker.setError()
    layer.msg("请上传图片")
    return;
  }
  // submit...
}

基本就是这样，感觉很简单有没有？这就是数据驱动的魅力！

推荐了解：⚔️ Cross micro frontends communication 📦 - DEV Community

前端模块间通信方式大致5种：

• web workers
• props & callbacks
• custom events
• pub/sub library
• 结合场景自行实现通信

其中web workers我不经常使用，后面4个皆有在最近做的项目中使用到，简单讲讲用到的场景以及使用感受。

前端模块间通信方式

props & callback

比如父页面弹出iframe子窗口

父传子：父页面打开子窗口之前可以通过设置一个全局变量，子窗口加载时去读全局变量，此时就是最新的数据

子传父：子窗口可以调用父页面的全局函数，将自己内部的数据传回父页面。

1
2
3
4
5
6
7
8
9
10
11
12

// index.html 父页面
window.props = {
    message: 'hello'
}
window.setProps = val => Object.assign({}, window.props, val)
layer.open('./dialog.html');

// dialog.html 子窗口
console.log(parent.props) // hello
parent.setProps({
    message: 'world'
})

优点：这种方式最直接，最容易接受，也是最常见的手段。

缺点：没有工程化框架时（如Vue, React…）只能依赖全局变量共享，全局变量本身带有局限性。

custom event

js原生支持自定义事件，你可以在任何时机发布自己的事件并携带数据。因此，可以使用其进行通信。

父页面：加载API数据到达，向全局发送’data-loaded’事件。

依赖API数据的页面：监听‘data-loaded’，对数据处理。

1
2
3
4
5
6
7
8
9

// main.js
request().then(result => {
    const customEvent = new CustomEvent('data-loaded', { result });
    window.dispatchEvent(customEvent)
});
// card.js
window.addEvevntListener('data-loaded', result => {
    result.map( /* do something... */)
})

优点：不依赖全局变量，不限于框架/原生，因为自定义事件原生支持

缺点：如果监听事件比触发事件晚了（触发事件时还没来得及监听），会导致收不到事件；编码难度较高，需要有代码设计能力。

pub/sub library

依靠基于pub/sub模式的代码库可以轻松实现页面间通信，用的比较顺手的rxjs足够应付大多数场景，最近也用到了其中的subject。

父页面：创建可观察对象，管理数据增删改查，而不关心视图结构。

子页面：订阅可观察对象，依据父页面数据渲染页面。

1
2
3
4
5
6
7
8

// main.js
window.subject = new rxjs.BehaviorSubject([]);
request().then(result => window.subject.next(result))

// card.js
window.subject.subscribe(
val => render(val)
)

优点：简单直接，代码轻量；rxjs本身很强大，可处理复杂场景；

缺点：依赖rxjs增加页面负担；同自定义事件类似

触发事件晚于监听事件解决办法

在RxJS中，可以使用Subject来实现监听者和监听的功能。如果要监听监听者触发监听之前的更新，可以将监听者的更新先存放在一个数组中，然后在Subject进行订阅时，先将存放的更新发送出去，再将Subject本身加入到监听者中，以便后续的更新可以被Subject监听到。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

import { Subject } from 'rxjs';

class Listener {
  private updates: any[] = [];
  private subject = new Subject();

  addUpdate(update: any) {
    this.updates.push(update);
  }

  listen() {
    // 发送之前的更新
    this.updates.forEach((update) => this.subject.next(update));

    // 加入Subject进行后续的监听
    this.subject.subscribe((update) => console.log('update:', update));
  }

  update(update: any) {
    this.addUpdate(update);
    // 触发监听
    this.listen();
  }
}

const listener = new Listener();

// 更新之前，先监听
listener.listen();

// 更新
listener.update('update 1');

// 再次监听
listener.listen();

// 更新
listener.update('update 2');

以上代码来源：ChatGPT 3.5

但是直接使用ReplaySubject即可解决问题，这是ReplaySubject的描述：

ReplaySubject 将对观察者发送全部的元素，无论观察者是何时进行订阅的。

这里存在多个版本的 ReplaySubject，有的只会将最新的 n 个元素发送给观察者，有的只会将限制时间段内最新的元素发送给观察者。 ——ReplaySubject · RxSwift 中文文档 (beeth0ven.github.io)

关于生命

刚刚收到家里消息，年过80的姥爷与世长辞了，这早已是我们预料之中的事情，并没有让我猝不及防或是怎么样。

年前，姥爷因肠胃不舒服住院一直住，后来病情恶化去ICU了，母亲一直陪在身边打理吃喝拉撒，听父亲说ICU的医疗费每天一万，很贵。

奶奶在家里守着我们说“老头早点走了吧，别拖累小孩”，我听到是十分震惊的，我一直想的是尽快治好。

后来才知道，姥爷因为胃不好，导致肾也不好，肝也不好，全身上下都是毛病，由于身体状况恶化，正常的饮食已经无法为他提供足够的营养，让他的状况更加绝望。

姥爷其实年轻的时候胃就不太好，他曾是我爷爷的工友，姥爷中午吃饭只吃钙奶饼干，煮鸡蛋汤喝了都会吐。

我印象里姥爷总是佝偻着背，身体极其瘦弱，不过姥爷之前当过兵。

上周就已经说快不行了，让我去看看姥爷，算是最后见一面。姥爷胳膊和腿已经和擀面杖差不多粗了，脸上也没什么肉，眼皮耷拉着，能感受到他已经用力去睁开眼睛，我只能朝他微笑，说不出话，我不知道说什么，他大概也知道我为什么过来。母亲跟我说姥爷得休息了，我便走了，那一面竟是最后一面。

生命很脆弱，家里人可能随时离开，我也可能先于他们，这种准备一定要提前打好，活在当下，希望我们都不留遗憾。

关于姥爷治病那一块，ICU呆了一个月吧，这个钱花就花了，我一想到这些就有些喘不开气，我舅一直没出去干活吧，可能花了几年挣来的钱都付给了医院，如果明知道治不好，明知道钱白花为什么还要去送钱呢？我恨这种医院，那最后一根稻草倘若不能支撑我上岸，我宁愿撒手走的潇洒一些，而不是将所有希望寄托在上面，最终换来一场空。

明天是周日，父亲让我回去送送姥爷，不敢看母亲的脸，想必她一定是最痛的。

关于生活

昨天，公司的另一位前端离职了，他刚来公司一个月，因为欠了一个月工资，公司没有按时发放

当时是我和组长一起面的，小伙技术扎实，他对公司安排的任务都能游刃有余，有时我也和他讨论问题，他总能给我带来一些新的技术分享。

他之前在上海呆过，来临沂了，正好命中老板心思：想找个大厂（北上广深）回来的，因为看新闻说大厂裁员，“向社会输出人才”。

他来面试那天其实就已经拖欠1个多月工资了，我那时候没关心这些事，毕竟临沂物价低，钱够花就没想别的。

我以为这都没啥，但是他告诉我：拖欠一个月就要准备找下家了，工资现金流都不稳定，小心老板当老赖一分钱工资没有。

他真的在拖欠1个月整之后离职了，HR告诉他工资会在月底发放，但是到昨天（31日）下午下班时还没有收到。

他离职后，我才后悔没把情况讲清楚告诉他，他貌似问过：工资准时发吗？没多想直接点头了。因为我之前就被坑过，老员工急着走，花式忽悠我入职替他位置，好让他走人（老板说交接完再走）。我是十分恨他的，更恨老板，在我走的时候同样的方法对我用了，我没理他直接拉黑。

我也无法控制这种事情的发生，之前一直是正常发工资，无非晚一天早一天的（发上上个月工资）。谁知道年后公司收不来款，导致大家工资都拖延。总之，他走了很可惜，我们好不容易招聘到了他。

大概是他有工作经验不愁找工作吧，反正我没有那个勇气了，我之前的实习离职也是因为不满意老板，所以没有考虑后果，看老板不爽就走，但是现在不一样了，现在招聘上三年经验以下的很少公司要了，我若是离职了，那就等于离开程序员行业了（臆想中的）

他和公司协商后还是没有收到工资，所以打算离职后去仲裁，就像他说的：既然公司违反了合同，我就会采取罢工行动。最终公司答应周一给他结清工资，看看吧，希望周一给他结清工资吧。

其实这个词”新生代农民工“早就有所耳闻，是在一位程序员UP主发的动态看到的，私以为特指00后码农，实则含义更广。

如百度百科所说：

新生代乡籍工指的是在1980年及之后出生的，进城从事非农业生产6个月及以上的，常住地在城市，户籍地在乡村的劳动力，是新时代的产业工人。他们很早进入社会，游离于城市和乡村之间，基本没有从事过农业生产，不像父辈那般依恋乡村。他们努力想变得和城市里的同龄人一样，但受到经济收入、文化程度等种种因素制约，城市对于他们来说依然没有归属感。
中国社科院研究员王春光用更为“学术”的语言对他们进行了描述：新生代乡籍工有76%未婚；基本上没有务农的经历，很多是从学校毕业后就直接外出的，甚至连基本的农业常识都缺乏；从动机上看，他们基本上不是基于“生存理性”外出，而是更多地将流动视为改变生活方式和寻求更好发展的契机。

对于我等农村青年，确实没下过几次地，家人总是以“小孩学习去，别下地”为由（或者说我以此为由），拒绝我务农。
（实际学也没上好，混的也不咋地，稍微划划水我就得进厂了）
是的，目前我就是属于“游离于城市和乡村之间”的“两栖人”，周末偶尔回家，工作日正常在市里上班。你可以说我农村人也可以说我城里人（没买房的城里人），我对于这些扣帽子打标签不在乎。

“新生代乡籍工”不再老老实实地待在最脏、最累、最“没出息”的工作岗位上，不再省吃俭用攒钱往家里寄，更不会挣够钱回家盖房娶媳妇。在受到歧视时，他们会摔门离去。

教育发达了，大家都想要更好的生活，更好的发展，更好的自己。做苦力做久了就一辈子都是苦力，这样的生活一眼望到头，我觉得不是我想要的。
省吃俭用往家里寄钱，除非是家里很困难揭不开锅了要我去支持。
挣够钱回家盖房子这个感觉不现实，不是说挣不挣够钱，在农村盖房子还好，而是说就算盖了房子，我也不会回去住，没有我发展的空间，或者说盖了房子在家务农？我不想这样。”家是避风港，同样也是枷锁”

第一代乡籍工普遍将谋生作为第一目标，建筑工地是他们的聚集地，新二代乡籍工的目光则投向三产服务业、制造业、纺织业、电子业等行业，赚钱只是他们外出打工的部分目的。他们希望在城里买房，能像城里人一样生活。
因为有着更多的企盼,他们找工作时也往往更“挑剔”。“虽然我来自农村，但这并不代表我对生活质量没有要求。我同样需要娱乐，需要交友，需要上网来了解全国各地的信息。”王玉明今年23岁，初中毕业，一家招工单位对他有意向，但因为单位地处偏僻，上网、外出都不方便，他一口回绝。
“我有技术，不愁工作，我要进大企业工作。我原来那家单位管吃管住，但早晨馒头、咸菜加白开水；中午一年到头都是炒白菜，这样的生活，我不能忍受。”这是一个第二代乡籍工对找工作一直持观望态度。
许多用工单位很需要这些人,但也对此表现出了相当的担忧。“现在不少年轻人，在工厂有点不高兴，什么也不想，马上走人。”一家企业招工负责人曾说，用人单位有一部分认为，第二代乡籍工存在的最大问题，就是敬业精神差。

时代进步了，人们的生活水平提高了，人们的生活观念也发生了变化，但社会并没有在这方面给予更多的关照。关于待遇问题，公司起码保证把工人当人看，不会像以前那样，工人是什么都不是，只是个工具，只要能干活就行，不干活就赶走。但面临一个死结：工人人多，你不干有的是人干。总有缺钱的兄弟，我们不能要求他们不去干，来抵制这种现象。只能内卷吧，卷到自己不和这群人呆在一个水平上，待遇自然就上来了，这是我目前的看法。不要跟我扯什么“拒绝内卷”之类的，大家都是第一次当人，我若是能控制得了（实际谁都控制不了，就怨人太多，活太少。。。少生优生幸福一生）

个人消费支出快速增加，不再为攒钱而使自己变成“苦行僧”——这是不同于父辈的显著特点。
据广东省统计局抽样调查显示，09年第二季度，新生代乡籍工平均每月挣钱873元，只交回老家232元，即将近八成的工资收入被自己花掉了，或者自己留着了。他们把超过一成的收入花在了文化娱乐和电话费上。新生代乡籍工在接受城市文化和生活方式的同时，也受到了一些不良风气和固有陋习的影响，出现了“娇子乡籍工”、“月光族”等现象。新生代乡籍工大多是刚刚从学校毕业就直接进入城市打工，既没有吃苦耐劳的思想准备，也没有吃苦耐劳的能力和精神，过分追求较好的生活，勤俭节约的品格逐渐淡化。调查显示，有68.5%的人收入主要用于自己的吃穿住行，工资很少寄回家，70%的人拥有手机或小灵通。一些人崇尚享受，注重攀比，非理性的消费观念让收入较低的乡籍工生活更加陷入困境。

诚然，本人对奢侈品的追求同他们一样，经常月底没钱，不过目前有在控制。
最近眼看钱包没钱了，仔细一想也没花多少钱，无非是年初提了一辆喜德盛自行车、买了个2T的三星固态硬盘、16G的3200内存条而已。最后一看工资单，哦！原来是工资只发到了12月，截止目前4月1号，还没发工资，这下明白了，实际攒了万把块钱了，才明白自己不是“月光族”。月光族只能说赚的钱少了，而不要说攒不下钱，抛开上面大头消费，剩下的无非吃吃喝喝，交个房租水电了，能有什么花费。

随着中国城市化进程，从“卖苦力”到“拼智力”，从城乡两栖到定居城市，从单向涌入城市到开始回乡创业，中国乡籍工群体正在发生着脱胎换骨般的变化。“村妹不甘种稻麻，满怀志智闯天涯。绣衣出口显身手，四海街头飘彩霞。欧美澳，亚非拉，品牌名起客商夸。时时领创推新品，岁岁登台戴大花。”这是诗人左河水以《鹧鸪天·打工妹》一词讲述的家乡真人故事。

必须指出，新时代的女青年不甘愿只做家庭主妇，不愿做”男人的附属品”，而是有更高的追求，更有活力，更有主见，积极为女性平权推波助澜。我见过很多即使家境优渥的女生，仍然努力劳动学习，甚至比男生付出的更多，她们清楚自己的方向，并为之艰苦奋斗，努力摒弃大家眼中的女生的消极看法。

我想起来《平凡的世界》中的孙少平：

如果从小你就在这个天地里日出而作，日落而息，那你现在就会和众乡亲抱同一理想。经过几年的辛苦，像大哥一样娶个满意的媳妇儿，生个大胖儿子，加上你的体魄，会成为一名出色的庄稼人。不幸的是，你知道的太多了，思考的太多了，因此才有了这种不能为周围人所理解的苦恼。 ——路遥·《平凡的世界》

愿新生代农民工们都能在城市里打拼出一片天地，无论出身，不甘平凡。

工具大体上是这样的：
分为border和background两种颜色，然后根据不同的状态生成不同的颜色。
相当于笛卡尔积出2*3=6种结果，通过css变量一一对应上预览的按钮。

但我将想法同网友分享后，网友直接甩我less代码，我就不得不放弃了，因为这实在是太简单了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

@color-master: #f51669; // ← change this color

@background-color: @color-master;
@text-color: lighten(@color-master, 45%);
@hover-color: lighten(@color-master, 10%);
@body-color: darken(@color-master, 30%);

.btn-primary {
  color: @text-color;
  background: @background-color;
  border: none;
  max-width: 50%;
}

.btn-primary:hover {
  background: @hover-color;
}

body {
  background: @body-color;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

最终经过编译后就是计算后的颜色值，没有什么兼容性问题（之前考虑filter能用但是兼容性不好，这个直接预编译了）。
less中有lighten和darken两个函数，分别是变亮和变暗，这样就可以很方便的生成不同状态的颜色了。
一般的做法也就同上面一样，hover提亮，active变暗，通过一个小函数就做出来了。
同样的方法在scss中也有。
关于lighten的计算方法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

lighten(@color, @amount) {
  // 将颜色转换为HSL格式
  @hue: hue(@color);
  @saturation: saturation(@color);
  @lightness: lightness(@color);

  // 计算新的亮度值
  @new-lightness: @lightness + (@amount % 100);

  // 限制亮度值在0~100之间
  @new-lightness: max(0, min(@new-lightness, 100));

  // 将HSL值转换为RGB格式
  @rgb: hsl2rgb(@hue, @saturation, @new-lightness);
  @red: extract(@rgb, 1);
  @green: extract(@rgb, 2);
  @blue: extract(@rgb, 3);

  // 构造新的颜色值
  @new-color: rgb(@red, @green, @blue);
  @new-color: ~"#@{colorstr(@new-color)}";

  // 返回新的颜色值
  @return @new-color;
}

附codepen:
https://codepen.io/timkl/pen/PqWxMz