1

src/assets/svg/gpt/empty.svg

+<svg width="70" height="70" viewBox="0 0 70 70" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M17.5 49.3182L49.4454 17.3091L52.6273 20.4909L20.6818 52.5L17.5 49.3182Z" fill="#888FA1"/>
+    <path d="M62.045 35C62.045 40.3491 60.4588 45.5781 57.487 50.0257C54.5152 54.4733 50.2913 57.9398 45.3494 59.9868C40.4075 62.0338 34.9696 62.5694 29.7233 61.5258C24.477 60.4823 19.6579 57.9064 15.8755 54.1241C12.0932 50.3417 9.51734 45.5227 8.47378 40.2763C7.43023 35.03 7.96582 29.5921 10.0128 24.6502C12.0598 19.7083 15.5263 15.4844 19.9739 12.5126C24.4215 9.54078 29.6505 7.95459 34.9996 7.95459C42.1725 7.95459 49.0516 10.804 54.1236 15.876C59.1956 20.948 62.045 27.8271 62.045 35ZM12.7268 35C12.7268 39.4052 14.0331 43.7114 16.4805 47.3741C18.9278 51.0368 22.4064 53.8916 26.4762 55.5774C30.546 57.2631 35.0243 57.7042 39.3448 56.8448C43.6652 55.9854 47.6339 53.8641 50.7488 50.7492C53.8637 47.6343 55.9849 43.6657 56.8443 39.3452C57.7037 35.0247 57.2627 30.5465 55.5769 26.4766C53.8911 22.4068 51.0364 18.9283 47.3736 16.4809C43.7109 14.0336 39.4047 12.7273 34.9996 12.7273C29.0925 12.7273 23.4273 15.0739 19.2504 19.2508C15.0734 23.4278 12.7268 29.0929 12.7268 35Z" fill="#888FA1"/>
+    </svg>
+    
\ No newline at end of file

src/components/custom/RadioGroup.vue

 <template>
   <div class="custom-public-radio-group">
-    <template></template>
-    <TButton>{{}}</TButton>
+    <template v-for="item in list" :key="item.label">
+      <template v-if="item.type == 'custom'">
+        <CustomInput
+          v-model="item.value"
+          :placeholder="item.placeholder"
+        ></CustomInput>
+      </template>
+      <template v-else>
+        <div class="analog-button custom-before-line">{{ item.label }}</div>
+      </template>
+    </template>
   </div>
 </template>
 
 <script lang="ts" setup>
 import { Button as TButton } from 'tdesign-vue-next';
+import CustomInput from '@/components/custom/input/index.vue';
+import { onMounted, watch } from 'vue';
 const props = withDefaults(
   defineProps<{
     modelValue: string;
@@ -18,6 +29,29 @@ const emit = defineEmits(['update;modelValue']);
 </script>
 
 <style lang="less">
+@import '@/style/line.less';
+@import '@/style/variables.less';
 .custom-public-radio-group {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  .analog-button {
+    height: 45px;
+    background: #181818;
+    width: 137px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 8px;
+    font-weight: 700;
+    font-size: @font-size-16;
+  }
+  .custom-input-global {
+    width: 137px !important;
+    height: 45px;
+    .custom-input-box {
+      height: 100%;
+    }
+  }
 }
 </style>

src/components/custom/TTable.vue

+<template>
+  <div class="custom-t-table">
+    <TTable
+      class="reset-t-table"
+      row-key="index"
+      :data="list"
+      :columns="columns"
+      hover
+      :loading="loading"
+    ></TTable>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { Table as TTable } from 'tdesign-vue-next';
+import { ref } from 'vue';
+const props = defineProps<{
+  columns: any[];
+  list: any[];
+}>();
+const loading = ref(false);
+</script>
+
+<style lang="less"></style>

src/components/custom/input/index.vue

@@ -204,18 +204,18 @@ watch(
     FormValidation();
   }
 );
-//
 watch(
-  () => props.num,
+  () => props.modelValue,
   (v) => {
-    // 校验
-    FormValidation();
+    input_value.value = v;
   }
 );
+//
 watch(
-  () => props.modelValue,
+  () => props.num,
   (v) => {
-    input_value.value = v;
+    // 校验
+    FormValidation();
   }
 );
 </script>

src/components/custom/loading2.vue

+<template>
+  <div class="loading">
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+  </div>
+</template>
+
+<style>
+.loading,
+.loading > div {
+  position: relative;
+  box-sizing: border-box;
+}
+
+.loading {
+  display: block;
+  font-size: 0;
+  color: #888fa1;
+}
+
+.loading.la-dark {
+  color: #333;
+}
+
+.loading > div {
+  display: inline-block;
+  float: none;
+  background-color: currentColor;
+  border: 0 solid currentColor;
+}
+
+.loading {
+  width: 58px;
+  height: 58px;
+}
+
+.loading > div {
+  position: absolute;
+  width: 4px;
+  height: 14px;
+  margin: 2px;
+  margin-top: -5px;
+  margin-left: -1px;
+  border-radius: 4px;
+  animation: line-spin-clockwise-fade 1s infinite ease-in-out;
+}
+
+.loading > div:nth-child(1) {
+  top: 15%;
+  left: 50%;
+  transform: rotate(0deg);
+  animation-delay: -0.875s;
+}
+
+.loading > div:nth-child(2) {
+  top: 25.2512626585%;
+  left: 74.7487373415%;
+  transform: rotate(45deg);
+  animation-delay: -0.75s;
+}
+
+.loading > div:nth-child(3) {
+  top: 50%;
+  left: 85%;
+  transform: rotate(90deg);
+  animation-delay: -0.625s;
+}
+
+.loading > div:nth-child(4) {
+  top: 74.7487373415%;
+  left: 74.7487373415%;
+  transform: rotate(135deg);
+  animation-delay: -0.5s;
+}
+
+.loading > div:nth-child(5) {
+  top: 84.9999999974%;
+  left: 50.0000000004%;
+  transform: rotate(180deg);
+  animation-delay: -0.375s;
+}
+
+.loading > div:nth-child(6) {
+  top: 74.7487369862%;
+  left: 25.2512627193%;
+  transform: rotate(225deg);
+  animation-delay: -0.25s;
+}
+
+.loading > div:nth-child(7) {
+  top: 49.9999806189%;
+  left: 15.0000039834%;
+  transform: rotate(270deg);
+  animation-delay: -0.125s;
+}
+
+.loading > div:nth-child(8) {
+  top: 25.2506949798%;
+  left: 25.2513989292%;
+  transform: rotate(315deg);
+  animation-delay: 0s;
+}
+
+.loading.la-sm {
+  width: 16px;
+  height: 16px;
+}
+
+.loading.la-sm > div {
+  width: 1px;
+  height: 4px;
+  margin-top: -2px;
+  margin-left: 0;
+}
+
+.loading.la-2x {
+  width: 64px;
+  height: 64px;
+}
+
+.loading.la-2x > div {
+  width: 4px;
+  height: 20px;
+  margin-top: -10px;
+  margin-left: -2px;
+}
+
+.loading.la-3x {
+  width: 96px;
+  height: 96px;
+}
+
+.loading.la-3x > div {
+  width: 6px;
+  height: 30px;
+  margin-top: -15px;
+  margin-left: -3px;
+}
+
+@keyframes line-spin-clockwise-fade {
+  50% {
+    opacity: 0.2;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+</style>

src/layout/UserDropdown.vue

@@ -5,6 +5,7 @@
       overlayClassName="user-popup"
       destroy-on-close
       trigger="click"
+      v-model:visible="user_popup_visible"
     >
       <template #content>
         <div class="s-header-user-info-dropdown">
@@ -15,7 +16,7 @@
             </div>
             <div class="user-options-box">
               <template v-for="item in OptionsList" :key="item.value">
-                <div class="user-option">
+                <div class="user-option" @click="gotoMember(item)">
                   <div
                     class="real-option"
                     :class="{
@@ -41,40 +42,43 @@
 
 <script setup lang="ts">
 import { MessagePlugin, Popup as TPopup } from 'tdesign-vue-next';
+import { ref } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 const imgs = {
   avatar: new URL('../assets/svg/header/avatar.svg', import.meta.url).href,
 };
 const route = useRoute();
 const router = useRouter();
+const user_popup_visible = ref(false);
 // 选项列表
 const OptionsList = [
   {
     label: '个人信息',
-    value: 'UserInfo',
+    value: '', //UserInfo
   },
   {
     label: '创作记录',
-    value: 'CreationRecord',
+    value: '', //CreationRecord
   },
   {
     label: '产品订单',
-    value: 'ProductOrders',
+    value: '/PayRecord',
   },
   {
     label: '合作咨询',
-    value: 'CooperationConsulting',
+    value: '', //CooperationConsulting
   },
 ];
 // 点击不同选项
-const gotoMember = (label: string) => {
-  if (label === 'install') {
+const gotoMember = (item: any) => {
+  if (!item.value) {
     return;
   }
   const resUrl = router.resolve({
-    path: label,
+    path: item.value,
   });
   window.open(resUrl.href);
+  user_popup_visible.value = false;
 };
 // 退出登录和去登陆
 const logout = () => {
@@ -152,6 +156,10 @@ const logout = () => {
           align-items: center;
           padding-left: 12px;
           cursor: pointer;
+          &:hover {
+            background: #393939;
+            border-radius: 8px;
+          }
         }
         .active {
           background: #393939;

src/layout/header.vue

@@ -48,18 +48,18 @@ const btns = [
     label: '产品',
     path: '/Products',
   },
-  {
-    label: 'AI聊天',
-    path: '/AIChat',
-  },
-  {
-    label: 'AI绘画',
-    path: '/AIPainting',
-  },
-  {
-    label: 'AI视频',
-    path: '/AIVideo',
-  },
+  // {
+  //   label: 'AI聊天',
+  //   path: '/AIChat',
+  // },
+  // {
+  //   label: 'AI绘画',
+  //   path: '/AIPainting',
+  // },
+  // {
+  //   label: 'AI视频',
+  //   path: '/AIVideo',
+  // },
   {
     label: '图片处理',
     path: '/ImgConversion',

src/pages/CopywritingGeneration/index.vue

@@ -28,6 +28,7 @@
                 :maxlength="it.maxlength"
               ></CustomTextArea>
             </template>
+            <!-- upload -->
           </template>
         </div>
       </div>

src/pages/ImageGeneration/components/GenerateResult/index.less

+@import '@/style/variables.less';
+.empty-box,
+.loading-box {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  & > :nth-child(2) {
+    margin-top: 12px;
+    font-size: @font-size-16;
+    color: #888fa1;
+  }
+}
+.loading-box {
+}
+.load-success-box {
+  padding: 0 20px;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  .result-img-box {
+    padding-top: 100px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: wrap;
+    row-gap: 20px;
+    width: 100%;
+    .result-img {
+      margin: 0 12px;
+      width: 350px;
+      height: 350px;
+      border-radius: 8px;
+      .img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+  .download-img-box {
+    flex: 1;
+    display: flex;
+    align-items: flex-end;
+    padding: 0 12px 20px 12px;
+    .custom-reset-button {
+      width: calc(100% - 2px) !important;
+      &::before {
+        width: calc(200% - 2px);
+      }
+    }
+  }
+}

src/pages/ImageGeneration/components/GenerateResult/index.tsx

 import { defineComponent } from 'vue';
+import EmptySvg from '@/assets/svg/gpt/empty.svg';
 import './index.less';
+import CustomLoading from '@/components/custom/loading2.vue';
+import CustomResetButton from '@/components/custom/resetbutton.vue';
 export default defineComponent({
+  props: {
+    list: Object as any,
+    status: String,
+  },
   setup(props, ctx) {
-    return () => <div>1</div>;
+    // 为空时展示的html
+    const EmptyHTML = () => {
+      return (
+        <div class="empty-box">
+          <EmptySvg></EmptySvg>
+          <div>未有图片，快去左侧输入你的创意吧</div>
+        </div>
+      );
+    };
+
+    // 加载时的html
+    const LoadingHTML = () => {
+      return (
+        <div class="loading-box">
+          <CustomLoading></CustomLoading>
+          <div>请耐心等待图片生成</div>
+        </div>
+      );
+    };
+    // 加载完成展示的html
+    const LoadSuccessHTML = () => {
+      return (
+        <div class="load-success-box">
+          <div class="result-img-box">
+            {props.list
+              ? props.list.map((item: any) => (
+                  <div class="result-img">
+                    <img class="img" src={item.img} alt="" />
+                  </div>
+                ))
+              : ''}
+          </div>
+          <div class="download-img-box">
+            <CustomResetButton>下载</CustomResetButton>
+          </div>
+        </div>
+      );
+    };
+
+    // 判断当前展示的模块
+    const CurrentModule = () => {
+      if (true) {
+        // return EmptyHTML();
+        // return LoadingHTML();
+        return LoadSuccessHTML();
+      }
+    };
+
+    return () => <div>{CurrentModule()}</div>;
   },
 });

src/pages/PayRecord/index.vue

+<template>
+  <div class="custom-my-payrecord">
+    <CustomTTable></CustomTTable>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import CustomTTable from '@/components/custom/TTable.vue';
+
+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">
+.custom-my-payrecord {
+}
+</style>

src/router/modules/home.ts

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