update

src/api/cert.ts

@@ -0,0 +1,24 @@
+import axios from 'axios';
+
+export interface ModelData {
+    modelName: string;
+    modelPrice: number;
+    remark: string;
+}
+
+export interface IndexData {
+    serverUrl: string;
+    userKey: string;
+    serverUrl2: string;
+    userBalance: number;
+    userBalanceMonth: number;
+    modelList: ModelData[];
+    pushUrl: string;
+}
+
+
+// 获取首页信息
+export function getCertIndex() {
+    return axios.get<IndexData>('/cert/index');
+}
+  

src/locale/zh-CN.ts

@@ -45,6 +45,7 @@ export default {
   'navbar.docs': '文档中心',
   'navbar.action.locale': '切换为中文',
   'menu.pay': '帐户充值 ',
+  'menu.model': '模型定价',
 
   ...localeSettings,
   ...localeMessageBox,

src/router/routes/modules/dashboard.ts

@@ -42,6 +42,15 @@ const DASHBOARD: AppRouteRecordRaw = {
         requiresAuth: true,
       }
     },
+    {
+      path: 'model',
+      name: 'Model',
+      component: () => import('@/views/api2gpt/model/index.vue'),
+      meta: {
+        locale: 'menu.model',
+        requiresAuth: true,
+      }
+    },
     {
       path: 'pay',
       name: 'Pay',

src/store/modules/user/index.ts

@@ -12,6 +12,7 @@ import useAppStore from '../app';
 
 const useUserStore = defineStore('user', {
   state: (): UserState => ({
+    userName: undefined,
     name: undefined,
     avatar: undefined,
     job: undefined,
@@ -45,6 +46,7 @@ const useUserStore = defineStore('user', {
     },
     // Set user's information
     setInfo(partial: Partial<UserState>) {
+      console.log('setInfo', partial);
       this.$patch(partial);
     },
 
@@ -56,7 +58,6 @@ const useUserStore = defineStore('user', {
     // Get user's information
     async info() {
       const res = await getUserInfo();
-
       this.setInfo(res.data);
     },
 

src/views/api2gpt/main/components/banner.vue

@@ -0,0 +1,35 @@
+<template>
+  <a-col class="banner">
+    <a-col :span="8">
+      <a-typography-title :heading="5" style="margin-top: 0">
+        {{ $t('workplace.welcome') }} {{ userInfo.name }}
+      </a-typography-title>
+    </a-col>
+    <a-divider class="panel-border" />
+  </a-col>
+</template>
+
+<script lang="ts" setup>
+  import { computed } from 'vue';
+  import { useUserStore } from '@/store';
+
+  const userStore = useUserStore();
+  const userInfo = computed(() => {
+    return {
+      name: userStore.userName,
+    };
+  });
+</script>
+
+<style scoped lang="less">
+  .banner {
+    width: 100%;
+    padding: 20px 20px 0 20px;
+    background-color: var(--color-bg-2);
+    border-radius: 4px 4px 0 0;
+  }
+
+  :deep(.arco-icon-home) {
+    margin-right: 6px;
+  }
+</style>

src/views/api2gpt/main/components/data-panel.vue

@@ -0,0 +1,139 @@
+<template>
+  <a-grid :cols="24" :row-gap="16" class="panel">
+    <a-grid-item
+      class="panel-col"
+      :span="{ xs: 12, sm: 12, md: 12, lg: 12, xl: 12, xxl: 6 }"
+    >
+      <a-space>
+        <a-avatar :size="54" class="col-avatar">
+          <img
+            alt="avatar"
+            src="//p3-armor.byteimg.com/tos-cn-i-49unhts6dw/288b89194e657603ff40db39e8072640.svg~tplv-49unhts6dw-image.image"
+          />
+        </a-avatar>
+        <a-statistic
+          title="帐户余额"
+          :value="indexData?.userBalance"
+          :precision="2"
+          :value-from="0"
+          animation
+          show-group-separator
+        >
+          <template #suffix>
+            <span class="unit">元</span>
+          </template>
+        </a-statistic>
+      </a-space>
+    </a-grid-item>
+    <a-grid-item
+      class="panel-col"
+      :span="{ xs: 12, sm: 12, md: 12, lg: 12, xl: 12, xxl: 6 }"
+    >
+      <a-space>
+        <a-avatar :size="54" class="col-avatar">
+          <img
+            alt="avatar"
+            src="//p3-armor.byteimg.com/tos-cn-i-49unhts6dw/c8b36e26d2b9bb5dbf9b74dd6d7345af.svg~tplv-49unhts6dw-image.image"
+          />
+        </a-avatar>
+        <a-statistic
+          title="本月消费"
+          :value="indexData?.userBalanceMonth"
+          :precision="2"
+          :value-from="0"
+          animation
+          show-group-separator
+        >
+          <template #suffix>
+            <span class="unit">元</span>
+          </template>
+        </a-statistic>
+      </a-space>
+    </a-grid-item>
+    <a-grid-item :span="24">
+      <a-divider class="panel-border" />
+    </a-grid-item>
+  </a-grid>
+  <a-card class="general-card" title="推荐计划">
+    <a-space direction="vertical" fill :size="10">
+      <a-input-search :model-value="indexData?.pushUrl" readonly button-text="复制" search-button @search="handleCopy(indexData?.pushUrl)">
+        <template #prepend>
+          推荐链接
+        </template>
+      </a-input-search>
+    </a-space>
+  </a-card>
+  <a-card class="general-card" title="服务信息">
+    <a-space direction="vertical" fill>
+    <a-input-search :model-value="indexData?.serverUrl" readonly button-text="复制" search-button @search="handleCopy(indexData?.pushUrl)">
+        <template #prepend>
+          Api Server
+        </template>
+    </a-input-search>
+    <a-input-search :model-value="indexData?.userKey" readonly button-text="复制" search-button @search="handleCopy(indexData?.pushUrl)">
+        <template #prepend>
+          Api Key
+        </template>
+    </a-input-search>
+    <a-input-password :model-value="indexData?.serverUrl2" readonly button-text="复制" search-button @search="handleCopy(indexData?.pushUrl)">
+        <template #prepend>
+          Api Server备用
+        </template>
+    </a-input-password>
+    </a-space>
+  </a-card>
+</template>
+
+<script lang="ts" setup>
+  import { Message } from '@arco-design/web-vue';
+  
+  function handleCopy(id: string){
+    // 获取需要复制的元素以及元素内的文本内容
+    const text = id;
+    // 添加一个input元素放置需要的文本内容
+    const input = document.createElement("input");
+    input.value = text;
+    document.body.appendChild(input);
+    // 选中并复制文本到剪切板
+    input.select();
+    document.execCommand("copy");
+    // 移除input元素
+    document.body.removeChild(input);
+    Message.success("复制成功");
+  } 
+</script>
+
+<script lang="ts">
+  export default {
+    name: 'DataPanel',
+    props: {
+      indexData: {}
+    }
+  };
+</script>
+
+<style lang="less" scoped>
+  .arco-grid.panel {
+    margin-bottom: 0;
+    padding: 16px 20px 0 20px;
+  }
+  .panel-col {
+    padding-left: 43px;
+    border-right: 1px solid rgb(var(--gray-2));
+  }
+  .col-avatar {
+    margin-right: 12px;
+    background-color: var(--color-fill-2);
+  }
+  .up-icon {
+    color: rgb(var(--red-6));
+  }
+  .unit {
+    margin-left: 8px;
+    color: rgb(var(--gray-8));
+    font-size: 12px;
+  }
+  :deep(.panel-border) {
+    margin: 4px 0 0 0;
+  }
+</style>

src/views/api2gpt/main/index.vue

@@ -1,61 +1,130 @@
 <template>
     <div class="container">
-     Main1111
+      <div class="left-side">
+      <div class="panel">
+        <Banner />
+        <DataPanel :indexData="indexData"/>
+      </div> 
+    </div>
     </div>
   </template>
-  
   <script lang="ts" setup>
-   
+  import { ref } from 'vue';
+  import { getCertIndex } from '@/api/cert'
+  import Banner from './components/banner.vue';
+  import DataPanel from './components/data-panel.vue';
+
+  const modelList = ref([]);
+  const serverUrl = ref("");
+  const serverUrl2 = ref("");
+  const userKey = ref("");
+  const userBalance = ref(0);
+  const userBalanceMonth = ref(0);
+  const pushUrl = ref("");
+  const indexData = ref({});
+
+
+   const Init = async () => {
+     const res = await getCertIndex()
+     serverUrl.value = res.data.serverUrl;
+     indexData.value = res.data;
+   }
+
+   Init();
   </script>
-  
+
   <script lang="ts">
     export default {
       name: 'Main2',
+      components: {
+        'DataPanel': DataPanel
+      },
     };
   </script> 
   
-  <style scoped lang="less">
+  <style lang="less" scoped>
-    .container {
+  .container {
-      padding: 0 20px 20px 20px;
+    background-color: var(--color-fill-2);
+    padding: 16px 20px;
+    padding-bottom: 0;
+    display: flex;
+  }
+
+  .left-side {
+    flex: 1;
+    overflow: auto;
+  }
+
+  .right-side {
+    width: 280px;
+    margin-left: 16px;
+  }
+
+  .panel {
+    background-color: var(--color-bg-2);
+    border-radius: 4px;
+    overflow: auto;
+  }
+  :deep(.panel-border) {
+    margin-bottom: 0;
+    border-bottom: 1px solid rgb(var(--gray-2));
+  }
+  .moduler-wrap {
+    border-radius: 4px;
+    background-color: var(--color-bg-2);
+    :deep(.text) {
+      font-size: 12px;
+      text-align: center;
+      color: rgb(var(--gray-8));
     }
-  
+
-    .content {
+    :deep(.wrapper) {
-      display: flex;
+      margin-bottom: 8px;
-      margin-top: 12px;
+      text-align: center;
-  
+      cursor: pointer;
-      &-left {
+
-        flex: 1;
+      &:last-child {
-        margin-right: 16px;
+        .text {
-        overflow: hidden;
+          margin-bottom: 0;
-        // background-color: var(--color-bg-2);
-  
-        :deep(.arco-tabs-nav-tab) {
-          margin-left: 16px;
         }
       }
-  
+      &:hover {
-      &-right {
+        .icon {
-        width: 332px;
+          color: rgb(var(--arcoblue-6));
-      }
+          background-color: #e8f3ff;
-  
-      .tab-pane-wrapper {
-        padding: 0 16px 16px 16px;
-      }
-    }
-  </style>
-  
-  <style lang="less" scoped>
-    .mobile {
-      .content {
-        display: block;
-        &-left {
-          margin-right: 0;
-          margin-bottom: 16px;
         }
-        &-right {
+        .text {
-          width: 100%;
+          color: rgb(var(--arcoblue-6));
         }
       }
     }
-  </style>
+
-  
+    :deep(.icon) {
+      display: inline-block;
+      width: 32px;
+      height: 32px;
+      margin-bottom: 4px;
+      color: rgb(var(--dark-gray-1));
+      line-height: 32px;
+      font-size: 16px;
+      text-align: center;
+      background-color: rgb(var(--gray-1));
+      border-radius: 4px;
+    }
+  }
+</style>
+
+<style lang="less" scoped>
+  // responsive
+  .mobile {
+    .container {
+      display: block;
+    }
+    .right-side {
+      // display: none;
+      width: 100%;
+      margin-left: 0;
+      margin-top: 16px;
+    }
+  }
+</style>

src/views/api2gpt/model/index.vue

@@ -0,0 +1,86 @@
+<template>
+     <div class="container">
+        <a-spin style="width: 100%">
+        <a-card
+        class="general-card"
+        :header-style="{ paddingBottom: '0' }"
+        :body-style="{ padding: '17px 20px 21px 20px' }"
+        >
+        <template #title>
+            模型列表与定价
+        </template>
+            <a-table
+            :data="modelList"
+            :pagination="false"
+            :bordered="false"
+            :scroll="{ x: '100%', y: '264px' }"
+            >
+            <template #columns>
+                <a-table-column title="模型名称" data-index="modelName"></a-table-column>
+                <a-table-column title="提问价格" data-index="modelPrice">
+                    <template #cell="{ record }">
+                        ￥{{NumFilter4(record.modelPrice*1000)}}/k
+                    </template>
+                </a-table-column>
+                <a-table-column title="回答价格" data-index="modelPrice">
+                    <template #cell="{ record }">
+                        ￥{{NumFilter4(record.modelPrice*1000)}}/k
+                    </template>
+                </a-table-column>
+                <a-table-column title="备注" data-index="remark"></a-table-column>
+            </template>
+            </a-table>
+        </a-card>
+    </a-spin>
+    </div>
+  </template>
+  <script lang="ts" setup>
+  import { ref } from 'vue';
+  import { getCertIndex } from '@/api/cert'
+  import type { ModelData } from '@/api/cert'
+
+  const modelList = ref();
+
+  const Init = async () => {
+    const res = await getCertIndex()
+    modelList.value = res.data.modelList as ModelData[];
+  }
+
+    function NumFilter4 (value: number) {
+        // 截取当前数据到小数点后两位
+        return parseFloat(`${value}`).toFixed(4)
+    }
+
+   Init();
+  </script>
+
+  <script lang="ts">
+    export default {
+      name: 'Model',
+    };
+  </script> 
+
+<style scoped lang="less">
+  .container {
+    background-color: var(--color-fill-2);
+    padding: 16px 20px;
+    padding-bottom: 0;
+    display: flex;
+  }
+  .general-card {
+    min-height: 395px;
+  }
+  :deep(.arco-table-tr) {
+    height: 44px;
+    .arco-typography {
+      margin-bottom: 0;
+    }
+  }
+  .increases-cell {
+    display: flex;
+    align-items: center;
+    span {
+      margin-right: 4px;
+    }
+  }
+</style>

src/views/dashboard/workplace/components/banner.vue

@@ -15,6 +15,7 @@
 
   const userStore = useUserStore();
   const userInfo = computed(() => {
+    console.log(userStore);
     return {
       name: userStore.userName,
     };