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

@@ -181,43 +181,48 @@
key: "action",
align: "center",
width: 200,
render: (h, params) => {
return h("div", [
h(
"Button",
{
props: {
type: "info",
size: "small",
},
style: {
marginRight: "5px"
},
on: {
click: () => {
this.edit(params.row);
}
}
render: (h, params) => {
return h("div", [
h(
"a",
{
style: {
color: "#2d8cf0",
cursor: "pointer",
textDecoration: "none",
marginRight: "5px"
},
"编辑"
),
h(
"Button",
{
props: {
type: "error",
size: "small",
},
on: {
click: () => {
this.remove(params.row);
}
on: {
click: () => {
this.edit(params.row);
}
}
},
"编辑"
),
h(
"span",
{ style: { margin: "0 8px", color: "#dcdee2" } },
"|"
),
h(
"a",
{
style: {
color: "#2d8cf0",
cursor: "pointer",
textDecoration: "none"
},
"删除"
)
]);
},
on: {
click: () => {
this.remove(params.row);
}
}
},
"删除"
)
]);
},
},
],
data: [], // 表单数据

View File

@@ -282,14 +282,12 @@ export default {
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

@@ -144,24 +144,22 @@
}
},
{
title: "操作",
key: "action",
align: "center",
fixed: "right",
width: 150,
render: (h, params) => {
{
title: "操作",
key: "action",
align: "center",
fixed: "right",
width: 150,
render: (h, params) => {
if(params.row.complainStatus === "COMPLETE"){
return h("div", [
h(
"Button",
"a",
{
props: {
type: "info",
size: "small",
},
style: {
marginRight: "5px",
color: "#2d8cf0",
cursor: "pointer",
textDecoration: "none",
},
on: {
click: () => {
@@ -175,14 +173,12 @@
}else{
return h("div", [
h(
"Button",
"a",
{
props: {
type: "primary",
size: "small",
},
style: {
marginRight: "5px",
color: "#2d8cf0",
cursor: "pointer",
textDecoration: "none",
},
on: {
click: () => {

View File

@@ -357,17 +357,26 @@ export default {
width: 100,
render: (h, params) => {
return h(
"Button",
{
props: { type: "info", size: "small" },
style: { marginRight: "5px" },
on: {
click: () => {
this.detail(params.row);
"div",
{ class: "ops" },
[
h(
"a",
{
style: {
color: "#2d8cf0",
cursor: "pointer",
textDecoration: "none",
},
on: {
click: () => {
this.detail(params.row);
},
},
},
},
},
"查看"
"查看"
),
]
);
},
},
@@ -536,4 +545,14 @@ export default {
font-size: 14px;
}
}
.ops a {
color: #2d8cf0;
cursor: pointer;
text-decoration: none;
}
.ops span {
display: inline-block;
margin: 0 8px;
color: #dcdee2;
}
</style>