1

src/layout/UserDropdown.vue

@@ -58,11 +58,11 @@ const OptionsList = [
   },
   },
   {
   {
     label: '创作记录',
     label: '创作记录',
-    value: '', //CreationRecord
+    value: '/CreationRecord', //CreationRecord
   },
   },
   {
   {
     label: '产品订单',
     label: '产品订单',
-    value: '/PayRecord',
+    value: '', //    /PayRecord
   },
   },
   {
   {
     label: '合作咨询',
     label: '合作咨询',

src/pages/CreationRecord/index.vue

+<template>
+  <div class="custom-creation-record">
+    <div class="label-box">
+      <span
+        :class="{
+          active: item.value == DefaultTable,
+        }"
+        v-for="item in label_list"
+        :key="item.value"
+        >{{ item.label }}</span
+      >
+    </div>
+    <CustomTTable :columns="columns" :list="RecordList.list"></CustomTTable>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import CustomTTable from '@/components/custom/TTable.vue';
+import { reactive, ref } from 'vue';
+// 默认展示绘图记录
+const DefaultTable = ref<'img' | 'text'>('img');
+const RecordList = reactive({
+  // 绘图列表
+  list: [],
+  //   文案记录
+  textlist: [],
+});
+const label_list = [
+  {
+    label: '绘图记录',
+    value: 'img',
+  },
+  {
+    label: '文案记录',
+    value: 'text',
+  },
+];
+const columns = [
+  {
+    title: '账号',
+    colKey: 'name',
+  },
+  {
+    title: '套餐',
+    colKey: 'packages',
+    align: 'center',
+    className: 'n_quantity',
+  },
+  {
+    title: '状况',
+    colKey: 'n_funds',
+    align: 'center',
+    className: 'n_funds',
+  },
+  {
+    title: '到期时间',
+    colKey: 'operation',
+    align: 'right',
+  },
+];
+</script>
+
+<style lang="less">
+@import '@/style/variables.less';
+.custom-creation-record {
+  margin-top: @page-margin-top;
+  .label-box {
+    font-weight: 600;
+    font-size: @font-size-18;
+    margin-bottom: 16px;
+    .active {
+      color: #00f9f9;
+    }
+    & > :not(:first-child) {
+      margin-left: 12px;
+    }
+  }
+}
+</style>

src/pages/PayRecord/index.vue

 <template>
 <template>
   <div class="custom-my-payrecord">
   <div class="custom-my-payrecord">
-    <CustomTTable></CustomTTable>
+    <CustomTTable :columns="columns" :list="RecordList.list"></CustomTTable>
   </div>
   </div>
 </template>
 </template>
 
 
 <script lang="ts" setup>
 <script lang="ts" setup>
 import CustomTTable from '@/components/custom/TTable.vue';
 import CustomTTable from '@/components/custom/TTable.vue';
-
+import { reactive } from 'vue';
+const RecordList = reactive({
+  list: [],
+});
 const columns = [
 const columns = [
   {
   {
     title: '账号',
     title: '账号',

src/router/modules/home.ts

@@ -74,6 +74,15 @@ export default [
           header: true,
           header: true,
         },
         },
       },
       },
+      // 创作记录--CreationRecord
+      {
+        path: '/CreationRecord',
+        name: 'CreationRecord',
+        component: () => import('@/pages/CreationRecord/index.vue'),
+        meta: {
+          header: true,
+        },
+      },
       // {
       // {
       //   path: '/gpt',
       //   path: '/gpt',
       //   name: 'gpt',
       //   name: 'gpt',