feat(ui): web移动端初始化

new-ui/projects/admin/src/views/Chats/ChatsContainer.vue

@@ -0,0 +1,112 @@
+<script lang="ts" setup>
+import { ref, h } from "vue";
+import { Message, Modal } from "@arco-design/web-vue";
+import { dateFormat } from "@chatgpt-plus/packages/utils";
+import SearchTable from "@/components/SearchTable/SearchTable.vue";
+import type { SearchTableColumns } from "@/components/SearchTable/type";
+import app from "@/main";
+import { getList, message, remove } from "./api";
+import ChatsLogs from "./ChatsLogs.vue";
+
+const columns: SearchTableColumns[] = [
+  {
+    dataIndex: "user_id",
+    title: "账户ID",
+    search: {
+      valueType: "input",
+    },
+  },
+  {
+    dataIndex: "username",
+    title: "账户",
+  },
+  {
+    dataIndex: "title",
+    title: "标题",
+    search: {
+      valueType: "input",
+    },
+  },
+  {
+    dataIndex: "model",
+    title: "模型",
+    search: {
+      valueType: "input",
+    },
+  },
+  {
+    dataIndex: "msg_num",
+    title: "消息数量",
+  },
+  {
+    dataIndex: "token",
+    title: "消耗算力",
+  },
+  {
+    dataIndex: "username",
+    title: "账户",
+  },
+  {
+    dataIndex: "created_at",
+    title: "创建时间",
+    search: {
+      valueType: "range",
+    },
+    render: ({ record }) => dateFormat(record.created_at),
+  },
+  {
+    title: "操作",
+    fixed: "right",
+    slotName: "actions",
+  },
+];
+
+const tabsList = [
+  { key: "1", title: "对话列表", api: getList, columns },
+  { key: "2", title: "消息记录", api: message, columns },
+];
+
+const activeKey = ref(tabsList[0].key);
+
+const handleRemove = async (chat_id, reload) => {
+  await remove({ chat_id });
+  Message.success("删除成功");
+  await reload();
+  return true;
+};
+
+const handleCheck = (record) => {
+  if (activeKey.value === "1") {
+    Modal._context = app._context;
+    Modal.info({
+      title: "对话详情",
+      width: 800,
+      content: () => h(ChatsLogs, { id: record.chat_id }),
+    });
+    return;
+  }
+  Modal.info({
+    title: "消息详情",
+    content: record.content,
+  });
+};
+</script>
+<template>
+  <a-tabs v-model:active-key="activeKey" lazy-load justify>
+    <a-tab-pane v-for="item in tabsList" :key="item.key" :title="item.title">
+      <SearchTable :request="item.api" :columns="item.columns">
+        <template #actions="{ record, reload }">
+          <a-link @click="handleCheck(record)">查看</a-link>
+          <a-popconfirm
+            content="是否删除？"
+            position="left"
+            type="warning"
+            :on-before-ok="() => handleRemove(record.id, reload)"
+          >
+            <a-link status="danger">删除</a-link>
+          </a-popconfirm>
+        </template>
+      </SearchTable>
+    </a-tab-pane>
+  </a-tabs>
+</template>

new-ui/projects/admin/src/views/Chats/ChatsLogs.vue

@@ -0,0 +1,94 @@
+<script lang="ts" setup>
+import { onMounted } from "vue";
+import { Message } from "@arco-design/web-vue";
+import { dateFormat } from "@chatgpt-plus/packages/utils";
+import useRequest from "@/composables/useRequest";
+import { history } from "./api";
+
+const props = defineProps({
+  id: String,
+});
+
+const [getData, data, loading] = useRequest(history);
+onMounted(async () => {
+  await getData({ chat_id: props.id });
+});
+</script>
+<template>
+  <template v-if="loading">
+    <div class="custom-skeleton">
+      <a-skeleton-shape />
+      <div style="flex: 1">
+        <a-skeleton-line :rows="2" />
+      </div>
+    </div>
+  </template>
+  <template v-else>
+    <div v-for="item in data" :key="item.id">
+      <div class="item-container" :class="item.type">
+        <div class="left">
+          <a-avatar shape="square">
+            <img :src="item.icon" />
+          </a-avatar>
+        </div>
+        <a-space class="right" direction="vertical">
+          <div>{{ item.content }}</div>
+          <a-space>
+            <div class="code">
+              <icon-clock-circle />
+              {{ dateFormat(item.created_at) }}
+            </div>
+            <div class="code">算力消耗: {{ item.tokens }}</div>
+            <a-typography-text
+              v-if="item.type === 'reply'"
+              copyable
+              :copy-delay="1000"
+              :copy-text="item.content"
+              @copy="Message.success('复制成功')"
+            >
+              <template #copy-icon>
+                <a-button class="code" size="mini">
+                  <icon-copy />
+                </a-button>
+              </template>
+              <template #copy-tooltip>复制回答</template>
+            </a-typography-text>
+          </a-space>
+        </a-space>
+      </div>
+    </div>
+  </template>
+</template>
+<style lang="less" scoped>
+.item-container {
+  display: flex;
+  padding: 20px 10px;
+  width: 100%;
+  gap: 20px;
+  border-bottom: 1px solid #d9d9e3;
+  box-sizing: border-box;
+  align-items: flex-start;
+  &.reply {
+    background: #f7f7f8;
+  }
+  .left {
+    width: 40px;
+  }
+  .right {
+    flex: 1;
+    overflow: hidden;
+  }
+  .code {
+    background-color: #e7e7e8;
+    color: #888;
+    padding: 3px 5px;
+    margin-right: 10px;
+    border-radius: 5px;
+  }
+}
+.custom-skeleton {
+  display: flex;
+  width: 100%;
+  gap: 12px;
+}
+</style>

new-ui/projects/admin/src/views/Chats/api.ts

@@ -0,0 +1,34 @@
+import http from "@/http/config";
+
+export const getList = (data) => {
+  return http({
+    url: "/api/admin/chat/list",
+    method: "post",
+    data
+  })
+}
+
+export const message = (data) => {
+  return http({
+    url: "/api/admin/chat/message",
+    method: "post",
+    data
+  })
+}
+
+export const history = (params) => {
+  return http({
+    url: "/api/admin/chat/history",
+    method: "get",
+    params
+  })
+}
+
+export const remove = (params) => {
+  return http({
+    url: "/api/admin/chat/remove",
+    method: "get",
+    params
+  })
+}
+