系统首页优化

src/views/index.vue

@@ -10,8 +10,8 @@
       </div>
     </template>
     <el-row :gutter="20" class="info">
-      <el-col :span="8">帐户余额：￥<el-text class="mx-1" >{{ userBalance }}</el-text></el-col>
+      <el-col :span="8">帐户余额：￥<el-text class="mx-1" >{{ NumFilter(userBalance) }}</el-text></el-col>
-      <el-col :span="8">本月消费：￥<el-text class="mx-1" >{{ userBalanceMonth }}</el-text></el-col>
+      <el-col :span="8">本月消费：￥<el-text class="mx-1" >{{ NumFilter(userBalanceMonth) }}</el-text></el-col>
       <el-col :span="8">帐户等级：<el-tag class="ml-2" type="success">1</el-tag></el-col>
     </el-row>
   </el-card>
@@ -22,24 +22,34 @@
           <span>服务信息</span>
         </div>
       </template>
-      <el-space direction="vertical" alignment="start" :size="30">
+      
-            <div>
+            <div style="margin-top: 10px; margin-bottom: 10px;">
-              <el-input v-model="serverUrl"  size="large" style="width:500px" readonly>
+              <el-input v-model="serverUrl"  size="large" readonly  @click.stop="handleCopy(serverUrl)">
                 <template #prepend>Api Server:</template>
+                <template #append>
+                  <el-button @click="handleCopy(serverUrl)">复制</el-button>
+                </template>
               </el-input>
             </div>
-            <div>
+            <div style="margin-top: 10px; margin-bottom: 10px;">
-              <el-input v-model="userKey"  size="large" style="width:500px" readonly>
+              
+              <el-input v-model="userKey"  size="large" readonly @click.stop="handleCopy(userKey)">
                 <template #prepend>Api Key:</template>
+                <template #append>
+                  <el-button @click="handleCopy(serverUrl)">复制</el-button>
+                </template>
               </el-input>
             </div>
-            <div>
+            <div style="margin-top: 10px; margin-bottom: 10px;">
-              <el-input v-model="serverUrl2"  size="large" style="width:500px" readonly>
+              <el-input v-model="serverUrl2" size="large" type="password" readonly @click.stop="handleCopy(serverUrl2)">
                 <template #prepend>Api Server备用:</template>
+                <template #append>
+                  <el-button @click="handleCopy(serverUrl2)">复制</el-button>
+                </template>
               </el-input>
             </div>
-            </el-space>
     </el-card>
+    <el-alert title="点击输入框或按钮可直接复制" type="success" :closable="false"  />
   </div>
   <div class="main2">
     <el-card class="box-card">
@@ -52,12 +62,12 @@
         <el-table-column prop="modelName" label="模型"  />
         <el-table-column prop="modelPrice" label="提问价格" width="180" >
           <template #default="scope">
-            ￥{{scope.row.modelPrice*1000}}/k
+            ￥{{NumFilter4(scope.row.modelPrice*1000)}}/k
           </template>
           </el-table-column>
         <el-table-column prop="modelPrice" label="回答价格" width="180">
           <template #default="scope">
-            ￥{{scope.row.modelPrice*1000}}/k
+            ￥{{NumFilter4(scope.row.modelPrice*1000)}}/k
           </template>
         </el-table-column>
         <el-table-column prop="remark" label="备注" />
@@ -71,6 +81,7 @@
 import { getCertIndex } from '@/api/cert/index'
 import { ref } from 'vue';
 
+const { proxy } = getCurrentInstance();
 const modelList = ref([]);
 const serverUrl = ref("");
 const serverUrl2 = ref("");
@@ -89,6 +100,32 @@ function getIndex() {
   })
 }
 
+function handleCopy(id){
+  // 获取需要复制的元素以及元素内的文本内容
+  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);
+  proxy.$modal.msgSuccess("复制成功");
+}
+
+function NumFilter (value) {
+  // 截取当前数据到小数点后两位
+  let realVal = parseFloat(value).toFixed(2)
+  return realVal
+}
+function NumFilter4 (value) {
+  // 截取当前数据到小数点后两位
+  let realVal = parseFloat(value).toFixed(4)
+  return realVal
+}
+
 getIndex()
 </script>