右键

package.json

@@ -19,6 +19,7 @@
     "@casl/ability": "^6.8.0",
     "@casl/vue": "^2.2.6",
     "@element-plus/icons-vue": "^2.3.2",
+    "@imengyu/vue3-context-menu": "^1.5.4",
     "@vueuse/core": "^14.2.1",
     "@wangeditor/editor": "^5.1.23",
     "@wangeditor/editor-for-vue": "^5.1.12",

src/components/common/Table.vue

@@ -11,6 +11,7 @@
       :highlight-current-row="highlightCurrentRow"
       v-bind="$attrs"
       @row-click="handleRowClick"
+      @row-contextmenu="handleRowContextmenu"
     >
       <!-- 动态表头列 -->
       <template v-for="(column, index) in columns" :key="index">
@@ -47,7 +48,9 @@
 </template>
 
 <script setup lang="ts">
+import { ref, watch } from 'vue'
 import type { TableInstance } from 'element-plus'
+
 // 定义表格列配置接口
 interface TableColumn {
   prop?: string
@@ -79,22 +82,60 @@ const props = withDefaults(defineProps<Props>(), {
 // 定义组件抛出的事件
 const emit = defineEmits<{
   (e: 'row-click', row: any): void // 保留原有行点击事件
+  (e: 'row-contextmenu', row: any, column: any, event: MouseEvent): void
 }>()
 
+const tableRef = ref<TableInstance>()
+
+// 维护当前选中行状态，用于二次点击取消选中
+const selectedRow = ref<any>(null)
+
 /**
- * 处理行点击事件（兼容原有逻辑）
+ * 处理行点击事件（支持二次点击取消选中）
  */
 const handleRowClick = (row: any) => {
   // 增加空值保护，避免传递 null 给父组件
   if (!row) return
-  emit('row-click', row)
+
+  // 判断是否是二次点击同一行
+  if (selectedRow.value && selectedRow.value === row) {
+    // 二次点击：取消选中
+    selectedRow.value = null
+    tableRef.value?.setCurrentRow() // 不传参即清除选中 [^14^]
+  } else {
+    // 首次点击或点击不同行：选中该行
+    selectedRow.value = row
+    tableRef.value?.setCurrentRow(row)
   }
 
-const tableRef = ref<TableInstance>()
+  emit('row-click', selectedRow.value)
+}
+
+/**
+ * 处理行右键菜单事件
+ */
+const handleRowContextmenu = (row: any, column: any, event: MouseEvent) => {
+  console.log('row', row)
+  emit('row-contextmenu', row, column, event)
+}
+
+// 监听 tableData 变化，数据更新时取消选中
+watch(
+  () => props.tableData,
+  () => {
+    // 数据更新时，清除选中状态
+    selectedRow.value = null
+    tableRef.value?.setCurrentRow() // 不传参即清除选中 [^14^]
+  },
+  { deep: true }, // 深度监听，防止数组元素变化未触发
+)
 
 // 暴露清除当前选中行的方法
 defineExpose({
-  clearCurrentRow: () => tableRef.value?.setCurrentRow(),
+  clearCurrentRow: () => {
+    selectedRow.value = null
+    tableRef.value?.setCurrentRow()
+  },
 })
 </script>
 

src/components/layout/Layout.vue

@@ -11,10 +11,10 @@
       <!-- 右侧内容区：面包屑 + 页签 + 主体内容 -->
       <section class="content-container">
         <!-- 面包屑导航 -->
-        <Breadcrumb />
+<!--        <Breadcrumb />-->
 
         <!-- 页签标签栏 -->
-        <Tabs />
+<!--        <Tabs />-->
 
         <!-- 主体内容区 -->
         <main class="main-content">
@@ -38,8 +38,8 @@ defineOptions({
 })
 import Header from './Header.vue'
 import Sidebar from './Sidebar.vue'
-import Breadcrumb from './Breadcrumb.vue'
-import Tabs from './Tabs.vue'
+// import Breadcrumb from './Breadcrumb.vue'
+// import Tabs from './Tabs.vue'
 
 const route = useRoute()
 

src/main.ts

@@ -13,6 +13,8 @@ import App from './App.vue'
 import router from './router'
 import {setupAuthDirective} from './directives/auth'
 import { setStorage } from '@/utils/storage'
+import '@imengyu/vue3-context-menu/lib/vue3-context-menu.css'
+import ContextMenu from '@imengyu/vue3-context-menu'
 
 setStorage("one", "1")
 
@@ -20,6 +22,7 @@ const app = createApp(App)
 setupAuthDirective(app)
 app.use(createPinia())
 app.use(router)
+app.use(ContextMenu)
 app.use(ElementPlus, {
     locale: zhCn,
 })

src/views/profile/business/index.vue

@@ -28,11 +28,20 @@
       :columns="marketTableColumnsOptions"
       row-key="id"
       @row-click="handleRowClick"
+      @row-contextmenu="handleRowContextMenu"
     >
       <template #pointSpread="{ row }">
         <el-button type="primary" size="small" @click="handleViewPointDiff(row)"> 查看 </el-button>
       </template>
     </MarketTable>
+    <!-- 行右键菜单 -->
+    <context-menu v-model:show="menuVisible" :options="menuOptions">
+      <context-menu-item label="调整基本账户" @click="handleAction('account')" />
+      <context-menu-item label="设置停止接单金额" @click="handleAction('acceptOrders')" />
+      <context-menu-item label="设置持仓转移金额" @click="handleAction('transfer')" />
+      <context-menu-item label="取款" divided @click="handleAction('deposit')" />
+      <context-menu-item label="存款" divided @click="handleAction('withdraw')" />
+    </context-menu>
 
     <!-- 分页 -->
     <MarketPagination
@@ -122,6 +131,21 @@
       </template>
     </MarketTable>
   </MarketDialog>
+
+  <MarketDialog
+    :visible="rightClickDialogVisible"
+    :title="rightClickDialogTitleEnum[rightClickDialogType]"
+    @confirm="handleRightClickDialogSubmit"
+    @cancel="handleRightClickDialogCancel"
+    @close="handleRightClickDialogClose"
+  >
+    <!--   'account' | 'acceptOrders' | 'transfer' | 'deposit' | 'withdraw'   -->
+    <MarketForm
+      :marketForm="rightClickMarketForm"
+      :form-rules="rightClickMarketFormRules"
+      :form-items="rightClickMarketFormItemOptions"
+    ></MarketForm>
+  </MarketDialog>
 </template>
 
 <script setup lang="ts">
@@ -135,7 +159,6 @@ import MarketTable from '@/components/common/Table.vue'
 import MarketPagination from '@/components/common/Pagination.vue'
 import MarketDialog from '@/components/common/Dialog.vue'
 import MarketForm from '@/components/common/Form.vue'
-
 //配置选项和表单验证
 import {
   marketSearch,
@@ -145,6 +168,7 @@ import {
   countryOptions,
   viewMarketPointTableColumns,
 } from './options'
+import {useUserStore} from '@/stores/modules/user.ts'
 import { rules } from './rules'
 
 //接口
@@ -157,6 +181,8 @@ import {
   editMarketApi,
 } from '@/api/modules/account/market'
 
+const userStore = useUserStore()
+
 /**
  * @description 定义搜索数据
  */
@@ -240,10 +266,72 @@ const marketPointTableColumnsOptions = computed(() => {
 })
 //保存当前选中的表格行
 const selectedRow = ref<any>(null)
+
+// 菜单状态
+const menuVisible = ref(false)
+const menuOptions = reactive({ x: 0, y: 0, zIndex: 3000 })
+const currentRow = ref(null)
+const rightClickDialogVisible = ref(false)
+const rightClickDialogType = ref<'account' | 'acceptOrders' | 'transfer' | 'deposit' | 'withdraw'>(
+  'account',
+)
+const rightClickDialogTitleEnum = {
+  account: '调整基本账户',
+  acceptOrders: '设置停止接单金额',
+  transfer: '设置持仓转移金额',
+  deposit: '取款',
+  withdraw: '存款',
+}
+const rightClickMarketForm = ref({})
+const rightClickMarketFormRules = ref({})
+const rightClickMarketFormItemOptions = ref([])
+
+// 行右键点击
+const handleRowContextMenu = (row: any, column: any, event: any) => {
+  console.log('handleRowContextMenu', row, column, event)
+  event?.preventDefault()
+  currentRow.value = row
+  menuOptions.x = event?.clientX
+  menuOptions.y = event?.clientY
+  menuOptions.zIndex = 3000
+  menuVisible.value = true
+}
+
+/**
+ * @description 处理右键菜单
+ * */
+const handleAction = (key: 'account' | 'acceptOrders' | 'transfer' | 'deposit' | 'withdraw') => {
+  console.log('handleAction', key)
+  switch (key) {
+    case 'account':
+      break
+    case 'acceptOrders':
+      break
+    case 'transfer':
+      break
+    case 'deposit':
+      break
+    case 'withdraw':
+      break
+  }
+  rightClickDialogType.value = key
+  rightClickDialogVisible.value = true
+}
+
+const handleRightClickDialogSubmit = () => {}
+
+const handleRightClickDialogCancel = () => {
+  rightClickDialogVisible.value = false
+}
+
+const handleRightClickDialogClose = () => {
+  rightClickDialogVisible.value = false
+}
+
 /**
  * @description 数据处理方法
+ * 映射表格数据
  */
-//映射表格数据
 const mapMarketTree = (data: any) => {
   console.log('mapMarketTree', data)
   return data.map((item: any) => ({
@@ -267,7 +355,7 @@ const mapMarketTree = (data: any) => {
     flag: item.role_id * 1 === 5 ? (item.type! === 1 ? 1 : 2) : null,
     //使用这个字段来判断是否是做市商
     mobile: item.mobile || '--',
-    email: item.email || "--",
+    email: item.email || '--',
   }))
 }
 

src/views/user/Login.vue

@@ -51,10 +51,9 @@
         </el-form-item>
       </Transition>
       <el-form-item class="form-submit">
-        <el-button type="primary" @click="handleLogin">{{
-          activeTab === 'password' ? '登录' : '注册/登录'
-        }}</el-button>
+        <el-button type="primary" @click="handleLogin">登录</el-button>
       </el-form-item>
+      <router-link to="/user/register" class="to-register">没有账号？去注册</router-link>
     </el-form>
   </div>
 </template>
@@ -66,6 +65,7 @@ defineOptions({
 })
 // type类型
 import type { FormInstance, FormRules } from 'element-plus'
+import { useRouter } from 'vue-router'
 // 组件
 import UserHeader from './components/Header.vue'
 import UserText from './components/Text.vue'
@@ -80,6 +80,8 @@ import { md5Encrypt } from '@/utils/crypto'
 import { countryOptions } from '@/views/user/config/mock'
 import { passwordRules, emailRules, phoneRules, codeRules } from './config/rules'
 
+const router = useRouter()
+
 //userText 实例
 const userText = ref({
   backText: '',
@@ -263,5 +265,12 @@ const handleBack = () => {
       width: 100%;
     }
   }
+  .to-register {
+    display: flex;
+    justify-content: center;
+    text-decoration: none;
+    color: #409eff;
+    margin-top: 24px;
+  }
 }
 </style>