环境搭建配置

frontend-vue/src/pages/brand/components/BrandConvertTab.vue

@@ -1,6 +1,9 @@
 <template>
-  <div class="main-content">
-    <aside class="left-panel">
+  <div class="page-shell module-page">
+    <BrandTopBar active="convert" />
+
+    <div class="main-content">
+      <aside class="left-panel">
       <div class="section-title">选择文件</div>
       <div class="upload-zone">
         <div class="hint">选择需要转换的 Excel 文件或文件夹，将按所选模板生成 txt 文件。</div>
@@ -9,14 +12,6 @@
           <button type="button" class="opt-btn" @click="selectConvertFolder">选择文件夹</button>
         </div>
 
-        <el-alert
-          v-if="!hasPywebviewSupport"
-          class="desktop-alert"
-          type="warning"
-          :closable="false"
-          title="当前环境未检测到 pywebview，文件选择与本地格式转换能力需要在桌面端使用。"
-        />
-
         <div class="selected-files clean-placeholder">
           <template v-if="convertSelectedPaths.length">
             <span v-for="path in convertDisplayPaths" :key="path">{{ path }}</span>
@@ -29,10 +24,6 @@
       </div>
 
       <div class="section-title">模板选择</div>
-      <div class="template-toolbar">
-        <input v-model="convertTemplateName" class="template-name-input" type="text" placeholder="输入模板自定义名称（可选）" />
-        <button type="button" class="opt-btn small" @click="importConvertTemplate">上传模板</button>
-      </div>
       <div class="option-group">
         <label
           v-for="template in convertTemplates"
@@ -44,28 +35,15 @@
           <div class="template-item-content">
             <div>
               <span class="label">
-                {{ template.label }}
-                <span v-if="template.is_default" class="template-tag">默认</span>
-                <span v-else-if="template.built_in" class="template-tag muted">内置</span>
+                {{ template.templateName }}
+                <span v-if="template.isDefault" class="template-tag">默认</span>
+                <span v-else-if="template.builtIn" class="template-tag muted">内置</span>
               </span>
-              <div class="desc">输出文件：{{ template.output_filename }}</div>
+              <div class="desc">输出文件：{{ template.outputFilename }}</div>
             </div>
-            <button
-              v-if="!template.built_in"
-              type="button"
-              class="template-delete-btn"
-              @click.stop.prevent="deleteConvertTemplate(template.id)"
-            >
-              删除
-            </button>
           </div>
         </label>
       </div>
-      <div class="run-row compact-row">
-        <button type="button" class="opt-btn small" :disabled="!convertTemplateId" @click="setConvertDefaultTemplate">
-          设为默认模板
-        </button>
-      </div>
 
       <div class="section-title">转换说明</div>
       <div class="option-group">
@@ -73,7 +51,7 @@
           <input type="checkbox" checked disabled />
           <div>
             <span class="label">按当前模板输出</span>
-            <div class="desc">当前模板：{{ currentConvertTemplate?.label || '未加载模板' }}</div>
+            <div class="desc">当前模板：{{ currentConvertTemplate?.templateName || '未加载模板' }}</div>
           </div>
         </label>
 
@@ -107,11 +85,11 @@
           </div>
           <div class="summary-card">
             <span class="summary-label">成功结果</span>
-            <strong>{{ convertSummary.success_count }}</strong>
+            <strong>{{ convertSummary.successCount }}</strong>
           </div>
           <div class="summary-card">
             <span class="summary-label">失败文件</span>
-            <strong>{{ convertSummary.failed_count }}</strong>
+            <strong>{{ convertSummary.failedCount }}</strong>
           </div>
         </div>
 
@@ -127,12 +105,12 @@
           <ul v-else class="task-list clean-result-list">
             <li
               v-for="item in convertResultItems"
-              :key="`${item.output_path || item.source_path || item.error || 'convert'}`"
+              :key="`${item.resultId || item.outputFilename || item.sourceFilename}`"
               class="task-item"
             >
               <div class="left">
-                <span class="id" :title="item.source_path">{{ item.source_path || '-' }}</span>
-                <div v-if="item.output_path" class="files">结果下载地址已生成</div>
+                <span class="id" :title="item.sourceFilename">{{ item.sourceFilename || '-' }}</span>
+                <div v-if="item.outputFilename" class="files">输出文件：{{ item.outputFilename }}</div>
                 <div v-else-if="item.error" class="files">错误信息：{{ item.error }}</div>
               </div>
 
@@ -141,7 +119,7 @@
                   {{ item.success ? '已完成' : '失败' }}
                 </span>
                 <button
-                  v-if="item.success && item.output_path"
+                  v-if="item.success && item.downloadUrl"
                   type="button"
                   class="download"
                   @click="downloadConvertResult(item)"
@@ -149,10 +127,10 @@
                   下载文件
                 </button>
                 <button
-                  v-if="item.result_id"
+                  v-if="item.resultId"
                   type="button"
                   class="btn-delete"
-                  @click="deleteConvertHistory(item.result_id)"
+                  @click="deleteConvertHistoryRecord(item.resultId)"
                 >
                   删除
                 </button>
@@ -162,43 +140,50 @@
         </div>
       </div>
     </section>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import { computed, onMounted, ref } from 'vue'
 import { ElMessage } from 'element-plus'
+import BrandTopBar from './BrandTopBar.vue'
 import { expandBrandFolder } from '@/shared/api/brand'
-import { type ConvertTxtResultItem, type ConvertTxtTemplateItem, getPywebviewApi, hasPywebview } from '@/shared/bridges/pywebview'
+import { deleteConvertHistory, getConvertHistory, getConvertTemplates, runConvert, type ConvertResultItem, type ConvertRunVo, type ConvertTemplateVo } from '@/shared/api/java-modules'
+import { getPywebviewApi, type UploadedJavaFile } from '@/shared/bridges/pywebview'
 
-const hasPywebviewSupport = hasPywebview()
 const convertSelectedPaths = ref<string[]>([])
+const convertUploadedFiles = ref<UploadedJavaFile[]>([])
 const convertRunning = ref(false)
-const convertOutputDir = ref('')
-const convertResultItems = ref<ConvertTxtResultItem[]>([])
-const convertSummary = ref({ total: 0, success_count: 0, failed_count: 0 })
-const convertTemplates = ref<ConvertTxtTemplateItem[]>([])
-const convertTemplateId = ref('uk_offer')
-const convertTemplateName = ref('')
+const convertResultItems = ref<ConvertResultItem[]>([])
+const convertSummary = ref<ConvertRunVo>({ total: 0, successCount: 0, failedCount: 0, items: [] })
+const convertTemplates = ref<ConvertTemplateVo[]>([])
+const convertTemplateId = ref('')
 const convertDisplayPaths = computed(() => convertSelectedPaths.value.slice(0, 8))
 const currentConvertTemplate = computed(
   () => convertTemplates.value.find((item) => item.id === convertTemplateId.value) || null,
 )
 
-function shorten(value: string, maxLength: number) {
-  return value.length > maxLength ? `${value.slice(0, maxLength)}...` : value
-}
-
-function resetConvertResults() {
-  convertSummary.value = { total: 0, success_count: 0, failed_count: 0 }
-  convertOutputDir.value = ''
+async function uploadPathsToJava(paths: string[]) {
+  const api = getPywebviewApi()
+  if (!api?.upload_file_to_java) {
+    throw new Error('当前桌面端未提供文件上传桥接能力')
+  }
+  const uploaded: UploadedJavaFile[] = []
+  for (const path of paths) {
+    const result = await api.upload_file_to_java(path)
+    if (!result?.success || !result.data) {
+      throw new Error(result?.error || result?.message || `上传失败：${path}`)
+    }
+    uploaded.push(result.data)
+  }
+  return uploaded
 }
 
 async function loadConvertTemplates() {
-  const api = getPywebviewApi()
-  const templates = await api?.list_txt_templates?.()
-  convertTemplates.value = Array.isArray(templates) ? templates : []
-  const defaultTemplate = convertTemplates.value.find((item) => item.is_default)
+  const templates = await getConvertTemplates()
+  convertTemplates.value = templates || []
+  const defaultTemplate = convertTemplates.value.find((item) => item.isDefault)
   if (defaultTemplate) {
     convertTemplateId.value = defaultTemplate.id
     return
@@ -208,79 +193,23 @@ async function loadConvertTemplates() {
   }
 }
 
-async function importConvertTemplate() {
-  const api = getPywebviewApi()
-  if (!api?.import_txt_template) {
-    ElMessage.warning('当前环境不支持模板上传，请在桌面端打开')
-    return
-  }
-
-  const result = await api.import_txt_template(convertTemplateName.value.trim() || undefined)
-  if (!result.success) {
-    if (result.error && result.error !== '用户取消') {
-      ElMessage.error(result.error)
-    }
-    return
-  }
-
-  convertTemplateName.value = ''
-  await loadConvertTemplates()
-  if (result.template?.id) {
-    convertTemplateId.value = result.template.id
-  }
-  ElMessage.success('模板导入成功')
-}
-
-async function deleteConvertTemplate(templateId: string) {
-  const api = getPywebviewApi()
-  if (!api?.delete_txt_template) {
-    ElMessage.warning('当前环境不支持删除模板')
-    return
-  }
-
-  const result = await api.delete_txt_template(templateId)
-  if (!result.success) {
-    ElMessage.error(result.error || '删除模板失败')
-    return
-  }
-
-  if (convertTemplateId.value === templateId) {
-    convertTemplateId.value = ''
-  }
-  await loadConvertTemplates()
-  ElMessage.success('模板已删除')
-}
-
-async function setConvertDefaultTemplate() {
-  const api = getPywebviewApi()
-  if (!api?.set_default_txt_template || !convertTemplateId.value) {
-    ElMessage.warning('当前环境不支持设置默认模板')
-    return
-  }
-
-  const result = await api.set_default_txt_template(convertTemplateId.value)
-  if (!result.success) {
-    ElMessage.error(result.error || '设置默认模板失败')
-    return
-  }
-
-  await loadConvertTemplates()
-  ElMessage.success('默认模板已更新')
+async function handleSelectedPaths(paths: string[], successMessage: string) {
+  convertSelectedPaths.value = paths
+  convertUploadedFiles.value = await uploadPathsToJava(paths)
+  ElMessage.success(successMessage)
 }
 
 async function selectConvertFiles() {
   const api = getPywebviewApi()
-  if (!api?.select_clean_xlsx_files) {
-    ElMessage.warning('当前环境不支持文件选择，请在桌面端打开')
+  if (!api?.select_brand_xlsx_files) {
+    ElMessage.warning('当前环境不支持文件选择，请在本机客户端中打开')
     return
   }
 
   try {
-    const paths = await api.select_clean_xlsx_files()
+    const paths = await api.select_brand_xlsx_files()
     if (!paths?.length) return
-    convertSelectedPaths.value = paths
-    resetConvertResults()
-    ElMessage.success(`已选择 ${paths.length} 个待转换文件`)
+    await handleSelectedPaths(paths, `已选择 ${paths.length} 个待转换文件`)
   } catch (error) {
     ElMessage.error(error instanceof Error ? error.message : '选择失败')
   }
@@ -288,20 +217,18 @@ async function selectConvertFiles() {
 
 async function selectConvertFolder() {
   const api = getPywebviewApi()
-  if (!api?.select_clean_folder) {
-    ElMessage.warning('当前环境不支持文件夹选择，请在桌面端打开')
+  if (!api?.select_brand_folder) {
+    ElMessage.warning('当前环境不支持文件夹选择，请在本机客户端中打开')
     return
   }
 
   try {
-    const folder = await api.select_clean_folder()
+    const folder = await api.select_brand_folder()
     if (!folder) return
 
     const result = await expandBrandFolder(folder)
     if (result.success && result.paths?.length) {
-      convertSelectedPaths.value = result.paths
-      resetConvertResults()
-      ElMessage.success(`已选择文件夹内 ${result.paths.length} 个 xlsx 文件`)
+      await handleSelectedPaths(result.paths, `已选择文件夹内 ${result.paths.length} 个 xlsx 文件`)
       return
     }
 
@@ -312,34 +239,23 @@ async function selectConvertFolder() {
 }
 
 async function submitConvertRun() {
-  const api = getPywebviewApi()
-  if (!api?.convert_excel_to_uk_txt) {
-    ElMessage.warning('当前环境不支持格式转换，请在桌面端打开')
+  if (!convertUploadedFiles.value.length) {
+    ElMessage.warning('请先选择待转换 Excel 文件或文件夹')
     return
   }
-  if (!convertSelectedPaths.value.length) {
-    ElMessage.warning('请先选择待转换 Excel 文件或文件夹')
+  if (!convertTemplateId.value) {
+    ElMessage.warning('请先选择模板')
     return
   }
 
   try {
     convertRunning.value = true
-    const result = await api.convert_excel_to_uk_txt({
-      paths: convertSelectedPaths.value,
-      template_id: convertTemplateId.value,
+    const result = await runConvert({
+      files: convertUploadedFiles.value.map((item) => ({ fileKey: item.fileKey, originalFilename: item.originalFilename })),
+      templateId: convertTemplateId.value,
     })
-
-    if (!result.success) {
-      ElMessage.error(result.error || '格式转换失败')
-      return
-    }
-
-    convertOutputDir.value = ''
-    convertSummary.value = {
-      total: result.summary?.total || 0,
-      success_count: result.summary?.success_count || 0,
-      failed_count: result.summary?.failed_count || 0,
-    }
+    convertSummary.value = result
+    convertResultItems.value = result.items || []
     await loadConvertHistory()
     ElMessage.success('格式转换完成')
   } catch (error) {
@@ -349,36 +265,41 @@ async function submitConvertRun() {
   }
 }
 
-async function deleteConvertHistory(resultId: number) {
-  const api = getPywebviewApi()
-  if (!api?.delete_history_item) {
-    ElMessage.warning('当前环境不支持删除历史')
-    return
+async function loadConvertHistory() {
+  try {
+    const response = await getConvertHistory()
+    convertResultItems.value = response.items || []
+    convertSummary.value = {
+      total: response.items?.length || 0,
+      successCount: response.items?.filter((item) => item.success).length || 0,
+      failedCount: response.items?.filter((item) => !item.success).length || 0,
+      items: response.items || [],
+    }
+  } catch {
+    // ignore history load errors
   }
-
-  const result = await api.delete_history_item('convert', resultId)
-  if (!result.success) {
-    ElMessage.error(result.error || '删除失败')
-    return
-  }
-  await loadConvertHistory()
-  ElMessage.success('已删除')
 }
 
-async function downloadConvertResult(item: ConvertTxtResultItem) {
+async function deleteConvertHistoryRecord(resultId: number) {
+  try {
+    await deleteConvertHistory(resultId)
+    await loadConvertHistory()
+    ElMessage.success('已删除')
+  } catch (error) {
+    ElMessage.error(error instanceof Error ? error.message : '删除失败')
+  }
+}
+
+async function downloadConvertResult(item: ConvertResultItem) {
   const api = getPywebviewApi()
-  if (!item.output_path) {
+  if (!item.downloadUrl) {
     ElMessage.warning('当前结果没有下载地址')
     return
   }
 
-  const today = new Date()
-  const yyyy = String(today.getFullYear())
-  const mm = String(today.getMonth() + 1).padStart(2, '0')
-  const dd = String(today.getDate()).padStart(2, '0')
-  const filename = `${yyyy}${mm}${dd}.txt`
+  const filename = item.outputFilename || `${new Date().toISOString().slice(0, 10).replace(/-/g, '')}.txt`
   if (api?.save_file_from_url) {
-    const result = await api.save_file_from_url(item.output_path, filename)
+    const result = await api.save_file_from_url(item.downloadUrl, filename)
     if (result.success) {
       ElMessage.success(`已保存：${result.path || filename}`)
     } else if (result.error && result.error !== '用户取消') {
@@ -387,25 +308,7 @@ async function downloadConvertResult(item: ConvertTxtResultItem) {
     return
   }
 
-  window.open(item.output_path, '_blank')
-}
-
-async function loadConvertHistory() {
-  const api = getPywebviewApi()
-  if (!api?.get_convert_history) return
-
-  try {
-    const response = await api.get_convert_history()
-    if (!response.success || !response.items) return
-    convertResultItems.value = response.items
-    convertSummary.value = {
-      total: response.items.length,
-      success_count: response.items.filter((item) => item.success).length,
-      failed_count: response.items.filter((item) => !item.success).length,
-    }
-  } catch {
-    // ignore history load errors
-  }
+  window.open(item.downloadUrl, '_blank')
 }
 
 onMounted(() => {
@@ -415,7 +318,8 @@ onMounted(() => {
 </script>
 
 <style scoped>
-.main-content { display: flex; height: calc(100vh - 56px); }
+.module-page { min-height: 100vh; background: #1a1a1a; }
+.main-content { display: flex; min-height: calc(100vh - 56px); height: calc(100vh - 56px); }
 .left-panel { width: 380px; background: #1e1e1e; padding: 20px; overflow-y: auto; border-right: 1px solid #2a2a2a; }
 .right-panel { flex: 1; display: flex; flex-direction: column; min-width: 0; background: #1a1a1a; }
 .section-title { font-size: 13px; color: #bbb; margin-bottom: 10px; }
@@ -423,29 +327,22 @@ onMounted(() => {
 .upload-zone:hover { border-color: #3498db; background: #2a2a2a; }
 .hint { color: #888; font-size: 13px; margin-bottom: 12px; line-height: 1.5; }
 .btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
-.opt-btn, .btn-run, .download { border: none; cursor: pointer; transition: all 0.2s ease; }
+.opt-btn, .btn-run, .download, .btn-delete { border: none; cursor: pointer; transition: all 0.2s ease; }
 .opt-btn { padding: 8px 16px; font-size: 13px; color: #ccc; background: #2a2a2a; border: 1px solid #3a3a3a; border-radius: 6px; }
 .opt-btn.small { padding: 6px 10px; font-size: 12px; }
 .opt-btn:hover { color: #3498db; background: #333; border-color: #3498db; }
-.desktop-alert { margin-top: 14px; text-align: left; }
 .selected-files { margin-top: 14px; font-size: 12px; color: #888; max-height: 112px; overflow-y: auto; text-align: left; }
 .selected-files span { display: block; margin: 4px 0; word-break: break-all; }
 .more-line { color: #b8c1cc; }
 .option-group { margin-bottom: 20px; }
-.template-toolbar { display: flex; gap: 10px; margin-bottom: 12px; }
-.template-name-input { flex: 1; min-width: 0; padding: 8px 12px; border-radius: 8px; border: 1px solid #3a3a3a; background: #202020; color: #e0e0e0; font-size: 13px; }
-.template-name-input::placeholder { color: #7f8790; }
-.template-tag { margin-left: 8px; padding: 2px 8px; border-radius: 999px; font-size: 11px; color: #8fd0ff; background: rgba(52, 152, 219, 0.14); }
-.template-tag.muted { color: #b8b8b8; background: rgba(255, 255, 255, 0.08); }
-.compact-row { margin-top: 4px; }
- .radio-item { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; padding: 10px 12px; border-radius: 8px; background: #252525; border: 1px solid #2a2a2a; margin-bottom: 8px; transition: all 0.2s ease; }
+.radio-item { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; padding: 10px 12px; border-radius: 8px; background: #252525; border: 1px solid #2a2a2a; margin-bottom: 8px; transition: all 0.2s ease; }
 .template-item-content { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; }
-.template-delete-btn { padding: 6px 10px; border: 1px solid #5c2f2f; border-radius: 6px; background: rgba(231, 76, 60, 0.12); color: #ff8f8f; font-size: 12px; cursor: pointer; }
-.template-delete-btn:hover { background: rgba(231, 76, 60, 0.2); }
 .radio-item:hover, .radio-item.active { background: #2a2a2a; border-color: #3a3a3a; }
 .radio-item input { margin-top: 3px; }
 .label { font-weight: 500; color: #e0e0e0; font-size: 13px; }
 .desc { font-size: 12px; color: #888; margin-top: 2px; line-height: 1.5; font-weight: 400; }
+.template-tag { margin-left: 8px; padding: 2px 8px; border-radius: 999px; font-size: 11px; color: #8fd0ff; background: rgba(52, 152, 219, 0.14); }
+.template-tag.muted { color: #b8b8b8; background: rgba(255, 255, 255, 0.08); }
 .run-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px; margin-top: 16px; }
 .btn-run { padding: 10px 22px; background: #3498db; color: #fff; border-radius: 8px; font-size: 14px; }
 .btn-run:hover { background: #2980b9; }
@@ -464,6 +361,8 @@ onMounted(() => {
 .status.failed { background: rgba(231, 76, 60, 0.18); color: #ff6b6b; }
 .download { padding: 6px 10px; border-radius: 6px; font-size: 12px; background: rgba(52, 152, 219, 0.18); color: #69b6ff; }
 .download:hover { background: rgba(52, 152, 219, 0.28); }
+.btn-delete { padding: 6px 10px; border-radius: 6px; font-size: 12px; background: rgba(231, 76, 60, 0.12); color: #ff8f8f; }
+.btn-delete:hover { background: rgba(231, 76, 60, 0.22); }
 .empty-tasks { color: #666; font-size: 13px; padding: 24px 8px; }
 .clean-placeholder { max-height: none; }
 .clean-result-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 220px)); gap: 16px; margin-bottom: 18px; }
@@ -472,7 +371,5 @@ onMounted(() => {
 .summary-label { font-size: 12px; color: #8d8d8d; }
 .result-list-wrap { border: 1px solid #2a2a2a; border-radius: 10px; background: #1e1e1e; min-height: 260px; }
 .result-list-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-bottom: 1px solid #2a2a2a; font-size: 14px; color: #ddd; }
-.download-all { padding: 7px 12px; border: 1px solid #2f5f85; border-radius: 6px; background: rgba(52, 152, 219, 0.14); color: #69b6ff; font-size: 12px; cursor: pointer; }
-.download-all:disabled { cursor: not-allowed; opacity: 0.55; }
 @media (max-width: 1100px) { .main-content { flex-direction: column; height: auto; } .left-panel { width: 100%; border-right: none; border-bottom: 1px solid #2a2a2a; } .right-panel { min-height: 420px; } .task-item { flex-direction: column; align-items: flex-start; } .task-right { width: 100%; justify-content: flex-start; } .clean-result-summary { grid-template-columns: 1fr; } }
-</style>
+</style>