Joyber 的博客

解决使用Edge浏览器时，鼠标点击浏览器界面任意位置就会有一个光标闪烁

作者: Joyber
时间: 2024-11-25
分类: 默认分类
评论

光标的问题可能是你打开了“插入光标浏览”导致的。按F7 即可关闭此功能。

SSH连接远程服务器后暂时切换回本地命令行

作者: Joyber
时间: 2024-11-22
分类: 默认分类
评论

这个技巧非常实用. 尤其是远程登陆到一台主机 A, 然后从 A 登陆到 B, 如果希望在 A 上做一些操作, 还得再开一个终端, 很是麻烦.

当使用 ssh 从本机登录到远程主机时, 可能希望切换到本地做一些操作, 然后再重新回到远程主机. 这个时候, 不需要中断 ssh 连接, 只需要按照如下步骤操作即可:

1.登入远程主机:

localhost$ ssh 172.16.1.165
oracle@172.16.1.165's password:
Last login: Fri Mar 26 14:48:08 2010 from euos

2.已连接远程主机:

remotehost$

3.要临时回到本地主机, 输入退出符号: "~"与"Control-Z"组合.

当输入"~"不会立即在屏幕上看到, 当按下并且按回车之后才一起显示.
如下, 在远程主机中以此输入"~"

remotehost$ ~^Z [suspend ssh]

[1]+  Stopped                 ssh 172.16.1.165
localhost$

4.现在已经退回到了本地主机, ssh 远程客户端会话就在 UNIX 后台中运行, 可以向下面那样查看它:

localhost$ jobs 
[1]+  Stopped                 ssh 172.16.1.165

5. 可以将后台运行的 ssh 会话进程切换到前台, 重新回到远程主机, 而无需输入密码

localhost$ fg %1 
ssh 172.16.1.165

remotehost$

--End--

时间轴-流程样式

作者: Joyber
时间: 2024-11-20
分类: 默认分类
评论

时间轴垂直
2024-11-20T10:07:26.png


/** 时间轴垂直 **/
.timeline {
    position: relative;
    display: grid;
    gap: 20px;
    padding: 0;
    max-width: 600px;
    font-size: 12px;
    line-height: 1;
    list-style-type: none;
}

.timeline.displayNone {
    display: none;
}

.timeline h4 {
    font-size: 12px;
}

.timeline .timeline__line {
    position: absolute;
    top: 0;
    left: 7px;
    width: 2px;
    height: 100%;
    background: #ccc;
}

.timeline .timeline__item .info {
    display: grid;
    grid-template-columns: repeat(3, auto) 1fr;
    align-items: center;
    gap: 0.3rem;
}

.timeline .timeline__item .info h4 {
    margin: 0;
}

.timeline .timeline__item .info a {
    text-decoration: none;
    color: #3498db;
}

.timeline .timeline__item .info .dot {
    position: relative;
    width: 16px;
    height: 16px;
    background: #999;
    border-radius: 50%;
}

.timeline .timeline__item .info .dot::before {
    position: absolute;
    content: '';
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
}

.timeline .timeline__item .info .dot::after {
    position: absolute;
    content: '';
    top: 4px;
    left: 4px;
    width: 8px;
    height: 8px;
    border: 4px solid #fff;
    border-radius: inherit;
}

.timeline .timeline__item .info .title {
    color: #999;
    margin-left: 5px;
}

.timeline .timeline__item .info .time {
    margin-right: 8px;
}

.timeline .timeline__item .content {
    margin: 10px 0 0 3em;
    line-height: 1.5;
}

                <ul class="timeline">
                    <li class='timeline__line'></li>
                    <li class='timeline__item'>
                        <div class='info'>
                            <div class='dot'></div>
                            <time class='time'>创建离职单</time>
                            <h4 class='speaker'></h4>
                            <h4 class='title'>人事管理完成</h4>
                        </div>
                        <div class='content text-gray'>在人事管理模块创建离职单，并复制链接给离职员工</div>
                    </li>
                    <li class='timeline__item'>
                        <div class='info'>
                            <div class='dot'></div>
                            <time class='time'>离职申请单填写</time>
                            <h4 class='speaker'></h4>
                            <h4 class='title'>离职人完成</h4>
                        </div>
                        <div class='content text-gray'>离职人完成离职原因等信息填写，并完成申请人签字，系统通知部门负责人签字</div>
                    </li>
                    <li class='timeline__item'>
                        <div class='info'>
                            <div class='dot'></div>
                            <time class='time'>部门负责人签字</time>
                            <h4 class='speaker'></h4>
                            <h4 class='title'>人事组织构架设置部门负责人完成</h4>
                        </div>
                        <div class='content text-gray'>由人事组织构架中设置的部门负责人完成对接后签字确认，系统通知财务负责人签字</div>
                    </li>
                    <li class='timeline__item'>
                        <div class='info'>
                            <div class='dot'></div>
                            <time class='time'>财务签字确认</time>
                            <h4 class='speaker'></h4>
                            <h4 class='title'>设置确认人：</h4>
                        </div>
                        <div class='content text-gray'>财务完成相关手续、并签字确认，系统通知人事负责人签字</div>
                    </li>
                    <li class='timeline__item'>
                        <div class='info'>
                            <div class='dot'></div>
                            <time class='time'>人事签字确认</time>
                            <h4 class='speaker'></h4>
                            <h4 class='title'>设置确认人：</h4>
                        </div>
                        <div class='content text-gray'>人事完成离职单相关信息填写、并签字确认，系统通知离职人签字确认</div>
                    </li>
                    <li class='timeline__item'>
                        <div class='info'>
                            <div class='dot'></div>
                            <time class='time'>本人签字确认</time>
                            <h4 class='speaker'></h4>
                            <h4 class='title'>离职人完成</h4>
                        </div>
                        <div class='content text-gray'>离职人完成签字确认</div>
                    </li>
                    <li class='timeline__item'>
                        <div class='info'>
                            <div class='dot'></div>
                            <time class='time'>流程完成</time>
                            <h4 class='speaker'></h4>
                            <h4 class='title'></h4>
                        </div>
                        <div class='content text-gray'></div>
                    </li>
                </ul>

横向流程步骤样式
2024-11-20T10:10:03.png


.step-list {
    display: flex;
    justify-content: space-around;
    margin-bottom: 20px;
}
.step-list .li{
    position: relative;
    text-align: center;
}
.step-list .li:before,.step-list .li:after{
    position: absolute;
    display: block;
    content: '';
    height: 1px;
    width: calc(50% - 20px);
    background-color: #ccc;
    top: 20px;
}
.step-list .li:after{right: 0;}
.step-list .li:first-child:before,.step-list .li:last-child:after{display: none;}
.step-list .li.success:before,.step-list .li.success:after{background-color: #5cb85c;    }
.step-list .li.error:before,.step-list .li.error:after{background-color: #ff423d}
.step-list .li a{color: #02a7f0; text-decoration: none;}
.step-list .li .circle{
    background: linear-gradient( to bottom, #81d9ff, #38bcfa);
    color: #fff;
    border-radius: 100%;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
}
.step-list .li.success{color: #418841;    }
.step-list .li.success .circle{background: linear-gradient(to bottom, #87d787, #5cb85c); color: #fff;}
.step-list .li .text{padding:6px 0;}
.step-list .li.error{color: #ff423d;    }
.step-list .li.error .circle{background: linear-gradient( to bottom, #ff5d59, #ff423d); color: #fff}
.step-list .li.disabled{color: #ccc}
.step-list .li.disabled .circle{background: linear-gradient( to bottom, #e8e8e8, #e8e8e8); color: #ccc}

<div class="step-list" style="margin-top: 30px;">
                            <div class="li success" style="width: 14.285714285714%;">
                                            <div class="circle fa fa-check"></div><div class="text">已提交需求</div>
                                    </div>
                            <div class="li success" style="width: 14.285714285714%;">
                                            <div class="circle fa fa-check"></div><div class="text">已付定金</div>
                                    </div>
                            <div class="li " style="width: 14.285714285714%;">
                                            <a href="javascript:;" class="" onclick="setPlanStatus('63398','6')" title="标记为已定策划">
                            <div class="circle fa fa-pencil"></div><div class="text">已定策划(进行中)</div>
                        </a>
                                    </div>
                            <div class="li disabled" style="width: 14.285714285714%;">
                                            <div class="circle fa fa-ban"></div><div class="text">已付预付</div>
                                    </div>
                            <div class="li disabled" style="width: 14.285714285714%;">
                                            <div class="circle fa fa-ban"></div><div class="text">准备好求婚</div>
                                    </div>
                            <div class="li disabled" style="width: 14.285714285714%;">
                                            <div class="circle fa fa-ban"></div><div class="text">已付尾款</div>
                                    </div>
                            <div class="li disabled" style="width: 14.285714285714%;">
                                            <div class="circle fa fa-ban"></div><div class="text">已完成</div>
                                    </div>
                    </div>

Certd搭建SSL证书自动化申请流水线平台，开源

作者: Joyber
时间: 2024-11-14
分类: 默认分类
评论

Certd

Certd 是一款开源、免费、全自动申请和部署更新SSL证书的工具。
后缀d取自linux守护进程的命名风格，意为证书守护进程。

关键字：证书自动申请、证书自动更新、证书自动续期、证书自动续签、证书管理工具

文档：https://certd.docmirror.cn/guide/
开源地址：https://github.com/certd/certd

免费版支持创建10条流水线任务

纯前端JS zip打包文件并下载

作者: Joyber
时间: 2024-11-06
分类: 默认分类
评论

张鑫旭老师的文章：https://www.zhangxinxu.com/wordpress/2019/08/js-zip-download/

如何实现ZIP打包下载
使用jszip这个项目实现的：https://github.com/Stuk/jszip

压缩和未压缩的JS文件都在dist目录下，大家自行下载。

使用也非常简单：

引入JS

<script src="./jszip.min.js"></script>

执行打包与下载
下面是官方示意代码，我加上了更详细的注释：

// 初始化一个zip打包对象
var zip = new JSZip();
// 创建一个被用来打包的名为Hello.txt的文件
zip.file("Hello.txt", "Hello World\n");
// 创建一个名为images的新的文件目录
var img = zip.folder("images");
// 这个images文件目录中创建一个base64数据为imgData的图像，图像名是smile.gif
img.file("smile.gif", imgData, {base64: true});
// 把打包内容异步转成blob二进制格式
zip.generateAsync({type:"blob"}).then(function(content) {
    // content就是blob数据，这里以example.zip名称下载    
    // 使用了FileSaver.js  
    saveAs(content, "example.zip");
});

/*
最终下载的zip文件包含内容如下：
Hello.txt
images/
    smile.gif
*/

使用非常简单，官方示意也通俗易懂，我直接照着改改效果就出来了。

其中，提到了一个FileSaver.js，这也是非常有名的项目，可以介绍一下。

纯前端下载FileSaver.js
FileSaver.js项目地址是：https://github.com/eligrey/FileSaver.js/

压缩和未压缩的JS文件也是在dist目录下，大家自行下载。

使用示意：

<script src="./FileSaver.min.js"></script>
<script>
var canvas = document.getElementById("zxx-canvas");
canvas.toBlob(function(blob) {
    saveAs(blob, "example.png");
});
</script>

FileSaver.js非常强，不仅兼容到IE10+，而且还支持大文件下载，Chrome浏览器下甚至可以下载2GB大小的文件。

FileSaver.js搭配js-xlsx还可以纯前端下载Excel文件。如果是生成DOC文件，试试这个项目。

由于非本文重点，不展开。

另外，纯前端下载方法还有很多。有兴趣可以参考这篇文章：https://juejin.cn/post/6844903763359039501

解决使用Edge浏览器时，鼠标点击浏览器界面任意位置就会有一个光标闪烁

SSH连接远程服务器后暂时切换回本地命令行

时间轴-流程样式

Certd搭建SSL证书自动化申请流水线平台，开源

纯前端JS zip打包文件并下载

友情链接

最新文章

最近回复

分类

标签

热门文章

其它