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

new-ui/projects/admin/src/views/ApiKey/ApiKeyContainer.vue

@@ -0,0 +1,137 @@
+<script lang="ts" setup>
+import { getList, save, deleting, setStatus } from "./api";
+import { ref } from "vue";
+import ApiKeyForm from "./ApiKeyForm.vue";
+import useCustomFormPopup from "@/composables/useCustomFormPopup";
+import { Message } from "@arco-design/web-vue";
+import SimpleTable from "@/components/SimpleTable/SimpleTable.vue";
+import { dateFormat } from "@chatgpt-plus/packages/utils";
+// table 配置
+const columns = [
+  {
+    title: "所属平台",
+    dataIndex: "platform",
+  },
+  {
+    title: "名称",
+    dataIndex: "name",
+  },
+  {
+    title: "key",
+    dataIndex: "value",
+    slotName: "value",
+  },
+  {
+    title: "用途",
+    dataIndex: "type",
+  },
+  {
+    title: "使用代理",
+    dataIndex: "use_proxy",
+    slotName: "proxy",
+    align: "center",
+    width: 100,
+  },
+  {
+    title: "最后使用时间",
+    dataIndex: "last_used_at",
+    width: 180,
+    render: ({ record }) => {
+      return dateFormat(record.last_used_at);
+    },
+  },
+  {
+    title: "启用状态",
+    dataIndex: "enabled",
+    slotName: "status",
+    align: "center",
+    width: 100,
+  },
+  {
+    title: "操作",
+    slotName: "action",
+    width: 120,
+    fixed: "right",
+  },
+];
+
+// 数据
+const tableData = ref([]);
+const getData = () => {
+  getList().then(({ code, data }) => {
+    if (code === 0) {
+      tableData.value = data;
+    }
+  });
+};
+getData();
+
+//  新增编辑
+const popup = useCustomFormPopup(ApiKeyForm, save, {
+  popupProps: (arg) => ({ title: arg[0].record ? "编辑ApiKey" : "新增ApiKey" }),
+});
+
+// 删除
+const handleDelete = ({ id }, reload) => {
+  deleting(id).then(({ code }) => {
+    if (code === 0) {
+      Message.success("操作成功");
+      reload();
+    }
+  });
+};
+
+// 状态
+const handleStatusChange = ({ filed, value, record, reload }) => {
+  setStatus({
+    id: record.id,
+    value,
+    filed,
+  }).then(({ code }) => {
+    if (code === 0) {
+      Message.success("操作成功");
+      reload();
+    }
+  });
+};
+</script>
+<template>
+  <SimpleTable :columns="columns" :request="getList">
+    <template #action="{ record, reload }">
+      <a-link @click="popup({ record, reload })">编辑</a-link>
+      <a-popconfirm content="确定删除？" @ok="handleDelete(record, reload)">
+        <a-link status="danger">删除</a-link>
+      </a-popconfirm>
+    </template>
+    <template #header="{ reload }">
+      <a-button @click="popup({ reload })" size="small" type="primary"
+        ><template #icon> <icon-plus /> </template>新增
+      </a-button>
+    </template>
+    <template #value="{ record, column }">
+      <a-typography-text copyable ellipsis style="margin: 0">
+        {{ record[column.dataIndex] }}
+      </a-typography-text>
+    </template>
+    <template #status="{ record, reload }">
+      <a-switch
+        v-model="record.enabled"
+        @change="
+          (value) => {
+            handleStatusChange({ filed: 'enabled', value, record, reload });
+          }
+        "
+      />
+    </template>
+    <template #proxy="{ record, reload }">
+      <a-switch
+        v-model="record.use_proxy"
+        @change="
+          (value) => {
+            handleStatusChange({ filed: 'use_proxy', value, record, reload });
+          }
+        "
+      />
+    </template>
+  </SimpleTable>
+</template>

new-ui/projects/admin/src/views/ApiKey/ApiKeyForm.vue

@@ -0,0 +1,119 @@
+<template>
+  <a-alert type="warning">
+    <div class="warning">
+      {{
+        `注意：如果是百度文心一言平台，API-KEY 为 APIKey|SecretKey，中间用竖线（|）连接\n注意：如果是讯飞星火大模型，API-KEY 为 AppId|APIKey|APISecret，中间用竖线（|）连接`
+      }}
+    </div>
+  </a-alert>
+  <a-form
+    ref="formRef"
+    :model="form"
+    :style="{ width: '600px', 'margin-top': '10px' }"
+    @submit="handleSubmit"
+  >
+    <a-form-item
+      field="platform"
+      label="所属平台"
+      :rules="[{ required: true, message: '请输入所属平台' }]"
+      :validate-trigger="['change', 'input']"
+    >
+      <a-input v-model="form.platform" placeholder="请输入所属平台" />
+    </a-form-item>
+    <a-form-item
+      field="name"
+      label="名称"
+      :rules="[{ required: true, message: '请输入名称' }]"
+      :validate-trigger="['change', 'input']"
+      showable
+    >
+      <a-input v-model="form.name" placeholder="请输入名称" />
+    </a-form-item>
+    <a-form-item
+      field="type"
+      label="用途"
+      :rules="[{ required: true, message: '请输入用途' }]"
+      :validate-trigger="['change', 'input']"
+    >
+      <a-select v-model="form.type" placeholder="请输入用途" :options="typeOPtions"> </a-select>
+    </a-form-item>
+    <a-form-item
+      field="value"
+      label="API KEY"
+      :rules="[{ required: true, message: '请输入API KEY' }]"
+      :validate-trigger="['change', 'input']"
+    >
+      <a-input v-model="form.value" placeholder="请输入API KEY" />
+    </a-form-item>
+    <a-form-item
+      field="api_url"
+      label="API URL"
+      :rules="[{ required: true, message: '请输入API URL' }]"
+      :validate-trigger="['change', 'input']"
+    >
+      <a-input v-model="form.api_url" placeholder="请输入API URL" />
+    </a-form-item>
+
+    <a-form-item field="use_proxy" label="使用代理">
+      <a-switch v-model="form.use_proxy" />
+      <a-tooltip
+        content="是否使用代理访问 API URL，OpenAI 官方API需要开启代理访问"
+        position="right"
+      >
+        <icon-info-circle-fill />
+      </a-tooltip>
+    </a-form-item>
+    <a-form-item field="enable" label="启用状态">
+      <a-switch v-model="form.enable" />
+    </a-form-item>
+  </a-form>
+</template>
+
+<script setup>
+import { ref, defineExpose, defineProps } from "vue";
+const props = defineProps({
+  data: {},
+});
+
+const formRef = ref();
+const form = ref({});
+if (props.data?.id) {
+  form.value = Object.assign({}, props.data);
+}
+
+defineExpose({
+  formRef,
+  form,
+});
+
+const typeOPtions = [
+  {
+    label: "聊天",
+    value: "chart",
+  },
+  {
+    label: "绘图",
+    value: "img",
+  },
+];
+</script>
+<style lang="less" scoped>
+.content-title {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 350px;
+}
+.content-cell {
+  display: flex;
+  align-items: center;
+  width: 350px;
+  svg {
+    margin-left: 10px;
+  }
+}
+.warning {
+  color: #e6a23c;
+  white-space: pre;
+}
+</style>

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

@@ -0,0 +1,30 @@
+import http from "@/http/config";
+
+export const getList = (params?: Record<string, unknown>) => {
+  return http({
+    url: "/api/admin/apikey/list",
+    method: "get",
+    params,
+  });
+};
+export const save = (data?: Record<string, unknown>) => {
+  return http({
+    url: "/api/admin/apikey/save",
+    method: "post",
+    data,
+  });
+};
+export const deleting = (id: string | number) => {
+  return http({
+    url: `/api/admin/apikey/remove`,
+    method: "post",
+    data: { id },
+  });
+};
+export const setStatus = (data) => {
+  return http({
+    url: `/api/admin/apikey/set`,
+    method: "post",
+    data,
+  });
+};

new-ui/projects/admin/src/views/ChatModel/ChatModelContainer.vue

@@ -0,0 +1,126 @@
+<script lang="ts" setup>
+import { getList, save, deleting, setStatus } from "./api";
+import { ref } from "vue";
+import ChatModelForm from "./ChatModelForm.vue";
+import useCustomFormPopup from "@/composables/useCustomFormPopup";
+import { Message } from "@arco-design/web-vue";
+import SimpleTable from "@/components/SimpleTable/SimpleTable.vue";
+import { dateFormat } from "@chatgpt-plus/packages/utils";
+// table 配置
+const columns = [
+  {
+    title: "所属平台",
+    dataIndex: "platform",
+  },
+  {
+    title: "模型名称",
+    dataIndex: "name",
+  },
+  {
+    title: "模型值",
+    dataIndex: "value",
+  },
+  {
+    title: "对话权重",
+    dataIndex: "weight",
+  },
+  {
+    title: "启用状态",
+    dataIndex: "enabled",
+    slotName: "status",
+  },
+  {
+    title: "开放状态",
+    dataIndex: "open",
+    slotName: "open",
+  },
+  {
+    title: "创建时间",
+    dataIndex: "created_at",
+    render: ({ record }) => {
+      return dateFormat(record.created_at);
+    },
+  },
+  {
+    title: "操作",
+    slotName: "action",
+    width: 120,
+    fixed: "right",
+  },
+];
+
+// 数据
+const tableData = ref([]);
+const getData = () => {
+  getList().then(({ code, data }) => {
+    if (code === 0) {
+      tableData.value = data;
+    }
+  });
+};
+getData();
+
+//  新增编辑
+const popup = useCustomFormPopup(ChatModelForm, save, {
+  popupProps: (arg) => ({ title: arg[0].record ? "编辑ApiKey" : "新增ApiKey" }),
+});
+
+// 删除
+const handleDelete = ({ id }, reload) => {
+  deleting(id).then(({ code }) => {
+    if (code === 0) {
+      Message.success("操作成功");
+      reload();
+    }
+  });
+};
+
+// 状态
+const handleStatusChange = ({ filed, value, record, reload }) => {
+  setStatus({
+    id: record.id,
+    value,
+    filed,
+  }).then(({ code }) => {
+    if (code === 0) {
+      Message.success("操作成功");
+      reload();
+    }
+  });
+};
+</script>
+<template>
+  <SimpleTable :columns="columns" :request="getList">
+    <template #action="{ record, reload }">
+      <a-link @click="popup({ record, reload })">编辑</a-link>
+      <a-popconfirm content="确定删除？" @ok="handleDelete(record, reload)">
+        <a-link status="danger">删除</a-link>
+      </a-popconfirm>
+    </template>
+    <template #header="{ reload }">
+      <a-button @click="popup({ reload })" size="small" type="primary"
+        ><template #icon> <icon-plus /> </template>新增</a-button
+      >
+    </template>
+    <template #status="{ record, reload }">
+      <a-switch
+        v-model="record.enabled"
+        @change="
+          (value) => {
+            handleStatusChange({ filed: 'enabled', value, record, reload });
+          }
+        "
+      />
+    </template>
+    <template #open="{ record, reload }">
+      <a-switch
+        v-model="record.open"
+        @change="
+          (value) => {
+            handleStatusChange({ filed: 'open', value, record, reload });
+          }
+        "
+      />
+    </template>
+  </SimpleTable>
+</template>

new-ui/projects/admin/src/views/ChatModel/ChatModelForm.vue

@@ -0,0 +1,94 @@
+<template>
+  <a-form ref="formRef" :model="form" :style="{ width: '600px' }" @submit="handleSubmit">
+    <a-form-item
+      field="platform"
+      label="所属平台"
+      :rules="[{ required: true, message: '请输入所属平台' }]"
+      :validate-trigger="['change', 'input']"
+    >
+      <a-input v-model="form.platform" placeholder="请输入所属平台" />
+    </a-form-item>
+    <a-form-item
+      field="name"
+      label="名称"
+      :rules="[{ required: true, message: '请输入名称' }]"
+      :validate-trigger="['change', 'input']"
+      showable
+    >
+      <a-input v-model="form.name" placeholder="请输入名称" />
+    </a-form-item>
+    <a-form-item
+      field="value"
+      label="模型值"
+      :rules="[{ required: true, message: '请输入名称' }]"
+      :validate-trigger="['change', 'input']"
+      showable
+    >
+      <a-input v-model="form.value" placeholder="请输入名称" />
+    </a-form-item>
+    <a-form-item
+      field="weight"
+      label="对话权重"
+      :rules="[{ required: true, message: '请输入对话权重' }]"
+      :validate-trigger="['change', 'input']"
+      showable
+    >
+      <a-input-number v-model="form.weight" placeholder="请输入对话权重" />
+      <a-tooltip content="对话权重，每次对话扣减多少次对话额度" position="right">
+        <icon-info-circle-fill />
+      </a-tooltip>
+    </a-form-item>
+
+    <a-form-item field="open" label="开放状态代理">
+      <a-switch v-model="form.open" />
+    </a-form-item>
+    <a-form-item field="enabled" label="启用状态">
+      <a-switch v-model="form.enabled" />
+    </a-form-item>
+  </a-form>
+</template>
+
+<script setup>
+import { ref, defineExpose, defineProps } from "vue";
+const props = defineProps({
+  data: {},
+});
+
+const formRef = ref();
+const form = ref({});
+if (props.data?.id) {
+  form.value = Object.assign({}, props.data);
+}
+
+defineExpose({
+  formRef,
+  form,
+});
+
+const typeOPtions = [
+  {
+    label: "聊天",
+    value: "chart",
+  },
+  {
+    label: "绘图",
+    value: "img",
+  },
+];
+</script>
+<style lang="less" scoped>
+.content-title {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 350px;
+}
+.content-cell {
+  display: flex;
+  align-items: center;
+  width: 350px;
+  svg {
+    margin-left: 10px;
+  }
+}
+</style>

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

@@ -0,0 +1,30 @@
+import http from "@/http/config";
+
+export const getList = (params?: Record<string, unknown>) => {
+  return http({
+    url: "/api/admin/model/list",
+    method: "get",
+    params,
+  });
+};
+export const save = (data?: Record<string, unknown>) => {
+  return http({
+    url: "/api/admin/model/save",
+    method: "post",
+    data,
+  });
+};
+export const deleting = (id: string | number) => {
+  return http({
+    url: `/api/admin/model/remove`,
+    method: "post",
+    data: { id },
+  });
+};
+export const setStatus = (data) => {
+  return http({
+    url: `/api/admin/model/set`,
+    method: "post",
+    data,
+  });
+};

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
+  })
+}
+

new-ui/projects/admin/src/views/DashboardView.vue

@@ -0,0 +1,171 @@
+<script lang="ts" setup>
+import http from "@/http/config";
+import { ref, nextTick } from "vue";
+import * as echarts from "echarts/core";
+import { GridComponent, TitleComponent } from "echarts/components";
+import { LineChart } from "echarts/charts";
+import { UniversalTransition } from "echarts/features";
+import { CanvasRenderer } from "echarts/renderers";
+
+const icons = {
+  users: "icon-user",
+  chats: "icon-wechat",
+  tokens: "icon-computer",
+  income: "icon-wechatpay",
+};
+const dataSet = {
+  users: "今日新增用户",
+  chats: "今日新增对话",
+  tokens: "今日消耗 Tokens",
+  income: "今日入账",
+};
+
+const getData = () => {
+  http({
+    url: "api/admin/dashboard/stats",
+    method: "get",
+  }).then((res) => {
+    data.value = res.data;
+    handeChartData(res.data.chart);
+  });
+};
+getData();
+// 图表
+const chartTitle = {
+  historyMessage: "对话",
+  orders: "订单",
+  users: "用户数",
+};
+echarts.use([GridComponent, LineChart, CanvasRenderer, UniversalTransition, TitleComponent]);
+const chartDomRefs = [];
+const chartData = ref({});
+const data = ref<Record<string, number>>({});
+const handeChartData = (data) => {
+  const _chartData = {};
+  for (let key in data) {
+    const type = data[key];
+    _chartData[key] = {
+      series: [],
+      xAxis: [],
+    };
+    for (let date in type) {
+      _chartData[key].series.push(type[date]);
+      _chartData[key].xAxis.push(date);
+    }
+    nextTick(() => {
+      const myChart = echarts.init(chartDomRefs.pop());
+      myChart.setOption(createOption(_chartData[key], key));
+    });
+  }
+  chartData.value = _chartData;
+};
+const createOption = (data, key) => {
+  const { xAxis, series } = data;
+  return {
+    title: {
+      left: "center",
+      text: chartTitle[key],
+    },
+    xAxis: {
+      type: "category",
+      data: xAxis,
+    },
+    yAxis: {
+      type: "value",
+    },
+    series: [
+      {
+        data: series,
+        type: "line",
+      },
+    ],
+  };
+};
+</script>
+<template>
+  <div class="dashboard">
+    <a-grid :cols="{ xs: 1, sm: 1, md: 2, lg: 3, xl: 4 }" :colGap="12" :rowGap="16" class="grid">
+      <a-grid-item v-for="(value, key) in dataSet" :key="key">
+        <div class="data-card">
+          <span :class="key" class="icon"><component :is="icons[key]" /> </span>
+          <span class="count"
+            ><a-statistic :extra="value" :value="data[key]" :precision="0"
+          /></span>
+        </div>
+      </a-grid-item>
+    </a-grid>
+  </div>
+  <div class="chart">
+    <a-grid
+      :cols="{ xs: 1, sm: 1, md: 1, lg: 2, xl: 2, xxl: 3 }"
+      :colGap="12"
+      :rowGap="16"
+      class="grid"
+    >
+      <a-grid-item v-for="(value, key, index) in chartData" :key="key">
+        <div
+          :ref="
+            (el) => {
+              chartDomRefs[index] = el;
+            }
+          "
+          class="chartDom"
+        >
+          {{ key }}
+        </div>
+      </a-grid-item>
+    </a-grid>
+  </div>
+</template>
+<style lang="less" scoped>
+.dashboard {
+  display: flex;
+  text-align: center;
+  .grid {
+    width: 100%;
+  }
+  .data-card {
+    width: 100%;
+    display: flex;
+    flex: 0 0 25%;
+    padding: 0 10px;
+    box-sizing: border-box;
+    .icon {
+      display: inline-block;
+      font-size: 50px;
+      width: 100px;
+      height: 100px;
+      text-align: center;
+      line-height: 100px;
+      color: #fff;
+    }
+    .users {
+      background: #2d8cf0;
+    }
+    .chats {
+      background: #64d572;
+    }
+    .tokens {
+      background: #f25e43;
+    }
+    .income {
+      background: #f25e43;
+    }
+    .count {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: #f3f3f3;
+    }
+  }
+}
+.chart {
+  margin-top: 15px;
+  .chartDom {
+    width: 450px;
+    height: 500px;
+    text-align: center;
+  }
+}
+</style>

new-ui/projects/admin/src/views/Functions/FunctionsContainer.vue

@@ -0,0 +1,89 @@
+<script lang="ts" setup>
+import { Message, type TableColumnData } from "@arco-design/web-vue";
+import SimpleTable from "@/components/SimpleTable/SimpleTable.vue";
+import ConfirmSwitch from "@/components/ConfirmSwitch.vue";
+import usePopup from "@/composables/usePopup";
+import { getList, remove, setStatus, save } from "./api";
+import FunctionsForm from "./FunctionsForm.vue";
+
+const columns: TableColumnData[] = [
+  {
+    dataIndex: "name",
+    title: "函数名称",
+  },
+  {
+    dataIndex: "label",
+    title: "函数别名",
+  },
+  {
+    dataIndex: "description",
+    title: "功能描述",
+  },
+  {
+    dataIndex: "enabled",
+    title: "启用状态",
+    slotName: "switch",
+  },
+  {
+    title: "操作",
+    slotName: "actions",
+    fixed: "right",
+  },
+];
+
+const openFormModal = usePopup(FunctionsForm, {
+  nodeProps: ([_, record]) => ({ record }),
+  popupProps: ([reload, record], exposed) => ({
+    title: `${record?.id ? "编辑" : "新增"}函数`,
+    width: "800px",
+    onBeforeOk: async (done) => {
+      await exposed()?.handleSubmit(save, {
+        id: record?.id,
+        parameters: exposed()?.parameters(),
+      });
+      await reload();
+      done(true);
+    },
+  }),
+});
+
+const handleRemove = async (id, reload) => {
+  await remove({ id });
+  Message.success("删除成功");
+  await reload();
+  return true;
+};
+</script>
+<template>
+  <SimpleTable :request="getList" :columns="columns" :pagination="false">
+    <template #header="{ reload }">
+      <a-button type="primary" @click="openFormModal(reload, {})">
+        <template #icon> <icon-plus /> </template>
+        新增
+      </a-button>
+    </template>
+    <template #switch="{ record, column }">
+      <ConfirmSwitch
+        v-model="record[column.dataIndex]"
+        :api="(p) => setStatus({ ...p, id: record.id, filed: 'enabled' })"
+      />
+    </template>
+    <template #exchange="{ record }">
+      <a-tag v-if="record.exchange.calls > 0">聊天{{ record.exchange.calls }}次</a-tag>
+      <a-tag v-else-if="record.exchange.img_calls > 0" color="green"
+        >绘图{{ record.exchange.img_calls }}次</a-tag
+      >
+    </template>
+    <template #actions="{ record, reload }">
+      <a-link @click="openFormModal(reload, 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>
+  </SimpleTable>
+</template>

new-ui/projects/admin/src/views/Functions/FunctionsForm.vue

@@ -0,0 +1,81 @@
+<script lang="ts" setup>
+import { ref, watchEffect } from "vue";
+import { Message } from "@arco-design/web-vue";
+import useSubmit from "@/composables/useSubmit";
+import FunctionsFormTable from "./FunctionsFormTable.vue";
+import { token } from "./api";
+import translateTableData from "./translateTableData";
+
+const props = defineProps({
+  record: Object,
+});
+
+const tableData = ref([]);
+const { formRef, formData, handleSubmit, submitting } = useSubmit({
+  name: "",
+  label: "",
+  description: "",
+  action: "",
+  token: "",
+  parameters: {},
+  enabled: true,
+});
+
+const rules = {
+  name: [{ required: true, message: "请输入函数名称" }],
+  label: [{ required: true, message: "请输入函数标签" }],
+  description: [{ required: true, message: "请输入函数功能描述" }],
+};
+
+const generateToken = async () => {
+  const { data } = await token({});
+  Message.success("生成 Token 成功");
+  formData.token = data;
+};
+
+watchEffect(() => {
+  Object.assign(formData, props.record ?? {});
+  tableData.value = translateTableData.get(formData.parameters);
+});
+
+defineExpose({
+  handleSubmit,
+  parameters: () => translateTableData.set(tableData.value),
+});
+</script>
+<template>
+  <a-spin :loading="submitting" style="width: 100%">
+    <a-form ref="formRef" :model="formData" auto-label-width :rules="rules">
+      <a-form-item field="name" label="函数名称">
+        <a-input v-model="formData.name" placeholder="函数名称最好为英文" />
+      </a-form-item>
+      <a-form-item field="label" label="函数标签">
+        <a-input v-model="formData.label" placeholder="函数的中文名称" />
+      </a-form-item>
+      <a-form-item field="description" label="功能描述">
+        <a-input v-model="formData.description" placeholder="函数的中文名称" />
+      </a-form-item>
+
+      <a-form-item field="parameters" label="函数参数">
+        <FunctionsFormTable v-model="tableData" />
+      </a-form-item>
+
+      <a-form-item field="action" label="API 地址">
+        <a-input v-model="formData.action" placeholder="该函数实现的API地址，可以是第三方服务API" />
+      </a-form-item>
+      <a-form-item field="token" label="API Token">
+        <a-input-group style="width: 100%">
+          <a-input v-model="formData.token" placeholder="API授权Token" />
+          <a-tooltip
+            content="只有本地服务才可以使用自动生成Token第三方服务请填写第三方服务API Token"
+          >
+            <a-button type="primary" @click="generateToken">生成Token</a-button>
+          </a-tooltip>
+        </a-input-group>
+      </a-form-item>
+      <a-form-item field="enabled" label="启用状态">
+        <a-switch v-model="formData.enabled" />
+      </a-form-item>
+    </a-form>
+  </a-spin>
+</template>

new-ui/projects/admin/src/views/Functions/FunctionsFormTable.vue

@@ -0,0 +1,74 @@
+<script lang="ts" setup>
+const props = defineProps({
+  modelValue: {
+    type: Array,
+    default: () => [],
+  },
+});
+
+const emits = defineEmits(["update:modelValue"]);
+
+const handleCreateRow = () => {
+  emits("update:modelValue", [
+    ...(props.modelValue ?? []),
+    { name: "", type: "", description: "", required: false },
+  ]);
+};
+
+const handleRemoveRow = (index) => {
+  emits(
+    "update:modelValue",
+    props.modelValue.filter((_, i) => i !== index)
+  );
+};
+</script>
+<template>
+  <a-space direction="vertical" style="width: 100%">
+    <a-table :data="modelValue" size="small" style="width: 100%" :pagination="false">
+      <template #columns>
+        <a-table-column title="参数名称" :width="120">
+          <template #cell="scope">
+            <a-input v-model="scope.record.name" />
+          </template>
+        </a-table-column>
+        <a-table-column title="参数类型" :width="150">
+          <template #cell="scope">
+            <a-select
+              v-model="scope.record.type"
+              placeholder="参数类型"
+              :options="['string', 'number']"
+            />
+          </template>
+        </a-table-column>
+        <a-table-column title="参数描述">
+          <template #cell="scope">
+            <a-input v-model="scope.record.description" />
+          </template>
+        </a-table-column>
+
+        <a-table-column title="必填参数" :width="100" align="center">
+          <template #cell="scope">
+            <a-checkbox v-model="scope.record.required" />
+          </template>
+        </a-table-column>
+
+        <a-table-column title="操作" :width="80">
+          <template #cell="scope">
+            <a-button
+              status="danger"
+              shape="circle"
+              @click="handleRemoveRow(scope.rowIndex)"
+              size="small"
+            >
+              <icon-delete />
+            </a-button>
+          </template>
+        </a-table-column>
+      </template>
+    </a-table>
+    <a-button type="primary" @click="handleCreateRow">
+      <template #icon><icon-plus /></template>
+      <span>新增参数</span>
+    </a-button>
+  </a-space>
+</template>

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

@@ -0,0 +1,41 @@
+import http from "@/http/config";
+
+export const getList = (params) => {
+  return http({
+    url: "/api/admin/function/list",
+    method: "get",
+    params
+  })
+}
+
+export const save = (data) => {
+  return http({
+    url: "/api/admin/function/save",
+    method: "post",
+    data
+  })
+}
+
+export const remove = (params) => {
+  return http({
+    url: "/api/admin/function/remove",
+    method: "get",
+    params
+  })
+}
+
+export const setStatus = (data) => {
+  return http({
+    url: "/api/admin/function/set",
+    method: "post",
+    data
+  })
+}
+
+export const token = (params) => {
+  return http({
+    url: "/api/admin/function/token",
+    method: "get",
+    params
+  })
+}

new-ui/projects/admin/src/views/Functions/translateTableData.ts

@@ -0,0 +1,36 @@
+const get = (origin) => {
+  const { properties, required, type } = origin;
+  if (type === "object") {
+    const array = Object.keys(properties).reduce((prev, name) => {
+      return [
+        ...prev,
+        {
+          name,
+          ...properties[name],
+          required: required.includes(name),
+        },
+      ];
+    }, []);
+    return array;
+  }
+  return [];
+}
+
+const set = (tableData) => {
+  const properties = tableData.reduce((prev, curr) => {
+    if (curr.name) {
+      return {
+        ...prev,
+        [curr.name]: {
+          description: curr.description,
+          type: curr.type,
+        },
+      };
+    }
+    return prev
+  }, {});
+  const required = tableData.filter((i) => i.required).map((i) => i.name);
+  return { properties, required, type: "object" }
+}
+
+export default { get, set }

new-ui/projects/admin/src/views/LoginLog.vue

@@ -0,0 +1,29 @@
+<script lang="ts" setup>
+import { dateFormat } from "@chatgpt-plus/packages/utils";
+import SearchTable from "@/components/SearchTable/SearchTable.vue";
+import type { SearchTableColumns } from "@/components/SearchTable/type";
+import { loginLog } from "@/http/login";
+
+const columns: SearchTableColumns[] = [
+  {
+    dataIndex: "username",
+    title: "用户名",
+  },
+  {
+    dataIndex: "login_ip",
+    title: "登录IP",
+  },
+  {
+    dataIndex: "login_address",
+    title: "登录地址",
+  },
+  {
+    dataIndex: "created_at",
+    title: "登陆时间",
+    render: ({ record }) => dateFormat(record.created_at),
+  },
+];
+</script>
+<template>
+  <SearchTable :request="loginLog" :columns="columns" />
+</template>

new-ui/projects/admin/src/views/LoginView.vue

@@ -0,0 +1,230 @@
+<script lang="ts" setup>
+import { onMounted, reactive } from "vue";
+import { useAuthStore } from "@/stores/auth";
+import { captcha } from "@/http/login";
+import useState from "@/composables/useState";
+import useRequest from "@/composables/useRequest";
+
+// 表单
+function useFormData() {
+  const formData = reactive({
+    username: "",
+    password: "",
+    captcha: "",
+  });
+  const rules = {
+    username: [{ required: true, message: "请输入您的账号" }],
+    password: [{ required: true, message: "请输入您的密码" }],
+    captcha: [{ required: true, message: "请输入验证码" }],
+  };
+  const authStore = useAuthStore();
+  const [loginRequest, _, submitting] = useRequest(authStore.login);
+  return { formData, loginRequest, submitting, rules };
+}
+
+// 验证码
+function useCaptcha() {
+  const captchaImage = reactive({
+    pic_path: "",
+    captcha_id: "",
+  });
+  const getCaptchaImage = async () => {
+    const { data } = await captcha();
+    Object.assign(captchaImage, data);
+  };
+  onMounted(getCaptchaImage);
+  return { captchaImage, getCaptchaImage };
+}
+
+// 记住密码
+function useRemeberPWD(formData) {
+  const storageKey = "r-f";
+  const [isRemember, setIsRemember] = useState(false);
+  const onIsRememberChange = (v) => {
+    if (v) {
+      const value = {
+        username: formData.username,
+        password: formData.password,
+      };
+      localStorage.setItem(storageKey, JSON.stringify(value));
+    } else {
+      localStorage.removeItem(storageKey);
+    }
+    setIsRemember(v);
+  };
+  onMounted(() => {
+    const getter = localStorage.getItem(storageKey);
+    if (getter) {
+      setIsRemember(true);
+      Object.assign(formData, JSON.parse(getter));
+    }
+  });
+  return { isRemember, onIsRememberChange };
+}
+
+const { formData, loginRequest, submitting, rules } = useFormData();
+const { captchaImage, getCaptchaImage } = useCaptcha();
+const { isRemember, onIsRememberChange } = useRemeberPWD(formData);
+
+// 表单提交
+async function handleSubmit({ errors }: any) {
+  if (errors) return;
+  try {
+    await loginRequest({
+      ...formData,
+      captcha_id: captchaImage.captcha_id,
+    });
+  } catch (err) {
+    getCaptchaImage();
+  }
+}
+</script>
+<template>
+  <div class="bg">
+    <div class="content">
+      <!-- 左侧图片 -->
+      <span class="left">
+        <img src="/left-img.png" alt="" style="width: 468px" />
+      </span>
+      <!-- 表单 -->
+      <div class="right-content">
+        <div class="form-box">
+          <div class="title">ChatGPT Plus Admin</div>
+          <a-form
+            ref="formRef"
+            :model="formData"
+            class="form"
+            size="medium"
+            auto-label-width
+            :label-col-props="{ span: 0 }"
+            :wrapper-col-props="{ span: 24 }"
+            :rules="rules"
+            @submit="handleSubmit"
+          >
+            <a-space direction="vertical" style="width: 100%">
+              <a-form-item field="username" label="账号">
+                <a-input v-model="formData.username" placeholder="请输入您的账号" class="input" />
+              </a-form-item>
+              <a-form-item field="password" label="密码">
+                <a-input-password
+                  v-model="formData.password"
+                  placeholder="请输入您的密码"
+                  class="input"
+                />
+              </a-form-item>
+              <a-form-item field="captcha" label="验证码">
+                <a-input v-model="formData.captcha" placeholder="请输入验证码" class="input">
+                  <template #append>
+                    <img
+                      class="captcha-image"
+                      :src="captchaImage.pic_path"
+                      alt="验证码"
+                      title="点击刷新验证码"
+                      @click="getCaptchaImage()"
+                    />
+                  </template>
+                </a-input>
+              </a-form-item>
+              <a-form-item hide-label>
+                <a-checkbox :model-value="isRemember" @change="onIsRememberChange"
+                  >记住密码</a-checkbox
+                >
+              </a-form-item>
+            </a-space>
+            <a-form-item hide-label>
+              <a-button
+                :loading="submitting"
+                html-type="submit"
+                long
+                type="primary"
+                class="sign-in-btn"
+              >
+                登录
+              </a-button>
+            </a-form-item>
+          </a-form>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<style lang="less" scoped>
+.bg {
+  width: 100%;
+  height: 100vh;
+  background: linear-gradient(133deg, #ffffff 0%, #dde8fe 100%);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow: auto;
+}
+
+.content {
+  width: 1080px;
+  height: 557px;
+  display: flex;
+}
+
+.left {
+  width: 540px;
+  height: 557px;
+  background: #2670fe;
+  border-radius: 16px 0 0 16px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.right-content {
+  width: 540px;
+  height: 557px;
+  background: #ffffff;
+  border-radius: 0 16px 16px 0;
+  display: flex;
+  justify-content: center;
+}
+
+.title {
+  font-size: 24px;
+  font-weight: 800;
+  color: #333333;
+  line-height: 35px;
+  letter-spacing: 1px;
+  text-align: center;
+  margin-bottom: 40px;
+}
+
+.form-box {
+  display: flex;
+  flex-direction: column;
+  width: 438px;
+  padding: 58px 0;
+  height: 100%;
+  box-sizing: border-box;
+}
+
+.form {
+  flex: 1;
+  justify-content: space-between;
+}
+
+.input {
+  border-radius: 10px 10px 10px 10px;
+  height: 60px;
+  border: 2px solid #e5e6eb;
+}
+
+.captcha-image {
+  //width: 100%;
+  //height: 100%;
+  cursor: pointer;
+}
+
+.sign-in-btn {
+  height: 60px;
+  font-weight: 500;
+  line-height: 33px;
+  font-size: 28px;
+  border-radius: 10px 10px 10px 10px;
+}
+</style>

new-ui/projects/admin/src/views/NotFound.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { useRouter } from "vue-router";
+const router = useRouter();
+const goBack = () => {
+  if (window.history.length) {
+    router.back();
+    return;
+  }
+  router.replace("/");
+};
+</script>
+
+<template>
+  <AResult status="404" subtitle="找不到页面">
+    <template #extra>
+      <AButton type="primary" @click="goBack">返回</AButton>
+    </template>
+  </AResult>
+</template>

new-ui/projects/admin/src/views/Order/OrderContainer.vue

@@ -0,0 +1,85 @@
+<script lang="ts" setup>
+import SearchTable from "@/components/SearchTable/SearchTable.vue";
+import type { SearchTableColumns } from "@/components/SearchTable/type";
+import { dateFormat } from "@chatgpt-plus/packages/utils";
+import { getList } from "./api";
+
+const columns: SearchTableColumns[] = [
+  {
+    dataIndex: "order_no",
+    title: "订单号",
+    search: {
+      valueType: "input",
+    },
+    width: 280,
+  },
+  {
+    dataIndex: "username",
+    title: "下单用户",
+  },
+  {
+    dataIndex: "subject",
+    title: "产品名称",
+  },
+  {
+    dataIndex: "amount",
+    title: "订单金额",
+  },
+  {
+    dataIndex: "remark.calls",
+    title: "调用次数",
+  },
+  {
+    dataIndex: "created_at",
+    title: "下单时间",
+    render: ({ record }) => dateFormat(record.created_at),
+    width: 200,
+  },
+  {
+    dataIndex: "status",
+    title: "订单状态",
+    hideInTable: true,
+    search: {
+      valueType: "select",
+      defaultValue: -1,
+      fieldProps: {
+        options: [
+          { label: "全部", value: -1 },
+          { label: "未支付", value: 0 },
+          { label: "已支付", value: 2 },
+        ],
+      },
+    },
+  },
+  {
+    dataIndex: "pay_time",
+    title: "支付时间",
+    search: {
+      valueType: "range",
+    },
+    slotName: "pay_time",
+    width: 200,
+  },
+  {
+    dataIndex: "pay_way",
+    title: "支付方式",
+  },
+  {
+    title: "操作",
+    slotName: "actions",
+    fixed: "right",
+    width: 80,
+  },
+];
+</script>
+<template>
+  <SearchTable :request="getList" :columns="columns">
+    <template #pay_time="{ record }">
+      <a-tag v-if="!record.pay_time" color="blue">未支付</a-tag>
+      <span v-else>{{ dateFormat(record.pay_time) }}</span>
+    </template>
+    <template #actions="{ record }">
+      <a-link :key="record.id" status="danger">删除</a-link>
+    </template>
+  </SearchTable>
+</template>

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

@@ -0,0 +1,9 @@
+import http from "@/http/config";
+
+export const getList = (data?: Record<string, unknown>) => {
+  return http({
+    url: "/api/admin/order/list",
+    method: "post",
+    data
+  })
+}

new-ui/projects/admin/src/views/Product/ProductContainer.vue

@@ -0,0 +1,125 @@
+<script lang="ts" setup>
+import { getList, save, deleting, setStatus } from "./api";
+import { ref } from "vue";
+import ProductForm from "./ProductForm.vue";
+import useCustomFormPopup from "@/composables/useCustomFormPopup";
+import { Message } from "@arco-design/web-vue";
+import SimpleTable from "@/components/SimpleTable/SimpleTable.vue";
+import { dateFormat } from "@chatgpt-plus/packages/utils";
+// table 配置
+const columns = [
+  {
+    title: "产品名称",
+    dataIndex: "name",
+  },
+  {
+    title: "产品价格",
+    dataIndex: "price",
+  },
+  {
+    title: "优惠金额",
+    dataIndex: "discount",
+  },
+  {
+    title: "有效期（天）",
+    dataIndex: "days",
+  },
+  {
+    title: "对话次数",
+    dataIndex: "calls",
+  },
+  {
+    title: "绘图次数",
+    dataIndex: "img_calls",
+  },
+  {
+    title: "销量",
+    dataIndex: "sales",
+  },
+  {
+    title: "启用状态",
+    dataIndex: "enabled",
+    slotName: "status",
+    align: "center",
+    width: 100,
+  },
+  {
+    title: "更新时间",
+    dataIndex: "updated_at",
+    width: 180,
+    render: ({ record }) => {
+      return dateFormat(record.updated_at);
+    },
+  },
+  {
+    title: "操作",
+    slotName: "action",
+    width: 120,
+    fixed: "right",
+  },
+];
+
+// 数据
+const tableData = ref([]);
+const getData = () => {
+  getList().then(({ code, data }) => {
+    if (code === 0) {
+      tableData.value = data;
+    }
+  });
+};
+getData();
+
+//  新增编辑
+const popup = useCustomFormPopup(ProductForm, save, {
+  popupProps: (arg) => ({ title: arg[0].record ? "编辑产品" : "新增产品" }),
+});
+
+// 删除
+const handleDelete = ({ id }, reload) => {
+  deleting(id).then(({ code }) => {
+    if (code === 0) {
+      Message.success("操作成功");
+      reload();
+    }
+  });
+};
+
+// 状态
+const handleStatusChange = ({ value, record, reload }) => {
+  setStatus({
+    id: record.id,
+    enabled: value,
+  }).then(({ code }) => {
+    if (code === 0) {
+      Message.success("操作成功");
+      reload();
+    }
+  });
+};
+</script>
+<template>
+  <SimpleTable :columns="columns" :request="getList">
+    <template #action="{ record, reload }">
+      <a-link @click="popup({ record, reload })">编辑</a-link>
+      <a-popconfirm content="确定删除？" @ok="handleDelete(record, reload)">
+        <a-link status="danger">删除</a-link>
+      </a-popconfirm>
+    </template>
+    <template #header="{ reload }">
+      <a-button @click="popup({ reload })" size="small" type="primary"
+        ><template #icon> <icon-plus /> </template>新增
+      </a-button>
+    </template>
+    <template #status="{ record, reload }">
+      <a-switch
+        v-model="record.enabled"
+        @change="
+          (value) => {
+            handleStatusChange({ value, record, reload });
+          }
+        "
+      />
+    </template>
+  </SimpleTable>
+</template>

new-ui/projects/admin/src/views/Product/ProductForm.vue

@@ -0,0 +1,87 @@
+<template>
+  <a-form ref="formRef" :model="form" :style="{ width: '600px' }" @submit="handleSubmit">
+    <a-form-item
+      field="name"
+      label="产品名称"
+      :rules="[{ required: true, message: '请输入产品名称' }]"
+      :validate-trigger="['change', 'input']"
+    >
+      <a-input v-model="form.name" placeholder="请输入产品名称" />
+    </a-form-item>
+    <a-form-item
+      field="price"
+      label="产品价格"
+      :rules="[{ required: true, message: '请输入产品价格' }]"
+      :validate-trigger="['change', 'input']"
+      showable
+    >
+      <a-input-number v-model="form.price" placeholder="请输入产品价格" />
+    </a-form-item>
+    <a-form-item
+      field="discount"
+      label="优惠金额"
+      :rules="[{ required: true, message: '请输入优惠金额' }]"
+      :validate-trigger="['change', 'input']"
+      showable
+    >
+      <a-input-number v-model="form.discount" placeholder="请输入优惠金额" />
+    </a-form-item>
+    <a-form-item
+      field="days"
+      label="有效期（天）"
+      :rules="[{ required: true, message: '请输入有效期（天）' }]"
+      :validate-trigger="['change', 'input']"
+      showable
+    >
+      <a-input-number v-model="form.days" placeholder="请输入有效期（天）" />
+    </a-form-item>
+    <a-form-item field="calls" label="对话次数" :validate-trigger="['change', 'input']" showable>
+      <a-input-number v-model="form.calls" placeholder="请输入对话次数" />
+    </a-form-item>
+    <a-form-item
+      field="img_calls"
+      label="绘图次数"
+      :validate-trigger="['change', 'input']"
+      showable
+    >
+      <a-input-number v-model="form.img_calls" placeholder="请输入绘图次数" />
+    </a-form-item>
+    <a-form-item field="enabled" label="启用状态">
+      <a-switch v-model="form.enabled" />
+    </a-form-item>
+  </a-form>
+</template>
+
+<script setup>
+import { ref, defineExpose, defineProps } from "vue";
+const props = defineProps({
+  data: {},
+});
+
+const formRef = ref();
+const form = ref({});
+if (props.data?.id) {
+  form.value = Object.assign({}, props.data);
+}
+
+defineExpose({
+  formRef,
+  form,
+});
+</script>
+<style lang="less" scoped>
+.content-title {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 350px;
+}
+.content-cell {
+  display: flex;
+  align-items: center;
+  width: 350px;
+  svg {
+    margin-left: 10px;
+  }
+}
+</style>

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

@@ -0,0 +1,29 @@
+import http from "@/http/config";
+
+export const getList = (params?: Record<string, unknown>) => {
+  return http({
+    url: "/api/admin/product/list",
+    method: "get",
+    params,
+  });
+};
+export const save = (data?: Record<string, unknown>) => {
+  return http({
+    url: "/api/admin/product/save",
+    method: "post",
+    data,
+  });
+};
+export const deleting = (id: string | number) => {
+  return http({
+    url: `/api/admin/product/remove?id=${id}`,
+    method: "get",
+  });
+};
+export const setStatus = (data) => {
+  return http({
+    url: `/api/admin/product/enable`,
+    method: "post",
+    data,
+  });
+};

new-ui/projects/admin/src/views/Reward/RewardContainer.vue

@@ -0,0 +1,75 @@
+<script lang="ts" setup>
+import { Message, type TableColumnData } from "@arco-design/web-vue";
+import { dateFormat } from "@chatgpt-plus/packages/utils";
+import SimpleTable from "@/components/SimpleTable/SimpleTable.vue";
+import { getList, remove } from "./api";
+
+const columns: TableColumnData[] = [
+  {
+    dataIndex: "username",
+    title: "用户",
+  },
+  {
+    dataIndex: "tx_id",
+    title: "转账单号",
+  },
+  {
+    dataIndex: "amount",
+    title: "转账金额",
+  },
+  {
+    dataIndex: "remark",
+    title: "备注",
+  },
+  {
+    dataIndex: "created_at",
+    title: "转账时间",
+    render: ({ record }) => dateFormat(record.created_at),
+  },
+  {
+    title: "核销时间",
+    slotName: "updated_at",
+  },
+  {
+    title: "兑换详情",
+    slotName: "exchange",
+  },
+  {
+    title: "操作",
+    slotName: "actions",
+    fixed: "right",
+    width: 80,
+  },
+];
+
+const handleRemove = async (id, reload) => {
+  await remove({ id });
+  Message.success("删除成功");
+  await reload();
+  return true;
+};
+</script>
+<template>
+  <SimpleTable :request="getList" :columns="columns">
+    <template #updated_at="{ record }">
+      <span v-if="record.status">{{ dateFormat(record.updated_at) }}</span>
+      <a-tag v-else color="blue">未核销</a-tag>
+    </template>
+    <template #exchange="{ record }">
+      <a-tag v-if="record.exchange.calls > 0">聊天{{ record.exchange.calls }}次</a-tag>
+      <a-tag v-else-if="record.exchange.img_calls > 0" color="green"
+        >绘图{{ record.exchange.img_calls }}次</a-tag
+      >
+    </template>
+    <template #actions="{ record, reload }">
+      <a-popconfirm
+        content="是否删除？"
+        position="left"
+        type="warning"
+        :on-before-ok="() => handleRemove(record.id, reload)"
+      >
+        <a-link status="danger">删除</a-link>
+      </a-popconfirm>
+    </template>
+  </SimpleTable>
+</template>

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

@@ -0,0 +1,17 @@
+import http from "@/http/config";
+
+export const getList = (params?: Record<string, unknown>) => {
+  return http({
+    url: "/api/admin/reward/list",
+    method: "get",
+    params
+  })
+}
+
+export const remove = (data?: Record<string, unknown>) => {
+  return http({
+    url: "/api/admin/reward/remove",
+    method: "post",
+    data
+  })
+}

new-ui/projects/admin/src/views/Role/RoleContainer.vue

@@ -0,0 +1,129 @@
+<script lang="ts" setup>
+import { getList, save, deleting, setStatus } from "./api";
+import { reactive, ref } from "vue";
+import RoleForm from "./RoleForm.vue";
+import useCustomFormPopup from "@/composables/useCustomFormPopup";
+import { Message } from "@arco-design/web-vue";
+import SimpleTable from "@/components/SimpleTable/SimpleTable.vue";
+// table 配置
+const columns = [
+  {
+    title: "角色名称",
+    dataIndex: "name",
+  },
+  {
+    title: "角色标识",
+    dataIndex: "key",
+  },
+  {
+    title: "启用状态",
+    dataIndex: "enable",
+    slotName: "status",
+  },
+  {
+    title: "角色图标",
+    dataIndex: "icon",
+    slotName: "icon",
+  },
+  {
+    title: "打招呼信息",
+    dataIndex: "hello_msg",
+  },
+  {
+    title: "操作",
+    slotName: "action",
+  },
+];
+
+const expandable = reactive({
+  title: "",
+  width: 50,
+});
+
+// 数据
+const tableData = ref([]);
+const getData = () => {
+  getList().then(({ code, data }) => {
+    if (code === 0) {
+      tableData.value = data;
+    }
+  });
+};
+getData();
+
+//展开行table
+const expandColumns = [
+  {
+    dataIndex: "role",
+    title: "对话角色",
+    width: 120,
+  },
+  {
+    dataIndex: "content",
+    title: "对话内容",
+  },
+];
+
+//  新增编辑
+const popup = useCustomFormPopup(RoleForm, save, {
+  popupProps: (arg) => ({ title: arg[0].record ? "编辑角色" : "新增角色" }),
+});
+
+// 删除
+const handleDelete = ({ id }, reload) => {
+  deleting(id).then(({ code }) => {
+    if (code === 0) {
+      Message.success("操作成功");
+      reload();
+    }
+  });
+};
+
+// 状态
+const handleStatusChange = ({ value, record, reload }) => {
+  setStatus({
+    id: record.id,
+    value,
+    filed: "enable",
+  }).then(({ code }) => {
+    if (code === 0) {
+      Message.success("操作成功");
+      reload();
+    }
+  });
+};
+</script>
+<template>
+  <SimpleTable :columns="columns" :request="getList" :expandable="expandable">
+    <template #expand-row="{ record }">
+      <a-table :columns="expandColumns" :data="record.context || []" :pagination="false"></a-table>
+    </template>
+    <template #action="{ record, reload }">
+      <a-link @click="popup({ record, reload })">编辑</a-link>
+      <a-popconfirm content="确定删除？" @ok="handleDelete(record, reload)">
+        <a-link status="danger">删除</a-link>
+      </a-popconfirm>
+    </template>
+    <template #header="{ reload }">
+      <a-button @click="popup({ reload })" size="small" type="primary"
+        ><template #icon> <icon-plus /> </template>新增</a-button
+      >
+    </template>
+    <template #status="{ record, reload }">
+      <a-switch
+        v-model="record.enable"
+        @change="
+          (value) => {
+            handleStatusChange({ value, record, reload });
+          }
+        "
+      />
+    </template>
+
+    <template #icon="{ record }">
+      <a-avatar>
+        <img alt="avatar" :src="record.icon" />
+      </a-avatar>
+    </template>
+  </SimpleTable>
+</template>

new-ui/projects/admin/src/views/Role/RoleForm.vue

@@ -0,0 +1,116 @@
+<template>
+  <a-form ref="formRef" :model="form" :style="{ width: '600px' }" @submit="handleSubmit">
+    <a-form-item
+      field="name"
+      label="角色名称"
+      :rules="[{ required: true, message: '请输入角色名称' }]"
+      :validate-trigger="['change', 'input']"
+    >
+      <a-input v-model="form.name" placeholder="请输入角色名称" />
+    </a-form-item>
+    <a-form-item
+      field="key"
+      label="角色标志"
+      :rules="[{ required: true, message: '请输入角色标志' }]"
+      :validate-trigger="['change', 'input']"
+      showable
+    >
+      <a-input v-model="form.key" placeholder="请输入角色标志" />
+    </a-form-item>
+    <a-form-item
+      field="icon"
+      label="角色图标"
+      :rules="[{ required: true, message: '请输入角色图标' }]"
+      :validate-trigger="['change', 'input']"
+    >
+      <a-input v-model="form.icon" placeholder="请输入角色图标" />
+    </a-form-item>
+    <a-form-item
+      field="hello_msg"
+      label="打招呼信息"
+      :rules="[{ required: true, message: '请输入打招呼信息' }]"
+      :validate-trigger="['change', 'input']"
+    >
+      <a-input v-model="form.hello_msg" placeholder="请输入打招呼信息" />
+    </a-form-item>
+    <a-form-item field="username" label="上下文信息" :validate-trigger="['change', 'input']">
+      <a-table :data="form.context || []" :pagination="false">
+        <template #columns>
+          <a-table-column title="对话角色">
+            <template #cell="{ record }">
+              <a-input v-model="record.role" />
+            </template>
+          </a-table-column>
+          <a-table-column width="350">
+            <template #title>
+              <div class="content-title">
+                <span>对话内容</span>
+                <a-button @click="addContext" type="primary">增加一行</a-button>
+              </div>
+            </template>
+            <template #cell="{ record }">
+              <div class="content-cell">
+                <a-input v-model="record.content" /><icon-minus-circle
+                  @click="removeContext(record)"
+                />
+              </div>
+            </template>
+          </a-table-column>
+        </template>
+      </a-table>
+    </a-form-item>
+    <a-form-item field="enable" label="启用状态">
+      <a-switch v-model="form.enable" />
+    </a-form-item>
+  </a-form>
+</template>
+
+<script setup>
+import { ref, defineExpose, defineProps } from "vue";
+const props = defineProps({
+  data: {},
+});
+
+const formRef = ref();
+const form = ref({});
+if (props.data?.id) {
+  form.value = Object.assign({}, props.data);
+}
+
+const addContext = () => {
+  form.value.context = form.value.context || [];
+  form.value.context.push({
+    role: "",
+    content: "",
+  });
+};
+
+const removeContext = (record) => {
+  const index = form.value.context.findIndex((item) => {
+    return item === record;
+  });
+  if (index > -1) {
+    form.value.context.splice(index, 1);
+  }
+};
+defineExpose({
+  formRef,
+  form,
+});
+</script>
+<style lang="less" scoped>
+.content-title {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 350px;
+}
+.content-cell {
+  display: flex;
+  align-items: center;
+  width: 350px;
+  svg {
+    margin-left: 10px;
+  }
+}
+</style>

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

@@ -0,0 +1,30 @@
+import http from "@/http/config";
+
+export const getList = (params?: Record<string, unknown>) => {
+  return http({
+    url: "/api/admin/role/list",
+    method: "get",
+    params,
+  });
+};
+export const save = (data?: Record<string, unknown>) => {
+  return http({
+    url: "/api/admin/role/save",
+    method: "post",
+    data,
+  });
+};
+export const deleting = (id: string | number) => {
+  return http({
+    url: `/api/admin/role/remove`,
+    method: "post",
+    data: { id }
+  });
+};
+export const setStatus = (data) => {
+  return http({
+    url: `/api/admin/role/set`,
+    method: "post",
+    data,
+  });
+};

new-ui/projects/admin/src/views/SysAdmin/SysAdminContainer.vue

@@ -0,0 +1,117 @@
+<script lang="ts" setup>
+import { Message } 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 ConfirmSwitch from "@/components/ConfirmSwitch.vue";
+import usePopup from "@/composables/usePopup";
+import SysAdminForm from "./SysAdminForm.vue";
+import SysAdminResetPWD from "./SysAdminResetPWD.vue";
+import { getList, save, remove, resetPass } from "./api";
+
+const columns: SearchTableColumns[] = [
+  {
+    dataIndex: "username",
+    title: "账号",
+    search: {
+      valueType: "input",
+    },
+  },
+  {
+    dataIndex: "last_login_ip",
+    title: "最后登录IP",
+  },
+  {
+    dataIndex: "last_login_at",
+    title: "最后登录时间",
+    render: ({ record }) => dateFormat(record.last_login_at),
+  },
+  {
+    dataIndex: "created_at",
+    title: "创建时间",
+    render: ({ record }) => dateFormat(record.created_at),
+  },
+  {
+    dataIndex: "updated_at",
+    title: "更新时间",
+    render: ({ record }) => dateFormat(record.updated_at),
+  },
+  {
+    dataIndex: "status",
+    title: "状态",
+    slotName: "switch",
+    width: 80,
+  },
+  {
+    title: "操作",
+    slotName: "actions",
+    fixed: "right",
+    width: 180,
+  },
+];
+
+const openFormModal = usePopup(SysAdminForm, {
+  nodeProps: ([_, record]) => ({ record }),
+  popupProps: ([reload, record], exposed) => ({
+    title: `${record?.id ? "编辑" : "新增"}系统管理员`,
+    onBeforeOk: async (done) => {
+      await exposed()?.handleSubmit(save, {
+        id: record?.id,
+      });
+      await reload();
+      done(true);
+    },
+  }),
+});
+
+const openResetPWDModal = usePopup(SysAdminResetPWD, {
+  popupProps: ([reload, record], exposed) => ({
+    title: `修改密码`,
+    onBeforeOk: async (done) => {
+      await exposed()?.handleSubmit(resetPass, {
+        id: record?.id,
+      });
+      Message.success("修改成功");
+      await reload();
+      done(true);
+    },
+  }),
+});
+
+const handleRemove = async (id, reload) => {
+  await remove({ id });
+  Message.success("删除成功");
+  await reload();
+  return true;
+};
+</script>
+<template>
+  <SearchTable :request="getList" :columns="columns">
+    <template #header-option="{ reload }">
+      <a-button type="primary" @click="openFormModal(reload, {})">
+        <template #icon> <icon-plus /> </template>
+        新增
+      </a-button>
+    </template>
+    <template #switch="{ record, column }">
+      <ConfirmSwitch
+        v-model="record[column.dataIndex]"
+        :api="async () => save({ ...record, status: !record.status })"
+      />
+    </template>
+    <template #actions="{ record, reload }">
+      <a-link @click="openResetPWDModal(reload, record)">修改密码</a-link>
+      <template v-if="record.id !== 1">
+        <a-link @click="openFormModal(reload, 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>
+    </template>
+  </SearchTable>
+</template>

new-ui/projects/admin/src/views/SysAdmin/SysAdminForm.vue

@@ -0,0 +1,39 @@
+<template>
+  <a-form ref="formRef" :model="formData" auto-label-width>
+    <a-form-item field="username" label="账号" :rules="[{ required: true, message: '请输入账号' }]">
+      <a-input v-model="formData.username" placeholder="请输入账号" />
+    </a-form-item>
+    <a-form-item
+      v-if="!props.record?.id"
+      field="password"
+      label="密码"
+      :rules="[{ required: true, message: '请输入密码' }]"
+    >
+      <a-input-password
+        v-model="formData.password"
+        placeholder="请输入密码"
+        autocomplete="new-password"
+      />
+    </a-form-item>
+    <a-form-item field="status" label="启用状态">
+      <a-switch v-model="formData.status" />
+    </a-form-item>
+  </a-form>
+</template>
+
+<script lang="ts" setup>
+import useSubmit from "@/composables/useSubmit";
+const props = defineProps({
+  record: Object,
+});
+
+const { formRef, formData, handleSubmit } = useSubmit({
+  username: "",
+  password: "",
+  status: true,
+});
+
+defineExpose({
+  handleSubmit,
+});
+</script>

new-ui/projects/admin/src/views/SysAdmin/SysAdminResetPWD.vue

@@ -0,0 +1,28 @@
+<template>
+  <a-form ref="formRef" :model="formData" auto-label-width>
+    <a-form-item
+      field="password"
+      label="密码"
+      :rules="[{ required: true, message: '请输入密码' }]"
+      showable
+    >
+      <a-input-password
+        v-model="formData.password"
+        placeholder="请输入密码"
+        autocomplete="new-password"
+      />
+    </a-form-item>
+  </a-form>
+</template>
+
+<script lang="ts" setup>
+import useSubmit from "@/composables/useSubmit";
+
+const { formRef, formData, handleSubmit } = useSubmit({
+  password: "",
+});
+
+defineExpose({
+  handleSubmit,
+});
+</script>

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

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

new-ui/projects/admin/src/views/System/SystemBaseConfig.vue

@@ -0,0 +1,155 @@
+<script lang="ts" setup>
+import { onMounted } from "vue";
+import { Message } from "@arco-design/web-vue";
+import useSubmit from "@/composables/useSubmit";
+import useRequest from "@/composables/useRequest";
+import { getConfig, modelList, save } from "./api";
+import SystemUploader from "./SystemUploader.vue";
+
+const { formRef, formData: system, handleSubmit, submitting } = useSubmit({});
+
+const [getModelOptions, modelOptions, modelOptionsLoading] = useRequest(modelList);
+
+const rules = {
+  title: [{ required: true, message: "请输入网站标题" }],
+  admin_title: [{ required: true, message: "请输入控制台标题" }],
+};
+
+const handleSave = async () => {
+  await handleSubmit(
+    () =>
+      save({
+        key: "system",
+        config: system,
+      }),
+    {}
+  );
+  Message.success("保存成功");
+};
+
+const reload = async () => {
+  const { data } = await getConfig({ key: "system" });
+  data && Object.assign(system, data);
+};
+
+onMounted(async () => {
+  getModelOptions();
+  reload();
+});
+</script>
+<template>
+  <a-card :bordered="false">
+    <a-form ref="formRef" :model="system" :rules="rules" auto-label-width :disabled="submitting">
+      <a-form-item label="网站标题" field="title">
+        <a-input v-model="system['title']" />
+      </a-form-item>
+      <a-form-item label="控制台标题" field="admin_title">
+        <a-input v-model="system['admin_title']" />
+      </a-form-item>
+      <a-form-item label="注册赠送对话次数" field="user_init_calls">
+        <a-input v-model.number="system['init_chat_calls']" placeholder="新用户注册赠送对话次数" />
+      </a-form-item>
+      <a-form-item label="注册赠送绘图次数" field="init_img_calls">
+        <a-input v-model.number="system['init_img_calls']" placeholder="新用户注册赠送绘图次数" />
+      </a-form-item>
+      <a-form-item label="邀请赠送对话次数" field="invite_chat_calls">
+        <a-input
+          v-model.number="system['invite_chat_calls']"
+          placeholder="邀请新用户注册赠送对话次数"
+        />
+      </a-form-item>
+      <a-form-item label="邀请赠送绘图次数" field="invite_img_calls">
+        <a-input
+          v-model.number="system['invite_img_calls']"
+          placeholder="邀请新用户注册赠送绘图次数"
+        />
+      </a-form-item>
+      <a-form-item label="VIP每月对话次数" field="vip_month_calls">
+        <a-input v-model.number="system['vip_month_calls']" placeholder="VIP用户每月赠送对话次数" />
+      </a-form-item>
+      <a-form-item label="VIP每月绘图次数" field="vip_month_img_calls">
+        <a-input
+          v-model.number="system['vip_month_img_calls']"
+          placeholder="VIP用户每月赠送绘图次数"
+        />
+      </a-form-item>
+      <a-form-item label="开放注册" field="enabled_register">
+        <a-space>
+          <a-switch v-model="system['enabled_register']" />
+          <a-tooltip content="关闭注册之后只能通过管理后台添加用户" position="right">
+            <icon-info-circle-fill size="18" />
+          </a-tooltip>
+        </a-space>
+      </a-form-item>
+      <a-form-item label="注册方式" field="register_ways">
+        <a-checkbox-group v-model="system['register_ways']">
+          <a-checkbox value="mobile">手机注册</a-checkbox>
+          <a-checkbox value="email">邮箱注册</a-checkbox>
+        </a-checkbox-group>
+      </a-form-item>
+      <a-form-item label="启用众筹功能" field="enabled_reward">
+        <a-space>
+          <a-switch v-model="system['enabled_reward']" />
+          <a-tooltip content="如果关闭次功能将不在用户菜单显示众筹二维码" position="right">
+            <icon-info-circle-fill size="18" />
+          </a-tooltip>
+        </a-space>
+      </a-form-item>
+      <template v-if="system['enabled_reward']">
+        <a-form-item label="单次对话价格" field="chat_call_price">
+          <a-input v-model="system['chat_call_price']" placeholder="众筹金额跟对话次数的兑换比例" />
+        </a-form-item>
+        <a-form-item label="单次绘图价格" field="img_call_price">
+          <a-input v-model="system['img_call_price']" placeholder="众筹金额跟绘图次数的兑换比例" />
+        </a-form-item>
+        <a-form-item label="收款二维码" field="reward_img">
+          <SystemUploader v-model="system['reward_img']" placeholder="众筹收款二维码地址" />
+        </a-form-item>
+      </template>
+      <a-form-item label="微信客服二维码" field="wechat_card_url">
+        <SystemUploader v-model="system['wechat_card_url']" placeholder="微信客服二维码" />
+      </a-form-item>
+      <a-form-item label="订单超时时间" field="order_pay_timeout">
+        <a-space style="width: 100%">
+          <a-input
+            v-model.number="system['order_pay_timeout']"
+            placeholder="单位：秒"
+            style="width: 100%"
+          />
+          <a-tooltip position="right">
+            <icon-info-circle-fill size="18" />
+            <template #content> 系统会定期清理超时未支付的订单<br />默认值：900秒 </template>
+          </a-tooltip>
+        </a-space>
+      </a-form-item>
+      <a-form-item label="会员充值说明" field="order_pay_info_text">
+        <a-textarea
+          v-model="system['order_pay_info_text']"
+          :autosize="{ minRows: 3, maxRows: 10 }"
+          placeholder="请输入会员充值说明文字，比如介绍会员计划"
+        />
+      </a-form-item>
+      <a-form-item label="默认AI模型" field="default_models">
+        <a-space style="width: 100%">
+          <a-select
+            v-model="system['default_models']"
+            multiple
+            :filterable="true"
+            placeholder="选择AI模型，多选"
+            :options="modelOptions"
+            :loading="modelOptionsLoading"
+            :field-names="{ value: 'value', label: 'name' }"
+            style="width: 100%"
+          >
+          </a-select>
+          <a-tooltip content="新用户注册默认开通的 AI 模型" position="right">
+            <icon-info-circle-fill size="18" />
+          </a-tooltip>
+        </a-space>
+      </a-form-item>
+      <a-form-item>
+        <a-button type="primary" :loading="submitting" @click="handleSave">保存</a-button>
+      </a-form-item>
+    </a-form>
+  </a-card>
+</template>

new-ui/projects/admin/src/views/System/SystemChatConfig.vue

@@ -0,0 +1,148 @@
+<script lang="ts" setup>
+import { onMounted } from "vue";
+import { Message } from "@arco-design/web-vue";
+import useSubmit from "@/composables/useSubmit";
+import { getConfig, save } from "./api";
+
+const {
+  formRef,
+  formData: chat,
+  handleSubmit,
+  submitting,
+} = useSubmit({
+  open_ai: { temperature: 1, max_tokens: 1024 },
+  azure: { temperature: 1, max_tokens: 1024 },
+  chat_gml: { temperature: 0.95, max_tokens: 1024 },
+  baidu: { temperature: 0.95, max_tokens: 1024 },
+  xun_fei: { temperature: 0.5, max_tokens: 1024 },
+  context_deep: 0,
+  enable_context: true,
+  enable_history: true,
+  dall_api_url: "",
+});
+
+const rules = {
+  init_chat_calls: [{ required: true, message: "请输入赠送对话次数" }],
+  user_img_calls: [{ required: true, message: "请输入赠送绘图次数" }],
+};
+
+const handleSave = async () => {
+  await handleSubmit(
+    () =>
+      save({
+        key: "chat",
+        config: chat,
+      }),
+    {}
+  );
+  Message.success("保存成功");
+};
+
+const reload = async () => {
+  const { data } = await getConfig({ key: "chat" });
+  data && Object.assign(chat, data);
+};
+
+onMounted(reload);
+</script>
+<template>
+  <a-card :bordered="false">
+    <a-form ref="formRef" :model="chat" :rules="rules" auto-label-width :disabled="submitting">
+      <a-form-item label="开启聊天上下文">
+        <a-switch v-model="chat['enable_context']" />
+      </a-form-item>
+      <a-form-item label="保存聊天记录">
+        <a-switch v-model="chat['enable_history']" />
+      </a-form-item>
+      <a-form-item
+        label="会话上下文深度"
+        extra="会话上下文深度：在老会话中继续会话，默认加载多少条聊天记录作为上下文。如果设置为 0
+        则不加载聊天记录，仅仅使用当前角色的上下文。该配置参数最好设置需要为偶数，否则将无法兼容百度的
+        API。"
+      >
+        <a-input-number v-model="chat['context_deep']" :min="0" :max="10" />
+      </a-form-item>
+
+      <a-divider content-position="center">OpenAI</a-divider>
+      <a-form-item
+        label="模型创意度"
+        extra="值越大 AI 回答越发散，值越小回答越保守，建议保持默认值"
+      >
+        <a-slider v-model="chat['open_ai']['temperature']" :max="2" :step="0.1" />
+      </a-form-item>
+      <a-form-item label="最大响应长度">
+        <a-input
+          v-model.number="chat['open_ai']['max_tokens']"
+          placeholder="回复的最大字数，最大4096"
+        />
+      </a-form-item>
+
+      <a-divider content-position="center">Azure</a-divider>
+      <a-form-item
+        label="模型创意度"
+        extra="值越大 AI 回答越发散，值越小回答越保守，建议保持默认值"
+      >
+        <a-slider v-model="chat['azure']['temperature']" :max="2" :step="0.1" />
+      </a-form-item>
+      <a-form-item label="最大响应长度">
+        <a-input
+          v-model.number="chat['azure']['max_tokens']"
+          placeholder="回复的最大字数，最大4096"
+        />
+      </a-form-item>
+
+      <a-divider content-position="center">ChatGLM</a-divider>
+      <a-form-item
+        label="模型创意度"
+        extra="值越大 AI 回答越发散，值越小回答越保守，建议保持默认值"
+      >
+        <a-slider v-model="chat['chat_gml']['temperature']" :max="1" :step="0.01" />
+      </a-form-item>
+      <a-form-item label="最大响应长度">
+        <a-input
+          v-model.number="chat['chat_gml']['max_tokens']"
+          placeholder="回复的最大字数，最大4096"
+        />
+      </a-form-item>
+
+      <a-divider content-position="center">文心一言</a-divider>
+      <a-form-item
+        label="模型创意度"
+        extra="值越大 AI 回答越发散，值越小回答越保守，建议保持默认值"
+      >
+        <a-slider v-model="chat['baidu']['temperature']" :max="1" :step="0.01" />
+      </a-form-item>
+      <a-form-item label="最大响应长度">
+        <a-input
+          v-model.number="chat['baidu']['max_tokens']"
+          placeholder="回复的最大字数，最大4096"
+        />
+      </a-form-item>
+
+      <a-divider content-position="center">讯飞星火</a-divider>
+      <a-form-item
+        label="模型创意度"
+        extra="值越大 AI 回答越发散，值越小回答越保守，建议保持默认值"
+      >
+        <a-slider v-model="chat['xun_fei']['temperature']" :max="1" :step="0.1" />
+      </a-form-item>
+      <a-form-item label="最大响应长度">
+        <a-input
+          v-model.number="chat['xun_fei']['max_tokens']"
+          placeholder="回复的最大字数，最大4096"
+        />
+      </a-form-item>
+
+      <a-divider content-position="center">AI绘图</a-divider>
+      <a-form-item label="DALL-E3出图数量">
+        <a-input
+          v-model.number="chat['dall_img_num']"
+          placeholder="调用 DALL E3 API 传入的出图数量"
+        />
+      </a-form-item>
+      <a-form-item>
+        <a-button type="primary" :loading="submitting" @click="handleSave">保存</a-button>
+      </a-form-item>
+    </a-form>
+  </a-card>
+</template>

new-ui/projects/admin/src/views/System/SystemContainer.vue

@@ -0,0 +1,28 @@
+<script lang="ts" setup>
+import { ref } from "vue";
+import SystemBaseConfig from "./SystemBaseConfig.vue";
+import SystemChatConfig from "./SystemChatConfig.vue";
+import SystemNoticeConfig from "./SystemNoticeConfig.vue";
+const tabsList = [
+  { key: "1", title: "基本设置", components: SystemBaseConfig },
+  { key: "2", title: "模型设置", components: SystemChatConfig },
+  { key: "3", title: "公告设置", components: SystemNoticeConfig },
+];
+
+const activeKey = ref(tabsList[0].key);
+</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">
+      <div class="system-config-wrapper">
+        <component :is="item.components" />
+      </div>
+    </a-tab-pane>
+  </a-tabs>
+</template>
+<style scoped>
+.system-config-wrapper {
+  height: 100%;
+  overflow-y: auto;
+}
+</style>

new-ui/projects/admin/src/views/System/SystemNoticeConfig.vue

@@ -0,0 +1,67 @@
+<script lang="ts" setup>
+import { onMounted } from "vue";
+import { Message } from "@arco-design/web-vue";
+import MdEditor from "md-editor-v3";
+import "md-editor-v3/lib/style.css";
+import http from "@/http/config";
+import useSubmit from "@/composables/useSubmit";
+import { getConfig, save } from "./api";
+
+const { formRef, formData, handleSubmit, submitting } = useSubmit({
+  content: "",
+  updated: true,
+});
+
+const handleSave = async () => {
+  await handleSubmit(
+    () =>
+      save({
+        key: "notice",
+        config: formData,
+      }),
+    {}
+  );
+  Message.success("保存成功");
+};
+
+const reload = async () => {
+  const { data } = await getConfig({ key: "notice" });
+  data && Object.assign(formData, data);
+};
+
+const onUploadImg = (files, callback) => {
+  Promise.all(
+    files.map((file) => {
+      return new Promise((rev, rej) => {
+        const formData = new FormData();
+        formData.append("file", file, file.name);
+        http({
+          url: `/api/upload`,
+          data: formData,
+        })
+          .then((res) => rev(res))
+          .catch((e) => rej(e));
+      });
+    })
+  )
+    .then((res) => {
+      Message.success({ content: "上传成功", duration: 500 });
+      callback(res.map((item) => item.data.url));
+    })
+    .catch((e) => {
+      Message.error("图片上传失败:" + e.message);
+    });
+};
+
+onMounted(reload);
+</script>
+<template>
+  <a-form ref="formRef" :model="formData" auto-label-width :disabled="submitting">
+    <a-form-item>
+      <md-editor v-model="formData.content" @on-upload-img="onUploadImg" />
+    </a-form-item>
+    <a-form-item>
+      <a-button type="primary" :loading="submitting" @click="handleSave">保存</a-button>
+    </a-form-item>
+  </a-form>
+</template>

new-ui/projects/admin/src/views/System/SystemUploader.vue

@@ -0,0 +1,39 @@
+<script lang="ts" setup>
+import { computed } from "vue";
+import { Message } from "@arco-design/web-vue";
+import type { UploadInstance, FileItem } from "@arco-design/web-vue";
+import { uploadUrl } from "@/http/config";
+
+defineProps({
+  modelValue: String,
+  placeholder: String,
+});
+
+const emits = defineEmits(["update:modelValue"]);
+
+const uploadProps = computed<UploadInstance["$props"]>(() => ({
+  action: uploadUrl,
+  name: "file",
+  headers: { [__AUTH_KEY]: localStorage.getItem(__AUTH_KEY) },
+  showFileList: false,
+}));
+
+const handleChange = (_, file: FileItem) => {
+  if (file?.response) {
+    emits("update:modelValue", file?.response?.data?.url);
+    Message.success("上传成功");
+  }
+};
+</script>
+<template>
+  <a-upload v-bind="uploadProps" style="width: 100%" @change="handleChange">
+    <template #upload-button>
+      <a-input-group style="width: 100%">
+        <a-input :model-value="modelValue" :placeholder="placeholder" readonly />
+        <a-button type="primary" style="width: 100px">
+          <icon-cloud />
+        </a-button>
+      </a-input-group>
+    </template>
+  </a-upload>
+</template>

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

@@ -0,0 +1,25 @@
+import http from "@/http/config";
+
+export const getConfig = (params) => {
+  return http({
+    url: "/api/admin/config/get",
+    method: "get",
+    params
+  })
+}
+
+export const save = (data) => {
+  return http({
+    url: "/api/admin/config/update",
+    method: "post",
+    data
+  })
+}
+
+export const modelList = (params) => {
+  return http({
+    url: "/api/admin/model/list",
+    method: "get",
+    params
+  })
+}

new-ui/projects/admin/src/views/User/UserContainer.vue

@@ -0,0 +1,92 @@
+<script lang="ts" setup>
+import SearchTable from "@/components/SearchTable/SearchTable.vue";
+import type { SearchTableColumns } from "@/components/SearchTable/type";
+import { getList, save as saveApi, deletApi, resetPassword } from "./api";
+import UserForm from "./UserForm.vue";
+import { Message } from "@arco-design/web-vue";
+import { dateFormat } from "@chatgpt-plus/packages/utils";
+import UserPassword from "./UserPassword.vue";
+import useCustomFormPopup from "@/composables/useCustomFormPopup";
+const columns: SearchTableColumns[] = [
+  {
+    title: "账号",
+    dataIndex: "username",
+    search: {
+      valueType: "input",
+    },
+  },
+  {
+    title: "剩余对话次数",
+    dataIndex: "calls",
+  },
+  {
+    title: "剩余绘图次数",
+    dataIndex: "img_calls",
+  },
+  {
+    title: "累计消耗tokens",
+    dataIndex: "total_tokens",
+  },
+  {
+    title: "状态",
+    dataIndex: "status",
+    render: ({ record }) => {
+      return record.status ? "正常" : "停用";
+    },
+  },
+  {
+    title: "过期时间",
+    dataIndex: "expired_time",
+    width: 180,
+    render: ({ record }) => {
+      return dateFormat(record.expired_time);
+    },
+  },
+  {
+    title: "注册时间",
+    dataIndex: "created_at",
+    width: 180,
+    render: ({ record }) => {
+      return dateFormat(record.created_at);
+    },
+  },
+  {
+    title: "操作",
+    slotName: "actions",
+    width: 180,
+    fixed: "right",
+  },
+];
+
+//弹窗
+const editModal = useCustomFormPopup(UserForm, saveApi, {
+  popupProps: (arg) => ({ title: arg[0].record ? "编辑用户" : "新增用户" }),
+});
+const password = useCustomFormPopup(UserPassword, resetPassword, {
+  popupProps: (arg) => ({ title: "重置密码" }),
+});
+
+const handleDelete = async ({ id }: { id: string }, reload) => {
+  const res = await deletApi(id);
+  if (res.code === 0) {
+    Message.success("操作成功");
+    reload();
+  }
+};
+</script>
+<template>
+  <SearchTable :request="getList" :columns="columns">
+    <template #actions="{ record, reload }">
+      <a-link @click="editModal({ record, reload })">编辑</a-link>
+      <a-popconfirm content="确定删除？" @ok="handleDelete(record, reload)">
+        <a-link status="danger">删除</a-link>
+      </a-popconfirm>
+      <a-link @click="password({ record, reload })">重置密码</a-link>
+    </template>
+    <template #search-extra="{ reload }">
+      <a-button @click="editModal({ reload })" size="small" type="primary">
+        <template #icon> <icon-plus /> </template>新增
+      </a-button>
+    </template>
+  </SearchTable>
+</template>

new-ui/projects/admin/src/views/User/UserForm.vue

@@ -0,0 +1,112 @@
+<template>
+  <a-form ref="formRef" :model="form" :style="{ width: '600px' }" @submit="handleSubmit">
+    <a-form-item
+      field="username"
+      label="账号"
+      :rules="[{ required: true, message: '请输入账号' }]"
+      :validate-trigger="['change', 'input']"
+    >
+      <a-input v-model="form.username" placeholder="请输入账号" />
+    </a-form-item>
+    <a-form-item
+      v-if="!props.data.id"
+      field="password"
+      label="密码"
+      :rules="[{ required: true, message: '请输入密码' }]"
+      :validate-trigger="['change', 'input']"
+      showable
+    >
+      <a-input v-model="form.password" placeholder="请输入密码" />
+    </a-form-item>
+    <a-form-item
+      field="calls"
+      label="对话次数"
+      :rules="[{ required: true, message: '请输入对话次数' }]"
+    >
+      <a-input-number v-model="form.calls" placeholder="请输入对话次数" />
+    </a-form-item>
+    <a-form-item
+      field="img_calls"
+      label="绘图次数"
+      :rules="[{ required: true, message: '请输入绘图次数' }]"
+    >
+      <a-input-number v-model="form.img_calls" placeholder="请输入绘图次数" />
+    </a-form-item>
+    <a-form-item field="expired_time" label="有效期">
+      <a-date-picker v-model="form.expired_time" placeholder="请选择有效期" />
+    </a-form-item>
+    <a-form-item field="chat_roles" label="聊天角色">
+      <a-select
+        :field-names="{ value: 'key', label: 'name' }"
+        v-model="form.chat_roles"
+        placeholder="请选择聊天角色"
+        multiple
+        :options="roleOption"
+        :rules="[{ required: true, message: '请选择聊天角色' }]"
+      >
+      </a-select>
+    </a-form-item>
+    <a-form-item field="chat_models" label="模型角色">
+      <a-select
+        :field-names="{ value: 'value', label: 'name' }"
+        v-model="form.chat_models"
+        placeholder="请选择模型角色"
+        multiple
+        :options="modalOption"
+        :rules="[{ required: true, message: '请选择模型角色' }]"
+      >
+      </a-select>
+    </a-form-item>
+    <a-form-item field="status" label="启用状态">
+      <a-switch v-model="form.status" />
+    </a-form-item>
+    <a-form-item field="vip" label="开通VIP">
+      <a-switch v-model="form.vip" />
+    </a-form-item>
+  </a-form>
+</template>
+
+<script setup>
+import { ref, defineExpose, defineProps } from "vue";
+import { getModel, getRole } from "./api";
+const props = defineProps({
+  data: {},
+});
+
+const formRef = ref();
+const form = ref({
+  username: "",
+  password: "",
+  calls: "",
+  img_calls: "",
+  expired_time: "",
+  chat_roles: [],
+  chat_models: [],
+  status: false,
+  vip: false,
+});
+if (props.data?.id) {
+  form.value = Object.assign({}, props.data);
+  if (form.value.expired_time === 0) {
+    form.value.expired_time = "";
+  }
+}
+
+//拿选项
+const modalOption = ref([]);
+const roleOption = ref([]);
+const getOption = (api, container) => {
+  api().then(({ code, data }) => {
+    if (code === 0) {
+      container.value = data;
+    }
+  });
+};
+getOption(getModel, modalOption);
+getOption(getRole, roleOption);
+
+defineExpose({
+  formRef,
+  form,
+});
+</script>

new-ui/projects/admin/src/views/User/UserPassword.vue

@@ -0,0 +1,44 @@
+<template>
+  <a-form ref="formRef" :model="form" :style="{ width: '600px' }" @submit="handleSubmit">
+    <a-form-item
+      field="username"
+      label="账号"
+      :rules="[{ required: true, message: 'name is required' }]"
+      :validate-trigger="['change', 'input']"
+      :disabled="true"
+    >
+      <a-input v-model="form.username" placeholder="请输入账号" />
+    </a-form-item>
+    <a-form-item
+      field="password"
+      label="新密码"
+      :rules="[{ required: true, message: 'password is required' }]"
+      :validate-trigger="['change', 'input']"
+      showable
+    >
+      <a-input v-model="form.password" placeholder="请输入密码" />
+    </a-form-item>
+  </a-form>
+</template>
+
+<script setup>
+import { ref, defineExpose, defineProps } from "vue";
+import { getModel, getRole } from "./api";
+const props = defineProps({
+  data: {},
+});
+
+const formRef = ref();
+const form = ref({
+  id: "",
+  username: "",
+  password: "",
+});
+form.value.id = props.data.id;
+form.value.username = props.data.username;
+
+defineExpose({
+  formRef,
+  form,
+});
+</script>

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

@@ -0,0 +1,47 @@
+import http from "@/http/config";
+
+export const getList = (params?: Record<string, unknown>) => {
+  return http({
+    url: "/api/admin/user/list",
+    method: "get",
+    params,
+  });
+};
+
+export const save = (data?: Record<string, unknown>) => {
+  return http({
+    url: "/api/admin/user/save",
+    method: "post",
+    data,
+  });
+};
+
+export const deletApi = (id: string | number) => {
+  return http({
+    url: `/api/admin/user/remove`,
+    method: "post",
+    data: { id }
+  });
+};
+
+export const getRole = () => {
+  return http({
+    url: `/api/admin/role/list`,
+    method: "get",
+  });
+};
+
+export const getModel = () => {
+  return http({
+    url: `/api/admin/model/list`,
+    method: "get",
+  });
+};
+
+export const resetPassword = (data) => {
+  return http({
+    url: `/api/admin/user/resetPass`,
+    method: "post",
+    data,
+  });
+};