From d7eacafa3494e80125e011af4ebddc2e7e771f7d Mon Sep 17 00:00:00 2001
From: yziiy <15979918+mayday-yziiy@user.noreply.gitee.com>
Date: Wed, 22 Oct 2025 10:33:35 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/modules/expression.ts  |  61 +++++++++++
 src/views/expression/form.vue  | 135 +++++++++++++++++++++++
 src/views/expression/hook.tsx  | 189 +++++++++++++++++++++++++++++++++
 src/views/expression/index.vue |  65 ++++++++++++
 4 files changed, 450 insertions(+)
 create mode 100644 src/api/modules/expression.ts
 create mode 100644 src/views/expression/form.vue
 create mode 100644 src/views/expression/hook.tsx
 create mode 100644 src/views/expression/index.vue

diff --git a/src/api/modules/expression.ts b/src/api/modules/expression.ts
new file mode 100644
index 0000000..c31908c
--- /dev/null
+++ b/src/api/modules/expression.ts
@@ -0,0 +1,61 @@
+import { http } from "@/utils/http";
+
+type Result = {
+  code: string;
+  data: any;
+};
+
+export const queryClassifyList = params => {
+  return http.request<Result>(
+    "get",
+    "/adminapi/RoomEmoji/emoji_type_list",
+    { params }
+  );
+};
+
+// 分类新增
+// export const addClassifyData = data => {
+//   return http.request<Result>("post", "/adminapi/GiftLabel/add_label", {
+//     data
+//   });
+// }
+// // 修改分类
+// export const editClassifyData = data => {
+//   return http.request<Result>("post", "/adminapi/GiftLabel/edit_label", {
+//     data
+//   });
+// }
+// // 删除分类
+// export const removeClassifyData = data => {
+//   return http.request<Result>("post", "/adminapi/GiftLabel/del_label", {
+//     data
+//   });
+// };
+// 列表
+export const queryList = params => {
+  return http.request<Result>(
+    "get",
+    "/adminapi/RoomEmoji/emoji_list",
+    { params }
+  );
+};
+
+// 新增
+export const addData = data => {
+  return http.request<Result>("post", "/adminapi/RoomEmoji/add_emoji", {
+    data
+  });
+}
+// 编辑
+export const editData = data => {
+  return http.request<Result>("post", "/adminapi/RoomEmoji/edit_emoji", {
+    data
+  });
+}
+
+// 删除
+export const removeData = data => {
+  return http.request<Result>("post", "/adminapi/RoomEmoji/del_emoji", {
+    data
+  });
+};
\ No newline at end of file
diff --git a/src/views/expression/form.vue b/src/views/expression/form.vue
new file mode 100644
index 0000000..feb0768
--- /dev/null
+++ b/src/views/expression/form.vue
@@ -0,0 +1,135 @@
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import uploadImage from '@/components/UploadImage/index.vue';
+import { getGiftTypeOrLabel } from '@/api/modules/gift'
+const ruleFormRef = ref();
+const typeList = ref([])
+const labelList = ref([])
+const formRules = ref({
+  type: [{ required: true, message: "请选择分类", trigger: "change" }],
+  label: [{ required: true, message: "请输入礼物标签", trigger: "blur" }],
+  base_image: [{ required: true, message: "请上传礼物展示图片", trigger: "change" }],
+  play_image: [],
+  gift_type: [{ required: true, message: "请选择", trigger: "change" }],
+  is_public_screen: [{ required: true, message: "请选择", trigger: "change" }],
+  is_public_server: [{ required: true, message: "请选择", trigger: "change" }],
+  is_show: [{ required: true, message: "请选择", trigger: "change" }],
+  is_can_buy: [{ required: true, message: "请选择", trigger: "change" }],
+  sort: [],
+  file_type: [{ required: true, message: "请选择文件类型", trigger: "change" }],
+  gift_price: [{ required: true, message: "请输入礼物价格", trigger: "blur" }],
+  gift_name: [{ required: true, message: "请输入礼物名称", trigger: "blur" }, { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }]
+});
+const props = defineProps(["formInline"]);
+const newFormInline = ref(
+  props.formInline
+    ? props.formInline
+    : {
+      gift_name: "",
+      type: "",
+      label: "",
+      gift_price: "",
+      base_image: "",
+      file_type: "",
+      play_image: "",
+      gift_type: "",
+      is_public_screen: "",
+      is_public_server: "",
+      is_show: "",
+      is_can_buy: "",
+      sort: ""
+    }
+);
+function getRef() {
+  return ruleFormRef.value;
+}
+function handleFileSuccess(list) {
+  newFormInline.value.base_image = list.join(',')
+}
+function handlePlayFileSuccess(list) {
+  newFormInline.value.play_image = list.join(',')
+}
+const getTypeList = async () => {
+  const { data, code } = await getGiftTypeOrLabel({ type: 1 })
+  typeList.value = code ? data : []
+}
+const getLableList = async () => {
+  const { data, code } = await getGiftTypeOrLabel({ type: 2, type_id: newFormInline.value.type || '' })
+  labelList.value = code ? data : []
+}
+const changeType = () => {
+  getLableList()
+}
+onMounted(() => {
+  getTypeList()
+  getLableList()
+})
+defineExpose({ getRef });
+</script>
+
+<template>
+  <el-form ref="ruleFormRef" :model="newFormInline" :rules="formRules" label-width="120px">
+    <el-form-item label="礼物名称" prop="gift_name">
+      <el-input v-model="newFormInline.gift_name" clearable placeholder="请输入礼物名称" />
+    </el-form-item>
+    <el-form-item label="礼物类型" prop="type">
+      <el-select v-model="newFormInline.type" placeholder="请选择礼物类型" @change="changeType">
+        <el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id">
+        </el-option>
+      </el-select>
+    </el-form-item>
+    <el-form-item label="礼物标签" prop="label">
+      <el-select v-model="newFormInline.label" placeholder="请选择礼物标签">
+        <el-option v-for="item in labelList" :key="item.id" :label="item.name" :value="item.id">
+        </el-option>
+      </el-select>
+    </el-form-item>
+    <el-form-item label="礼物价格" prop="gift_price">
+      <el-input-number v-model="newFormInline.gift_price" :precision="2" :step="0.01"></el-input-number>
+    </el-form-item>
+    <el-form-item label="展示图片" prop="base_image">
+      <uploadImage @handleSuccess="handleFileSuccess" :limit="1" :echoUrl="newFormInline.base_image" />
+    </el-form-item>
+    <el-form-item label="文件类型" prop="file_type">
+      <el-radio-group v-model="newFormInline.file_type">
+        <el-radio :label="1">SVGA</el-radio>
+        <el-radio :label="2">MP4</el-radio>
+      </el-radio-group>
+    </el-form-item>
+    <el-form-item label="礼物特效图" prop="play_image">
+      <uploadImage @handleSuccess="handlePlayFileSuccess"
+        :acceptType="newFormInline.file_type === 1 ? '.svg,.svga' : '.mp4'" :limit="1"
+        :echoUrl="newFormInline.play_image" />
+    </el-form-item>
+    <el-form-item label="是否有特效" prop="gift_type">
+      <el-radio-group v-model="newFormInline.gift_type">
+        <el-radio :label="2">是</el-radio>
+        <el-radio :label="1">否</el-radio>
+      </el-radio-group>
+    </el-form-item>
+    <el-form-item label="是否公屏" prop="is_public_screen">
+      <el-radio-group v-model="newFormInline.is_public_screen">
+        <el-radio :label="1">是</el-radio>
+        <el-radio :label="2">否</el-radio>
+      </el-radio-group>
+    </el-form-item>
+    <el-form-item label="是否全服播报" prop="is_public_server">
+      <el-radio-group v-model="newFormInline.is_public_server">
+        <el-radio :label="1">是</el-radio>
+        <el-radio :label="2">否</el-radio>
+      </el-radio-group>
+    </el-form-item>
+    <el-form-item label="是否显示" prop="is_show">
+      <el-radio-group v-model="newFormInline.is_show">
+        <el-radio :label="1">显示</el-radio>
+        <el-radio :label="2">隐藏</el-radio>
+      </el-radio-group>
+    </el-form-item>
+    <el-form-item label="是否可购买" prop="is_can_buy">
+      <el-radio-group v-model="newFormInline.is_can_buy">
+        <el-radio :label="1">可购买</el-radio>
+        <el-radio :label="2">禁止购买</el-radio>
+      </el-radio-group>
+    </el-form-item>
+  </el-form>
+</template>
diff --git a/src/views/expression/hook.tsx b/src/views/expression/hook.tsx
new file mode 100644
index 0000000..ac2f923
--- /dev/null
+++ b/src/views/expression/hook.tsx
@@ -0,0 +1,189 @@
+import { ref, h } from "vue";
+import editForm from "./form.vue";
+import { message } from "@/utils/message";
+import {
+  queryList,
+  addData,
+  editData,
+  removeData
+} from "@/api/modules/expression";
+import { addDialog } from "@/components/ReDialog";
+
+export function useData() {
+  const formRef = ref();
+  const loading = ref(true);
+  const tableList = ref([]);
+  const isShow = ref(false);
+  const searchForm = ref({
+    id: "",
+    name: ""
+  });
+  const searchLabel = ref([
+    { label: "表情ID", prop: "id", type: "input" },
+    { label: "表情名称", prop: "name", type: "input" }
+  ]);
+  const pagination = ref({
+    total: 0,
+    pageSize: 10,
+    pageSizes: [10, 20, 50, 100],
+    currentPage: 1,
+    background: true
+  });
+  const tableLabel = ref([
+    {
+      label: "ID",
+      prop: "id"
+    },
+    {
+      label: "表情名称",
+      prop: "gift_name"
+    },
+    {
+      label: "图片",
+      prop: "base_image",
+      cellRenderer: ({ row }) => (
+        <el-image
+          fit="cover"
+          preview-teleported={true}
+          src={row.base_image}
+          preview-src-list={Array.of(row.base_image)}
+          class="w-[50px] h-[50px]  align-middle"
+        />
+      )
+    },
+    {
+      label: "状态",
+      prop: "is_can_buy",
+      cellRenderer: ({ row }) => (
+        <el-tag type={row.is_can_buy === 1 ? 'success' : 'error'}>{row.is_can_buy === 1 ? '可购买' : '禁止购买'}</el-tag>
+      )
+    },
+    {
+      label: "修改时间",
+      prop: "createtime"
+    },
+    {
+      label: "创建时间",
+      prop: "createtime"
+    },
+    {
+      label: "操作",
+      fixed: "right",
+      width: 210,
+      slot: "operation"
+    }
+  ]);
+  const onSearch = async (formData) => {
+    loading.value = true;
+    searchForm.value = { ...formData }
+    const { data, code } = await queryList({
+      ...formData,
+      page: pagination.value.currentPage,
+      page_limit: pagination.value.pageSize
+    });
+    if (code) {
+      tableList.value = data.lists;
+      pagination.value.total = data.count;
+      pagination.value.currentPage = data.page;
+    }
+    loading.value = false;
+  };
+  const handleSizeChange = (val: number) => {
+    pagination.value.pageSize = val;
+    onSearch(searchForm.value);
+  };
+  const handleCurrentChange = (val: number) => {
+    pagination.value.currentPage = val;
+    onSearch(searchForm.value);
+  };
+  const handleDelete = async rowData => {
+    const { code } = await removeGiftData({ gid: rowData.gid });
+    if (code) {
+      message(`您删除了礼物名称为【${rowData.gift_name}】的这条数据`, {
+        type: "success"
+      });
+      onSearch(searchForm.value);
+    }
+  };
+  // 新增
+  const openDialog = async (title = "新增", rowData: any) => {
+    const { data, code } = await getGiftInfo({ gid: rowData.gid })
+    addDialog({
+      title: `${title}礼物`,
+      props: {
+        formInline: {
+          gift_name: rowData?.gift_name ?? "",
+          type: data?.type ?? "",
+          label: data?.label ?? "",
+          base_image: rowData?.base_image ?? "",
+          gift_price: rowData?.gift_price ?? "",
+          file_type: data?.file_type ?? "",
+          play_image: data?.play_image ?? "",
+          gift_type: data?.gift_type ?? "",
+          is_public_screen: rowData?.is_public_screen ?? "",
+          is_public_server: rowData?.is_public_server ?? "",
+          is_show: rowData?.is_show ?? "",
+          is_can_buy: rowData?.is_can_buy ?? "",
+          sort: rowData?.sort ?? ""
+        }
+      },
+      width: "40%",
+      closeOnClickModal: false,
+      contentRenderer: () => h(editForm, { ref: formRef, formInline: null }),
+      beforeSure: (done, { options }) => {
+        const FormRef = formRef.value.getRef();
+        const curData = options.props.formInline;
+        const saveData = async form => {
+          const { code, msg } = await addGiftData(form);
+          if (code) {
+            message("新增成功", { type: "success" });
+            onSearch(searchForm.value);
+            done();
+          } else {
+            message(msg, { type: "error" });
+          }
+        };
+        const updateData = async form => {
+          const { code, msg } = await editGiftData({
+            ...form,
+            gid: rowData.gid
+          });
+          if (code) {
+            message("修改成功", { type: "success" });
+            onSearch(searchForm.value);
+            done();
+          } else {
+            message(msg, { type: "error" });
+          }
+        };
+        FormRef.validate(valid => {
+          if (valid) {
+            console.log("curData", curData);
+            // 表单规则校验通过
+            if (title === "新增") {
+              // 实际开发先调用新增接口，再进行下面操作
+              saveData(curData);
+            } else {
+              // 实际开发先调用修改接口，再进行下面操作
+              updateData(curData);
+            }
+          }
+        });
+      }
+    });
+  };
+  return {
+    searchForm,
+    searchLabel,
+    onSearch,
+    isShow,
+    tableList,
+    tableLabel,
+    pagination,
+    handleSizeChange,
+    handleCurrentChange,
+    loading,
+    handleDelete,
+    openDialog
+  };
+}
diff --git a/src/views/expression/index.vue b/src/views/expression/index.vue
new file mode 100644
index 0000000..5b4df43
--- /dev/null
+++ b/src/views/expression/index.vue
@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import { onMounted } from "vue";
+import { useData } from "./hook";
+import SearchForm from "@/components/SearchForm/index.vue";
+import { PureTableBar } from "@/components/RePureTableBar";
+import { deviceDetection } from "@pureadmin/utils";
+import { useRenderIcon } from "@/components/ReIcon/src/hooks";
+import AddFill from "@iconify-icons/ri/add-circle-line";
+const {
+  searchLabel,
+  searchForm,
+  onSearch,
+  isShow,
+  tableList,
+  pagination,
+  tableLabel,
+  handleSizeChange,
+  handleCurrentChange,
+  loading,
+  openDialog
+} = useData();
+defineOptions({
+  name: "giftList"
+});
+onMounted(() => {
+  onSearch(searchForm.value);
+});
+</script>
+
+
+<template>
+  <div class="main">
+    <SearchForm class="pb-2" :LabelList="searchLabel" :formData="searchForm" @handleSearch="onSearch" />
+    <div ref="contentRef" :class="['flex', deviceDetection() ? 'flex-wrap' : '']">
+      <PureTableBar title="表情包列表" :class="[isShow && !deviceDetection() ? '!w-[60vw]' : 'w-full']" :columns="tableLabel"
+        @refresh="onSearch">
+        <template #buttons>
+          <el-button type="primary" :icon="useRenderIcon(AddFill)" @click="openDialog('新增', {})">
+            新增表情包
+          </el-button>
+        </template>
+        <template v-slot="{ size, dynamicColumns }">
+          <pure-table ref="tableRef" align-whole="center" showOverflowTooltip table-layout="auto" default-expand-all
+            :loading="loading" :size="size" row-key="id" adaptive :adaptiveConfig="{ offsetBottom: 108 }"
+            :data="tableList" :columns="dynamicColumns" :pagination="{ ...pagination, size }" :header-cell-style="{
+              background: 'var(--el-fill-color-light)',
+              color: 'var(--el-text-color-primary)'
+            }" @page-current-change="handleCurrentChange" @page-size-change="handleSizeChange">
+            <template #operation="{ row }">
+              <!-- <el-button link type="primary" :size="size" @click="openDialog('编辑', row)">
+                编辑
+              </el-button>
+              <el-popconfirm :title="`是否确认删除礼物名称为【${row.gift_name}】的这条数据`" @confirm="handleDelete(row)">
+                <template #reference>
+                  <el-button link type="primary" :size="size"> 删除 </el-button>
+                </template>
+</el-popconfirm> -->
+            </template>
+          </pure-table>
+        </template>
+      </PureTableBar>
+    </div>
+  </div>
+</template>
+<style scoped lang="scss"></style>