xinyin025/geekai
1
0
Fork 0
mirror of https://github.com/yangjian102621/geekai.git synced 2026-04-27 21:44:25 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

AI对话页面增加显示AI思考中

Browse Source
This commit is contained in:
GeekMaster
2025-05-05 16:38:50 +08:00
parent 2c6abbe7e4
commit 73f5a44e0a
21 changed files with 713 additions and 1010 deletions
Download Patch File Download Diff File Expand all files Collapse all files

223
web/src/views/admin/ApiKey.vue
View File

@@ -2,7 +2,12 @@
<div class="container list" v-loading="loading">
<div class="handle-box">
<el-select v-model="query.type" placeholder="类型" class="handle-input">
<el-option v-for="item in types" :key="item.value" :label="item.label" :value="item.value" />
<el-option
v-for="item in types"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
<el-button :icon="Search" @click="fetchData">搜索</el-button>
@@ -40,7 +45,7 @@
<el-table-column label="最后使用时间">
<template #default="scope">
<span v-if="scope.row['last_used_at']">{{ scope.row["last_used_at"] }}</span>
<span v-if="scope.row['last_used_at']">{{ scope.row['last_used_at'] }}</span>
<el-tag v-else>未使用</el-tag>
</template>
</el-table-column>
@@ -73,7 +78,13 @@
</el-col>
<el-col :span="12">
<el-select v-model="preset" placeholder="请选择预设" @change="changePreset">
<el-option v-for="item in presets" :value="item" :label="item.label" :key="item.value">{{ item.label }} </el-option>
<el-option
v-for="item in presets"
:value="item"
:label="item.label"
:key="item.value"
>{{ item.label }}
</el-option>
</el-select>
</el-col>
</el-row>
@@ -81,14 +92,24 @@
</el-form-item>
<el-form-item label="类型：" prop="type">
<el-select v-model="item.type" placeholder="请选择类型">
<el-option v-for="item in types" :value="item.value" :label="item.label" :key="item.value">{{ item.label }} </el-option>
<el-option
v-for="item in types"
:value="item.value"
:label="item.label"
:key="item.value"
>{{ item.label }}
</el-option>
</el-select>
</el-form-item>
<el-form-item label="API KEY：" prop="value">
<el-input v-model="item.value" autocomplete="off" />
</el-form-item>
<el-form-item label="API URL：" prop="api_url">
<el-input v-model="item.api_url" autocomplete="off" placeholder="只填 BASE URL 即可，如：https://api.openai.com 或者 wss://api.openai.com" />
<el-input
v-model="item.api_url"
autocomplete="off"
placeholder="只填 BASE URL 如：https://api.openai.com 或者完整 URL 如：https://api.openai.com/v1/chat/completions"
/>
</el-form-item>
<!-- <el-form-item label="代理地址：" prop="proxy_url">-->
@@ -112,162 +133,162 @@
</template>
<script setup>
import { onMounted, onUnmounted, reactive, ref } from "vue";
import { httpGet, httpPost } from "@/utils/http";
import { ElMessage } from "element-plus";
import { dateFormat, removeArrayItem, substr } from "@/utils/libs";
import { DocumentCopy, Plus, ShoppingCart, Search } from "@element-plus/icons-vue";
import ClipboardJS from "clipboard";
import { httpGet, httpPost } from '@/utils/http'
import { dateFormat, removeArrayItem, substr } from '@/utils/libs'
import { DocumentCopy, Plus, Search, ShoppingCart } from '@element-plus/icons-vue'
import ClipboardJS from 'clipboard'
import { ElMessage } from 'element-plus'
import { onMounted, onUnmounted, reactive, ref } from 'vue'
// 变量定义
const items = ref([]);
const query = ref({ type: "" });
const item = ref({});
const showDialog = ref(false);
const items = ref([])
const query = ref({ type: '' })
const item = ref({})
const showDialog = ref(false)
const rules = reactive({
name: [{ required: true, message: "请输入名称", trigger: "change" }],
type: [{ required: true, message: "请选择用途", trigger: "change" }],
value: [{ required: true, message: "请输入 API KEY 值", trigger: "change" }],
});
name: [{ required: true, message: '请输入名称', trigger: 'change' }],
type: [{ required: true, message: '请选择用途', trigger: 'change' }],
value: [{ required: true, message: '请输入 API KEY 值', trigger: 'change' }],
})
const loading = ref(true);
const formRef = ref(null);
const title = ref("");
const loading = ref(true)
const formRef = ref(null)
const title = ref('')
const types = ref([
{ label: "对话", value: "chat" },
{ label: "Midjourney", value: "mj" },
{ label: "Stable-Diffusion", value: "sd" },
{ label: "DALL-E", value: "dalle" },
{ label: "Suno文生歌", value: "suno" },
{ label: "Luma视频", value: "luma" },
{ label: "可灵视频", value: "keling" },
{ label: "Realtime API", value: "realtime" },
{ label: "语音合成", value: "tts" },
{ label: "其他", value: "other" },
]);
const isEdit = ref(false);
const clipboard = ref(null);
{ label: '对话', value: 'chat' },
{ label: 'Midjourney', value: 'mj' },
{ label: 'Stable-Diffusion', value: 'sd' },
{ label: 'DALL-E', value: 'dalle' },
{ label: 'Suno文生歌', value: 'suno' },
{ label: 'Luma视频', value: 'luma' },
{ label: '可灵视频', value: 'keling' },
{ label: 'Realtime API', value: 'realtime' },
{ label: '语音合成', value: 'tts' },
{ label: '其他', value: 'other' },
])
const isEdit = ref(false)
const clipboard = ref(null)
const presets = ref([
{ label: "GiteeAI", value: "https://ai.gitee.com" },
{ label: "中转01", value: "https://api.geekai.pro" },
{ label: "中转03", value: "https://api.geekai.me" },
{ label: "OpenAI", value: "https://api.openai.com" },
]);
const preset = ref(null);
{ label: 'GiteeAI', value: 'https://ai.gitee.com' },
{ label: '中转01', value: 'https://api.geekai.pro' },
{ label: '中转03', value: 'https://api.geekai.me' },
{ label: 'OpenAI', value: 'https://api.openai.com' },
])
const preset = ref(null)
onMounted(() => {
clipboard.value = new ClipboardJS(".copy-key");
clipboard.value.on("success", () => {
ElMessage.success("复制成功！");
});
clipboard.value = new ClipboardJS('.copy-key')
clipboard.value.on('success', () => {
ElMessage.success('复制成功！')
})
clipboard.value.on("error", () => {
ElMessage.error("复制失败！");
});
clipboard.value.on('error', () => {
ElMessage.error('复制失败！')
})
fetchData();
});
fetchData()
})
onUnmounted(() => {
clipboard.value.destroy();
});
clipboard.value.destroy()
})
const getTypeName = (type) => {
for (let v of types.value) {
if (v.value === type) {
return v.label;
return v.label
}
}
return "";
};
return ''
}
// 获取数据
const fetchData = () => {
httpGet("/api/admin/apikey/list", query.value)
httpGet('/api/admin/apikey/list', query.value)
.then((res) => {
if (res.data) {
// 初始化数据
const arr = res.data;
const arr = res.data
for (let i = 0; i < arr.length; i++) {
arr[i].last_used_at = dateFormat(arr[i].last_used_at);
arr[i].last_used_at = dateFormat(arr[i].last_used_at)
}
items.value = arr;
items.value = arr
}
loading.value = false;
loading.value = false
})
.catch(() => {
ElMessage.error("获取数据失败");
});
};
ElMessage.error('获取数据失败')
})
}
const add = function () {
showDialog.value = true;
title.value = "新增 API KEY";
isEdit.value = false;
showDialog.value = true
title.value = '新增 API KEY'
isEdit.value = false
item.value = {
enabled: true,
api_url: "",
};
};
api_url: '',
}
}
const edit = function (row) {
showDialog.value = true;
title.value = "修改 API KEY";
item.value = row;
isEdit.value = true;
};
showDialog.value = true
title.value = '修改 API KEY'
item.value = row
isEdit.value = true
}
const save = function () {
formRef.value.validate((valid) => {
if (valid) {
showDialog.value = false;
httpPost("/api/admin/apikey/save", item.value)
showDialog.value = false
httpPost('/api/admin/apikey/save', item.value)
.then((res) => {
ElMessage.success("操作成功！");
if (!item.value["id"]) {
const newItem = res.data;
newItem.last_used_at = dateFormat(newItem.last_used_at);
items.value.push(newItem);
ElMessage.success('操作成功！')
if (!item.value['id']) {
const newItem = res.data
newItem.last_used_at = dateFormat(newItem.last_used_at)
items.value.push(newItem)
}
})
.catch((e) => {
ElMessage.error("操作失败，" + e.message);
});
ElMessage.error('操作失败，' + e.message)
})
} else {
return false;
return false
}
});
};
})
}
const remove = function (row) {
httpGet("/api/admin/apikey/remove?id=" + row.id)
httpGet('/api/admin/apikey/remove?id=' + row.id)
.then(() => {
ElMessage.success("删除成功！");
ElMessage.success('删除成功！')
items.value = removeArrayItem(items.value, row, (v1, v2) => {
return v1.id === v2.id;
});
return v1.id === v2.id
})
})
.catch((e) => {
ElMessage.error("删除失败：" + e.message);
});
};
ElMessage.error('删除失败：' + e.message)
})
}
const set = (filed, row) => {
httpPost("/api/admin/apikey/set", { id: row.id, filed: filed, value: row[filed] })
httpPost('/api/admin/apikey/set', { id: row.id, filed: filed, value: row[filed] })
.then(() => {
ElMessage.success("操作成功！");
ElMessage.success('操作成功！')
})
.catch((e) => {
ElMessage.error("操作失败：" + e.message);
});
};
ElMessage.error('操作失败：' + e.message)
})
}
const changePreset = (row) => {
item.value.api_url = row.value;
item.value.api_url = row.value
if (!item.value.name) {
item.value.name = row.label;
item.value.name = row.label
}
};
}
</script>
<style lang="stylus" scoped>