opt: 优化 ItemList 组件样式

README.md

@@ -10,7 +10,8 @@ ChatGLM,讯飞星火，文心一言等多个平台的大语言模型。集成了
 * 支持 MidJourney / Stable Diffusion AI 绘画集成，开箱即用。
 * 支持使用个人微信二维码作为充值收费的支付渠道，无需企业支付通道。
 * 已集成支付宝支付功能，支持多种会员套餐和点卡购买功能。
-* 集成插件 API 功能，可结合大语言模型的 function 功能开发各种强大的插件，已内置实现了微博热搜，今日头条，今日早报和 AI 绘画函数插件。
+* 集成插件 API 功能，可结合大语言模型的 function 功能开发各种强大的插件，已内置实现了微博热搜，今日头条，今日早报和 AI
+  绘画函数插件。
 
 ## 功能截图
 
@@ -23,17 +24,28 @@ ChatGLM,讯飞星火，文心一言等多个平台的大语言模型。集成了
 ![ChatGPT new Chat Page](/docs/imgs/chat-new.png)
 
 ### MidJourney 专业绘画界面
+
 ![mid-journey](/docs/imgs/mj_image.jpg)
 
 ### Stable-Diffusion 专业绘画页面
+
 ![Stable-Diffusion](/docs/imgs/sd_image.jpg)
 ![Stable-Diffusion](/docs/imgs/sd_image_detail.jpg)
+
 ### 绘图作品展
+
 ![ChatGPT image_list](/docs/imgs/image-list.png)
+
 ### AI应用列表
+
 ![ChatGPT-app-list](/docs/imgs/app-list.jpg)
 
+### 会员充值
+
+![会员充值](/docs/imgs/alipay.png)
+
 ### 自动调用函数插件
+
 ![ChatGPT function plugin](/docs/imgs/plugin.png)
 ![ChatGPT function plugin](/docs/imgs/mj.jpg)
 

database/update-v3.1.8.sql

@@ -17,20 +17,6 @@ CREATE TABLE `chatgpt_orders` (
   `deleted_at` datetime DEFAULT NULL
 ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci COMMENT='充值订单表';
 
---
--- 转存表中的数据 `chatgpt_orders`
---
-INSERT INTO `chatgpt_orders` (`id`, `user_id`, `product_id`, `mobile`, `order_no`, `subject`, `amount`, `status`, `remark`, `pay_time`, `created_at`, `updated_at`, `deleted_at`) VALUES
-  (4, 4, 1, '18575670125', '202308317102915300416290816', '会员1个月', '0.01', 2, '{\"days\":30,\"calls\":500,\"name\":\"会员1个月\",\"discount\":10.99}', 1693466990, '2023-08-31 15:29:33', '2023-08-31 15:29:51', NULL),
-  (5, 4, 5, '18575670125', '202308317102946758199607296', '100次点卡', '0.30', 2, '{\"days\":0,\"calls\":100,\"name\":\"100次点卡\"}', 1693466990, '2023-08-31 17:34:34', '2023-08-31 17:34:34', NULL),
-  (6, 4, 5, '18575670125', '202308317102946843595636736', '100次点卡', '0.03', 2, '{\"days\":0,\"calls\":100,\"name\":\"100次点卡\"}', 1693474722, '2023-08-31 17:34:54', '2023-08-31 17:38:43', NULL),
-  (7, 4, 1, '18575670125', '202309017103252664456052736', '会员1个月', '0.01', 2, '{\"days\":30,\"calls\":0,\"name\":\"会员1个月\"}', 1693466990, '2023-09-01 13:50:07', '2023-09-01 13:50:07', NULL),
-  (8, 4, 1, '18575670125', '202309017103252894391992320', '会员1个月', '0.01', 2, '{\"days\":30,\"calls\":0,\"name\":\"会员1个月\"}', 1693466990, '2023-09-01 13:51:02', '2023-09-01 13:51:02', NULL),
-  (9, 4, 5, '18575670125', '202309017103254657538981888', '100次点卡', '0.03', 2, '{\"days\":0,\"calls\":100,\"name\":\"100次点卡\"}', 1693474722, '2023-09-01 13:58:02', '2023-09-01 13:58:02', NULL),
-  (10, 4, 1, '18575670125', '202309017103259375405367296', '会员1个月', '0.01', 2, '{\"days\":30,\"calls\":0,\"name\":\"会员1个月\"}', 1693474722, '2023-09-01 14:16:47', '2023-09-01 14:16:47', NULL),
-  (11, 4, 3, '18575670125', '202309017103290730432430080', '会员6个月', '190.00', 2, '{\"days\":180,\"calls\":0,\"name\":\"会员6个月\",\"price\":290,\"discount\":100}', 1693474722, '2023-09-01 16:21:23', '2023-09-01 16:21:23', NULL),
-  (12, 4, 4, '18575670125', '202309017103291707520712704', '会员12个月', '380.00', 2, '{\"days\":365,\"calls\":0,\"name\":\"会员12个月\",\"price\":580,\"discount\":200}', 1693466990, '2023-09-01 16:25:16', '2023-09-01 16:25:16', NULL);
-
 -- 创建索引
 ALTER TABLE `chatgpt_orders` ADD PRIMARY KEY (`id`), ADD UNIQUE KEY `order_no` (`order_no`);
 ALTER TABLE `chatgpt_orders` MODIFY `id` int NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=13;

web/src/components/CountDown.vue

@@ -8,6 +8,7 @@
 
 import {onMounted, ref, watch} from "vue";
 
+// eslint-disable-next-line no-undef
 const props = defineProps({
   second: Number,
   type: {
@@ -16,6 +17,7 @@ const props = defineProps({
   }
 });
 
+// eslint-disable-next-line no-undef
 const emits = defineEmits(['timeout']);
 const counter = ref(props.second)
 const timerStr = ref("")
@@ -80,6 +82,7 @@ const formatTimer = (secs) => {
   timerStr.value = timer.join("")
 }
 
+// eslint-disable-next-line no-undef
 defineExpose({resetTimer})
 </script>
 

web/src/components/ItemList.vue

@@ -47,7 +47,7 @@ onMounted(() => {
 const computeSize = () => {
   const w = container.value.offsetWidth - 8 // 减去滚动条的宽度
   let cols = Math.floor(w / props.width)
-  itemWidth.value = Math.floor(w / cols)
+  itemWidth.value = Math.ceil(w / cols) - 1
 }
 
 window.onresize = () => {

web/src/views/Member.vue

@@ -1,10 +1,9 @@
 <template>
-  <div class="member">
+  <div class="member custom-scroll">
     <div class="title">
       会员充值中心
     </div>
-    <div class="inner custom-scroll">
-
+    <div class="inner" :style="{height: listBoxHeight + 'px'}">
       <div class="user-profile">
         <user-profile/>
 
@@ -28,7 +27,7 @@
         </el-row>
       </div>
 
-      <div class="product-box" :style="{height: listBoxHeight + 'px'}">
+      <div class="product-box">
         <div class="info">
           <el-alert type="info" show-icon :closable="false" effect="dark">
             <strong>说明:</strong> 成为本站会员后每月有500次对话额度，50次 AI 绘画额度，限制下月1号解除，若在期间超过次数后可单独购买点卡。
@@ -145,14 +144,13 @@ import BindMobile from "@/components/BindMobile.vue";
 import RewardVerify from "@/components/RewardVerify.vue";
 import {useRouter} from "vue-router";
 import {removeUserToken} from "@/store/session";
-import CountDown from "@/components/CountDown.vue";
 import UserOrder from "@/components/UserOrder.vue";
+import CountDown from "@/components/CountDown.vue";
 
 const listBoxHeight = window.innerHeight - 97
 const list = ref([])
 const showLoginDialog = ref(false)
 const showPayDialog = ref(false)
-const elements = ref(null)
 const vipImg = ref("/images/vip.png")
 const enableReward = ref(false) // 是否启用众筹功能
 const rewardImg = ref('/images/reward.png')
@@ -310,13 +308,15 @@ const logout = function () {
     display flex
     color #ffffff
     padding 15px 0 15px 15px;
-    overflow hidden
+    overflow-x hidden
+    overflow-y visible
 
     .user-profile {
-      padding 10px 20px
+      padding 10px 20px 20px 20px
       background-color #393F4A
       color #ffffff
       border-radius 10px
+      height 100vh
 
       .el-form-item__label {
         color #ffffff
@@ -336,8 +336,6 @@ const logout = function () {
 
 
     .product-box {
-      overflow-x hidden
-      overflow-y visible
       width 100%
       padding-left 20px