xinyin025/geekai
1
0
Fork 0
mirror of https://github.com/yangjian102621/geekai.git synced 2025-11-12 04:03:42 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

fine-tune page styles, use iframe to load external page in navigation bar

Browse Source
This commit is contained in:
RockYang
2024-12-25 11:10:23 +08:00
parent 989b4a64d6
commit cbf06eea24
18 changed files with 959 additions and 1090 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,14 +1,8 @@
<template>
<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>
@@ -19,13 +13,13 @@
</div>
<el-row>
<el-table :data="items" :row-key="row => row.id" table-layout="auto">
<el-table-column prop="name" label="名称"/>
<el-table :data="items" :row-key="(row) => row.id" table-layout="auto">
<el-table-column prop="name" label="名称" />
<el-table-column prop="value" label="API KEY">
<template #default="scope">
<span>{{ substr(scope.row.value, 20) }}</span>
<el-icon class="copy-key" :data-clipboard-text="scope.row.value">
<DocumentCopy/>
<DocumentCopy />
</el-icon>
</template>
</el-table-column>
@@ -33,26 +27,26 @@
<template #default="scope">
<span>{{ substr(scope.row.api_url, 30) }}</span>
<el-icon class="copy-key" :data-clipboard-text="scope.row.api_url">
<DocumentCopy/>
<DocumentCopy />
</el-icon>
</template>
</el-table-column>
<el-table-column prop="type" label="类型">
<template #default="scope">
{{getTypeName(scope.row.type)}}
{{ getTypeName(scope.row.type) }}
</template>
</el-table-column>
<el-table-column prop="proxy_url" label="代理地址"/>
<el-table-column prop="proxy_url" label="代理地址" />
<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>
<el-table-column prop="enabled" label="启用状态">
<template #default="scope">
<el-switch v-model="scope.row['enabled']" @change="set('enabled',scope.row)"/>
<el-switch v-model="scope.row['enabled']" @change="set('enabled', scope.row)" />
</template>
</el-table-column>
@@ -69,194 +63,194 @@
</el-table>
</el-row>
<el-dialog
v-model="showDialog"
:close-on-click-modal="false"
:title="title"
>
<el-dialog v-model="showDialog" :close-on-click-modal="false" :title="title">
<el-form :model="item" label-width="120px" ref="formRef" :rules="rules">
<el-form-item label="名称：" prop="name">
<el-input v-model="item.name" autocomplete="off"/>
<el-input v-model="item.name" autocomplete="off" />
</el-form-item>
<el-form-item label="类型：" prop="type">
<el-select v-model="item.type" placeholder="请选择类型" @change="changeType">
<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-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 或者 wss://api.openai.com" />
</el-form-item>
<!-- <el-form-item label="代理地址：" prop="proxy_url">-->
<!-- <el-input v-model="item.proxy_url" autocomplete="off"/>-->
<!-- <div class="info">如果想要通过代理来访问 API，请填写代理地址，如：http://127.0.0.1:7890</div>-->
<!-- </el-form-item>-->
<!-- <el-form-item label="代理地址：" prop="proxy_url">-->
<!-- <el-input v-model="item.proxy_url" autocomplete="off"/>-->
<!-- <div class="info">如果想要通过代理来访问 API，请填写代理地址，如：http://127.0.0.1:7890</div>-->
<!-- </el-form-item>-->
<el-form-item label="启用状态：" prop="enable">
<el-switch v-model="item.enabled"/>
<el-switch v-model="item.enabled" />
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="showDialog = false">取消</el-button>
<el-button type="primary" @click="save">提交</el-button>
</span>
<span class="dialog-footer">
<el-button @click="showDialog = false">取消</el-button>
<el-button type="primary" @click="save">提交</el-button>
</span>
</template>
</el-dialog>
</div>
</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 { 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";
// 变量定义
const items = ref([])
const query = ref({type: ''})
const items = ref([]);
const query = ref({ type: "" });
const item = ref({
enabled: true, api_url: ""
})
const showDialog = ref(false)
enabled: true,
api_url: "",
});
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: "Realtime API", value:"realtime"},
])
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: "Realtime API", value: "realtime" },
]);
const isEdit = ref(false);
const clipboard = 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 changeType = (event) => {
if (isEdit.value) {
return
return;
}
if (event === 'realtime') {
item.value.api_url = "wss://api.geekai.pro"
if (event === "realtime") {
item.value.api_url = "wss://api.geekai.pro";
} else {
item.value.api_url = "https://api.geekai.pro"
item.value.api_url = "https://api.geekai.pro";
}
}
};
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).then((res) => {
if (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)
httpGet("/api/admin/apikey/list", query.value)
.then((res) => {
if (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);
}
items.value = arr;
}
items.value = arr
}
loading.value = false
}).catch(() => {
ElMessage.error("获取数据失败");
})
}
loading.value = false;
})
.catch(() => {
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;
};
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).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)
}
}).catch((e) => {
ElMessage.error('操作失败，' + e.message)
})
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);
}
})
.catch((e) => {
ElMessage.error("操作失败，" + e.message);
});
} else {
return false
return false;
}
})
}
});
};
const remove = function (row) {
httpGet('/api/admin/apikey/remove?id=' + row.id).then(() => {
ElMessage.success("删除成功！")
items.value = removeArrayItem(items.value, row, (v1, v2) => {
return v1.id === v2.id
httpGet("/api/admin/apikey/remove?id=" + row.id)
.then(() => {
ElMessage.success("删除成功！");
items.value = removeArrayItem(items.value, row, (v1, v2) => {
return v1.id === v2.id;
});
})
}).catch((e) => {
ElMessage.error("删除失败：" + e.message)
})
}
.catch((e) => {
ElMessage.error("删除失败：" + e.message);
});
};
const set = (filed, row) => {
httpPost('/api/admin/apikey/set', {id: row.id, filed: filed, value: row[filed]}).then(() => {
ElMessage.success("操作成功！")
}).catch(e => {
ElMessage.error("操作失败：" + e.message)
})
}
httpPost("/api/admin/apikey/set", { id: row.id, filed: filed, value: row[filed] })
.then(() => {
ElMessage.success("操作成功！");
})
.catch((e) => {
ElMessage.error("操作失败：" + e.message);
});
};
</script>
<style lang="stylus" scoped>
@@ -295,4 +289,4 @@ const set = (filed, row) => {
}
}
}
</style>
</style>