Jelajahi Sumber

feat: 添加提示词全局

sheldon 1 bulan lalu
induk
melakukan
f4aa5d4609

+ 0 - 0
src/router/modules/model.ts → src/router/modules/model/model.ts


+ 32 - 0
src/router/modules/model/tips.ts

@@ -0,0 +1,32 @@
+
+import type { RouteRecordRaw } from 'vue-router'
+
+function Layout() {
+  return import('@/layouts/index.vue')
+}
+
+const routes: RouteRecordRaw = {
+  path: '/tips',
+  component: Layout,
+  name: 'tips',
+  meta: {
+    title: '提示词',
+    icon: 'i-icons8:idea',
+    singleMenu: true,
+  },
+  children: [
+    {
+      path: '',
+      name: 'tipsList',
+      component: () => import('@/views/model/tips/index.vue'),
+      meta: {
+        title: '提示词列表',
+        breadcrumb: false,
+        menu: false,
+        activeMenu: '/tips',
+      },
+    },
+  ],
+}
+
+export default routes

+ 3 - 1
src/router/routes.ts

@@ -6,7 +6,8 @@ import { setupLayouts } from 'virtual:meta-layouts'
 import RoleManagement from './modules/role'
 import VoiceManagement from './modules/voice'
 import Recomendation from './modules/recomendation'
-import Model from './modules/model'
+import Model from './modules/model/model'
+import Tips from './modules/model/tips'
 
 
 function Layout() {
@@ -85,6 +86,7 @@ const asyncRoutes: Route.recordMainRaw[] = [
     },
     children: [
       Model,
+      Tips,
     ],
   },
 ]

+ 145 - 0
src/views/model/tips/components/EditForm.vue

@@ -0,0 +1,145 @@
+<script setup lang="ts">
+import { ElDialog, ElForm, ElFormItem, ElInput, ElDatePicker, ElButton, ElMessage, ElRadio } from 'element-plus'
+import type { FormInstance, FormRules } from 'element-plus'
+
+// 定义表单数据类型
+type IFormData  = {
+  text: string
+}
+
+// 定义组件的属性
+interface Props {
+  visible: boolean
+  modelValue?: IFormData | null
+  mode?: 'create' | 'edit'
+}
+
+// 定义组件的事件
+interface Emits {
+  (e: 'update:visible', value: boolean): void
+  (e: 'cancel'): void
+  (e: 'refresh'): void
+}
+
+// 接收属性和事件
+const props = withDefaults(defineProps<Props>(), {
+  visible: false,
+  modelValue: null,
+  mode: 'create'
+})
+
+const emit = defineEmits<Emits>()
+
+// 创建本地响应式变量用于 v-model 绑定
+const dialogVisible = ref(props.visible)
+
+// 监听 props.visible 变化,更新本地变量
+watch(() => props.visible, (newVisible) => {
+  dialogVisible.value = newVisible
+})
+
+// 监听本地变量变化,发出 update 事件
+watch(dialogVisible, (newVisible) => {
+  emit('update:visible', newVisible)
+})
+
+// 表单引用
+const editFormRef = ref<FormInstance>();
+
+// 响应式数据 - 直接定义所有必需字段
+const formData = ref<Partial<IFormData>>({
+  text: '',
+});
+
+
+
+// 监听 props.modelValue 变化
+watch(() => props.modelValue, (newModelValue) => {
+  if (newModelValue) {
+    formData.value = {
+      ...formData.value,
+      ...newModelValue
+    };
+    console.log(newModelValue, formData.value,33344)
+  }
+});
+
+// 表单验证规则
+const formRules = ref<FormRules>({
+  text: [
+    { required: true, message: '输入名称', trigger: 'blur' },
+  ],
+})
+
+// 监听可见性变化
+watch(() => props.visible, (newVisible) => {
+  resetForm()
+})
+
+
+// 重置表单
+function resetForm() {
+  console.log('reset')
+  if (editFormRef.value) {
+    editFormRef.value.resetFields()
+  }
+  formData.value = {
+    text: '',
+  }
+}
+
+// 处理确认
+async function handleConfirm() {
+  if (!editFormRef.value) return
+
+  try {
+    await editFormRef.value.validate()
+
+    // const { code } = await updateCallings({
+    //   cloneId: props.cloneId,
+    //   callings: formData.value.text || ''
+    // })
+    // if (code === 0) {
+    //   ElMessage.success('操作成功')
+    //   emit('refresh')
+    // }
+    // 关闭对话框
+    emit('update:visible', false)
+  } catch (error) {
+    // 验证失败,不做处理
+  }
+}
+
+
+function handleCancel() {
+  emit('cancel')
+  emit('update:visible', false)
+}
+
+
+function handleClose() {
+  emit('update:visible', false)
+}
+
+</script>
+<template>
+  <div>
+
+    <ElDialog title="编辑提示词" v-model="dialogVisible" align-center @close="handleClose"
+      width="400" :z-index="2000">
+      <ElForm ref="editFormRef" :model="formData" :rules="formRules" label-width="120px" class="mt-4 space-y-4 w-full">
+
+        <ElFormItem label="提示词" prop="text" label-width="120">
+           <ElInput type="text" v-model="formData.text" />
+        </ElFormItem>
+
+      </ElForm>
+      <template #footer>
+        <div class="flex justify-end space-x-2">
+          <ElButton @click="handleCancel">取消</ElButton>
+          <ElButton type="primary" @click="handleConfirm">确定</ElButton>
+        </div>
+      </template>
+    </ElDialog>
+  </div>
+</template>

+ 92 - 0
src/views/model/tips/index.vue

@@ -0,0 +1,92 @@
+<script setup lang="ts">
+import { Plus } from '@element-plus/icons-vue'
+import { ElButton, ElDialog, ElEmpty, ElInput, ElMessage, ElOption, ElPagination, ElSelect, ElTable, ElTableColumn, ElTag } from 'element-plus'
+
+import { fetchModel } from '@/api/modules/model'
+import EditForm from './components/EditForm.vue'
+type TTipsItem = {
+  text: string,
+  id: string,
+  sort: number,
+}
+
+const tableRef = ref()
+const loading = ref(false)
+const dialogVisible = ref(false)
+const currentText = ref<{id?: string, text: string}|null>()
+
+const dataList = ref<TTipsItem[]>([]);
+const input = ref<string[]>(['tag1', 'tag2', 'tag3'])
+
+
+async function fetchData() {
+  // loading.value = true
+  // const res = await fetchModel()
+  // console.log(res, 'res')
+  // if(res.code === 0){
+  //   dataList.value = res.data.content
+  //   console.log(dataList.value, 'dataList')
+  //   pagination.value.total = res.data.total
+  // }
+  // loading.value = false
+}
+
+
+function handleDelete (row: TModel) {
+  console.log(row, 'delete')
+  ElMessage.info('查看功能待开发')
+}
+
+const  handleCreate = ()=> {
+  dialogVisible.value = true
+}
+
+onMounted(async () => {
+  await fetchData()
+})
+
+
+</script>
+
+<template>
+  <div class="absolute-container">
+    <FaPageHeader title="全局提示词" />
+    <FaPageMain class="flex-1 overflow-auto" main-class="flex-1 flex flex-col overflow-auto">
+      <el-input-tag v-model="input" draggable placeholder="Please input" />
+      <!-- <div class="pb-4">
+        <ElSpace>
+          <ElButton type="primary" :icon="Plus" @click="handleCreate">添加提示词</ElButton>
+        </ElSpace>
+      </div>
+      <ElTable
+        v-loading="loading"
+        ref="tableRef" :data="dataList" stripe highlight-current-row border height="100%"
+      >
+        <ElTableColumn label="sort" prop="sort" width="80" />
+        <ElTableColumn label="id" prop="id" width="140" />
+        <ElTableColumn label="Text" prop="text" min-width="240" />
+        <ElTableColumn fixed="right" label="操作" min-width="200">
+          <template #default="{row}">
+            <ElPopconfirm title="确定删除吗?" @confirm="handleDelete(row)">
+              <template #reference>
+                <ElButton link type="danger" size="small">
+                删除
+                </ElButton>
+              </template>
+            </ElPopconfirm>
+          </template>
+        </ElTableColumn>
+      </ElTable> -->
+    </FaPageMain>
+    <!-- <EditForm v-model:visible="dialogVisible" v-model="currentText" @refresh="()=> {}"  ></EditForm> -->
+  </div>
+</template>
+<style scoped>
+.absolute-container {
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+}
+</style>