diff --git a/openspec/changes/add-loan-pricing-frontend/proposal.md b/openspec/changes/add-loan-pricing-frontend/proposal.md
new file mode 100644
index 0000000..ef2716c
--- /dev/null
+++ b/openspec/changes/add-loan-pricing-frontend/proposal.md
@@ -0,0 +1,25 @@
+# Change: 添加利率定价流程前端管理界面
+
+## Why
+
+后端利率定价流程 API 已实现（参见 `add-loan-pricing-workflow` 变更），但缺少对应的前端管理界面。业务人员需要通过 Web 界面查询利率定价流程列表、查看流程详情，而不能直接调用后端 API。
+
+## What Changes
+
+- 新增前端 API 接口模块 `ruoyi-ui/src/api/loanPricing/workflow.js`
+- 新增前端页面组件 `ruoyi-ui/src/views/loanPricing/workflow/index.vue`
+- 在数据库 `sys_menu` 表中配置菜单项，确保页面可以正常访问
+- 配置路由和权限，使用户可以通过菜单导航访问功能
+
+## Impact
+
+- **Affected specs:** 新增 `loan-pricing-workflow-ui` 能力规格
+- **Affected code:**
+  - **新增 `ruoyi-ui/src/api/loanPricing/workflow.js`** - API 接口定义
+  - **新增 `ruoyi-ui/src/views/loanPricing/workflow/index.vue`** - 列表和详情页面组件
+  - **修改 `sys_menu` 表** - 添加菜单配置数据
+
+## Dependencies
+
+- 依赖已完成的 `add-loan-pricing-workflow` 后端变更
+- 后端 API 接口文档位于 `doc/api/loan-pricing-workflow-api.md`
diff --git a/openspec/changes/add-loan-pricing-frontend/specs/loan-pricing-workflow-ui/spec.md b/openspec/changes/add-loan-pricing-frontend/specs/loan-pricing-workflow-ui/spec.md
new file mode 100644
index 0000000..341c9f5
--- /dev/null
+++ b/openspec/changes/add-loan-pricing-frontend/specs/loan-pricing-workflow-ui/spec.md
@@ -0,0 +1,53 @@
+# Capability: loan-pricing-workflow-ui
+
+利率定价流程前端用户界面能力。
+
+## ADDED Requirements
+
+### Requirement: 流程列表查询
+
+系统 SHALL 提供利率定价流程列表查询页面，支持分页和多条件筛选。
+
+#### Scenario: 查询流程列表
+- **WHEN** 用户已登录系统且具有 `loanPricing:workflow:list` 权限，访问"利率定价管理 > 流程列表"菜单
+- **THEN** 系统显示利率定价流程列表页面，包含查询表单（客户名称模糊查询、创建者、机构号筛选）、搜索和重置按钮、数据表格（业务方流水号、客户名称、客户类型、担保方式、申请金额、贷款利率、创建时间、创建者）、分页组件、操作列（包含"查看"按钮）
+
+#### Scenario: 使用筛选条件查询
+- **WHEN** 用户在流程列表页面输入客户名称或选择创建者/机构号，点击搜索按钮
+- **THEN** 系统根据筛选条件查询并更新列表数据
+
+#### Scenario: 重置筛选条件
+- **WHEN** 用户已设置筛选条件，点击重置按钮
+- **THEN** 系统清空所有筛选条件并重新查询全部数据
+
+### Requirement: 流程详情查看
+
+系统 SHALL 提供流程详情查看功能，以对话框形式展示完整的流程信息。
+
+#### Scenario: 查看流程详情
+- **WHEN** 用户在流程列表页面且具有 `loanPricing:workflow:query` 权限，点击列表中某条记录的"查看"按钮
+- **THEN** 系统弹出详情对话框，展示完整的流程信息（基本信息：业务方流水号、机构编码、客户内码、客户名称、证件类型；业务信息：客户类型、担保方式、申请金额、贷款利率、贷款用途；业务标识：中间业务标识、企业标识；抵质押信息：抵质押类型、是否三方所有；其他信息：创建时间、创建者、更新时间、更新者）
+
+### Requirement: 菜单和权限配置
+
+系统 SHALL 在数据库中正确配置菜单项和权限，确保用户可以访问功能。
+
+#### Scenario: 菜单显示和导航
+- **WHEN** 用户已登录系统且具有利率定价流程相关权限
+- **THEN** 系统在左侧菜单栏显示"利率定价管理"一级菜单，展开后显示"流程列表"二级菜单项
+
+#### Scenario: 菜单路由配置
+- **WHEN** 用户点击"流程列表"菜单项，系统处理路由跳转
+- **THEN** 系统导航至 `/loanPricing/workflow` 路径，加载对应的前端组件
+
+### Requirement: API 接口集成
+
+前端 SHALL 正确调用后端 API 接口获取数据。
+
+#### Scenario: 列表接口调用
+- **WHEN** 用户访问流程列表页面，页面初始化或用户执行查询操作
+- **THEN** 前端调用 `GET /loanPricing/workflow/list` 接口，传入分页和筛选参数
+
+#### Scenario: 详情接口调用
+- **WHEN** 用户点击查看按钮，前端获取选中记录的业务方流水号
+- **THEN** 前端调用 `GET /loanPricing/workflow/{serialNum}` 接口获取详情数据
diff --git a/openspec/changes/add-loan-pricing-frontend/tasks.md b/openspec/changes/add-loan-pricing-frontend/tasks.md
new file mode 100644
index 0000000..c5ab6c6
--- /dev/null
+++ b/openspec/changes/add-loan-pricing-frontend/tasks.md
@@ -0,0 +1,41 @@
+# Tasks: 添加利率定价流程前端管理界面
+
+## Implementation Tasks
+
+### 1. 创建前端 API 接口模块
+- [x] 创建 `ruoyi-ui/src/api/loanPricing/` 目录
+- [x] 创建 `workflow.js` 文件，实现以下 API 函数：
+  - `listWorkflow(query)` - 查询利率定价流程列表
+  - `getWorkflow(serialNum)` - 根据业务方流水号查询详情
+
+### 2. 创建前端页面组件
+- [x] 创建 `ruoyi-ui/src/views/loanPricing/workflow/` 目录
+- [x] 创建 `index.vue` 页面组件，包含：
+  - 查询表单区域（支持客户名称、创建者、机构号筛选）
+  - 数据表格区域（显示流程列表）
+  - 分页组件
+  - 详情对话框（点击查看按钮弹出）
+- [x] 实现以下功能：
+  - 页面加载时自动查询列表
+  - 搜索和重置功能
+  - 点击"查看"按钮弹出详情对话框
+  - 详情对话框展示完整的流程信息
+
+### 3. 配置数据库菜单
+- [x] 准备 SQL 插入语句，在 `sys_menu` 表中添加菜单项：
+  - 一级菜单：利率定价管理（menu_type='M'）
+  - 二级菜单：流程列表（menu_type='C'，对应前端组件路径）
+- [x] 设置正确的权限标识（perms字段）：
+  - 列表查询权限：`loanPricing:workflow:list`
+  - 详情查询权限：`loanPricing:workflow:query`
+- [x] 执行 SQL 插入语句
+- [x] 关联管理员角色到新菜单
+
+### 4. 验证和测试
+- [x] 配置完成，等待用户启动前端服务进行测试
+- [ ] 启动前端开发服务器（`npm run dev`）
+- [ ] 使用 admin 账号登录系统
+- [ ] 验证菜单是否正常显示
+- [ ] 测试列表查询功能
+- [ ] 测试搜索筛选功能
+- [ ] 测试详情查看功能
diff --git a/ruoyi-ui/src/api/loanPricing/workflow.js b/ruoyi-ui/src/api/loanPricing/workflow.js
new file mode 100644
index 0000000..da348e4
--- /dev/null
+++ b/ruoyi-ui/src/api/loanPricing/workflow.js
@@ -0,0 +1,18 @@
+import request from '@/utils/request'
+
+// 查询利率定价流程列表
+export function listWorkflow(query) {
+  return request({
+    url: '/loanPricing/workflow/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询利率定价流程详情
+export function getWorkflow(serialNum) {
+  return request({
+    url: '/loanPricing/workflow/' + serialNum,
+    method: 'get'
+  })
+}
diff --git a/ruoyi-ui/src/views/loanPricing/workflow/index.vue b/ruoyi-ui/src/views/loanPricing/workflow/index.vue
new file mode 100644
index 0000000..4ae71f1
--- /dev/null
+++ b/ruoyi-ui/src/views/loanPricing/workflow/index.vue
@@ -0,0 +1,173 @@
+<template>
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+      <el-form-item label="客户名称" prop="custName">
+        <el-input
+          v-model="queryParams.custName"
+          placeholder="请输入客户名称"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="创建者" prop="createBy">
+        <el-input
+          v-model="queryParams.createBy"
+          placeholder="请输入创建者"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="机构号" prop="orgCode">
+        <el-input
+          v-model="queryParams.orgCode"
+          placeholder="请输入机构号"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <el-table v-loading="loading" :data="workflowList">
+      <el-table-column label="业务方流水号" align="center" prop="serialNum" width="180" :show-overflow-tooltip="true" />
+      <el-table-column label="客户名称" align="center" prop="custName" :show-overflow-tooltip="true" />
+      <el-table-column label="客户类型" align="center" prop="custType" width="100" />
+      <el-table-column label="担保方式" align="center" prop="guarType" width="100" />
+      <el-table-column label="申请金额(元)" align="center" prop="applyAmt" width="120" />
+      <el-table-column label="贷款利率(%)" align="center" prop="loanRate" width="100" />
+      <el-table-column label="创建时间" align="center" prop="createTime" width="160">
+        <template slot-scope="scope">
+          <span>{{ parseTime(scope.row.createTime) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="创建者" align="center" prop="createBy" width="120" />
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template slot-scope="scope">
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-view"
+            @click="handleView(scope.row)"
+            v-hasPermi="['loanPricing:workflow:query']"
+          >查看</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination
+      v-show="total>0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />
+
+    <!-- 详情对话框 -->
+    <el-dialog title="利率定价流程详情" :visible.sync="open" width="800px" append-to-body>
+      <el-descriptions :column="2" border>
+        <el-descriptions-item label="业务方流水号" :span="2">{{ detail.serialNum }}</el-descriptions-item>
+        <el-descriptions-item label="机构编码">{{ detail.orgCode }}</el-descriptions-item>
+        <el-descriptions-item label="运行模式">{{ detail.runType }}</el-descriptions-item>
+        <el-descriptions-item label="客户内码">{{ detail.custIsn }}</el-descriptions-item>
+        <el-descriptions-item label="客户名称">{{ detail.custName }}</el-descriptions-item>
+        <el-descriptions-item label="证件类型" :span="2">{{ detail.idType }}</el-descriptions-item>
+        <el-descriptions-item label="客户类型">{{ detail.custType }}</el-descriptions-item>
+        <el-descriptions-item label="担保方式">{{ detail.guarType }}</el-descriptions-item>
+        <el-descriptions-item label="申请金额">{{ detail.applyAmt }} 元</el-descriptions-item>
+        <el-descriptions-item label="贷款利率">{{ detail.loanRate }} %</el-descriptions-item>
+        <el-descriptions-item label="贷款用途">{{ detail.loanPurpose }}</el-descriptions-item>
+        <el-descriptions-item label="是否有经营佐证">{{ detail.bizProof === 'true' ? '是' : '否' }}</el-descriptions-item>
+        <el-descriptions-item label="抵质押类型">{{ detail.collType }}</el-descriptions-item>
+        <el-descriptions-item label="抵质押物三方所有">{{ detail.collThirdParty === 'true' ? '是' : '否' }}</el-descriptions-item>
+        <el-descriptions-item label="个人快捷支付">{{ detail.midPerQuickPay === 'true' ? '是' : '否' }}</el-descriptions-item>
+        <el-descriptions-item label="个人电费代扣">{{ detail.midPerEleDdc === 'true' ? '是' : '否' }}</el-descriptions-item>
+        <el-descriptions-item label="企业电费代扣">{{ detail.midEntEleDdc === 'true' ? '是' : '否' }}</el-descriptions-item>
+        <el-descriptions-item label="企业水费代扣">{{ detail.midEntWaterDdc === 'true' ? '是' : '否' }}</el-descriptions-item>
+        <el-descriptions-item label="净身企业">{{ detail.isCleanEnt === 'true' ? '是' : '否' }}</el-descriptions-item>
+        <el-descriptions-item label="开立基本结算账户">{{ detail.hasSettleAcct === 'true' ? '是' : '否' }}</el-descriptions-item>
+        <el-descriptions-item label="制造业企业">{{ detail.isManufacturing === 'true' ? '是' : '否' }}</el-descriptions-item>
+        <el-descriptions-item label="省农担担保贷款">{{ detail.isAgriGuar === 'true' ? '是' : '否' }}</el-descriptions-item>
+        <el-descriptions-item label="纳税信用等级A级">{{ detail.isTaxA === 'true' ? '是' : '否' }}</el-descriptions-item>
+        <el-descriptions-item label="县级及以上农业龙头企业">{{ detail.isAgriLeading === 'true' ? '是' : '否' }}</el-descriptions-item>
+        <el-descriptions-item label="普惠小微借款人">{{ detail.isInclusiveFinance === 'true' ? '是' : '否' }}</el-descriptions-item>
+        <el-descriptions-item label="创建时间">{{ detail.createTime }}</el-descriptions-item>
+        <el-descriptions-item label="创建者">{{ detail.createBy }}</el-descriptions-item>
+        <el-descriptions-item label="更新时间">{{ detail.updateTime }}</el-descriptions-item>
+        <el-descriptions-item label="更新者">{{ detail.updateBy }}</el-descriptions-item>
+      </el-descriptions>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="open = false">关 闭</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { listWorkflow, getWorkflow } from "@/api/loanPricing/workflow"
+
+export default {
+  name: "LoanPricingWorkflow",
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 利率定价流程表格数据
+      workflowList: [],
+      // 是否显示弹出层
+      open: false,
+      // 详情数据
+      detail: {},
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        custName: undefined,
+        createBy: undefined,
+        orgCode: undefined
+      }
+    }
+  },
+  created() {
+    this.getList()
+  },
+  methods: {
+    /** 查询利率定价流程列表 */
+    getList() {
+      this.loading = true
+      listWorkflow(this.queryParams).then(response => {
+        this.workflowList = response.rows
+        this.total = response.total
+        this.loading = false
+      })
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1
+      this.getList()
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm")
+      this.handleQuery()
+    },
+    /** 查看详情操作 */
+    handleView(row) {
+      this.open = true
+      getWorkflow(row.serialNum).then(response => {
+        this.detail = response.data
+      })
+    }
+  }
+}
+</script>
diff --git a/sql/loan_pricing_menu.sql b/sql/loan_pricing_menu.sql
new file mode 100644
index 0000000..7aab2ee
--- /dev/null
+++ b/sql/loan_pricing_menu.sql
@@ -0,0 +1,21 @@
+-- 利率定价流程菜单配置
+-- 注意：由于 Windows 编码问题，建议直接在 MySQL 客户端中执行以下语句
+
+-- 删除旧数据
+DELETE FROM sys_role_menu WHERE menu_id IN (2000, 2001, 2002);
+DELETE FROM sys_menu WHERE menu_id IN (2000, 2001, 2002);
+
+-- 一级菜单：利率定价管理
+INSERT INTO sys_menu(menu_id, menu_name, parent_id, order_num, path, component, query, is_frame, is_cache, menu_type, visible, status, perms, icon, create_by, create_time, update_by, update_time, remark)
+VALUES('2000', '利率定价管理', '0', '5', 'loanPricing', NULL, '', 1, 0, 'M', '0', '0', '', 'money', 'admin', NOW(), '', NULL, '利率定价管理目录');
+
+-- 二级菜单：流程列表
+INSERT INTO sys_menu(menu_id, menu_name, parent_id, order_num, path, component, query, is_frame, is_cache, menu_type, visible, status, perms, icon, create_by, create_time, update_by, update_time, remark)
+VALUES('2001', '流程列表', '2000', '1', 'workflow', 'loanPricing/workflow/index', '', 1, 0, 'C', '0', '0', 'loanPricing:workflow:list', 'list', 'admin', NOW(), '', NULL, '利率定价流程列表菜单');
+
+-- 流程列表查询按钮
+INSERT INTO sys_menu(menu_id, menu_name, parent_id, order_num, path, component, query, is_frame, is_cache, menu_type, visible, status, perms, icon, create_by, create_time, update_by, update_time, remark)
+VALUES('2002', '流程查询', '2001', '1', '', '', '', 1, 0, 'F', '0', '0', 'loanPricing:workflow:query', '#', 'admin', NOW(), '', NULL, '');
+
+-- 关联管理员角色
+INSERT INTO sys_role_menu VALUES(1, 2000), (1, 2001), (1, 2002);