wip: baseline changes before channel-conversation-task boundary implementation

admin-web/src/views/ChannelSubject.vue

@@ -1,59 +1,173 @@
 <template>
   <div>
-    <el-form :model="form" inline>
-      <el-form-item label="渠道">
-        <el-select v-model="form.channelType" placeholder="选择渠道">
-          <el-option label="企微" value="wecom" />
-          <el-option label="钉钉" value="dingtalk" />
-          <el-option label="飞书" value="feishu" />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="主体编码">
-        <el-input v-model="form.subjectCode" placeholder="主体编码" />
-      </el-form-item>
-      <el-form-item label="主体名称">
-        <el-input v-model="form.subjectName" placeholder="主体名称" />
-      </el-form-item>
-      <el-form-item label="CorpID">
-        <el-input v-model="form.corpId" placeholder="CorpID" />
-      </el-form-item>
-      <el-form-item label="AgentID">
-        <el-input v-model="form.agentId" placeholder="AgentID" />
-      </el-form-item>
-      <el-form-item label="AgentSecret">
-        <el-input v-model="form.agentSecret" placeholder="AgentSecret" />
-      </el-form-item>
-      <el-form-item>
-        <el-button type="primary" @click="handleCreate">创建</el-button>
-      </el-form-item>
-    </el-form>
+    <div class="toolbar">
+      <el-button type="primary" @click="openCreateDialog">创建渠道主体</el-button>
+    </div>
 
     <el-table :data="subjects" border>
       <el-table-column prop="id" label="ID" width="80" />
-      <el-table-column prop="channelType" label="渠道" />
+      <el-table-column prop="channelType" label="渠道">
+        <template #default="{ row }">
+          {{ channelLabel(row.channelType) }}
+        </template>
+      </el-table-column>
       <el-table-column prop="subjectCode" label="编码" />
       <el-table-column prop="subjectName" label="名称" />
       <el-table-column prop="corpId" label="CorpID" />
-      <el-table-column prop="status" label="状态" />
+      <el-table-column prop="status" label="状态" width="100">
+        <template #default="{ row }">
+          <el-tag :type="row.status === 1 ? 'success' : 'info'">
+            {{ row.status === 1 ? '启用' : '禁用' }}
+          </el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" width="340">
+        <template #default="{ row }">
+          <el-button size="small" @click="openEditDialog(row)">编辑</el-button>
+          <el-button size="small" type="danger" @click="handleDelete(row)">删除</el-button>
+          <el-switch
+            v-model="row.status"
+            :active-value="1"
+            :inactive-value="0"
+            style="margin: 0 12px"
+            @change="(val: any) => handleStatusChange(row, val)"
+          />
+          <el-button size="small" @click="openDetail(row)">详情</el-button>
+        </template>
+      </el-table-column>
     </el-table>
+
+    <el-dialog v-model="dialogVisible" :title="isEdit ? '编辑渠道主体' : '创建渠道主体'" width="600px">
+      <el-form :model="dialogForm" label-width="120px">
+        <el-form-item label="渠道">
+          <el-select v-model="dialogForm.channelType" placeholder="选择渠道">
+            <el-option label="企微" value="wecom" />
+            <el-option label="钉钉" value="dingtalk" />
+            <el-option label="飞书" value="feishu" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="主体编码">
+          <el-input v-model="dialogForm.subjectCode" placeholder="主体编码" />
+        </el-form-item>
+        <el-form-item label="主体名称">
+          <el-input v-model="dialogForm.subjectName" placeholder="主体名称" />
+        </el-form-item>
+        <el-form-item label="CorpID">
+          <el-input v-model="dialogForm.corpId" placeholder="CorpID" />
+        </el-form-item>
+        <el-form-item label="CorpSecret">
+          <el-input v-model="dialogForm.corpSecret" placeholder="CorpSecret" />
+        </el-form-item>
+        <el-form-item label="AgentID">
+          <el-input v-model="dialogForm.agentId" placeholder="AgentID" />
+        </el-form-item>
+        <el-form-item label="AgentSecret">
+          <el-input v-model="dialogForm.agentSecret" placeholder="AgentSecret" />
+        </el-form-item>
+        <el-form-item label="会话存档">
+          <el-switch v-model="dialogForm.sessionArchiveEnabled" :active-value="1" :inactive-value="0" />
+        </el-form-item>
+        <el-form-item label="会话存档私钥">
+          <el-input v-model="dialogForm.sessionArchivePrivateKey" type="textarea" :rows="3" placeholder="会话存档私钥" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="dialogVisible = false">取消</el-button>
+        <el-button type="primary" @click="handleSave">保存</el-button>
+      </template>
+    </el-dialog>
+
+    <el-drawer v-model="drawerVisible" title="渠道主体详情" size="420px">
+      <el-descriptions :column="1" border>
+        <el-descriptions-item label="ID">{{ currentSubject.id }}</el-descriptions-item>
+        <el-descriptions-item label="渠道">{{ channelLabel(currentSubject.channelType) }}</el-descriptions-item>
+        <el-descriptions-item label="主体编码">{{ currentSubject.subjectCode }}</el-descriptions-item>
+        <el-descriptions-item label="主体名称">{{ currentSubject.subjectName }}</el-descriptions-item>
+        <el-descriptions-item label="CorpID">{{ mask(currentSubject.corpId) }}</el-descriptions-item>
+        <el-descriptions-item label="CorpSecret">{{ mask(currentSubject.corpSecret) }}</el-descriptions-item>
+        <el-descriptions-item label="AgentID">{{ mask(currentSubject.agentId) }}</el-descriptions-item>
+        <el-descriptions-item label="AgentSecret">{{ mask(currentSubject.agentSecret) }}</el-descriptions-item>
+        <el-descriptions-item label="会话存档">{{ currentSubject.sessionArchiveEnabled === 1 ? '开启' : '关闭' }}</el-descriptions-item>
+        <el-descriptions-item label="状态">{{ currentSubject.status === 1 ? '启用' : '禁用' }}</el-descriptions-item>
+        <el-descriptions-item label="创建时间">{{ currentSubject.createTime }}</el-descriptions-item>
+      </el-descriptions>
+    </el-drawer>
   </div>
 </template>
 
 <script setup lang="ts">
 import { onMounted, reactive, ref } from 'vue'
-import { ElMessage } from 'element-plus'
-import { createChannelSubject, listChannelSubjects } from '@/api/channel'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import {
+  createChannelSubject,
+  listChannelSubjects,
+  updateChannelSubject,
+  deleteChannelSubject,
+  updateChannelSubjectStatus,
+} from '@/api/channelSubject'
 
-const form = reactive({
+const subjects = ref<any[]>([])
+const dialogVisible = ref(false)
+const isEdit = ref(false)
+const editingId = ref<number | null>(null)
+
+const dialogForm = reactive({
   channelType: 'wecom',
   subjectCode: '',
   subjectName: '',
   corpId: '',
+  corpSecret: '',
   agentId: '',
   agentSecret: '',
+  sessionArchiveEnabled: 0,
+  sessionArchivePrivateKey: '',
 })
 
-const subjects = ref<any[]>([])
+const drawerVisible = ref(false)
+const currentSubject = ref<any>({})
+
+function resetDialogForm() {
+  dialogForm.channelType = 'wecom'
+  dialogForm.subjectCode = ''
+  dialogForm.subjectName = ''
+  dialogForm.corpId = ''
+  dialogForm.corpSecret = ''
+  dialogForm.agentId = ''
+  dialogForm.agentSecret = ''
+  dialogForm.sessionArchiveEnabled = 0
+  dialogForm.sessionArchivePrivateKey = ''
+}
+
+function fillDialogForm(row: any) {
+  dialogForm.channelType = row.channelType ?? 'wecom'
+  dialogForm.subjectCode = row.subjectCode ?? ''
+  dialogForm.subjectName = row.subjectName ?? ''
+  dialogForm.corpId = row.corpId ?? ''
+  dialogForm.corpSecret = row.corpSecret ?? ''
+  dialogForm.agentId = row.agentId ?? ''
+  dialogForm.agentSecret = row.agentSecret ?? ''
+  dialogForm.sessionArchiveEnabled = row.sessionArchiveEnabled ?? 0
+  dialogForm.sessionArchivePrivateKey = row.sessionArchivePrivateKey ?? ''
+}
+
+function openCreateDialog() {
+  isEdit.value = false
+  editingId.value = null
+  resetDialogForm()
+  dialogVisible.value = true
+}
+
+function openEditDialog(row: any) {
+  isEdit.value = true
+  editingId.value = row.id
+  fillDialogForm(row)
+  dialogVisible.value = true
+}
+
+function openDetail(row: any) {
+  currentSubject.value = { ...row }
+  drawerVisible.value = true
+}
 
 async function loadSubjects() {
   try {
@@ -64,15 +178,66 @@ async function loadSubjects() {
   }
 }
 
-async function handleCreate() {
+async function handleSave() {
   try {
-    const res: any = await createChannelSubject(form)
-    subjects.value.unshift(res.data)
-    ElMessage.success('创建成功')
+    if (isEdit.value && editingId.value != null) {
+      await updateChannelSubject(editingId.value, dialogForm)
+      ElMessage.success('更新成功')
+    } else {
+      await createChannelSubject(dialogForm)
+      ElMessage.success('创建成功')
+    }
+    dialogVisible.value = false
+    await loadSubjects()
   } catch (e: any) {
     ElMessage.error(e.message)
   }
 }
 
+async function handleDelete(row: any) {
+  try {
+    await ElMessageBox.confirm('确认删除该渠道主体？', '提示', { type: 'warning' })
+    await deleteChannelSubject(row.id)
+    ElMessage.success('删除成功')
+    await loadSubjects()
+  } catch (e: any) {
+    if (e !== 'cancel') {
+      ElMessage.error(e.message)
+    }
+  }
+}
+
+async function handleStatusChange(row: any, val: any) {
+  try {
+    await updateChannelSubjectStatus(row.id, { status: val })
+    ElMessage.success('状态更新成功')
+    await loadSubjects()
+  } catch (e: any) {
+    ElMessage.error(e.message)
+    await loadSubjects()
+  }
+}
+
+function channelLabel(type: string) {
+  const map: Record<string, string> = {
+    wecom: '企微',
+    dingtalk: '钉钉',
+    feishu: '飞书',
+  }
+  return map[type] || type
+}
+
+function mask(value: string) {
+  if (!value) return '-'
+  if (value.length <= 4) return '****'
+  return value.slice(0, 2) + '****' + value.slice(-2)
+}
+
 onMounted(loadSubjects)
 </script>
+
+<style scoped>
+.toolbar {
+  margin-bottom: 16px;
+}
+</style>