# SubtopH.github.io

**Repository Path**: YangYinBo/SubtopH.github.io

## Basic Information

- **Project Name**: SubtopH.github.io
- **Description**: vue3开发的网页应用
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: https://subtop.gitee.io/subtoph.github.io
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2023-09-23
- **Last Updated**: 2023-09-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## SubTopH 前端笔记（vue3 版本）

- 记录个人前端开发心得、笔记、问题解决方法等

## 更新日志

### vue3 版本
#### 2022-05-04

    1. 增加网站图标桌面上直接移出（web图标在常用网站和桌面中数据分离，不会互相影响）
    部署错误：相册海贼王图片违规导致，解决目前删除相册图片数据
#### 2022-04-28

    1. 优化快速笔记样式
    2. 增加常用网站可添加至桌面
#### 2022-04-27

    1. 优化纸牌得分计算
#### 2022-03-17

    1. 纸牌游戏附加功能

#### 2022-03-16

    1. 优化纸牌智能提示顺序
    2. 增加纸牌全部翻开后自动完成

#### 2022-03-15

    1. 增加纸牌游戏智能提示功能

#### 2022-03-14

    1. 修复长文本空table标签导致错误，一致显示加载动画
    2. 开发纸牌
        待优化
        1.剩余双击后追加新牌（完成）
        2.追加新牌向前追加（完成）
        3.展示纸牌只能移动最后一张

#### 2022-03-10

    1. 修改设置中导出导入
    2. 统一本地存储常量
    3. 增加本地数据全部删除
    4. 任务管理状态改变或删除时判断当前状态是否还存在数据，不存在就清除本地存储字段

#### 2022-03-09

    1. 完成常用网站文件夹和web数据列表的拖拽排序功能
    2. 表格工具本地存储信息优化，增加导入导出数据

#### 2022-03-08

    1. 完成常用网站应用（排序待开发）

#### 2022-03-07

    1. 修改拖拽框样式配置（顶部背景色和字体颜色）
    2. 增加我的网站部分编辑功能

#### 2022-03-06

    1. 开发百度翻译接口

#### 2022-03-03

    1. 优化属性选择清空逻辑
    2. 修改els-dataCenter路由及文件结构

#### 2022-03-02

    1. 完成详情页的跳转
    2. 优化下拉框闪现问题
    3. 增加清空筛选条件
    4. 部分功能优化

#### 2022-03-01

    1. 开发数据中心分享和详情功能

#### 2022-02-28

    1. 财务回显功能开发完成
    2. 财务检索数据准备完成

#### 2022-02-27

    1. 开发回显条件和财务联查选择框

#### 2022-02-24

    1. 完善数据中心检索框功能

#### 2022-02-23

    1. 开发数据中心列表

#### 2022-02-22

    1. 增加数据中心页面左侧功能

#### 2022-02-20

    1. 添加本地数据清理功能

#### 2022-02-17

    1. 完成背景设置纯色选择
    2. 完成储存空间占比详情监控

#### 2022-02-16

    1. 增加设置中的桌面背景设置
    2. 颜色选择器待开发
    3. 选择背景图文件报错及文字阴影

#### 2022-02-15

    1. 修改图标样式

#### 2022-02-14

    1. 将shw-ui组件直接放入项目,不在使用npm安装使用
    2. 修改组件index.js文件引入逻辑,解决组件名被压缩导致的错误
    3. 乐播放器样式调整

#### 2022-02-09

    1. 日创创建时间补全排序使用
    2. 顶部导航UI交互优化
    3. 列表动画样式修改
    4. 全部日程增加过期状态
    5. 添加日程完成状态
    6. 优化获取本地数据公共方法
    2-1. 导出功能代码封装优化
    2-2. 日历日程全部导出导入功能（待优化导入数据和已有数据处理）

#### 2022-02-09

    1. 全部日程列表展开收起排序
    2. 点击全部日程每项，切换日历和当前编辑日程日期联动
    3. 增加全部日程删除
    4. 移入日程样式背景色修改，创建日期格式化
    5. 增加跳转至今天
    6. 优化日历中的日程过期样式和移入信息框内容置灰

#### 2022-02-08

    1. 新增日程频率字段优化，优化其他中文字段
    2. 增加日历中日程移入浮窗显示
    3. 增加当日日程列表，单个删除功能
    4. 日程按创建时间倒叙展示
    2-1. 日历和当日日程列表增加过渡动画
    2-2. 增加删除当前日期全部日程
    3-1. 开发全部日程预览功能，样式待优化

#### 2022-02-07

    1. 频率下拉框默认值动态修改，组件不更新问题待修复
    2. 日程添加显示开发

#### 2022-02-06

    1. 日历日程功能开发

#### 2022-02-03

    1. 增加日历功能（待优化）
    2. 优化日历其他多余天数删除，查1月和12月待特殊处理（待优化）

#### 2022-02-01

    1. 优化长文本页面UI样式
    2. 保存检索词和检索类型至url中持久化
    3. 同句检索增加是否繁体匹配配置
    4. 检索等待动画颜色修改

#### 2022-02-01

    1. 增加模拟抽奖功能

#### 2022-01-18

    1. 增加增删应用功能
    2. 增加顶部导航显示自定义增加删除

#### 2022-01-17

    1. 优化拖拽底部加上文字高度尺寸
    2. 优化图标尺寸变化，放大时，如果图标位置超出，网格上线就重置
    3. 增加重置导航位置二次确认弹窗
    4. 图标编辑位置和尺寸调整还需要长期测试，可能存在bug
    2-1. 增加自定义图标位置，移动式进入有效区域后，区域高亮，原始位置红色高亮
    2-2. 增加桌面应用显示隐藏弹窗

#### 2022-01-16

    1. 顶部导航显示最多显示10个
    2. 增加首页桌面导航可自定义拖拽位置，保存本地
    3. 增加桌面图标尺寸调整

#### 2022-01-13

    1. 拖拽框组件取消内部控制显示隐藏字段
    2. 优化编辑任务框组件嵌套布局，状态禁止编辑交互优化
    3. 全部展开根据列表有无数据显示
    4. 单个任务展开点击位置优化
    5. 增加灰色等级@HSE
    6. 增加整个页面缩放滚动条
    7. 任务管理列表增加排序功能
    8. 解决任务编辑问题，内部使用拷贝数据导致
    9. 添加无任务描述点击打开编辑按钮
    10. 编辑窗口任务描述回车可直接确认

#### 2022-01-12

    1. 删除拖拽框自定义阴影
    2. 修改长文本目录点击跳转报错
    3. 优化长文本页面UI样式
    4. 修改任务管理列表动画
    5. 优化任务管理左侧添加任务展开收起UI交互

#### 2022-01-11

    1. 修改部分移入弹窗
    2. 修改返回主页按钮图标和位置
    3. 删除任务管理中工作和个人类型区分
    4. 修改任务标题输入框样式，只保留底部边框
    5. 左侧增加任务改为默认隐藏（快速笔记跳转来，监听路由参数，展开左侧添加功能）
    6. 优化清除全部按键通过判断有没有任务来显示隐藏（监听底部统计数据数量）
    7. 任务卡中，将原来点击展开按键显示摘要，改为点击卡片即可展开
    8. 修改任务列表头部展示
    2-1. 优化项目不可复制，可复制单独修改
    2-2. 注释自适应页面宽度代码，不做自适应页面，注释不同宽度样式
    3-1. 抽离公共阴影和边框样式
    3-2. 修改添加任务展开收起按键icon和动画及位置

#### 2022-01-10

    1. 删除UI组件代码高亮id字段 swh-ui v 1.0.30
    2. 优化样式，任务管理中等级组件使用更新

#### 2022-01-09

    1. 更新下拉框组件文档 swh-ui v 1.0.29优化

#### 2022-01-04

    1. 新增分页器组件文档
    2. 下拉选择框待优化

#### 2022-12-29

    1. 增加可拖拽框演示文档
    2. 优化组件销毁清除事件监听

#### 2021-12-13 16：18：00

    1. 更新滚动条组件自身内部监听页面宽度，小窗口（移动端）隐藏自定义滚动条

#### 2021-12-12 22：18：00

    1. 规范组件属性名称
    2. 调整页面宽度布局

#### 2021-12-11 13：04：00

    1. 规范了组件名称
    2. 修改组件展示页面类型，每个组件单独显示
    3. 响应式布局优化

#### 2021-12-09 17：23：00

    1. 更新滚动条监听元素高及页面窗口尺寸变化，自动更新滚动条（解决初始化滚动条不准确问题）
    2. 更新自定义渲染组件元素逻辑（全局模态框，提示框）
    3. vue3展示md文件升级vue-loader版本
    4. vue2版本内容全部改为vue3

#### 2021-12-06 17：55：00

    1. 更改代码编写vue3方式
    - 在vue2模块功能基础上进行vue3编码

#### 2022-05-12 10：00：00

    1. 增加长文本查询

#### 2022-05-12 16：00：00

    1. 重置高亮优化
    2. 加载动画优化

#### 2022-05-27 16：00：00

    1. 目录显示层级控制
    2. 本地纯文本关键词查询
    3. 解决table中空格和纯文本中空格问题
    4. 解决循环递归加高亮标签return(同段多句中关键词bug ，同句)

#### 2022-05-28 16：00：00

    1. 等待动画位置调整
    2. 背景色设置配置项
    3. 抽离长文本组件30%

#### 2022-05-29 16：00：00

    1. 优化上下切换
    2. 抽离长文本组件90%

#### 2022-05-30 16：00：00

    1. 长文本组件变量命名优化
    2. 读取业务文本和其他文本判断
    3. 其他文本根据是否存在标签判断，纯文本还是有格式的
    4. 纯文本以回车分割，包裹<p>标签展示（便于同段）
    5. 读取本地html格式长文本说明文档
    6. 阻止表格初始移除报错
    7. 目录层级负数处理
    8. 功能介绍本地文件初始展示
    9. 增加层级和截取可配置
    10. 添加演示文件下载
    11. 滚动条样式修改

#### 2022-05-30 16：00：00

    1. 点击目录，长文本定位标题并且高亮
    2. 修改左右箭头切换报错，判断是不是默认首次定位第一个
    3. 表格中按td分割段落查询
    4. 增加目录默认层级全部展开
    5. 增加目录同时展开多个或一个
    6. 增加手动输入数据网址展示

#### 2022-06-15 11：00：00

    1. 更新字体图标
    2. 封装鼠标拖拽到common.js中
    3. 配置页面获取数据类型

#### 2022-07-06 11：00：00

    1. 增加模拟数据数字范围

#### 2022-07-11 11：00：00

    1. 增加模拟数据布局拖拽改变尺寸

#### 2022-07-12 15：12：00

    1. 增加技术问题记录查询页面

#### 2022-07-12 18：30：00

    1. 解决匹配一个词时，点击左侧匹配定位，无灰色高亮范围bug
    2. 开发五子棋功能

#### 2022-07-13 18：30：00

    1. 五子棋功能完成（边界处理，相对复杂）

#### 2022-07-14 15：51：00

    1. todoList布局搭建

#### 2022-07-15 15：51：00

    1. 五子棋增加即使和胜利次数

#### 2022-07-18 15：51：00

    1. 增加任务列表

#### 2022-07-18 15：51：00

    1. 任务状态改变时，相关列表全部重置收起状态
    2. 添加一键删除全部任务列表功能

#### 2022-07-20 15：51：00

    1. 使用yarn add mitt监听事件总线（解决编辑任务事件触发）
    2. main.js => app.config.globalProperties.$bus = new mitt()
    3. 组件中监听onMounted生命周期中监听editTask事件  proxy.$bus.on('editTask', editTask);
        // 使用mitt监听编辑事件
        onMounted(() => {
            proxy.$bus.on('editTask', editTask);
        });
        // 编辑事件触发val传递的参数
        const editTask = (val) => {
            console.log('编辑任务父组件', val);
        };
    4. 组件中触发editTask事件传递参数  proxy.$bus.emit('editTask', data.myEditTack);
    5. 使用pre标签保留文本格式
    6. 增加任务导出功能

#### 2022-07-22 16：35：00

    1. 增加控制页面全屏按键和F11兼容实现效果统一
    2. 追加任务去除重复id任务
    3. 首页样式修改

#### 2022-07-26 16：35：00

    1. 增加导航图标动画

#### 2022-07-27 10：56：00

    1. 组件模块和页面模块组合配置点击显示
    2. 优化图标
    3. 增加贪吃蛇游戏50%

#### 2022-07-27 10：56：00

    1. 贪吃蛇游戏90%
    2. 游戏结束开始bug,需要多开始一次

#### 2022-07-29 10：56：00

    1. 解决游戏结束再开始bug-原因：监听按键事件多次触发导致
    2. 优化任务管理模块样式
    3. 优化顶部导航移入延迟，移入够要停留500ms才显示顶部导航
    4. 增加双玩家，双食物

#### 2022-07-31

    1. 增加多个玩家，优化逻辑多玩家数组类型（支持最多4名玩家）
    2. 不同玩家方向标识统一为玩家方向标识'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'
    3. over提示待修改，事物逻辑待修改

#### 2022-07-31

    1. 规则样式修改
    2. 可实现多个食物
    3. 解决加速后互相碰撞问题（将精准位置判断改成使用位置范围判断）
    4. 边界和撞自己可配置
    5. 多玩家over全部后才结束休息，over单个玩家继续其他玩家游戏

#### 2022-08-01

    1. 增加玩家over信息日志
    2. 解决玩家相撞直接删除数组元素bug(将over玩家替换null),增加生存者数量，判断是否相撞和是否最后一个玩家over结束游戏
    3. 添加游戏前配置，封面优化

#### 2022-08-02

    1. 增加音乐播放器功能
    2. 修改移动弹窗可配置项

#### 2022-08-02

    1. 增减音乐频率展示
    2. 增加css和js控制旋转，js可以控制停止旋转在当前位置，css每次停止都会重置
    3. 增加歌词展示

#### 2022-08-02

    1. 修改动效展示页面底部

#### 2022-08-08

    1. 修改音乐模块小窗口

#### 2022-08-09

    1. 增加音乐歌单列表点击切换
    2. 完成快速笔记功能，可添加至任务管理

#### 2022-08-10

    1. 修改顶部图标显示配置
    2. 修改笔记列表展示效果
    3. 增加除首页外返回首页按键
    4. 增加任务管理数量统计

#### 2022-08-11

    1. 增加笔记导入导出功能

#### 2022-08-11

    1. 修改长文本数据地址默认读取本地固定数据
    2. 增加色彩搭配页面

#### 2022-08-17

    1. 增加表格页面
    2. 实现编辑，保存本地
    3. 实现增加上一行下一行
    4. 问题 表头和最左侧点击增加bug

#### 2022-08-17

    1. 增加新建表格和表格管理列表

#### 2022-08-23

    1. 控制增加表格的宽度高度功能,待测试

#### 2022-08-23

    1. 增加自定义输入框拖拽缩放

#### 2022-08-23

    1. 增加图片预览页面

#### 2022-08-23

    1. 任务列表背景色修改

#### 2022-11-17

    1. 长文本对符号检索的逻辑修改
        1、检索词中全部特殊字符过滤掉(除汉字、字母、数字、空格外替换)，例如：公司#产品 上*市=>公司产品 上市
        2、高亮匹配时对关键词每个字符之间增加符号匹配正则，例如  公司上市  匹配  公司#上市
        3、高亮前过滤改为正则匹配该段落是否包含关键词，增加符号正则过滤
        4、去除空格过滤，因为检索时空格会和其他符号一起过滤

#### 2022-11-18

    1. 解决长文本同句检索时，标签嵌套问题，出现检索错误bug
    2. 对解析错误的内容手动加上标签

#### 2022-12-06

    1. 统一滚动条样式

#### 2022-12-07

    1. 问题笔记页面内容样式整理
    2. 修改笔记标题检索逻辑
    3. 增加鼠标移入提示框

#### 2022-12-08

    1. 增加鼠标移入显示提示弹窗自定义指令
    2. 整理UI库页面和匹配值参数表格

#### 2022-12-09

    1. 优化问题记录右侧代码高亮片段
    2. 问题检索逻辑修改，增加检索词高亮，高亮词多的优先置顶展示
    3. 路由配置整理
    4. 修改文件主页注释，方便查询文件
    5. 增加代码片段一键复制
    6. 增加移入弹窗延迟时间配置

#### 2022-12-10

    1. tips弹窗项目统一调整，默认时间设置
    2. 项目中弃用自定义封装的滚动条
    3. 确认弹窗优化
        1. 增加关闭和取消catch参数标识
        2. 增加点击遮罩层关闭配置
        3. 增加右上角关闭配置
        4. 优化确认弹窗关闭隐藏动画效果
    4. 鼠标移入弹窗增加超出右边和底部情况处理（可设置父子超出右&&底边界限制）
    5. 项目颜色统一使用全局变量
    6. 优化UI组件库样式

#### 2022-12-11

    1. 增加超级UI样式模块
        1. 效果预览和代码复制
        2. 上下切换UI详情
        3. 动态组件切换报警告 <component :is="citen.component"></component>（使用markRaw包括组件解决）

#### 2022-12-12

    1. 解决代码块切换后不高亮问题（保存代码的变量在获取新的值前清空，v-if绑定，每次从新挂载组件即可）
    2. 优化代码html和css一次性匹配模板获取
    3. UI详情页面上下切换优化

#### 2022-12-12

    1. 鼠标移入指令优化：监听点击事件清除弹窗（解决点击后切换页面还显示弹窗bug,符合业务场景）

#### 2022-12-13

    1. 增加问题记录列表切换动画

#### 2022-12-14

    1. 增加长文本中简体检索繁体字功能
    2. 优化问题记录文件读取逻辑，每个问题单个文件，批量自动读取，代码高亮展示区域样式修改

#### 2022-12-16

    1. 使用npm按装swh-ui组件替换，修改组件名称

#### 2022-12-27

    1. 修改swh-ui组件演示文档结构
    2. 增加移入浮窗和二次确认弹窗样式文档
    3. 优化代码高亮主题自定义和引入
    4. 增加swh-ui文档演示底部上下切换

#### 2022-12-28

    1. 优化swh-ui文档布局
    2. 优化组件

### vue2 版本（之前项目迁移过来的老功能）

#### 2021-12-01 16：28：00

    1. 更改引入组件展示文件结构
    2. 修改事件调用弹窗动画

#### 2021-11-28 21：40：00

    1. 添加公共组件模块展示
    - 组件导航
    - 组件实例
    - 查看组件源码

#### 2021-11-24 17：55：00

    1. 更新整体移动端页面布局
    2. 移动端导航折叠
    3. 取消移动端滚动条

#### 2021-11-23 23：12：00

    1. 修改自定义滚动条

#### 2021-11-23 11：52：00

    1. 动态批量加载md文件组件
    2. 把history模式修改为hash模式解决刷新404问题
    3. 增加了页面右上角点击复制网站地址

#### 2021-11-22 10：00：00

    1. 项目初始化
    2. 主要模块 - 学习笔记 - 个人介绍

### 问题

#### vue3 版本注意问题

- 展示 markdown 文件时"vue-loader": "^16.8.3",版本才可以
- .md 文件中\<font\>控制颜色标签，会报警告 Failed to resolve component: font

#### 判断滚动元素是否到底部

- e.target.scrollTop + e.target.offsetHeight == e.target.scrollHeight

#### 子组件自定义 click 事件时

- 要声明这是自定义事件
- 这样父组件@click 才是自定义，不然会默认原生事件

```
emits: ["click"],
  setup(props, ctx) {
    const Myclick = function () {
      ctx.emit("click", this.type);
    };
    return {
      Myclick,
    };
  },
```

#### vue3 批量注册组件时

```
app.component(key, components[key].name);
```

- vue3 中批量注册组件时,使用数组循环,key 值是下标,开发环境下可以正常运行，但是 build 时会报错