先提交一手

src/App.vue

@@ -119,4 +119,8 @@ export default {
   min-height: 0;
   min-width: 0;
 }
+
+.flexWrap {
+  flex-wrap: wrap;
+}
 </style>

src/components/chat.vue

@@ -1,13 +1,7 @@
 <template>
   <section class="chat">
     <el-row align="middle mar-b16">
-      <div class="modelInfo">
+      <ai-model :model="config.model"/>
-        <img :src="config.model.avatar" alt=""/>
-        <div class="fill mar-l8">
-          <b v-text="config.model.name"/>
-          <div class="desc" v-text="config.model.desc"/>
-        </div>
-      </div>
       <el-row justify="end" class="fill mar-l8 gap-8">
         <!--聊天操作栏-->
         <div class="optIcon clear"/>
@@ -28,11 +22,12 @@ import {dayjs} from "element-plus";
 import ChatContent from "../components/chatContent";
 import ChatInput from "../components/chatInput";
 import ThinkingBar from "../components/thinkingBar";
+import AiModel from "../ui/AiModel";
 import {USER_AVATAR} from "../utils/env";
 
 export default {
   name: "chat",
-  components: {ChatContent, ChatInput, ThinkingBar},
+  components: {AiModel, ChatContent, ChatInput, ThinkingBar},
   props: {
     config: {default: () => ({})}
   },
@@ -124,29 +119,6 @@ export default {
   display: flex;
   flex-direction: column;
 
-  .modelInfo {
-    display: flex;
-    align-items: center;
-    line-height: 1.4;
-
-    & > img {
-      border: 2px solid #fff;
-      border-radius: 50%;
-      padding: 4px;
-      width: 45px;
-      height: 45px;
-    }
-
-    b {
-      font-size: 20px;
-    }
-
-    .desc {
-      color: #999;
-      font-size: 14px;
-    }
-  }
-
   .optIcon {
     box-sizing: border-box;
     height: 40px;

src/components/chatContent.vue

@@ -18,6 +18,7 @@
       </div>
       <div class="chat-me" v-else>
         <div class="chat-text" v-if="item.chatType == 0">
+          <icon-copy @click="copy(item.msg, '已复制')"/>
           <span v-text="item.msg"/>
         </div>
         <div class="info-time">

src/components/settings.vue

@@ -1,16 +1,37 @@
 <template>
   <section class="settings">
-
+    <el-form label-position="top" class="w100">
+      <el-form-item label="语言模型">
+        <el-row class="flexWrap">
+          <ai-model v-for="m in models" :model="m" small :class="{active:settings.model.id==m.id}"
+                    @click="settings.model=m"/>
+        </el-row>
+      </el-form-item>
+      <el-form-item label="流式输出">
+        <el-switch v-model="settings.stream" :active-value="true" :inactive-value="false"/>
+      </el-form-item>
+      <el-form-item label="API KEY">
+        <el-input v-model="settings.model.apiKey" clearable @change="v=>settings.model.setApiKey(v),getModelAccount()"/>
+      </el-form-item>
+      <el-button type="text" @click="getModelAccount">刷新账号信息</el-button>
+      <el-row>
+        <el-form-item label="账号用户" class="fill color-999">{{ account.username }}</el-form-item>
+        <el-form-item label="账户余额" class="fill color-999">{{ [account.usage, account.total].join(" / ") }}</el-form-item>
+      </el-row>
+    </el-form>
   </section>
 </template>
 
 <script>
+import AiModel from "../ui/AiModel";
+import AiSelect from "../ui/AiSelect";
+import * as models from "../utils/models";
+import {scopy} from "../utils/tools";
+
+
 export default {
   name: "settings",
-  model: {
+  components: {AiModel, AiSelect},
-    prop: "settings",
-    event: "input"
-  },
   props: {
     modelValue: {default: () => ({})}
   },
@@ -20,7 +41,24 @@ export default {
       settings: {}
     }
   },
-  methods: {},
+  watch: {
+    modelValue: {
+      immediate: true,
+      handler(v) {
+        this.settings = scopy(v)
+      }
+    }
+  },
+  computed: {
+    models: () => Object.values(models).map((model => new model())),
+    account: v => v.settings.account || {usage: 0, total: 0}
+  },
+  methods: {
+    getModelAccount() {
+      console.log(this.settings.model)
+      this.settings.model.getAccount?.().then(v => this.settings.account = v)
+    }
+  },
   created() {
   }
 }
@@ -29,5 +67,31 @@ export default {
 <style lang="scss" scoped>
 .settings {
   min-width: 400px;
+
+  :deep(.el-form) {
+    .el-form-item__label {
+      color: white;
+    }
+
+    .el-input__wrapper {
+      background-color: transparent;
+
+      & > input {
+        color: white;
+      }
+    }
+
+    .AiModel {
+      padding: 8px;
+      border: 1px solid transparent;
+      cursor: pointer;
+      user-select: none;
+
+      &.active {
+        border-color: #409EFF;
+        border-radius: 4px;
+      }
+    }
+  }
 }
 </style>

src/ui/AiModel.vue

@@ -0,0 +1,49 @@
+<template>
+  <section class="AiModel" :class="{small}">
+    <img :src="model.avatar" alt=""/>
+    <div class="fill mar-l8">
+      <b v-text="model.name"/>
+      <div class="desc" v-text="model.desc"/>
+    </div>
+  </section>
+</template>
+
+<script>
+export default {
+  name: "AiModel",
+  props: {
+    model: {default: () => ({})},
+    small: Boolean
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.AiModel {
+  display: flex;
+  align-items: center;
+  line-height: 1.4;
+  color: white;
+
+  &.small {
+    transform: scale(0.8);
+  }
+
+  & > img {
+    border: 2px solid #fff;
+    border-radius: 50%;
+    padding: 4px;
+    width: 45px;
+    height: 45px;
+  }
+
+  b {
+    font-size: 20px;
+  }
+
+  .desc {
+    color: #999;
+    font-size: 14px;
+  }
+}
+</style>

src/ui/AiSelect.vue

@@ -0,0 +1,101 @@
+<template>
+  <div class="ai-select">
+    <el-select clearable :value="modelValue" :filterable="isAction||filterable" v-bind="$attrs" @change="v=>$emit('update:modelValue',v)">
+      <template v-if="isAction">
+        <el-option v-for="op in actionOps" :key="op.id" :label="op.label" :value="op[actionProp.value]"/>
+      </template>
+      <template v-else>
+        <el-option v-for="(item, index) in selectList" :key="index"
+                   :label="item[actionProp.label]"
+                   :value="item[actionProp.value]"
+                   :disabled="check(item[actionProp.value])"/>
+      </template>
+    </el-select>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AiSelect',
+  watch: {
+    instance: {
+      deep: true,
+      handler(v) {
+        v && this.isAction && !this.options.toString() && this.getOptions()
+      }
+    },
+    action() {
+      this.isAction && this.getOptions()
+    },
+    modelValue(v) {
+      this.handleSelect(v)
+    }
+  },
+  props: {
+    modelValue: {default: null},
+    selectList: {type: Array},
+    instance: Function,
+    action: {default: ""},
+    prop: {default: () => ({})},
+    filterable: Boolean,
+  },
+  data() {
+    return {
+      options: [],
+      filter: "",
+    }
+  },
+  computed: {
+    isAction: v => !!v.action,
+    actionOps() {
+      const {filter} = this
+      const LABEL = this.actionProp.label
+      return this.options.map(e => ({
+        ...e,
+        label: typeof LABEL == "function" ? LABEL?.(e) : e[LABEL]
+      })).filter(e => !filter || e.label.indexOf(filter) > -1)
+    },
+    actionProp() {
+      return {
+        label: 'label',
+        value: 'id',
+        ...this.prop
+      }
+    },
+  },
+  methods: {
+    getOptions() {
+      this.instance?.post(this.action, null, {
+        params: {size: 999}
+      }).then(res => {
+        if (res?.data) {
+          this.options = res.data.records || res.data
+        }
+      }).then(() => this.handleSelect())
+    },
+    handleSelect(v = this.modelValue) {
+      this.disabled || this.$emit("select", this.isAction ? this.options.find(e => e[this.actionProp.value] == v) :
+          this.selectList.find(e => e[this.actionProp.value] == v))
+    },
+    check(v) {
+      return this.actionProp.disabled && [this.actionProp.disabled].flat().includes(v)
+    }
+  },
+  created() {
+    this.getOptions()
+  }
+}
+</script>
+<style lang="scss" scoped>
+.ai-select {
+  width: 100%;
+
+  :deep(.el-select) {
+    width: 100%;
+
+    .el-input__wrapper {
+      background: transparent;
+    }
+  }
+}
+</style>

src/utils/env.js

@@ -1,6 +1,6 @@
 export const OPEN_AI_KEY = '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'
 //ai头像
-export const AI_AVATAR = "https://th.bing.com/th?id=ODL.3e2fbff4543f0d3632d34be6d02adc93&w=100&h=100&c=12&pcl=faf9f7&o=6&dpr=1.5&pid=13.1"
+export const AI_AVATAR = "https://cdn.cunwuyun.cn/chat/chatGPT.png"
 //用户头像
 export const USER_AVATAR = "https://avatars.githubusercontent.com/u/20533272?v=4"
 

src/utils/models.js

@@ -1,3 +1,4 @@
+import {dayjs} from "element-plus";
 import axios from "./axios";
 import {AI_AVATAR, OPEN_AI_KEY} from "./env";
 
@@ -17,10 +18,16 @@ export class ChatGPT extends BaseModel {
       avatar: AI_AVATAR, name: 'ChatGPT', id: "gpt-3.5-turbo", desc: "ChatGPT-3.5所基于的模型",
     });
     this.apiKey = OPEN_AI_KEY
+    this.headers = {
+      "Content-Type": "application/json",
+      Accept: "application/json",
+      Authorization: `Bearer ${this.apiKey}`
+    }
   }
 
   setApiKey(key) {
     this.apiKey = key
+    this.headers["Authorization"] = `Bearer ${this.apiKey}`
   }
 
   async chat(history) {
@@ -41,6 +48,25 @@ export class ChatGPT extends BaseModel {
     }).then(res => res?.body?.getReader());
   }
 
+  async getAccount() {
+    const {headers} = this
+    const usages = await axios.get(ChatGPT.base + "/v1/dashboard/billing/subscription", {headers}).then(res => res.json());
+    const endDate = usages.access_until
+    if (endDate) {
+      const startDate = new Date(endDate - 90 * 24 * 60 * 60);
+      const formattedDate = time => dayjs(time).format("YYYY-MM-DD")
+      return axios.get(`${ChatGPT.base}/v1/dashboard/billing/usage?start_date=${formattedDate(startDate * 1000)}&end_date=${formattedDate(endDate * 1000)}`,
+          {headers}).then(res => res.json()).then(res => {
+        usages.total_usage = res.total_usage
+        const names = usages.account_name.split(" ")
+        return {
+          ...usages, username: names.at(-1) + names[0],
+          usage: (usages.total_usage / 100)?.toFixed(2),
+          total: usages.hard_limit_usd?.toFixed(2)
+        }
+      });
+    } else return Promise.reject("没有权限或者网络异常,请重新尝试!")
+  }
 }
 
 export class ChatGLM extends BaseModel {
@@ -48,7 +74,7 @@ export class ChatGLM extends BaseModel {
 
   constructor() {
     super({
-      avatar: AI_AVATAR, name: 'ChatGLM', id: "chatglm-6b", desc: "ChatGLM-6B所基于的模型"
+      avatar: "https://cdn.cunwuyun.cn/chat/chatglm.svg", name: 'ChatGLM', id: "chatglm-6b", desc: "ChatGLM-6B所基于的模型"
     });
   }
 

src/utils/tools.js

@@ -21,5 +21,11 @@ export function copyToClipboard(content) {
     return true
   }
   return false
-
 }
+
+/**
+ * 浅拷贝
+ * @param any
+ * @returns {any}
+ */
+export const scopy = (any = null) => JSON.parse(JSON.stringify(any))