style(components): 将按钮组件替换为链接样式

- 统一将页面中的 Button 组件替换为 a 标签,保持样式一致
- 添加统一的链接样式类 ops-link 和分隔符样式类 ops-sep
- 更新操作列中按钮的样式,使用颜色、光标和文本装饰属性替代原有 props 配置
- 在多个文件中调整了操作项之间的分隔符显示逻辑
- 优化表格操作列渲染函数,去除冗余的 Button 属性配置
- 保持功能不变的前提下提升界面视觉一致性
This commit is contained in:
pikachu1995@126.com
2025-11-24 11:33:54 +08:00
parent 756cb28daa
commit 799184fd21
82 changed files with 1454 additions and 1394 deletions

View File

@@ -131,18 +131,17 @@
title: "操作",
key: "action",
align: "center",
width: 120,
fixed: 'right',
width: 200,
render: (h, params) => {
return h("div", [
h(
"Button",
"a",
{
props: {
type: "info",
size: "small",
},
style: {
marginRight: "5px",
color: "#2d8cf0",
cursor: "pointer",
textDecoration: "none",
},
on: {
click: () => {

View File

@@ -135,18 +135,17 @@
title: "操作",
key: "action",
align: "center",
width: 120,
fixed: 'right',
width: 200,
render: (h, params) => {
return h("div", [
h(
"Button",
"a",
{
props: {
type: "info",
size: "small",
},
style: {
marginRight: "5px",
color: "#2d8cf0",
cursor: "pointer",
textDecoration: "none",
},
on: {
click: () => {

View File

@@ -32,22 +32,18 @@
<span slot="open"></span>
<span slot="close"></span>
</i-switch>
<Button
type="info"
placement="right"
<a
style="color:#2d8cf0;cursor:pointer;text-decoration:none"
@click="Template(item)"
size="small"
>编辑</Button
>
<Button
type="success"
placement="right"
>编辑</a>
<span style="margin: 0 8px; color: #dcdee2">|</span>
<a
style="color:#2d8cf0;cursor:pointer;text-decoration:none"
@click="decorate(item)"
size="small"
>装修</Button
>
>装修</a>
<span style="margin: 0 8px; color: #dcdee2">|</span>
<Poptip confirm title="删除此模板?" @on-ok="delTemplate(item.id)">
<Button type="error" size="small">删除</Button>
<a style="color:#2d8cf0;cursor:pointer;text-decoration:none">删除</a>
</Poptip>
</div>
</div>

View File

@@ -625,16 +625,14 @@
render: (h, params) => {
return h("div", [
h(
"Button",
"a",
{
props: {
type: "default",
size: "small",
},
style: {
color: "#2d8cf0",
cursor: "pointer",
textDecoration: "none",
marginRight: "5px",
display:
this.selectImage === true ? "inline-block" : "none",
display: this.selectImage === true ? "inline-block" : "none",
},
on: {
click: () => {
@@ -645,13 +643,23 @@
"选择"
),
h(
"Button",
"span",
{
props: {
type: "info",
size: "small",
},
style: {
margin: "0 8px",
color: "#dcdee2",
display: this.selectImage === true ? "inline-block" : "none",
},
},
"|"
),
h(
"a",
{
style: {
color: "#2d8cf0",
cursor: "pointer",
textDecoration: "none",
marginRight: "5px",
display: this.selectImage == true ? "none" : "inline-block",
},
@@ -664,13 +672,23 @@
"下载"
),
h(
"Button",
"span",
{
props: {
type: "error",
size: "small",
},
style: {
margin: "0 8px",
color: "#dcdee2",
display: this.selectImage == true ? "none" : "inline-block",
},
},
"|"
),
h(
"a",
{
style: {
color: "#2d8cf0",
cursor: "pointer",
textDecoration: "none",
display: this.selectImage == true ? "none" : "inline-block",
},
on: {
@@ -789,16 +807,14 @@
render: (h, params) => {
return h("div", [
h(
"Button",
"a",
{
props: {
type: "default",
size: "small",
},
style: {
color: "#2d8cf0",
cursor: "pointer",
textDecoration: "none",
marginRight: "5px",
display:
this.selectImage === true ? "inline-block" : "none",
display: this.selectImage === true ? "inline-block" : "none",
},
on: {
click: () => {

View File

@@ -416,67 +416,85 @@
align: "center",
fixed: "right",
// width: 300,
render: (h, params) => {
return h("div", [
h(
"Button",
{
props: {
type: "default",
size: "small",
},
style: {
marginRight: "5px",
display:
this.selectImage === true ? "inline-block" : "none",
},
on: {
click: () => {
this.selectedParams(params.row);
},
render: (h, params) => {
return h("div", [
h(
"a",
{
style: {
color: "#2d8cf0",
cursor: "pointer",
textDecoration: "none",
marginRight: "5px",
display: this.selectImage === true ? "inline-block" : "none",
},
on: {
click: () => {
this.selectedParams(params.row);
},
},
"选择"
),
h(
"Button",
{
props: {
type: "info",
size: "small",
},
style: {
marginRight: "5px",
display: this.selectImage == true ? "none" : "inline-block",
},
on: {
click: () => {
this.download(params.row);
},
},
"选择"
),
h(
"span",
{
style: {
margin: "0 8px",
color: "#dcdee2",
display: this.selectImage === true ? "inline-block" : "none",
},
},
"|"
),
h(
"a",
{
style: {
color: "#2d8cf0",
cursor: "pointer",
textDecoration: "none",
marginRight: "5px",
display: this.selectImage == true ? "none" : "inline-block",
},
on: {
click: () => {
this.download(params.row);
},
},
"下载"
),
h(
"Button",
{
props: {
type: "error",
size: "small",
},
style: {
display: this.selectImage == true ? "none" : "inline-block",
},
on: {
click: () => {
this.remove(params.row);
},
},
"下载"
),
h(
"span",
{
style: {
margin: "0 8px",
color: "#dcdee2",
display: this.selectImage == true ? "none" : "inline-block",
},
},
"|"
),
h(
"a",
{
style: {
color: "#2d8cf0",
cursor: "pointer",
textDecoration: "none",
display: this.selectImage == true ? "none" : "inline-block",
},
on: {
click: () => {
this.remove(params.row);
},
},
"删除"
),
]);
},
},
"删除"
),
]);
},
},
],
viewColumns: [
@@ -583,13 +601,12 @@
render: (h, params) => {
return h("div", [
h(
"Button",
"a",
{
props: {
type: "default",
size: "small",
},
style: {
color: "#2d8cf0",
cursor: "pointer",
textDecoration: "none",
marginRight: "5px",
display:
this.selectImage === true ? "inline-block" : "none",

View File

@@ -119,14 +119,12 @@ export default {
if (!params.row.selected) {
return h("div", [
h(
"Button",
"a",
{
props: {
type: "success",
size: "small",
},
style: {
marginRight: "5px",
color: "#2d8cf0",
cursor: "pointer",
textDecoration: "none",
},
on: {
click: () => {
@@ -140,14 +138,12 @@ export default {
} else {
return h("div", [
h(
"Button",
"a",
{
props: {
type: "error",
size: "small",
},
style: {
marginRight: "5px",
color: "#2d8cf0",
cursor: "pointer",
textDecoration: "none",
},
on: {
click: () => {
@@ -157,12 +153,14 @@ export default {
},
"关闭"
),
h("span", { style: { margin: "0 8px", color: "#dcdee2" } }, "|"),
h(
"Button",
"a",
{
props: {
type: "info",
size: "small",
style: {
color: "#2d8cf0",
cursor: "pointer",
textDecoration: "none",
},
on: {
click: () => {

View File

@@ -20,8 +20,15 @@
<time style="margin-right: 20px" title="最后编辑时间">
<i class="icon-time"></i>{{item.updateTime}}
</time>
<Button @click="edit(item)" type="info">修改</Button>
<Button @click="remove(item.id)" type="error">删除</Button>
<a
style="color:#2d8cf0;cursor:pointer;text-decoration:none"
@click="edit(item)"
>修改</a>
<span style="margin: 0 8px; color: #dcdee2">|</span>
<a
style="color:#2d8cf0;cursor:pointer;text-decoration:none"
@click="remove(item.id)"
>删除</a>
</span>
</th>
</tr>
@@ -113,12 +120,14 @@
</InputNumber>
</td>
<td class="nscs-table-handle">
<Button @click="editRegion(item,index)" type="info" size="small"
style="margin-bottom: 5px">修改
</Button>
<Button @click="removeTemplateChildren(index)" type="error"
size="small" style="margin-bottom: 5px">删除
</Button>
<a
@click="editRegion(item,index)"
style="display:inline-block;margin-bottom:5px;color:#2d8cf0;cursor:pointer;text-decoration:none"
>修改</a>
<a
@click="removeTemplateChildren(index)"
style="display:inline-block;margin-bottom:5px;color:#2d8cf0;cursor:pointer;text-decoration:none"
>删除</a>
</td>
</tr>
</tbody>
@@ -630,4 +639,11 @@ em {
.baoyou {
margin: 6px 10px 0;
}
/* 操作链接与分隔符不加粗 */
.order tbody tr th .fr a {
font-weight: normal;
}
.order tbody tr th .fr span {
font-weight: normal;
}
</style>

View File

@@ -155,14 +155,12 @@
render: (h, params) => {
return h("div", [
h(
"Button",
"a",
{
props: {
type: "success",
size: "small",
},
style: {
marginRight: "5px",
color: "#2d8cf0",
cursor: "pointer",
textDecoration: "none",
},
on: {
click: () => {
@@ -172,15 +170,14 @@
},
"修改"
),
h("span", { style: { margin: "0 8px", color: "#dcdee2" } }, "|"),
h(
"Button",
"a",
{
props: {
type: "error",
size: "small",
},
style: {
marginRight: "5px",
color: "#2d8cf0",
cursor: "pointer",
textDecoration: "none",
},
on: {
click: () => {
@@ -189,7 +186,7 @@
},
},
"删除"
)
),
]);
},
},

View File

@@ -367,77 +367,75 @@ export default {
let enableOrDisable = "";
if (params.row.status == true) {
enableOrDisable = h(
"Button",
"a",
{
props: {
size: "small"
},
style: {
marginRight: "5px"
color: "#2d8cf0",
cursor: "pointer",
textDecoration: "none",
},
on: {
click: () => {
this.disable(params.row);
}
}
},
},
},
"禁用"
);
} else {
enableOrDisable = h(
"Button",
"a",
{
props: {
type: "success",
size: "small"
},
style: {
marginRight: "5px"
color: "#2d8cf0",
cursor: "pointer",
textDecoration: "none",
},
on: {
click: () => {
this.enable(params.row);
}
}
},
},
},
"启用"
);
}
return h("div", [
h(
"Button",
"a",
{
props: {
type: "info",
size: "small"
},
style: {
marginRight: "5px"
color: "#2d8cf0",
cursor: "pointer",
textDecoration: "none",
},
on: {
click: () => {
this.edit(params.row);
}
}
},
},
},
"编辑"
),
h("span", { style: { margin: "0 8px", color: "#dcdee2" } }, "|"),
enableOrDisable,
h("span", { style: { margin: "0 8px", color: "#dcdee2" } }, "|"),
h(
"Button",
"a",
{
props: {
type: "error",
size: "small"
style: {
color: "#2d8cf0",
cursor: "pointer",
textDecoration: "none",
},
on: {
click: () => {
this.remove(params.row);
}
}
},
},
},
"删除"
)
),
]);
}
}

View File

@@ -166,14 +166,12 @@ export default {
render: (h, params) => {
return h("div", [
h(
"Button",
"a",
{
props: {
type: "warning",
size: "small",
},
style: {
marginRight: "5px",
color: "#2d8cf0",
cursor: "pointer",
textDecoration: "none",
},
on: {
click: () => {
@@ -183,15 +181,14 @@ export default {
},
"菜单权限"
),
h("span", { style: { margin: "0 8px", color: "#dcdee2" } }, "|"),
h(
"Button",
"a",
{
props: {
size: "small",
type: "info",
},
style: {
marginRight: "5px",
color: "#2d8cf0",
cursor: "pointer",
textDecoration: "none",
},
on: {
click: () => {
@@ -201,12 +198,14 @@ export default {
},
"编辑"
),
h("span", { style: { margin: "0 8px", color: "#dcdee2" } }, "|"),
h(
"Button",
"a",
{
props: {
type: "error",
size: "small",
style: {
color: "#2d8cf0",
cursor: "pointer",
textDecoration: "none",
},
on: {
click: () => {

View File

@@ -20,9 +20,13 @@
<span slot="open"></span>
<span slot="close"></span>
</i-switch>
<Button type="info" placement="right" @click="handleEdit(item)" size="small">修改</Button>
<a
style="color:#2d8cf0;cursor:pointer;text-decoration:none"
@click="handleEdit(item)"
>修改</a>
<span style="margin: 0 8px; color: #dcdee2">|</span>
<Poptip confirm title="删除此模板?" @on-ok="handleDel(item)" >
<Button type="error" size="small">删除</Button>
<a style="color:#2d8cf0;cursor:pointer;text-decoration:none">删除</a>
</Poptip>
</div>
</div>