实现 FButton 组件并替换 AButton 组件

[CLDXiang]

✨ 工作描述

resolve #123

• 实现了 Issue 中所有需求
• 除 shape 的定义与 AButton 有区别，没有 block 属性外，其他属性定义与 AButton 一致
• 组件各属性定义都有详细注释
• 主要实现内容为通过不同 props 改变样式类名数组
• 内部 mouse 相关事件仅用于模拟放开按钮时的波动效果
• 内部 click 事件仅用于阻止 disabled 态的冒泡，不会影响外部 click 的正常绑定
• 将所有 AButton 组件替换为了 FButton，样式上除细微差别外基本与原先一致

🍀 给 Reviewer 的辅助信息

• 重点 review FButton.vue 文件本身，调用处的改动可以通过预览观察效果
• 可用下列代码替换 @/views/notification/Notification.vue，然后进入 /notification 路由预览各种 Button 样式

<template>
  <div class="content-box">
    <div class="center-content space-y-1 bg-gray-50">
      <f-button @click="handleClick">
        Click
      </f-button>
      <f-button loading>
        Click
      </f-button>
      <f-button
        type="primary"
        size="large"
      >
        Primary Large
      </f-button>
      <f-button
        type="primary"
        size="large"
        loading
      >
        Primary Large Loading
      </f-button>
      <f-button
        type="danger"
        size="small"
      >
        Danger Small
      </f-button>
      <f-button
        type="primary"
        shape="round"
      >
        Round
      </f-button>
      <f-button
        type="primary"
        shape="circle"
      >
        Circle
      </f-button>
      <f-button
        type="link"
      >
        Link
      </f-button>
      <f-button
        type="primary"
        ghost
      >
        ghost primary
      </f-button>
      <f-button
        ghost
      >
        ghost
      </f-button>
      <f-button
        disabled
        @click="handleClick"
      >
        disabled
      </f-button>
      <f-button
        type="link"
        disabled
      >
        disabled link
      </f-button>
    </div>
  </div>
</template>

<script lang="ts">
import {
  defineComponent,
} from 'vue';

export default defineComponent({
  setup() {
    return {
      handleClick: () => console.log('Hello!'),
    };
  },
});
</script>

<style lang="scss" scoped>
.content-box {
  height: 100%;
  width: 100%;

  display: flex;
  flex-direction: column;
  align-items: center;

  color: #444;
  font-size: 14px;

  > .center-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    > div:last-child {
      color: #aaa;
      font-size: 12px;
    }
  }
  > .bottom-content {
    justify-self: flex-end;
    padding-bottom: 12px;
  }
}
</style>

• 可以预览各页面的按钮表现是否正常

✅ 检查清单

• [x] 更新了更新日志文件 public/changeLog.json（若有必要）
• [x] 链接了对应 Issues（若有）
• [x] 指定了对应 Projects（若有必要）
• [x] 分配了 assignees, labels 和 reviewers
• [x] 在 Slack 中通知了 reviewers

[vercel[bot]]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/cldxiang/today-frontend/3quEUrt5dxwujPaLjompkSvSvt4i
✅ Preview: https://today-frontend-git-feat-f-button-cldxiang.vercel.app

[Ahacad]

src/views/Rating/RatingForm.vue Line 318 Maxlen CI 报错 src/apis/rate/index.ts Line 156 Maxlen CI 报错，还有几个文件也是，100 行的限制好像不够用

拉到 PR 底部查看

[CLDXiang]

src/views/Rating/RatingForm.vue Line 318 Maxlen CI 报错 src/apis/rate/index.ts Line 156 Maxlen CI 报错，还有几个文件也是，100 行的限制好像不够用

拉到 PR 底部查看

在另一个 PR 已修复，和本 PR 无关