🎨 优化角色卡功能模块，后续待优化图像上传&前端流畅性待优化

2026-02-11 05:33:38 +08:00
parent 56e821b222
commit cf3197929e
12 changed files with 576 additions and 198 deletions
--- a/web-app-vue/src/components.d.ts
+++ b/web-app-vue/src/components.d.ts
@@ -16,6 +16,8 @@ declare module 'vue' {
    ElCard: typeof import('element-plus/es')['ElCard']
    ElCol: typeof import('element-plus/es')['ElCol']
    ElContainer: typeof import('element-plus/es')['ElContainer']
+    ElDescriptions: typeof import('element-plus/es')['ElDescriptions']
+    ElDescriptionsItem: typeof import('element-plus/es')['ElDescriptionsItem']
    ElDropdown: typeof import('element-plus/es')['ElDropdown']
    ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
    ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu']
@@ -34,6 +36,8 @@ declare module 'vue' {
    ElSelect: typeof import('element-plus/es')['ElSelect']
    ElStatistic: typeof import('element-plus/es')['ElStatistic']
    ElSwitch: typeof import('element-plus/es')['ElSwitch']
+    ElTabPane: typeof import('element-plus/es')['ElTabPane']
+    ElTabs: typeof import('element-plus/es')['ElTabs']
    ElTag: typeof import('element-plus/es')['ElTag']
    ElUpload: typeof import('element-plus/es')['ElUpload']
    HelloWorld: typeof import('./components/HelloWorld.vue')['default']
--- a/web-app-vue/src/types/character.d.ts
+++ b/web-app-vue/src/types/character.d.ts
@@ -18,6 +18,11 @@ export interface Character {
  version: number
  firstMessage: string
  exampleMessages: string[]
+  systemPrompt: string
+  postHistoryInstructions: string
+  alternateGreetings: string[]
+  characterBook: any
+  extensions: Record<string, any>
  totalChats: number
  totalLikes: number
  usageCount: number
@@ -58,6 +63,11 @@ export interface CreateCharacterRequest {
  exampleMessages?: string[]
  tags?: string[]
  isPublic: boolean
+  systemPrompt?: string
+  postHistoryInstructions?: string
+  alternateGreetings?: string[]
+  characterBook?: any
+  extensions?: Record<string, any>
 }

 // 更新角色卡请求
@@ -82,6 +92,8 @@ export interface CharacterExportData {
    tags: string[]
    creator: string
    character_version: number
+    alternate_greetings: string[]
+    character_book?: any
    extensions: Record<string, any>
  }
 }
--- a/web-app-vue/src/views/character/Detail.vue
+++ b/web-app-vue/src/views/character/Detail.vue
@@ -41,7 +41,7 @@
              {{ character.isFavorited ? '已收藏' : '收藏' }}
            </el-button>
            <el-button
-              :icon="Like"
+              :icon="Top"
              @click="handleLike"
            >
              点赞 {{ character.totalLikes }}
@@ -107,6 +107,16 @@
              <h3>场景设定</h3>
              <p class="detail-text">{{ character.scenario || '暂无场景设定' }}</p>
            </div>
+
+            <div v-if="character.systemPrompt" class="detail-section">
+              <h3>系统提示词</h3>
+              <div class="message-box">{{ character.systemPrompt }}</div>
+            </div>
+
+            <div v-if="character.postHistoryInstructions" class="detail-section">
+              <h3>后置历史指令</h3>
+              <div class="message-box">{{ character.postHistoryInstructions }}</div>
+            </div>
          </el-tab-pane>

          <el-tab-pane label="对话示例">
@@ -129,6 +139,19 @@
            </div>
          </el-tab-pane>

+          <el-tab-pane v-if="character.alternateGreetings && character.alternateGreetings.length > 0" label="备用问候语">
+            <div class="detail-section">
+              <div
+                v-for="(greeting, index) in character.alternateGreetings"
+                :key="index"
+                class="message-box"
+              >
+                <div class="greeting-label">问候语 {{ index + 1 }}</div>
+                {{ greeting }}
+              </div>
+            </div>
+          </el-tab-pane>
+
          <el-tab-pane label="统计信息">
            <el-descriptions :column="2" border>
              <el-descriptions-item label="对话总数">
@@ -155,6 +178,12 @@
              <el-descriptions-item label="更新时间">
                {{ formatDateTime(character.updatedAt) }}
              </el-descriptions-item>
+              <el-descriptions-item v-if="character.extensions && Object.keys(character.extensions).length > 0" label="扩展数据">
+                {{ Object.keys(character.extensions).join(', ') }}
+              </el-descriptions-item>
+              <el-descriptions-item v-if="character.characterBook" label="角色书">
+                已配置
+              </el-descriptions-item>
            </el-descriptions>
          </el-tab-pane>

@@ -181,7 +210,7 @@ import {
  ChatLineSquare,
  Star,
  StarFilled,
-  Like,
+  Top,
  Download,
  Edit,
  Delete,
@@ -422,5 +451,12 @@ onMounted(async () => {
  &:last-child {
    margin-bottom: 0;
  }
+
+  .greeting-label {
+    font-size: 12px;
+    color: #909399;
+    margin-bottom: 8px;
+    font-weight: 600;
+  }
 }
 </style>
--- a/web-app-vue/src/views/character/Edit.vue
+++ b/web-app-vue/src/views/character/Edit.vue
@@ -131,6 +131,82 @@
            </el-button>
          </div>
        </el-form-item>
+
+        <el-form-item label="系统提示词">
+          <el-input
+            v-model="formData.systemPrompt"
+            type="textarea"
+            :rows="4"
+            placeholder="系统提示词（System Prompt），用于设定AI的行为和规则..."
+          />
+        </el-form-item>
+
+        <el-form-item label="后置历史指令">
+          <el-input
+            v-model="formData.postHistoryInstructions"
+            type="textarea"
+            :rows="4"
+            placeholder="后置历史指令（Post History Instructions），会被放在对话历史之后..."
+          />
+        </el-form-item>
+
+        <el-form-item label="备用问候语">
+          <div class="example-messages">
+            <div
+              v-for="(msg, index) in formData.alternateGreetings"
+              :key="'ag-' + index"
+              class="example-message-item"
+            >
+              <el-input
+                v-model="formData.alternateGreetings[index]"
+                type="textarea"
+                :rows="3"
+                placeholder="输入备用问候语..."
+              />
+              <el-button
+                type="danger"
+                :icon="Delete"
+                circle
+                @click="removeAlternateGreeting(index)"
+              />
+            </div>
+            <el-button
+              type="primary"
+              :icon="Plus"
+              plain
+              @click="addAlternateGreeting"
+            >
+              添加备用问候语
+            </el-button>
+          </div>
+        </el-form-item>
+      </el-card>
+
+      <el-card class="form-section">
+        <template #header>
+          <span>高级设置</span>
+        </template>
+
+        <el-form-item label="角色书">
+          <el-input
+            v-model="characterBookText"
+            type="textarea"
+            :rows="6"
+            placeholder="角色书/世界信息（JSON 格式），通常通过导入角色卡获取..."
+          />
+          <span class="form-tip">角色书数据为 JSON 格式，通常通过导入角色卡自动填入</span>
+        </el-form-item>
+
+        <el-form-item label="扩展数据">
+          <el-input
+            v-model="extensionsText"
+            type="textarea"
+            :rows="4"
+            placeholder="扩展数据（JSON 格式），如 depth_prompt 等..."
+            disabled
+          />
+          <span class="form-tip">扩展数据为只读字段，保留原版酒馆的扩展信息</span>
+        </el-form-item>
      </el-card>

      <el-card class="form-section">
@@ -199,7 +275,36 @@ const formData = reactive<CreateCharacterRequest>({
  firstMessage: '',
  exampleMessages: [],
  tags: [],
-  isPublic: false
+  isPublic: false,
+  systemPrompt: '',
+  postHistoryInstructions: '',
+  alternateGreetings: [],
+  characterBook: null,
+  extensions: null
+})
+
+// 角色书和扩展数据的文本表示（用于 JSON 编辑）
+const characterBookText = computed({
+  get: () => {
+    if (!formData.characterBook) return ''
+    return JSON.stringify(formData.characterBook, null, 2)
+  },
+  set: (val: string) => {
+    if (!val.trim()) {
+      formData.characterBook = null
+      return
+    }
+    try {
+      formData.characterBook = JSON.parse(val)
+    } catch {
+      // 解析失败时不更新，保留原值
+    }
+  }
+})
+
+const extensionsText = computed(() => {
+  if (!formData.extensions) return ''
+  return JSON.stringify(formData.extensions, null, 2)
 })

 // 常用标签
@@ -238,6 +343,16 @@ function removeExampleMessage(index: number) {
  formData.exampleMessages?.splice(index, 1)
 }

+// 添加备用问候语
+function addAlternateGreeting() {
+  formData.alternateGreetings?.push('')
+}
+
+// 删除备用问候语
+function removeAlternateGreeting(index: number) {
+  formData.alternateGreetings?.splice(index, 1)
+}
+
 // 返回
 function goBack() {
  router.back()
@@ -296,7 +411,12 @@ onMounted(async () => {
        firstMessage: character.firstMessage,
        exampleMessages: [...(character.exampleMessages || [])],
        tags: [...(character.tags || [])],
-        isPublic: character.isPublic
+        isPublic: character.isPublic,
+        systemPrompt: character.systemPrompt || '',
+        postHistoryInstructions: character.postHistoryInstructions || '',
+        alternateGreetings: [...(character.alternateGreetings || [])],
+        characterBook: character.characterBook || null,
+        extensions: character.extensions || null
      })
    }
  }