feat(ui):apiKey 语言模型 角色管理 产品

gpt-vue/projects/vue-admin/src/views/Role/RoleContainer.vue

@@ -1,4 +1,118 @@
-<script lang="ts" setup></script>
+<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",
+  },
+  {
+    title: "打招呼信息",
+    dataIndex: "hello_msg",
+  },
+  {
+    title: "操作",
+    slotName: "action",
+  },
+];
+
+const expandable = reactive({
+  title: "",
+  width: 80,
+});
+
+// 数据
+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);
+
+// 删除
+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>
-  <div></div>
+  <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>删除</a-link>
+      </a-popconfirm>
+    </template>
+    <template #header="{ reload }">
+      <a-button @click="popup({ reload })" size="small"><icon-plus />新增</a-button>
+    </template>
+    <template #status="{ record, reload }">
+      <a-switch
+        v-model="record.enable"
+        @change="
+          (value) => {
+            handleStatusChange({ value, record, reload });
+          }
+        "
+      />
+    </template>
+  </SimpleTable>
 </template>

gpt-vue/projects/vue-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>

gpt-vue/projects/vue-admin/src/views/Role/api.ts

@@ -0,0 +1,29 @@
+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?id=${id}`,
+    method: "get",
+  });
+};
+export const setStatus = (data) => {
+  return http({
+    url: `/api/admin/role/set`,
+    method: "post",
+    data,
+  });
+};