diff --git a/src/api/modules/nobility.ts b/src/api/modules/nobility.ts
new file mode 100644
index 0000000..a73080c
--- /dev/null
+++ b/src/api/modules/nobility.ts
@@ -0,0 +1,42 @@
+import { http } from "@/utils/http";
+
+type Result = {
+  code: string;
+  data: any;
+};
+// 列表
+export const queryList = params => {
+  return http.request<Result>("get", "/adminapi/Nobility/get_nobility_list", {
+    params
+  });
+};
+export const addNobilityData = data => {
+  return http.request<Result>("post", "/adminapi/Nobility/add_nobility", { data });
+};
+export const deleteRobotData = data => {
+  return http.request<Result>("post", "/adminapi/Nobility/del_nobility", { data });
+};
+export const editNobilityData = data => {
+  return http.request<Result>("post", "/adminapi/Nobility/edit_nobility", { data });
+};
+// 爵位权限
+export const queryPowerList = params => {
+  return http.request<Result>("get", "/adminapi/Nobility/get_nobility_power_list", {
+    params
+  });
+};
+export const addPowerData = data => {
+  return http.request<Result>("post", "/adminapi/Nobility/add_nobility_power", { data });
+};
+export const deletePowerData = data => {
+  return http.request<Result>("post", "/adminapi/Nobility/del_nobility_power", { data });
+};
+export const editPowerData = data => {
+  return http.request<Result>("post", "/adminapi/Nobility/edit_nobility_power", { data });
+};
+
+export const queryUserNobility = params => {
+  return http.request<Result>("get", "/adminapi/Nobility/get_user_nobility_list", {
+    params
+  });
+};
\ No newline at end of file
diff --git a/src/utils/http/config.ts b/src/utils/http/config.ts
index 1a29f79..896d9be 100644
--- a/src/utils/http/config.ts
+++ b/src/utils/http/config.ts
@@ -1,4 +1,4 @@
-export const URL = "https://vespa.qxyushen.top";
+export const URL = "https://test.vespa.qxyushen.top";
 // https://vespa.qxyushen.top 正式
 //  https://test.vespa.qxyushen.top
 // 声网appId 在这里换
diff --git a/src/views/Nobility/nobilityList/form.vue b/src/views/Nobility/nobilityList/form.vue
new file mode 100644
index 0000000..9d28e26
--- /dev/null
+++ b/src/views/Nobility/nobilityList/form.vue
@@ -0,0 +1,127 @@
+<script setup lang="ts">
+import { ref, onBeforeMount } from "vue";
+import uploadImage from '@/components/UploadImage/index.vue';
+import {
+  queryPowerList
+} from "@/api/modules/nobility";
+const ruleFormRef = ref();
+const formRules = ref({
+  pay_price: [{ required: true, message: "请输入购买价格", trigger: "blur" }],
+  pay_coin: [{ required: true, message: "请输入购买增加金币", trigger: "blur" }],
+  renew_price: [{ required: true, message: "请输入续费价格", trigger: "blur" }],
+  renew_coin: [{ required: true, message: "请输入续费增加金币", trigger: "blur" }],
+  day: [{ required: true, message: "请输入购买时长（天）", trigger: "blur" }],
+  image: [{ required: true, message: "请上传图标", trigger: "change" }],
+  images: [{ required: true, message: "请上传灰色图标", trigger: "change" }],
+  name: [{ required: true, message: "请输入爵位名称", trigger: "blur" }, { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }]
+});
+const props = defineProps(["formInline"]);
+const typeList = ref({})
+const checkAll = ref(false)
+const checkedCities = ref([])
+const isIndeterminate = ref(false)
+const newFormInline = ref(
+  props.formInline
+    ? props.formInline
+    : {
+      name: "",
+      image: "",
+      images: "",
+      pay_price: "",
+      pay_coin: "",
+      renew_price: "",
+      renew_coin: "",
+      day: "",
+      nick_name_color: "",
+      power_ids: ""
+    }
+);
+function getRef() {
+  return ruleFormRef.value;
+}
+function handleFileSuccess(list) {
+  newFormInline.value.image = list.join(',')
+}
+function handleBgSuccess(list) {
+  newFormInline.value.images = list.join(',')
+}
+const getList = async () => {
+  const { data, code } = await queryPowerList({
+    page: 1,
+    page_limit: 1000
+  })
+  if (code) {
+    typeList.value = data.lists
+    console.log(newFormInline.value)
+    if (newFormInline.value.power_ids !== '') {
+      console.log(newFormInline.value.power_ids.split(','))
+      checkedCities.value = newFormInline.value.power_ids.split(',').map(ele => { return Number(ele) })
+      if (checkedCities.value.length === typeList.value.length) checkAll.value = true
+    }
+  }
+}
+const handleCheckAllChange = (value) => {
+  if (value) {
+    checkedCities.value = []
+    typeList.value.forEach(ele => {
+      checkedCities.value.push(ele.id)
+    });
+    newFormInline.value.power_ids = checkedCities.value.join(',')
+  } else {
+    checkedCities.value = []
+    newFormInline.value.power_ids = ''
+  }
+}
+const handleCheckedCitiesChange = (value) => {
+  if (value.length) {
+    newFormInline.value.power_ids = value.join(',')
+  } else {
+    newFormInline.value.power_ids = ''
+  }
+}
+onBeforeMount(() => {
+  getList()
+})
+defineExpose({ getRef });
+</script>
+
+<template>
+  <el-form ref="ruleFormRef" :model="newFormInline" :rules="formRules" label-width="120px">
+
+
+    <el-form-item label="爵位名称" prop="name">
+      <el-input v-model="newFormInline.name" clearable placeholder="请输入爵位名称" />
+    </el-form-item>
+    <el-form-item label="爵位图标" prop="image">
+      <uploadImage @handleSuccess="handleFileSuccess" :limit="1" :echoUrl="newFormInline.image" />
+    </el-form-item>
+    <el-form-item label="灰色图标" prop="images">
+      <uploadImage @handleSuccess="handleBgSuccess" :limit="1" :echoUrl="newFormInline.images" />
+    </el-form-item>
+    <el-form-item label="购买价格" prop="pay_price">
+      <el-input-number v-model="newFormInline.pay_price" :min="0" controls-position="right"></el-input-number>
+    </el-form-item>
+    <el-form-item label="购买增加金币" prop="pay_coin">
+      <el-input-number v-model="newFormInline.pay_coin" :min="0" controls-position="right"></el-input-number>
+    </el-form-item>
+    <el-form-item label="续费价格" prop="renew_price">
+      <el-input-number v-model="newFormInline.renew_price" :min="0" controls-position="right"></el-input-number>
+    </el-form-item>
+    <el-form-item label="续费增加金币" prop="renew_coin">
+      <el-input-number v-model="newFormInline.renew_coin" :min="0" controls-position="right"></el-input-number>
+    </el-form-item>
+    <el-form-item label="时长（天）" prop="day">
+      <el-input-number v-model="newFormInline.day" :min="0" controls-position="right"></el-input-number>
+    </el-form-item>
+    <el-form-item label="设置权限" prop="power_ids">
+      <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
+      <div style="margin: 15px 0;"></div>
+      <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
+        <el-checkbox v-for="ele in typeList" :label="ele.id" :key="ele.id">{{ ele.name }}</el-checkbox>
+      </el-checkbox-group>
+    </el-form-item>
+    <el-form-item label="昵称颜色" prop="nick_name_color">
+      <el-input v-model="newFormInline.nick_name_color" clearable placeholder="请输入昵称颜色" />
+    </el-form-item>
+  </el-form>
+</template>
diff --git a/src/views/Nobility/nobilityList/hook.tsx b/src/views/Nobility/nobilityList/hook.tsx
new file mode 100644
index 0000000..52e989b
--- /dev/null
+++ b/src/views/Nobility/nobilityList/hook.tsx
@@ -0,0 +1,177 @@
+import { ref, h } from "vue";
+import editForm from "./form.vue";
+import { message } from "@/utils/message";
+import {
+  queryList,
+  addNobilityData,
+  deleteRobotData,
+  editNobilityData
+} from "@/api/modules/nobility";
+import { addDialog } from "@/components/ReDialog";
+export function useData() {
+  const formRef = ref();
+  const loading = ref(true);
+  const tableList = ref([]);
+  const isShow = ref(false);
+  const pagination = ref({
+    total: 0,
+    pageSize: 10,
+    pageSizes: [10, 20, 50, 100],
+    currentPage: 1,
+    background: true
+  });
+  const tableLabel = ref([
+    {
+      label: "ID",
+      prop: "lid"
+    },
+    {
+      label: "爵位名称",
+      prop: "name"
+    },
+    {
+      label: "图标",
+      prop: "image",
+      cellRenderer: ({ row }) => (
+        <el-image
+          fit="cover"
+          preview-teleported={true}
+          src={row.image}
+          preview-src-list={Array.of(row.image)}
+          class="w-[24px] h-[24px] rounded-full align-middle"
+        />
+      ),
+    },
+    {
+      label: "购买价格",
+      prop: "pay_price"
+    },
+    {
+      label: "续费价格",
+      prop: "renew_price"
+    },
+    {
+      label: "购买增加金币",
+      prop: "pay_coin"
+    },
+    {
+      label: "续费增加金币",
+      prop: "renew_coin"
+    },
+    {
+      label: "天数",
+      prop: "day"
+    },
+    {
+      label: "操作",
+      fixed: "right",
+      width: 210,
+      slot: "operation"
+    }
+  ]);
+  const onSearch = async () => {
+    loading.value = true;
+    const { data, code } = await queryList({
+      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();
+  };
+  const handleCurrentChange = (val: number) => {
+    pagination.value.currentPage = val;
+    onSearch();
+  };
+  const handleDelete = async rowData => {
+    const { code } = await deleteRobotData({ lid: rowData.lid });
+    if (code) {
+      message(`您删除了名称为${rowData.name}的这条数据`, {
+        type: "success"
+      });
+      onSearch();
+    }
+  };
+  // 新增
+  const openDialog = (title = "新增", rowData: any) => {
+    addDialog({
+      title: `${title}魅力等级`,
+      props: {
+        formInline: {
+          name: rowData?.name ?? "",
+          image: rowData?.image ?? "",
+          images: rowData?.images ?? "",
+          pay_price: rowData?.pay_price ?? "",
+          pay_coin: rowData?.pay_coin ?? "",
+          renew_price: rowData?.renew_price ?? "",
+          renew_coin: rowData?.renew_coin ?? "",
+          day: rowData?.day ?? "",
+          nick_name_color: rowData?.nick_name_color ?? "",
+          power_ids: rowData?.power_ids ?? ''
+        }
+      },
+      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 addNobilityData(form);
+          if (code) {
+            message("新增成功", { type: "success" });
+            onSearch();
+            done();
+          } else {
+            message(msg, { type: "error" });
+          }
+        };
+        const updateData = async form => {
+          const { code, msg } = await editNobilityData({
+            ...form,
+            lid: rowData.lid
+          });
+          if (code) {
+            message("修改成功", { type: "success" });
+            onSearch();
+            done();
+          } else {
+            message(msg, { type: "error" });
+          }
+        };
+        FormRef.validate(valid => {
+          if (valid) {
+            console.log("curData", curData);
+            // 表单规则校验通过
+            if (title === "新增") {
+              // 实际开发先调用新增接口，再进行下面操作
+              saveData(curData);
+            } else {
+              // 实际开发先调用修改接口，再进行下面操作
+              updateData(curData);
+            }
+          }
+        });
+      }
+    });
+  };
+  return {
+    onSearch,
+    isShow,
+    tableList,
+    tableLabel,
+    pagination,
+    handleSizeChange,
+    handleCurrentChange,
+    loading,
+    handleDelete,
+    openDialog
+  };
+}
diff --git a/src/views/Nobility/nobilityList/index.vue b/src/views/Nobility/nobilityList/index.vue
new file mode 100644
index 0000000..f5deedd
--- /dev/null
+++ b/src/views/Nobility/nobilityList/index.vue
@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import { onMounted } from "vue";
+import { useData } from "./hook";
+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 {
+  onSearch,
+  isShow,
+  tableList,
+  pagination,
+  tableLabel,
+  handleSizeChange,
+  handleCurrentChange,
+  handleDelete,
+  loading,
+  openDialog
+} = useData();
+defineOptions({
+  name: "charmGrade"
+});
+onMounted(() => {
+  onSearch();
+});
+</script>
+
+
+<template>
+  <div class="main">
+    <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="`是否确认删除这条数据`" @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>
diff --git a/src/views/Nobility/nobilityPower/form.vue b/src/views/Nobility/nobilityPower/form.vue
new file mode 100644
index 0000000..e1d37b5
--- /dev/null
+++ b/src/views/Nobility/nobilityPower/form.vue
@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import uploadImage from '@/components/UploadImage/index.vue';
+
+const ruleFormRef = ref();
+const formRules = ref({
+  image: [{ required: true, message: "请上传图标", trigger: "change" }],
+  images: [{ required: true, message: "请上传灰色图标", trigger: "change" }],
+  content: [{ required: true, message: "请输入内容", trigger: "blur" }],
+  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
+    : {
+      name: "",
+      content: "",
+      image: "",
+      images: ""
+    }
+);
+function getRef() {
+  return ruleFormRef.value;
+}
+function handleFileSuccess(list) {
+  newFormInline.value.image = list.join(',')
+}
+function handleBgSuccess(list) {
+  newFormInline.value.images = list.join(',')
+}
+defineExpose({ getRef });
+</script>
+
+<template>
+  <el-form ref="ruleFormRef" :model="newFormInline" :rules="formRules" label-width="120px">
+    <el-form-item label="名称" prop="name">
+      <el-input v-model="newFormInline.name" clearable placeholder="请输入名称" />
+    </el-form-item>
+    <el-form-item label="内容" prop="content">
+      <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" v-model="newFormInline.content" clearable
+        placeholder="请输入内容">
+      </el-input>
+    </el-form-item>
+    <el-form-item label="爵位图标" prop="content">
+      <uploadImage @handleSuccess="handleFileSuccess" :limit="1" :echoUrl="newFormInline.image" />
+    </el-form-item>
+    <el-form-item label="灰色图标" prop="images">
+      <uploadImage @handleSuccess="handleBgSuccess" :limit="1" :echoUrl="newFormInline.images" />
+    </el-form-item>
+  </el-form>
+</template>
diff --git a/src/views/Nobility/nobilityPower/hook.tsx b/src/views/Nobility/nobilityPower/hook.tsx
new file mode 100644
index 0000000..4799509
--- /dev/null
+++ b/src/views/Nobility/nobilityPower/hook.tsx
@@ -0,0 +1,155 @@
+import { ref, h } from "vue";
+import editForm from "./form.vue";
+import { message } from "@/utils/message";
+import {
+  queryPowerList,
+  addPowerData,
+  deletePowerData,
+  editPowerData
+} from "@/api/modules/nobility";
+import { addDialog } from "@/components/ReDialog";
+export function useData() {
+  const formRef = ref();
+  const loading = ref(true);
+  const tableList = ref([]);
+  const isShow = ref(false);
+  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: "name"
+    },
+    {
+      label: "内容",
+      prop: "content"
+    },
+    {
+      label: "图标",
+      prop: "image",
+      cellRenderer: ({ row }) => (
+        <el-image
+          fit="cover"
+          preview-teleported={true}
+          src={row.image}
+          preview-src-list={Array.of(row.image)}
+          class="w-[24px] h-[24px] rounded-full align-middle"
+        />
+      ),
+    },
+    {
+      label: "操作",
+      fixed: "right",
+      width: 210,
+      slot: "operation"
+    }
+  ]);
+  const onSearch = async () => {
+    loading.value = true;
+    const { data, code } = await queryPowerList({
+      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();
+  };
+  const handleCurrentChange = (val: number) => {
+    pagination.value.currentPage = val;
+    onSearch();
+  };
+  const handleDelete = async rowData => {
+    const { code } = await deletePowerData({ id: rowData.id });
+    if (code) {
+      message(`您删除了名称为${rowData.name}的这条数据`, {
+        type: "success"
+      });
+      onSearch();
+    }
+  };
+  // 新增
+  const openDialog = (title = "新增", rowData: any) => {
+    addDialog({
+      title: `${title}魅力等级`,
+      props: {
+        formInline: {
+          name: rowData?.name ?? "",
+          image: rowData?.image ?? "",
+          images: rowData?.images ?? "",
+          content: rowData?.content ?? ""
+        }
+      },
+      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 addPowerData(form);
+          if (code) {
+            message("新增成功", { type: "success" });
+            onSearch();
+            done();
+          } else {
+            message(msg, { type: "error" });
+          }
+        };
+        const updateData = async form => {
+          const { code, msg } = await editPowerData({
+            ...form,
+            id: rowData.id
+          });
+          if (code) {
+            message("修改成功", { type: "success" });
+            onSearch();
+            done();
+          } else {
+            message(msg, { type: "error" });
+          }
+        };
+        FormRef.validate(valid => {
+          if (valid) {
+            console.log("curData", curData);
+            // 表单规则校验通过
+            if (title === "新增") {
+              // 实际开发先调用新增接口，再进行下面操作
+              saveData(curData);
+            } else {
+              // 实际开发先调用修改接口，再进行下面操作
+              updateData(curData);
+            }
+          }
+        });
+      }
+    });
+  };
+  return {
+    onSearch,
+    isShow,
+    tableList,
+    tableLabel,
+    pagination,
+    handleSizeChange,
+    handleCurrentChange,
+    loading,
+    handleDelete,
+    openDialog
+  };
+}
diff --git a/src/views/Nobility/nobilityPower/index.vue b/src/views/Nobility/nobilityPower/index.vue
new file mode 100644
index 0000000..de8dd7d
--- /dev/null
+++ b/src/views/Nobility/nobilityPower/index.vue
@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import { onMounted } from "vue";
+import { useData } from "./hook";
+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 {
+  onSearch,
+  isShow,
+  tableList,
+  pagination,
+  tableLabel,
+  handleSizeChange,
+  handleCurrentChange,
+  handleDelete,
+  loading,
+  openDialog
+} = useData();
+defineOptions({
+  name: "charmGrade"
+});
+onMounted(() => {
+  onSearch();
+});
+</script>
+
+
+<template>
+  <div class="main">
+    <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="`是否确认删除这条数据`" @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>
diff --git a/src/views/Nobility/userPowerByNobility/hook.tsx b/src/views/Nobility/userPowerByNobility/hook.tsx
new file mode 100644
index 0000000..4d264fd
--- /dev/null
+++ b/src/views/Nobility/userPowerByNobility/hook.tsx
@@ -0,0 +1,80 @@
+import { ref, h } from "vue";
+import { queryUserNobility } from "@/api/modules/nobility";
+export function useData() {
+  const loading = ref(true);
+  const tableList = ref([]);
+  const isShow = ref(false);
+  const pagination = ref({
+    total: 0,
+    pageSize: 10,
+    pageSizes: [10, 20, 50, 100],
+    currentPage: 1,
+    background: true
+  });
+  const tableLabel = ref([
+    {
+      label: "ID",
+      prop: "id"
+    },
+    {
+      label: "用户Id",
+      prop: "user_id"
+    },
+    {
+      label: "用户名称",
+      prop: "user_nick_name"
+    },
+    {
+      label: "用户头像",
+      prop: "user_avatar",
+      cellRenderer: ({ row }) => (
+        <el-image
+          fit="cover"
+          preview-teleported={true}
+          src={row.user_avatar}
+          preview-src-list={Array.of(row.user_avatar)}
+          class="w-[24px] h-[24px] rounded-full align-middle"
+        />
+      ),
+    },
+    {
+      label: "爵位名称",
+      prop: "nobility_name"
+    },
+    {
+      label: "名称颜色",
+      prop: "nick_name_color"
+    },
+  ]);
+  const onSearch = async () => {
+    loading.value = true;
+    const { data, code } = await queryUserNobility({
+      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();
+  };
+  const handleCurrentChange = (val: number) => {
+    pagination.value.currentPage = val;
+    onSearch();
+  };
+  return {
+    onSearch,
+    isShow,
+    tableList,
+    tableLabel,
+    pagination,
+    handleSizeChange,
+    handleCurrentChange,
+    loading
+  };
+}
diff --git a/src/views/Nobility/userPowerByNobility/index.vue b/src/views/Nobility/userPowerByNobility/index.vue
new file mode 100644
index 0000000..e9cd437
--- /dev/null
+++ b/src/views/Nobility/userPowerByNobility/index.vue
@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { onMounted } from "vue";
+import { useData } from "./hook";
+import { PureTableBar } from "@/components/RePureTableBar";
+import { deviceDetection } from "@pureadmin/utils";
+const {
+  onSearch,
+  isShow,
+  tableList,
+  pagination,
+  tableLabel,
+  handleSizeChange,
+  handleCurrentChange,
+  loading,
+} = useData();
+defineOptions({
+  name: "charmGrade"
+});
+onMounted(() => {
+  onSearch();
+});
+</script>
+
+
+<template>
+  <div class="main">
+    <div ref="contentRef" :class="['flex', deviceDetection() ? 'flex-wrap' : '']">
+      <PureTableBar title="用户爵位列表" :class="[isShow && !deviceDetection() ? '!w-[60vw]' : 'w-full']"
+        :columns="tableLabel" @refresh="onSearch">
+        <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">
+          </pure-table>
+        </template>
+      </PureTableBar>
+    </div>
+  </div>
+</template>
+<style scoped lang="scss"></style>
diff --git a/vite.config.ts b/vite.config.ts
index dd49da8..7b423eb 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -37,7 +37,7 @@ export default ({ mode }: ConfigEnv): UserConfigExport => {
               proxyReq.method = 'OPTIONS';
               // 设置CORS头  https://admin.qxyushen.top
               // https://test.vespa.qxyushen.top
-              res.setHeader('Access-Control-Allow-Origin', 'https://admin.qxyushen.top');
+              res.setHeader('Access-Control-Allow-Origin', 'https://test.vespa.qxyushen.top');
               res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
               res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');
               res.end();