The account set dialog is ready

web/src/components/ConfigDialog.vue

@@ -5,8 +5,95 @@
       :show-close="false"
       title="聊天配置"
   >
+    <div class="user-info">
+      <el-input v-model="user['api_key']" placeholder="填写你 OpenAI 的 API KEY">
+        <template #prepend>API KEY</template>
+      </el-input>
+
+      <el-descriptions
+          class="margin-top"
+          title="账户信息"
+          :column="2"
+          border
+      >
+
+        <el-descriptions-item>
+          <template #label>
+            <div class="cell-item">
+              <el-icon>
+                <UserFilled/>
+              </el-icon>
+              账户
+            </div>
+          </template>
+          {{ user.name }}
+        </el-descriptions-item>
+
+        <el-descriptions-item>
+          <template #label>
+            <div class="cell-item">
+              <el-icon>
+                <List/>
+              </el-icon>
+              聊天记录
+            </div>
+          </template>
+          <el-tag v-if="user['enable_history']" type="success">已开通</el-tag>
+          <el-tag v-else type="info">未开通</el-tag>
+        </el-descriptions-item>
+
+        <el-descriptions-item>
+          <template #label>
+            <div class="cell-item">
+              <el-icon>
+                <Histogram/>
+              </el-icon>
+              总调用次数
+            </div>
+          </template>
+          {{ user['max_calls'] }}
+        </el-descriptions-item>
+
+        <el-descriptions-item>
+          <template #label>
+            <div class="cell-item">
+              <el-icon>
+                <Histogram/>
+              </el-icon>
+              剩余点数
+            </div>
+          </template>
+          {{ user["remaining_calls"] }}
+        </el-descriptions-item>
+
+        <el-descriptions-item>
+          <template #label>
+            <div class="cell-item">
+              <el-icon>
+                <Timer/>
+              </el-icon>
+              激活时间
+            </div>
+          </template>
+          {{ user['active_time'] }}
+        </el-descriptions-item>
+
+        <el-descriptions-item>
+          <template #label>
+            <div class="cell-item">
+              <el-icon>
+                <Watch/>
+              </el-icon>
+              到期时间
+            </div>
+          </template>
+          {{ user['expired_time'] }}
+        </el-descriptions-item>
+
+      </el-descriptions>
+    </div>
     <el-row class="row-center">
-      <span>功能正在开发中，有什么使用建议可以通过下面的方式联系作者。</span>
+      <span>其他功能正在开发中，有什么使用建议可以通过下面的方式联系作者。</span>
     </el-row>
     <el-row>
       <el-col :span="12">
@@ -31,9 +118,17 @@
 
 <script>
 import {defineComponent} from "vue"
+import {
+  List, Timer, Watch,
+  UserFilled,
+  Histogram
+} from '@element-plus/icons-vue'
+import {getLoginUser} from "@/utils/storage";
+import {dateFormat} from "@/utils/libs";
 
 export default defineComponent({
   name: 'ConfigDialog',
+  components: {Watch, Timer, UserFilled, List, Histogram},
   props: {
     show: {
       type: Boolean,
@@ -42,10 +137,18 @@ export default defineComponent({
   },
   data() {
     return {
+      user: {},
       wechatGroup: "https://img.r9it.com/chatgpt/wechat-group.jpeg",
       wechatCard: "https://img.r9it.com/chatgpt/wechat-card.jpeg"
     }
   },
+  mounted() {
+    // 获取用户信息
+    const data = getLoginUser();
+    this.user = data.user;
+    this.user['active_time'] = dateFormat(this.user['active_time']);
+    this.user['expired_time'] = dateFormat(this.user['expired_time']);
+  },
   methods: {
     save: function () {
       this.$emit('update:show', false);
@@ -61,5 +164,21 @@ export default defineComponent({
 .el-dialog {
   --el-dialog-width 90%;
   max-width 800px;
+
+  .el-dialog__body {
+    padding-top 10px;
+
+    .user-info {
+      .margin-top {
+        margin-top 20px;
+      }
+
+      .el-icon {
+        top 2px;
+      }
+
+      margin-bottom 15px;
+    }
+  }
 }
 </style>

web/src/utils/libs.js

@@ -14,8 +14,61 @@ export function randString(length) {
     return buf.join("")
 }
 
+// 判断是否是移动设备
 export function isMobile() {
     const userAgent = navigator.userAgent;
     const mobileRegex = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini|Mobile|mobile|CriOS/i;
     return mobileRegex.test(userAgent);
 }
+
+// 格式化日期
+export function dateFormat(timestamp, format) {
+    if (!timestamp) {
+        return '';
+    } else if (timestamp < 9680917502) {
+        timestamp = timestamp * 1000;
+    }
+    let year, month, day, HH, mm, ss;
+    let time = new Date(timestamp);
+    let timeDate;
+    year = time.getFullYear(); // 年
+    month = time.getMonth() + 1; // 月
+    day = time.getDate(); // 日
+    HH = time.getHours(); // 时
+    mm = time.getMinutes(); // 分
+    ss = time.getSeconds(); // 秒
+
+    month = month < 10 ? '0' + month : month;
+    day = day < 10 ? '0' + day : day;
+    HH = HH < 10 ? '0' + HH : HH; // 时
+    mm = mm < 10 ? '0' + mm : mm; // 分
+    ss = ss < 10 ? '0' + ss : ss; // 秒
+
+    switch (format) {
+        case 'yyyy':
+            timeDate = String(year);
+            break;
+        case 'yyyy-MM':
+            timeDate = year + '-' + month;
+            break;
+        case 'yyyy-MM-dd':
+            timeDate = year + '-' + month + '-' + day;
+            break;
+        case 'yyyy/MM/dd':
+            timeDate = year + '/' + month + '/' + day;
+            break;
+        case 'yyyy-MM-dd HH:mm:ss':
+            timeDate = year + '-' + month + '-' + day + ' ' + HH + ':' + mm + ':' + ss;
+            break;
+        case 'HH:mm:ss':
+            timeDate = HH + ':' + mm + ':' + ss;
+            break;
+        case 'MM':
+            timeDate = String(month);
+            break;
+        default:
+            timeDate = year + '-' + month + '-' + day + ' ' + HH + ':' + mm + ':' + ss;
+            break;
+    }
+    return timeDate;
+}