增加websocket连接，增加台桌列表页面，增加用户列表页面

src/views/user/active.vue

@@ -1 +0,0 @@
-<template></template>

src/views/user/active/index.vue

@@ -0,0 +1,155 @@
+<template>
+  <div class="app-container">
+    <!-- 列表 -->
+    <!-- 搜索 -->
+    <page-search
+      ref="searchRef"
+      :search-config="searchConfig"
+      @query-click="handleQueryClick"
+      @reset-click="handleResetClick"
+    />
+    <!-- 列表 -->
+    <page-content
+      ref="contentRef"
+      :content-config="contentConfig"
+      @add-click="handleAddClick"
+      @edit-click="handleEditClick"
+      @export-click="handleExportClick"
+      @search-click="handleSearchClick"
+      @toolbar-click="handleToolbarClick"
+      @operat-click="handleOperatClick"
+      @filter-change="handleFilterChange"
+    >
+      <template #status="scope">
+        <el-tag :type="scope.row[scope.prop] == 1 ? 'success' : 'info'">
+          {{ scope.row[scope.prop] == 1 ? "启用" : "禁用" }}
+        </el-tag>
+      </template>
+      <template #options="scope">
+        {{ returnOptionsLabel(scope.prop, scope.row[scope.prop]) }}
+      </template>
+      <template #bol="scope">
+        {{ scope.row[scope.prop] ? "是" : "否" }}
+      </template>
+      <template #gender="scope">
+        <el-tag
+          :type="
+            scope.row[scope.prop] == null
+              ? 'info'
+              : scope.row[scope.prop] == 1
+              ? 'success'
+              : 'warning'
+          "
+        >
+          {{ scope.row[scope.prop] === null ? "未知" : scope.row[scope.prop] == 1 ? "男" : "女" }}
+        </el-tag>
+      </template>
+      <template #user="scope">
+        <div class="flex align-center">
+          <el-avatar :src="scope.row.headImg" />
+          <el-tag>{{ scope.row.nickName }}</el-tag>
+        </div>
+      </template>
+      <template #link="scope">
+        <el-link>{{ scope.row[scope.prop] }}</el-link>
+      </template>
+      <template #mobile="scope">
+        <el-text>{{ scope.row[scope.prop] }}</el-text>
+        <copy-button
+          v-if="scope.row[scope.prop]"
+          :text="scope.row[scope.prop]"
+          style="margin-left: 2px"
+        />
+      </template>
+    </page-content>
+
+    <!-- 新增 -->
+    <page-modal
+      ref="addModalRef"
+      :modal-config="addModalConfig"
+      @submit-click="handleSubmitClick"
+      @formDataChange="formDataChange"
+    ></page-modal>
+
+    <!-- 编辑 -->
+    <page-modal
+      ref="editModalRef"
+      :modal-config="editModalConfig"
+      @submit-click="handleSubmitClick"
+      @formDataChange="formDataChange"
+    ></page-modal>
+  </div>
+</template>
+
+<script setup >
+import usePage from "@/components/CURD/usePage";
+import addModalConfig from "./config/add";
+import contentConfig from "./config/content";
+import editModalConfig from "./config/edit";
+import searchConfig from "./config/search";
+import { returnOptionsLabel } from "./config/config";
+const editMoneyModalRef = ref(null);
+const {
+  searchRef,
+  contentRef,
+  addModalRef,
+  editModalRef,
+  handleQueryClick,
+  handleResetClick,
+  // handleAddClick,
+  // handleEditClick,
+  handleSubmitClick,
+  handleExportClick,
+  handleSearchClick,
+  handleFilterChange,
+} = usePage();
+
+// 修改金额表单类型
+function formDataChange(type, val) {
+  console.log(type, val);
+}
+
+// 新增
+async function handleAddClick() {
+  addModalRef.value?.setModalVisible();
+}
+// 获取优惠券
+async function getCouponList() {}
+// 编辑
+async function handleEditClick(row) {
+  editModalRef.value?.handleDisabled(false);
+  editModalRef.value?.setModalVisible();
+  // 根据id获取数据进行填充
+  // const data = await VersionApi.getFormData(row.id);
+  editModalRef.value?.setFormData({ ...row, headImg: row.headImg ? [row.headImg] : "" });
+}
+
+// 其他工具栏
+function handleToolbarClick(name) {
+  console.log(name);
+  if (name === "custom1") {
+    ElMessage.success("点击了自定义1按钮");
+  }
+}
+
+// 其他操作列
+async function handleOperatClick(data) {
+  const row = data.row;
+  if (data.name == "more") {
+    if (data.command === "change-money") {
+      editMoneyModalRef.value.setModalVisible();
+      editMoneyModalRef.value.setFormData({ ...row, headImg: row.headImg ? [row.headImg] : "" });
+      return;
+    }
+    return;
+  }
+}
+
+// 切换示例
+const isA = ref(true);
+</script>
+<style scoped>
+.align-center {
+  align-items: center;
+}
+</style>