merge v4.1.6

web/src/views/admin/ApiKey.vue

@@ -79,7 +79,7 @@
           <el-input v-model="item.name" autocomplete="off"/>
         </el-form-item>
         <el-form-item label="类型：" prop="type">
-          <el-select v-model="item.type" placeholder="请选择类型">
+          <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
               }}
@@ -91,13 +91,13 @@
         </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"/>
+                    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"/>
@@ -125,7 +125,9 @@ import ClipboardJS from "clipboard";
 // 变量定义
 const items = ref([])
 const query = ref({type: ''})
-const item = ref({})
+const item = ref({
+  enabled: true, api_url: ""
+})
 const showDialog = ref(false)
 const rules = reactive({
   name: [{required: true, message: '请输入名称', trigger: 'change',}],
@@ -143,9 +145,9 @@ const types = ref([
   {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');
@@ -164,6 +166,18 @@ onUnmounted(() => {
   clipboard.value.destroy()
 })
 
+const changeType = (event) => {
+  if (isEdit.value) {
+    return
+  }
+  
+  if (event === 'realtime') {
+    item.value.api_url = "wss://api.geekai.pro"
+  } else {
+    item.value.api_url = "https://api.geekai.pro"
+  }
+}
+
 const getTypeName = (type) => {
   for (let v of types.value) {
     if (v.value === type) {
@@ -194,13 +208,14 @@ const fetchData = () => {
 const add = function () {
   showDialog.value = true
   title.value = "新增 API KEY"
-  item.value = {enabled: true,api_url: "https://api.geekai.pro"}
+  isEdit.value = false
 }
 
 const edit = function (row) {
   showDialog.value = true
   title.value = "修改 API KEY"
   item.value = row
+  isEdit.value = true
 }
 
 const save = function () {

web/src/views/admin/ChatList.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="container chat-list">
+  <div class="container chat-page">
     <el-tabs v-model="activeName" @tab-change="handleChange">
       <el-tab-pane label="对话列表" name="chat" v-loading="data.chat.loading">
         <div class="handle-box">
@@ -145,13 +145,19 @@
     <el-dialog
         v-model="showContentDialog"
         title="消息详情"
+        class="chat-dialog"
+        style="--el-dialog-width:60%"
     >
-      <div v-html="dialogContent" style="overflow: auto; max-height: 300px"></div>
+      <div class="chat-detail">
+        <div class="chat-line" v-html="dialogContent"></div>
+      </div>
     </el-dialog>
 
     <el-dialog
         v-model="showChatItemDialog"
         title="对话详情"
+        class="chat-dialog"
+        style="--el-dialog-width:60%"
     >
       <div class="chat-box chat-page">
         <div v-for="item in messages" :key="item.id">
@@ -197,12 +203,6 @@ const data = ref({
     loading: true
   }
 })
-const items = ref([])
-const query = ref({title: "", created_at: []})
-const total = ref(0)
-const page = ref(1)
-const pageSize = ref(15)
-const loading = ref(true)
 const activeName = ref("chat")
 
 onMounted(() => {
@@ -284,11 +284,33 @@ const removeMessage = function (row) {
   })
 }
 
+const mathjaxPlugin = require('markdown-it-mathjax3')
+const md = require('markdown-it')({
+  breaks: true,
+  html: true,
+  linkify: true,
+  typographer: true,
+  highlight: function (str, lang) {
+    if (lang && hl.getLanguage(lang)) {
+      // 处理代码高亮
+      const preCode = hl.highlight(lang, str, true).value
+      // 将代码包裹在 pre 中
+      return `<pre class="code-container"><code class="language-${lang} hljs">${preCode}</code></pre>`
+    }
+
+    // 处理代码高亮
+    const preCode = md.utils.escapeHtml(str)
+    // 将代码包裹在 pre 中
+    return `<pre class="code-container"><code class="language-${lang} hljs">${preCode}</code></pre>`
+  }
+});
+md.use(mathjaxPlugin)
+
 const showContentDialog = ref(false)
 const dialogContent = ref("")
 const showContent = (content) => {
   showContentDialog.value = true
-  dialogContent.value = processContent(content)
+  dialogContent.value = md.render(processContent(content))
 }
 
 const showChatItemDialog = ref(false)
@@ -309,7 +331,7 @@ const showMessages = (row) => {
 </script>
 
 <style lang="stylus" scoped>
-.chat-list {
+.chat-page {
   .handle-box {
     margin-bottom 20px
     .handle-input {
@@ -338,16 +360,19 @@ const showMessages = (row) => {
     justify-content right
   }
 
+  .chat-detail {
+    max-height 90vh
+    overflow auto
+  }
   .chat-box {
-    overflow-y: auto;
-    overflow-x hidden
+    overflow auto
 
     // 变量定义
     --content-font-size: 16px;
     --content-color: #c1c1c1;
 
     font-family: 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
-    height 90vh
+    max-height 90vh
 
     .chat-line {
       // 隐藏滚动条
@@ -366,4 +391,4 @@ const showMessages = (row) => {
   }
 
 }
-</style>
+</style>

web/src/views/admin/ImageList.vue

@@ -0,0 +1,485 @@
+<template>
+  <div class="container image-page">
+    <el-tabs v-model="activeName" @tab-change="handleChange">
+      <el-tab-pane label="Midjourney" name="mj" v-loading="data.mj.loading">
+        <div class="handle-box">
+          <el-input v-model="data.mj.query.username" placeholder="用户名" class="handle-input mr10"
+                    @keyup="search($event,'mj')" clearable />
+          <el-input v-model="data.mj.query.prompt" placeholder="提示词" class="handle-input mr10"
+                    @keyup="search($event,'mj')" clearable />
+          <el-date-picker
+              v-model="data.mj.query.created_at"
+              type="daterange"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              format="YYYY-MM-DD"
+              value-format="YYYY-MM-DD"
+              style="margin-right: 10px;width: 200px; position: relative;top:3px;"
+          />
+          <el-button type="primary" :icon="Search" @click="fetchMjData">搜索</el-button>
+        </div>
+
+        <div v-if="data.mj.items.length > 0">
+          <el-row>
+            <el-table :data="data.mj.items" :row-key="row => row.id" table-layout="auto">
+              <el-table-column prop="user_id" label="用户ID"/>
+              <el-table-column label="任务类型">
+                <template #default="scope">
+                  <el-button :color="taskTypeTheme[scope.row.type].color" size="small" plain>{{taskTypeTheme[scope.row.type].text}}</el-button>
+                </template>
+              </el-table-column>
+              <el-table-column prop="progress" label="任务进度">
+                <template #default="scope">
+                  <span v-if="scope.row.progress <= 100">{{scope.row.progress}}%</span>
+                  <el-tag v-else type="danger">已失败</el-tag>
+                </template>
+              </el-table-column>
+              <el-table-column prop="power" label="消耗算力"/>
+              <el-table-column label="结果图片">
+                <template #default="scope">
+                  <el-button size="small" type="success" @click="showImage(scope.row.img_url)" v-if="scope.row.img_url !== ''" plain>预览图片</el-button>
+                </template>
+              </el-table-column>
+              <el-table-column label="提示词">
+                <template #default="scope">
+                  <el-popover
+                      placement="top-start"
+                      title="绘画提示词"
+                      :width="300"
+                      trigger="hover"
+                      :content="scope.row.prompt"
+                  >
+                    <template #reference>
+                      <span>{{ substr(scope.row.prompt, 20) }}</span>
+                    </template>
+                  </el-popover>
+                </template>
+              </el-table-column>
+              <el-table-column label="创建时间">
+                <template #default="scope">
+                  <span>{{ dateFormat(scope.row['created_at']) }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column label="失败原因">
+                <template #default="scope">
+                  <el-popover
+                      placement="top-start"
+                      title="失败原因"
+                      :width="300"
+                      trigger="hover"
+                      :content="scope.row.err_msg"
+                      v-if="scope.row.progress === 101"
+                  >
+                    <template #reference>
+                      <el-text type="danger">{{ substr(scope.row.err_msg, 20) }}</el-text>
+                    </template>
+                  </el-popover>
+                  <span v-else>无</span>
+                </template>
+              </el-table-column>
+              <el-table-column label="操作" width="180">
+                <template #default="scope">
+                  <el-popconfirm title="确定要删除当前记录吗?" @confirm="remove(scope.row, 'mj')">
+                    <template #reference>
+                      <el-button size="small" type="danger">删除</el-button>
+                    </template>
+                  </el-popconfirm>
+                </template>
+              </el-table-column>
+            </el-table>
+          </el-row>
+
+          <div class="pagination">
+            <el-pagination v-if="data.mj.total > 0" background
+                           layout="total,prev, pager, next"
+                           :hide-on-single-page="true"
+                           v-model:current-page="data.mj.page"
+                           v-model:page-size="data.mj.pageSize"
+                           @current-change="fetchMjData()"
+                           :total="data.mj.total"/>
+
+          </div>
+        </div>
+        <el-empty v-else />
+      </el-tab-pane>
+      <el-tab-pane label="Stable-Diffusion" name="sd" v-loading="data.sd.loading">
+        <div class="handle-box">
+          <el-input v-model="data.sd.query.username" placeholder="用户名" class="handle-input mr10"
+                    @keyup="search($event, 'sd')" clearable />
+          <el-input v-model="data.sd.query.prompt" placeholder="提示词" class="handle-input mr10"
+                    @keyup="search($event, 'sd')" clearable />
+          <el-date-picker
+              v-model="data.sd.query.created_at"
+              type="daterange"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              format="YYYY-MM-DD"
+              value-format="YYYY-MM-DD"
+              style="margin-right: 10px;width: 200px; position: relative;top:3px;"
+          />
+          <el-button type="primary" :icon="Search" @click="fetchSdData">搜索</el-button>
+        </div>
+
+        <div v-if="data.sd.items.length > 0">
+          <el-row>
+            <el-table :data="data.sd.items" :row-key="row => row.id" table-layout="auto">
+              <el-table-column prop="user_id" label="用户ID"/>
+              <el-table-column prop="progress" label="任务进度">
+                <template #default="scope">
+                  <span v-if="scope.row.progress <= 100">{{scope.row.progress}}%</span>
+                  <el-tag v-else type="danger">已失败</el-tag>
+                </template>
+              </el-table-column>
+              <el-table-column prop="power" label="消耗算力"/>
+              <el-table-column label="结果图片">
+                <template #default="scope">
+                  <el-button size="small" type="success" @click="showImage(scope.row.img_url)" v-if="scope.row.img_url !== ''" plain>预览图片</el-button>
+                </template>
+              </el-table-column>
+              <el-table-column label="提示词">
+                <template #default="scope">
+                  <el-popover
+                      placement="top-start"
+                      title="绘画提示词"
+                      :width="300"
+                      trigger="hover"
+                      :content="scope.row.prompt"
+                  >
+                    <template #reference>
+                      <span>{{ substr(scope.row.prompt, 20) }}</span>
+                    </template>
+                  </el-popover>
+                </template>
+              </el-table-column>
+              <el-table-column label="创建时间">
+                <template #default="scope">
+                  <span>{{ dateFormat(scope.row['created_at']) }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column label="失败原因">
+                <template #default="scope">
+                  <el-popover
+                      placement="top-start"
+                      title="失败原因"
+                      :width="300"
+                      trigger="hover"
+                      :content="scope.row.err_msg"
+                      v-if="scope.row.progress === 101"
+                  >
+                    <template #reference>
+                      <el-text type="danger">{{ substr(scope.row.err_msg, 20) }}</el-text>
+                    </template>
+                  </el-popover>
+                  <span v-else>无</span>
+                </template>
+              </el-table-column>
+              <el-table-column label="操作" width="180">
+                <template #default="scope">
+                  <el-popconfirm title="确定要删除当前记录吗?" @confirm="remove(scope.row, 'sd')">
+                    <template #reference>
+                      <el-button size="small" type="danger">删除</el-button>
+                    </template>
+                  </el-popconfirm>
+                </template>
+              </el-table-column>
+            </el-table>
+          </el-row>
+
+          <div class="pagination">
+            <el-pagination v-if="data.sd.total > 0" background
+                           layout="total,prev, pager, next"
+                           :hide-on-single-page="true"
+                           v-model:current-page="data.sd.page"
+                           v-model:page-size="data.sd.pageSize"
+                           @current-change="fetchSdData()"
+                           :total="data.sd.total"/>
+
+          </div>
+        </div>
+        <el-empty v-else />
+      </el-tab-pane>
+      <el-tab-pane label="DALL-E" name="dall">
+        <div class="handle-box">
+          <el-input v-model="data.dall.query.username" placeholder="用户名" class="handle-input mr10"
+                    @keyup="search($event,'dall')" clearable />
+          <el-input v-model="data.dall.query.prompt" placeholder="提示词" class="handle-input mr10"
+                    @keyup="search($event, 'dall')" clearable />
+          <el-date-picker
+              v-model="data.dall.query.created_at"
+              type="daterange"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              format="YYYY-MM-DD"
+              value-format="YYYY-MM-DD"
+              style="margin-right: 10px;width: 200px; position: relative;top:3px;"
+          />
+          <el-button type="primary" :icon="Search" @click="fetchDallData">搜索</el-button>
+        </div>
+
+        <div v-if="data.dall.items.length > 0">
+          <el-row>
+            <el-table :data="data.dall.items" :row-key="row => row.id" table-layout="auto">
+              <el-table-column prop="user_id" label="用户ID"/>
+              <el-table-column prop="progress" label="任务进度">
+                <template #default="scope">
+                  <span v-if="scope.row.progress <= 100">{{scope.row.progress}}%</span>
+                  <el-tag v-else type="danger">已失败</el-tag>
+                </template>
+              </el-table-column>
+              <el-table-column prop="power" label="消耗算力"/>
+              <el-table-column label="结果图片">
+                <template #default="scope">
+                  <el-button size="small" type="success" @click="showImage(scope.row.img_url)" v-if="scope.row.img_url !== ''" plain>预览图片</el-button>
+                </template>
+              </el-table-column>
+              <el-table-column label="提示词">
+                <template #default="scope">
+                  <el-popover
+                      placement="top-start"
+                      title="绘画提示词"
+                      :width="300"
+                      trigger="hover"
+                      :content="scope.row.prompt"
+                  >
+                    <template #reference>
+                      <span>{{ substr(scope.row.prompt, 20) }}</span>
+                    </template>
+                  </el-popover>
+                </template>
+              </el-table-column>
+              <el-table-column label="创建时间">
+                <template #default="scope">
+                  <span>{{ dateFormat(scope.row['created_at']) }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column label="失败原因">
+                <template #default="scope">
+                  <el-popover
+                      placement="top-start"
+                      title="失败原因"
+                      :width="300"
+                      trigger="hover"
+                      :content="scope.row.err_msg"
+                      v-if="scope.row.progress === 101"
+                  >
+                    <template #reference>
+                      <el-text type="danger">{{ substr(scope.row.err_msg, 20) }}</el-text>
+                    </template>
+                  </el-popover>
+                  <span v-else>无</span>
+                </template>
+              </el-table-column>
+              <el-table-column label="操作" width="180">
+                <template #default="scope">
+                  <el-popconfirm title="确定要删除当前记录吗?" @confirm="remove(scope.row, 'dall')">
+                    <template #reference>
+                      <el-button size="small" type="danger">删除</el-button>
+                    </template>
+                  </el-popconfirm>
+                </template>
+              </el-table-column>
+            </el-table>
+          </el-row>
+
+          <div class="pagination">
+            <el-pagination v-if="data.dall.total > 0" background
+                           layout="total,prev, pager, next"
+                           :hide-on-single-page="true"
+                           v-model:current-page="data.dall.page"
+                           v-model:page-size="data.dall.pageSize"
+                           @current-change="fetchDallData()"
+                           :total="data.dall.total"/>
+
+          </div>
+        </div>
+        <el-empty v-else />
+      </el-tab-pane>
+    </el-tabs>
+
+
+    <el-dialog
+        v-model="showImageDialog"
+        title="图片预览"
+    >
+      <el-image
+          :src="imgURL"
+          :zoom-rate="1.2"
+          :max-scale="7"
+          :min-scale="0.2"
+          :preview-src-list="[imgURL]"
+          :initial-index="0"
+          fit="cover"
+      />
+    </el-dialog>
+
+  </div>
+</template>
+
+<script setup>
+import {onMounted, ref} from "vue";
+import {httpGet, httpPost} from "@/utils/http";
+import {ElMessage} from "element-plus";
+import {dateFormat, substr} from "@/utils/libs";
+import {Search} from "@element-plus/icons-vue";
+
+// 变量定义
+const data = ref({
+  "mj": {
+    items: [],
+    query: {prompt: "", username: "", created_at: [], page: 1, page_size: 15},
+    total: 0,
+    page: 1,
+    pageSize: 15,
+    loading: true
+  },
+  "sd": {
+    items: [],
+    query: {prompt: "", username: "", created_at: [], page: 1, page_size: 15},
+    total: 0,
+    page: 1,
+    pageSize: 15,
+    loading: true
+  },
+  "dall": {
+    items: [],
+    query: {prompt: "", username: "", created_at: [], page: 1, page_size: 15},
+    total: 0,
+    page: 1,
+    pageSize: 15,
+    loading: true
+  }
+})
+const activeName = ref("mj")
+const taskTypeTheme = {
+  image: {text: "绘图", color: "#2185d0"},
+  upscale: {text: "放大", color: "#f2711c" },
+  variation: {text: "变换", color: "#00b5ad"},
+  blend: {text: "融图", color: "#21ba45"},
+  swapFace: {text: "换脸", color: "#a333c8"}
+}
+
+onMounted(() => {
+  fetchMjData()
+})
+
+const handleChange = (tab) => {
+  switch (tab) {
+    case "mj":
+      fetchMjData()
+      break
+    case "sd":
+      fetchSdData()
+      break
+    case "dall":
+      fetchDallData()
+      break
+  }
+}
+
+// 搜索对话
+const search = (evt,tab) => {
+  if (evt.keyCode === 13) {
+    handleChange(tab)
+  }
+}
+
+// 获取数据
+const fetchMjData = () => {
+  const d = data.value.mj
+  d.query.page = d.page
+  d.query.page_size = d.pageSize
+  httpPost('/api/admin/image/list/mj', d.query).then((res) => {
+    if (res.data) {
+      d.items = res.data.items
+      d.total = res.data.total
+      d.page = res.data.page
+      d.pageSize = res.data.page_size
+    }
+    d.loading = false
+  }).catch(e => {
+    ElMessage.error("获取数据失败：" + e.message);
+  })
+}
+
+const fetchSdData = () => {
+  const d = data.value.sd
+  d.query.page = d.page
+  d.query.page_size = d.pageSize
+  httpPost('/api/admin/image/list/sd', d.query).then((res) => {
+    if (res.data) {
+      d.items = res.data.items
+      d.total = res.data.total
+      d.page = res.data.page
+      d.pageSize = res.data.page_size
+    }
+    d.loading = false
+  }).catch(e => {
+    ElMessage.error("获取数据失败：" + e.message);
+  })
+}
+
+const fetchDallData = () => {
+  const d = data.value.dall
+  d.query.page = d.page
+  d.query.page_size = d.pageSize
+  httpPost('/api/admin/image/list/dall', d.query).then((res) => {
+    if (res.data) {
+      d.items = res.data.items
+      d.total = res.data.total
+      d.page = res.data.page
+      d.pageSize = res.data.page_size
+    }
+    d.loading = false
+  }).catch(e => {
+    ElMessage.error("获取数据失败：" + e.message);
+  })
+}
+
+const remove = function (row,tab) {
+  httpGet(`/api/admin/image/remove?id=${row.id}&tab=${tab}`).then(() => {
+    ElMessage.success("删除成功！")
+    handleChange(tab)
+  }).catch((e) => {
+    ElMessage.error("删除失败：" + e.message)
+  })
+}
+
+const showImageDialog = ref(false)
+const imgURL = ref('')
+const showImage = (url) => {
+  showImageDialog.value = true
+  imgURL.value = url
+}
+</script>
+
+<style lang="stylus" scoped>
+.image-page {
+  .handle-box {
+    margin-bottom 20px
+    .handle-input {
+      max-width 150px;
+      margin-right 10px;
+    }
+  }
+
+  .opt-box {
+    padding-bottom: 10px;
+    display flex;
+    justify-content flex-end
+
+    .el-icon {
+      margin-right: 5px;
+    }
+  }
+
+  .el-select {
+    width: 100%
+  }
+
+  .pagination {
+    padding 20px 0
+    display flex
+    justify-content right
+  }
+}
+</style>

web/src/views/admin/Login.vue

@@ -1,39 +1,42 @@
 <template>
-  <div class="admin-login">
-    <div class="main">
-      <div class="contain">
-        <div class="logo" @click="router.push('/')">
-          <el-image :src="logo" fit="cover"/>
+  <div>
+    <div class="bg"></div>
+    <div class="admin-login">
+      <div class="main">
+        <div class="contain">
+          <div class="logo" @click="router.push('/')">
+            <el-image :src="logo" fit="cover"/>
+          </div>
+
+          <h1 class="header">登录 {{ title }}</h1>
+          <div class="content">
+            <el-input v-model="username" placeholder="请输入用户名" size="large"
+                      autocomplete="off" autofocus @keyup.enter="login">
+              <template #prefix>
+                <el-icon>
+                  <UserFilled/>
+                </el-icon>
+              </template>
+            </el-input>
+
+            <el-input v-model="password" placeholder="请输入密码" size="large"
+                      show-password autocomplete="off" @keyup.enter="login">
+              <template #prefix>
+                <el-icon>
+                  <Lock/>
+                </el-icon>
+              </template>
+            </el-input>
+
+            <el-row class="btn-row">
+              <el-button class="login-btn" size="large" type="primary" @click="login">登录</el-button>
+            </el-row>
+          </div>
         </div>
 
-        <h1 class="header">{{ title }}</h1>
-        <div class="content">
-          <el-input v-model="username" placeholder="请输入用户名" size="large"
-                    autocomplete="off" autofocus @keyup.enter="login">
-            <template #prefix>
-              <el-icon>
-                <UserFilled/>
-              </el-icon>
-            </template>
-          </el-input>
-
-          <el-input v-model="password" placeholder="请输入密码" size="large"
-                    show-password autocomplete="off" @keyup.enter="login">
-            <template #prefix>
-              <el-icon>
-                <Lock/>
-              </el-icon>
-            </template>
-          </el-input>
-
-          <el-row class="btn-row">
-            <el-button class="login-btn" size="large" type="primary" @click="login">登录</el-button>
-          </el-row>
-        </div>
+        <captcha v-if="enableVerify" @success="doLogin" ref="captchaRef"/>
+        <footer-bar class="footer"/>
       </div>
-
-      <captcha v-if="enableVerify" @success="doLogin" ref="captchaRef"/>
-      <footer-bar class="footer"/>
     </div>
   </div>
 </template>
@@ -42,7 +45,7 @@
 
 import {ref} from "vue";
 import {Lock, UserFilled} from "@element-plus/icons-vue";
-import {httpGet, httpPost} from "@/utils/http";
+import {httpPost} from "@/utils/http";
 import {ElMessage} from "element-plus";
 import {useRouter} from "vue-router";
 import FooterBar from "@/components/FooterBar.vue";
@@ -105,14 +108,33 @@ const doLogin = function (verifyData) {
 </script>
 
 <style lang="stylus" scoped>
+.bg {
+  position absolute
+  left 0
+  right 0
+  top 0
+  bottom 0
+  background-color #091519
+  background-image url("~@/assets/img/admin-login-bg.jpg")
+  background-size cover
+  background-position center
+  background-repeat no-repeat
+  filter: blur(10px); /* 调整模糊程度，可以根据需要修改值 */
+  z-index 0
+}
+
 .admin-login {
+  position absolute
+  left 0
+  top 0
+  z-index 10
   display flex
   justify-content center
   width: 100%
-  background #2D3A4B
+  height: 100vh
 
   .main {
-    width 400px;
+    max-width 400px
     display flex
     justify-content center
     align-items center
@@ -120,10 +142,10 @@ const doLogin = function (verifyData) {
 
     .contain {
       width 100%
-      padding 20px 40px;
+      padding 40px;
       color #ffffff
       border-radius 10px;
-      background rgba(255, 255, 255, 0.3)
+      background rgba(0, 0, 0, 0.3)
 
       .logo {
         text-align center
@@ -137,7 +159,7 @@ const doLogin = function (verifyData) {
 
       .header {
         width 100%
-        margin-bottom 20px
+        //margin-bottom 20px
         padding 10px
         font-size 26px
         text-align center
@@ -148,6 +170,10 @@ const doLogin = function (verifyData) {
         height: auto
         border-radius 3px
 
+        .el-input {
+          margin 10px 0
+        }
+
         .block {
           margin-bottom 16px
 

web/src/views/admin/Medias.vue

@@ -0,0 +1,450 @@
+<template>
+  <div class="container media-page">
+    <el-tabs v-model="activeName" @tab-change="handleChange">
+      <el-tab-pane label="Suno音乐" name="suno" v-loading="data.suno.loading">
+        <div class="handle-box">
+          <el-input v-model="data.suno.query.username" placeholder="用户名" class="handle-input mr10"
+                    @keyup="search($event,'suno')" clearable />
+          <el-input v-model="data.suno.query.prompt" placeholder="提示词" class="handle-input mr10"
+                    @keyup="search($event,'suno')" clearable />
+          <el-date-picker
+              v-model="data.suno.query.created_at"
+              type="daterange"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              format="YYYY-MM-DD"
+              value-format="YYYY-MM-DD"
+              style="margin-right: 10px;width: 200px; position: relative;top:3px;"
+          />
+          <el-button type="primary" :icon="Search" @click="fetchSunoData">搜索</el-button>
+        </div>
+
+        <div v-if="data.suno.items.length > 0">
+          <el-row>
+            <el-table :data="data.suno.items" :row-key="row => row.id" table-layout="auto">
+              <el-table-column prop="user_id" label="用户ID"/>
+              <el-table-column label="歌曲预览">
+                <template #default="scope">
+                  <div class="container" v-if="scope.row.cover_url">
+                    <el-image :src="scope.row.cover_url" fit="cover" />
+                    <div class="duration">{{formatTime(scope.row.duration)}}</div>
+                    <button class="play" @click="playMusic(scope.row)">
+                      <img src="/images/play.svg" alt=""/>
+                    </button>
+                  </div>
+                  <el-image v-else src="/images/failed.jpg" style="height: 90px" fit="cover" />
+                </template>
+              </el-table-column>
+              <el-table-column prop="title" label="标题"/>
+              <el-table-column prop="progress" label="任务进度">
+                <template #default="scope">
+                  <span v-if="scope.row.progress <= 100">{{scope.row.progress}}%</span>
+                  <el-tag v-else type="danger">已失败</el-tag>
+                </template>
+              </el-table-column>
+              <el-table-column prop="power" label="消耗算力"/>
+              <el-table-column prop="tags" label="风格"/>
+              <el-table-column prop="play_times" label="播放次数"/>
+              <el-table-column label="歌词">
+                <template #default="scope">
+                  <el-button size="small" type="primary" plain @click="showLyric(scope.row)">查看歌词</el-button>
+                </template>
+              </el-table-column>
+              <el-table-column label="创建时间">
+                <template #default="scope">
+                  <span>{{ dateFormat(scope.row['created_at']) }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column label="失败原因">
+                <template #default="scope">
+                  <el-popover
+                      placement="top-start"
+                      title="失败原因"
+                      :width="300"
+                      trigger="hover"
+                      :content="scope.row.err_msg"
+                      v-if="scope.row.progress === 101"
+                  >
+                    <template #reference>
+                      <el-text type="danger">{{ substr(scope.row.err_msg, 20) }}</el-text>
+                    </template>
+                  </el-popover>
+                  <span v-else>无</span>
+                </template>
+              </el-table-column>
+              <el-table-column label="操作" width="180">
+                <template #default="scope">
+                  <el-popconfirm title="确定要删除当前记录吗?" @confirm="remove(scope.row, 'suno')">
+                    <template #reference>
+                      <el-button size="small" type="danger">删除</el-button>
+                    </template>
+                  </el-popconfirm>
+                </template>
+              </el-table-column>
+            </el-table>
+          </el-row>
+
+          <div class="pagination">
+            <el-pagination v-if="data.suno.total > 0" background
+                           layout="total,prev, pager, next"
+                           :hide-on-single-page="true"
+                           v-model:current-page="data.suno.page"
+                           v-model:page-size="data.suno.pageSize"
+                           @current-change="fetchSunoData()"
+                           :total="data.suno.total"/>
+
+          </div>
+        </div>
+        <el-empty v-else />
+      </el-tab-pane>
+      <el-tab-pane label="Luma视频" name="luma" v-loading="data.luma.loading">
+        <div class="handle-box">
+          <el-input v-model="data.luma.query.username" placeholder="用户名" class="handle-input mr10"
+                    @keyup="search($event, 'sd')" clearable />
+          <el-input v-model="data.luma.query.prompt" placeholder="提示词" class="handle-input mr10"
+                    @keyup="search($event, 'sd')" clearable />
+          <el-date-picker
+              v-model="data.luma.query.created_at"
+              type="daterange"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              format="YYYY-MM-DD"
+              value-format="YYYY-MM-DD"
+              style="margin-right: 10px;width: 200px; position: relative;top:3px;"
+          />
+          <el-button type="primary" :icon="Search" @click="fetchLumaData">搜索</el-button>
+        </div>
+
+        <div v-if="data.luma.items.length > 0">
+          <el-row>
+            <el-table :data="data.luma.items" :row-key="row => row.id" table-layout="auto">
+              <el-table-column prop="user_id" label="用户ID"/>
+              <el-table-column label="视频预览">
+                <template #default="scope">
+                  <div class="container">
+                    <div v-if="scope.row.progress === 100">
+                      <video class="video" :src="replaceImg(scope.row.video_url)"  preload="auto" loop="loop" muted="muted">
+                        您的浏览器不支持视频播放
+                      </video>
+                      <button class="play" @click="playVideo(scope.row)">
+                        <img src="/images/play.svg" alt=""/>
+                      </button>
+                    </div>
+                    <el-image :src="scope.row.cover_url" fit="cover" v-else-if="scope.row.progress > 100" />
+                    <generating message="正在生成视频" v-else />
+
+                  </div>
+                </template>
+              </el-table-column>
+              <el-table-column prop="progress" label="任务进度">
+                <template #default="scope">
+                  <span v-if="scope.row.progress <= 100">{{scope.row.progress}}%</span>
+                  <el-tag v-else type="danger">已失败</el-tag>
+                </template>
+              </el-table-column>
+              <el-table-column prop="power" label="消耗算力"/>
+              <el-table-column label="提示词">
+                <template #default="scope">
+                  <el-popover
+                      placement="top-start"
+                      title="提示词"
+                      :width="300"
+                      trigger="hover"
+                      :content="scope.row.prompt"
+                  >
+                    <template #reference>
+                      <span>{{ substr(scope.row.prompt, 20) }}</span>
+                    </template>
+                  </el-popover>
+                </template>
+              </el-table-column>
+              <el-table-column label="创建时间">
+                <template #default="scope">
+                  <span>{{ dateFormat(scope.row['created_at']) }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column label="失败原因">
+                <template #default="scope">
+                  <el-popover
+                      placement="top-start"
+                      title="失败原因"
+                      :width="300"
+                      trigger="hover"
+                      :content="scope.row.err_msg"
+                      v-if="scope.row.progress === 101"
+                  >
+                    <template #reference>
+                      <el-text type="danger">{{ substr(scope.row.err_msg, 20) }}</el-text>
+                    </template>
+                  </el-popover>
+                  <span v-else>无</span>
+                </template>
+              </el-table-column>
+              <el-table-column label="操作" width="180">
+                <template #default="scope">
+                  <el-popconfirm title="确定要删除当前记录吗?" @confirm="remove(scope.row, 'luma')">
+                    <template #reference>
+                      <el-button size="small" type="danger">删除</el-button>
+                    </template>
+                  </el-popconfirm>
+                </template>
+              </el-table-column>
+            </el-table>
+          </el-row>
+
+          <div class="pagination">
+            <el-pagination v-if="data.luma.total > 0" background
+                           layout="total,prev, pager, next"
+                           :hide-on-single-page="true"
+                           v-model:current-page="data.luma.page"
+                           v-model:page-size="data.luma.pageSize"
+                           @current-change="fetchLumaData()"
+                           :total="data.luma.total"/>
+
+          </div>
+        </div>
+        <el-empty v-else />
+      </el-tab-pane>
+    </el-tabs>
+
+
+    <el-dialog
+        v-model="showVideoDialog"
+        title="视频预览"
+    >
+      <video style="width: 100%; max-height: 90vh;" :src="currentVideoUrl"  preload="auto" :autoplay="true" loop="loop" muted="muted">
+        您的浏览器不支持视频播放
+      </video>
+    </el-dialog>
+
+    <div class="music-player" v-if="showPlayer">
+      <music-player :songs="playList" ref="playerRef" :show-close="true" @close="showPlayer = false" />
+    </div>
+
+    <el-dialog
+        v-model="showLyricDialog"
+        title="歌词"
+    >
+      <div class="chat-line" v-html="lyrics"></div>
+    </el-dialog>
+
+  </div>
+</template>
+
+<script setup>
+import {nextTick, onMounted, ref} from "vue";
+import {httpGet, httpPost} from "@/utils/http";
+import {ElMessage} from "element-plus";
+import {dateFormat, formatTime, replaceImg, substr} from "@/utils/libs";
+import {Search} from "@element-plus/icons-vue";
+import MusicPlayer from "@/components/MusicPlayer.vue";
+import Generating from "@/components/ui/Generating.vue";
+
+// 变量定义
+const data = ref({
+  "suno": {
+    items: [],
+    query: {prompt: "", username: "", created_at: [], page: 1, page_size: 15},
+    total: 0,
+    page: 1,
+    pageSize: 10,
+    loading: true
+  },
+  "luma": {
+    items: [],
+    query: {prompt: "", username: "", created_at: [], page: 1, page_size: 15},
+    total: 0,
+    page: 1,
+    pageSize: 10,
+    loading: true
+  }
+})
+const activeName = ref("suno")
+const playList = ref([])
+const playerRef = ref(null)
+const showPlayer = ref(false)
+const showLyricDialog = ref(false)
+const lyrics = ref("")
+const showVideoDialog = ref(false)
+const currentVideoUrl = ref('')
+
+onMounted(() => {
+  fetchSunoData()
+})
+
+const handleChange = (tab) => {
+  switch (tab) {
+    case "suno":
+      fetchSunoData()
+      break
+    case "luma":
+      fetchLumaData()
+      break
+  }
+}
+
+// 搜索对话
+const search = (evt,tab) => {
+  if (evt.keyCode === 13) {
+    handleChange(tab)
+  }
+}
+
+// 获取数据
+const fetchSunoData = () => {
+  const d = data.value.suno
+  d.query.page = d.page
+  d.query.page_size = d.pageSize
+  httpPost('/api/admin/media/list/suno', d.query).then((res) => {
+    if (res.data) {
+      d.items = res.data.items
+      d.total = res.data.total
+      d.page = res.data.page
+      d.pageSize = res.data.page_size
+    }
+    d.loading = false
+  }).catch(e => {
+    ElMessage.error("获取数据失败：" + e.message);
+  })
+}
+
+const fetchLumaData = () => {
+  const d = data.value.luma
+  d.query.page = d.page
+  d.query.page_size = d.pageSize
+  httpPost('/api/admin/media/list/luma', d.query).then((res) => {
+    if (res.data) {
+      d.items = res.data.items
+      d.total = res.data.total
+      d.page = res.data.page
+      d.pageSize = res.data.page_size
+    }
+    d.loading = false
+  }).catch(e => {
+    ElMessage.error("获取数据失败：" + e.message);
+  })
+}
+
+const remove = function (row,tab) {
+  httpGet(`/api/admin/media/remove?id=${row.id}&tab=${tab}`).then(() => {
+    ElMessage.success("删除成功！")
+    handleChange(tab)
+  }).catch((e) => {
+    ElMessage.error("删除失败：" + e.message)
+  })
+}
+
+const playMusic = (item) => {
+  playList.value = [item]
+  showPlayer.value = true
+  nextTick(()=> playerRef.value.play())
+}
+
+const playVideo = (item) => {
+  currentVideoUrl.value = replaceImg(item.video_url)
+  showVideoDialog.value = true
+}
+
+const md = require('markdown-it')({
+  breaks: true,
+  html: true,
+  linkify: true,
+});
+
+const showLyric = (item) => {
+  showLyricDialog.value = true
+  lyrics.value = md.render(item.prompt)
+}
+
+</script>
+
+<style lang="stylus" scoped>
+.media-page {
+  .handle-box {
+    margin-bottom 20px
+    .handle-input {
+      max-width 150px;
+      margin-right 10px;
+    }
+  }
+
+  .opt-box {
+    padding-bottom: 10px;
+    display flex;
+    justify-content flex-end
+
+    .el-icon {
+      margin-right: 5px;
+    }
+  }
+
+  .el-select {
+    width: 100%
+  }
+
+  .pagination {
+    padding 20px 0
+    display flex
+    justify-content right
+  }
+
+  .container {
+    width 160px
+    position relative
+
+    .video{
+      width 160px
+      border-radius 5px
+    }
+
+    .el-image {
+      width 160px
+      height 90px
+      border-radius 5px
+    }
+
+    .duration {
+      position absolute
+      bottom 6px
+      right 0
+      background-color rgba(255, 255, 255,.7)
+      padding 0 3px
+      font-family 'Input Sans'
+      font-size 14px
+      font-weight 700
+      border-radius .125rem
+    }
+
+    .play {
+      position absolute
+      width: 100%
+      height 100%
+      top: 0;
+      left: 50%;
+      border none
+      border-radius 5px
+      background rgba(100, 100, 100, 0.3)
+      cursor pointer
+      color #ffffff
+      opacity 0
+      transform: translate(-50%, 0px);
+      transition opacity 0.3s ease 0s
+    }
+
+    &:hover {
+      .play {
+        opacity 1
+        //display block
+      }
+    }
+  }
+
+
+  .music-player {
+    position absolute
+    bottom 20px
+    z-index 99999
+    width 100%
+  }
+}
+</style>

web/src/views/admin/Product.vue

@@ -15,8 +15,8 @@
             </span>
           </template>
         </el-table-column>
-        <el-table-column prop="price" label="产品价格"/>
-        <el-table-column prop="discount" label="优惠金额"/>
+        <el-table-column prop="price" label="商品原价"/>
+        <el-table-column prop="discount" label="优惠价"/>
         <el-table-column prop="days" label="有效期(天)">
           <template #default="scope">
             <el-tag v-if="scope.row.days === 0">长期有效</el-tag>
@@ -56,15 +56,15 @@
         :close-on-click-modal="false"
     >
       <el-form :model="item" label-width="120px" ref="formRef" :rules="rules">
-        <el-form-item label="产品名称：" prop="name">
+        <el-form-item label="商品名称：" prop="name">
           <el-input v-model="item.name" autocomplete="off"/>
         </el-form-item>
 
-        <el-form-item label="产品价格：" prop="price">
+        <el-form-item label="商品原价：" prop="price">
           <el-input v-model="item.price" autocomplete="off"/>
         </el-form-item>
 
-        <el-form-item label="优惠金额：" prop="discount">
+        <el-form-item label="优惠价：" prop="discount">
           <el-input v-model="item.discount" autocomplete="off"/>
         </el-form-item>
 

web/src/views/admin/SysConfig.vue

@@ -403,11 +403,11 @@
 
       <el-tab-pane label="修复数据" name="fixData">
         <div class="container">
-          <p class="text">有些版本升级的时候更新了数据库的结构，比如字段名字改了，需要把之前的字段的值转移到其他字段，这些无法通过简单的 SQL 语句可以实现的，需要手动写程序修正数据。</p>
+<!--          <p class="text">有些版本升级的时候更新了数据库的结构，比如字段名字改了，需要把之前的字段的值转移到其他字段，这些无法通过简单的 SQL 语句可以实现的，需要手动写程序修正数据。</p>-->
 
-          <p class="text">当前版本 v4.1.4 需要修正用户数据，增加了 mobile 和 email 字段，需要把之前用手机号或者邮箱注册的用户的 username 字段数据初始化到 mobile 或者 email 字段。另外，需要把订单的支付渠道从名字称修正为 key。</p>
+<!--          <p class="text">当前版本 v4.1.4 需要修正用户数据，增加了 mobile 和 email 字段，需要把之前用手机号或者邮箱注册的用户的 username 字段数据初始化到 mobile 或者 email 字段。另外，需要把订单的支付渠道从名字称修正为 key。</p>-->
 
-          <el-text type="danger">请注意：在修复数据前，请先备份好数据库，以免数据丢失！</el-text>
+<!--          <el-text type="danger">请注意：在修复数据前，请先备份好数据库，以免数据丢失！</el-text>-->
 
           <p><el-button type="primary" @click="fixData">立即修复</el-button></p>
         </div>