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

- 统一将页面中的 Button 组件替换为 a 标签，保持样式一致 - 添加统一的链接样式类 ops-link 和分隔符样式类 ops-sep - 更新操作列中按钮的样式，使用颜色、光标和文本装饰属性替代原有 props 配置 - 在多个文件中调整了操作项之间的分隔符显示逻辑 - 优化表格操作列渲染函数，去除冗余的 Button 属性配置 - 保持功能不变的前提下提升界面视觉一致性
2026-11-13 04:18:55 +08:00 · 2025-11-24 11:33:54 +08:00
parent 756cb28daa
commit 799184fd21
82 changed files with 1454 additions and 1394 deletions
--- a/manager/src/views/promotions/coupon-activity/coupon-publish.vue
+++ b/manager/src/views/promotions/coupon-activity/coupon-publish.vue
@@ -211,12 +211,12 @@ export default {
          align: "center",
          render: (h, params) => {
            return h(
-              "Button",
+              "a",
              {
-                props: {
-                  size: "small",
-                  type: "error",
-                  ghost: true,
+                style: {
+                  color: "#2d8cf0",
+                  cursor: "pointer",
+                  textDecoration: "none"
                },
                on: {
                  click: () => {
--- a/manager/src/views/promotions/coupon-activity/coupon.vue
+++ b/manager/src/views/promotions/coupon-activity/coupon.vue
@@ -13,20 +13,19 @@
        sortable="custom"
      >
        <template slot-scope="{ row }" slot="action">
-          <Button type="info" size="small" style="margin-right: 10px" @click="info(row)">
-            查看
-          </Button>
-          <Button
-            v-if="
-              (!checked && row.promotionStatus === 'START') ||
-              row.promotionStatus === 'NEW'
-            "
-            type="error"
-            size="small"
-            style="margin-right: 10px"
+          <a
+            :style="{ color: '#2d8cf0', cursor: 'pointer', textDecoration: 'none' }"
+            @click="info(row)"
+          >查看</a>
+          <span
+            v-if="(!checked && row.promotionStatus === 'START') || row.promotionStatus === 'NEW'"
+            style="margin: 0 8px; color: #dcdee2"
+          >|</span>
+          <a
+            v-if="(!checked && row.promotionStatus === 'START') || row.promotionStatus === 'NEW'"
+            :style="{ color: '#2d8cf0', cursor: 'pointer', textDecoration: 'none' }"
            @click="remove(row)"
-            >关闭
-          </Button>
+          >关闭</a>
        </template>
      </Table>
      <Row type="flex" justify="end" class="mt_10">
--- a/manager/src/views/promotions/coupon/coupon.vue
+++ b/manager/src/views/promotions/coupon/coupon.vue
@@ -75,49 +75,30 @@
        @on-selection-change="changeSelect"
      >
        <template slot-scope="{ row }" slot="action">
-          <Button
-            v-if="
-              row.promotionStatus === 'CLOSE' || row.promotionStatus === 'NEW'
-            "
-            type="info"
-            size="small"
+          <a
+            v-if="row.promotionStatus === 'CLOSE' || row.promotionStatus === 'NEW'"
+            :style="{ color: '#2d8cf0', cursor: 'pointer', textDecoration: 'none' }"
            @click="see(row)"
-            >编辑
-          </Button>
-          <Button
+            >编辑</a>
+          <a
            v-else
-            type="default"
-            size="small"
+            :style="{ color: '#2d8cf0', cursor: 'pointer', textDecoration: 'none' }"
            @click="see(row, 'onlyView')"
-            >查看
-          </Button>
-          <Button
-            class="ml_5"
-            v-if="
-              row.promotionStatus === 'START' || row.promotionStatus === 'NEW'
-            "
-            type="error"
-            size="small"
+            >查看</a>
+          <span
+            v-if="row.promotionStatus === 'START' || row.promotionStatus === 'NEW'"
+            style="margin: 0 8px; color: #dcdee2"
+            >|</span>
+          <a
+            v-if="row.promotionStatus === 'START' || row.promotionStatus === 'NEW'"
+            :style="{ color: '#2d8cf0', cursor: 'pointer', textDecoration: 'none' }"
            @click="close(row)"
-            >关闭
-          </Button>
-          <!--<Button-->
-            <!--class="ml_5"-->
-            <!--v-if="-->
-              <!--row.promotionStatus === 'CLOSE' || row.promotionStatus === 'END'-->
-            <!--"-->
-            <!--type="error"-->
-            <!--size="small"-->
-            <!--@click="remove(row)"-->
-            <!--&gt;删除-->
-          <!--</Button>-->
-          <Button
-            style="margin: 5px"
-            type="info"
-            size="small"
+            >关闭</a>
+          <span style="margin: 0 8px; color: #dcdee2">|</span>
+          <a
+            :style="{ color: '#2d8cf0', cursor: 'pointer', textDecoration: 'none' }"
            @click="receivePage(row.id)"
-            >领取记录
-          </Button>
+            >领取记录</a>
        </template>
      </Table>
      <Row type="flex" justify="end" class="mt_10">
--- a/manager/src/views/promotions/full-discount/full-discount.vue
+++ b/manager/src/views/promotions/full-discount/full-discount.vue
@@ -72,15 +72,19 @@
        </template>
        <template slot-scope="{ row }" slot="action">
          <div>
-            <Button type="info" size="small" @click="view(row)">查看</Button>
-            <Button
-              type="error"
+            <a
+              :style="{ color: '#2d8cf0', cursor: 'pointer', textDecoration: 'none' }"
+              @click="view(row)"
+            >查看</a>
+            <span
              v-if="row.promotionStatus === 'NEW' || row.promotionStatus === 'START'"
-              style="margin-left: 5px"
-              size="small"
+              style="margin: 0 8px; color: #dcdee2"
+            >|</span>
+            <a
+              v-if="row.promotionStatus === 'NEW' || row.promotionStatus === 'START'"
+              :style="{ color: '#2d8cf0', cursor: 'pointer', textDecoration: 'none' }"
              @click="openOrClose(row)"
-              >关闭</Button
-            >
+            >关闭</a>
          </div>
        </template>
      </Table>
--- a/manager/src/views/promotions/kanjia/kanjia-activity-goods.vue
+++ b/manager/src/views/promotions/kanjia/kanjia-activity-goods.vue
@@ -98,28 +98,18 @@
          <div>{{ row.stock }}</div>
        </template>
        <template slot-scope="{ row }" slot="action">
-          <Button
+          <a
            v-if="row.promotionStatus === 'CLOSE' || row.promotionStatus === 'NEW'"
-            type="info"
-            size="small"
-            style="margin-right: 10px"
+            style="color:#2d8cf0;cursor:pointer;text-decoration:none;margin-right:10px"
            @click="edit(row)"
            >编辑
-          </Button>
-          <Button
+          </a>
+          <a
            v-else
-            size="small"
-            style="margin-right: 10px"
+            style="color:#2d8cf0;cursor:pointer;text-decoration:none;margin-right:10px"
            @click="edit(row, 'onlyView')"
            >查看
-          </Button>
-          <!--<Button-->
-            <!--type="error"-->
-            <!--size="small"-->
-            <!--style="margin-right: 10px"-->
-            <!--@click="delAll(row)"-->
-            <!--&gt;删除-->
-          <!--</Button>-->
+          </a>
        </template>
      </Table>
      <Row type="flex" justify="end" class="page">
--- a/manager/src/views/promotions/pintuan/pintuan.vue
+++ b/manager/src/views/promotions/pintuan/pintuan.vue
@@ -52,16 +52,19 @@
        class="mt_10"
      >
        <template slot-scope="{ row }" slot="action">
-          <Button type="info" size="small" @click="view(row)" style="margin-right: 5px"
-            >查看</Button
-          >
-          <Button
-            type="error"
-            size="small"
+          <a
+            style="color:#2d8cf0;cursor:pointer;text-decoration:none;margin-right:5px"
+            @click="view(row)"
+          >查看</a>
+          <span
            v-if="row.promotionStatus === 'START' || row.promotionStatus === 'NEW'"
+            style="margin:0 8px;color:#dcdee2"
+          >|</span>
+          <a
+            v-if="row.promotionStatus === 'START' || row.promotionStatus === 'NEW'"
+            style="color:#2d8cf0;cursor:pointer;text-decoration:none"
            @click="close(row)"
-            >关闭
-          </Button>
+          >关闭</a>
        </template>
      </Table>
      <Row type="flex" justify="end" class="mt_10">
--- a/manager/src/views/promotions/points-goods-category/points-goods-category.vue
+++ b/manager/src/views/promotions/points-goods-category/points-goods-category.vue
@@ -18,8 +18,15 @@
        primary-key="id"
      >
        <template slot="action" slot-scope="scope">
-          <Button @click.native="edit(scope.row)" style="margin-right:10px;" size="small">编辑</Button>
-          <Button @click.native="remove(scope.row)" type="primary" size="small">删除</Button>
+          <a
+            style="color:#2d8cf0;cursor:pointer;text-decoration:none;margin-right:10px"
+            @click.native="edit(scope.row)"
+            >编辑</a>
+          <span style="margin:0 8px;color:#dcdee2">|</span>
+          <a
+            style="color:#2d8cf0;cursor:pointer;text-decoration:none"
+            @click.native="remove(scope.row)"
+            >删除</a>
        </template>
      </tree-table>
      <Row type="flex" justify="end" class="mt_10">
--- a/manager/src/views/promotions/points-goods/points-goods.vue
+++ b/manager/src/views/promotions/points-goods/points-goods.vue
@@ -110,30 +110,20 @@
          <div>{{ row.endTime }}</div>
        </template>
        <template slot-scope="{ row }" slot="action">
-          <Button
+          <a
            v-if="row.promotionStatus === 'CLOSE' || row.promotionStatus === 'NEW'"
-            type="info"
-            size="small"
+            style="color:#2d8cf0;cursor:pointer;text-decoration:none;margin-right:5px"
            @click="edit(row.id)"
-            style="margin-right: 5px"
-            >编辑</Button
-          >
-          <Button
+            >编辑</a>
+          <span
            v-if="row.promotionStatus === 'START' || row.promotionStatus === 'NEW'"
-            type="warning"
-            size="small"
+            style="margin:0 8px;color:#dcdee2"
+            >|</span>
+          <a
+            v-if="row.promotionStatus === 'START' || row.promotionStatus === 'NEW'"
+            style="color:#2d8cf0;cursor:pointer;text-decoration:none;margin-right:5px"
            @click="statusChanged(row.id, 'CLOSE')"
-            style="margin-right: 5px"
-            >关闭</Button
-          >
-          <!--<Button-->
-            <!--v-if="row.promotionStatus === 'CLOSE' || row.promotionStatus === 'END'"-->
-            <!--type="error"-->
-            <!--size="small"-->
-            <!--@click="close(row.id)"-->
-            <!--style="margin-right: 5px"-->
-            <!--&gt;删除</Button-->
-          <!--&gt;-->
+            >关闭</a>
        </template>
      </Table>
      <Row type="flex" justify="end" class="mt_10">
--- a/manager/src/views/promotions/seckill/seckill-goods.vue
+++ b/manager/src/views/promotions/seckill/seckill-goods.vue
@@ -46,7 +46,7 @@
          />
        </template>
        <template slot-scope="{ row, index }" slot="action">
-          <Button type="error" size="small" @click="delGoods(index, row)">删除 </Button>
+          <a style="color:#2d8cf0;cursor:pointer;text-decoration:none" @click="delGoods(index, row)">删除</a>
        </template>
      </Table>
      <Row type="flex" justify="end" class="mt_10">
--- a/manager/src/views/promotions/seckill/seckill.vue
+++ b/manager/src/views/promotions/seckill/seckill.vue
@@ -64,45 +64,34 @@
            class="mt_10"
          >
            <template slot-scope="{ row }" slot="action">
-              <Button
-                type="info"
-                size="small"
-                class="mr_5"
+              <a
                v-if="row.promotionStatus === 'CLOSE' || row.promotionStatus === 'NEW'"
+                style="color:#2d8cf0;cursor:pointer;text-decoration:none;margin-right:5px"
                @click="edit(row)"
-                >编辑</Button
-              >
-
-              <Button type="info" size="small" class="mr_5" v-else @click="manage(row)"
-                >查看</Button
-              >
-
-              <Button
-                type="success"
-                size="small"
-                class="mr_5"
-                v-if="row.promotionStatus == 'NEW'"
+                >编辑</a>
+              <a
+                v-else
+                style="color:#2d8cf0;cursor:pointer;text-decoration:none;margin-right:5px"
                @click="manage(row)"
-                >管理</Button
-              >
-
-              <Button
-                type="error"
-                size="small"
+                >查看</a>
+              <span
+                v-if="row.promotionStatus"
+                style="margin:0 8px;color:#dcdee2"
+                >|</span>
+              <a
+                v-if="row.promotionStatus == 'NEW'"
+                style="color:#2d8cf0;cursor:pointer;text-decoration:none;margin-right:5px"
+                @click="manage(row)"
+                >管理</a>
+              <span
+                v-if="row.promotionStatus == 'NEW'"
+                style="margin:0 8px;color:#dcdee2"
+                >|</span>
+              <a
                v-if="row.promotionStatus == 'START' || row.promotionStatus == 'NEW'"
-                class="mr_5"
+                style="color:#2d8cf0;cursor:pointer;text-decoration:none"
                @click="off(row)"
-                >关闭</Button
-              >
-              &nbsp;
-              <!--<Button-->
-                <!--type="error"-->
-                <!--size="small"-->
-                <!--v-if="row.promotionStatus == 'CLOSE' || row.promotionStatus == 'END'"-->
-                <!--ghost-->
-                <!--@click="expire(row)"-->
-                <!--&gt;删除</Button-->
-              <!--&gt;-->
+                >关闭</a>
            </template>
          </Table>