更新号池编辑环境

src/api/accountPool.js

@@ -42,3 +42,11 @@ export function extractAccountPool(module, data) {
     data,
   });
 }
+
+export function updateAccountPoolRemark(module, data) {
+  return request({
+    url: `${base(module)}/updateRemark`,
+    method: 'post',
+    data,
+  });
+}

src/views/accountpool/cursor/components/detail.vue

@@ -0,0 +1,109 @@
+<script setup>
+import { computed, ref, watch } from 'vue';
+
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: false,
+  },
+  row: {
+    type: Object,
+    default: null,
+  },
+  saveLoading: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(['update:modelValue', 'save-remark']);
+const remarkText = ref('');
+
+function typeText(type) {
+  if (type === 'account') return '账号密码';
+  if (type === 'account_tk') return '账号密码+Token';
+  return 'Token';
+}
+
+const PLATFORM_MAP = {
+  local: { label: '本地', type: 'info' },
+  xianyu: { label: '闲鱼', type: 'warning' },
+  pinduoduo: { label: '拼多多', type: 'danger' },
+  jingdong: { label: '京东', type: 'primary' },
+  douyin: { label: '抖音', type: 'success' },
+};
+
+const platformLabel = computed(() => {
+  if (!props.row?.extractedPlatform) return '-';
+  return PLATFORM_MAP[props.row.extractedPlatform]?.label || props.row.extractedPlatform;
+});
+
+const platformType = computed(() => {
+  if (!props.row?.extractedPlatform) return 'info';
+  return PLATFORM_MAP[props.row.extractedPlatform]?.type || 'info';
+});
+
+watch(
+  () => props.row,
+  (row) => {
+    remarkText.value = row?.remark || '';
+  },
+  { immediate: true }
+);
+
+function onSaveRemark() {
+  if (!props.row?.id) return;
+  emit('save-remark', { id: props.row.id, remark: remarkText.value || '' });
+}
+</script>
+
+<template>
+  <el-dialog
+    :model-value="modelValue"
+    title="账号详情"
+    width="560px"
+    @update:model-value="(v) => emit('update:modelValue', v)"
+  >
+    <el-descriptions :column="1" border v-if="row">
+      <el-descriptions-item label="ID">{{ row.id }}</el-descriptions-item>
+      <el-descriptions-item label="账号类型">{{ typeText(row.type) }}</el-descriptions-item>
+      <el-descriptions-item label="账号">{{ row.account || '-' }}</el-descriptions-item>
+      <el-descriptions-item label="密码">{{ row.password || '-' }}</el-descriptions-item>
+      <el-descriptions-item label="Token">
+        <span class="token-text">{{ row.token || '-' }}</span>
+      </el-descriptions-item>
+      <el-descriptions-item label="提取状态">
+        {{ row.extracted ? '已提取' : '未提取' }}
+      </el-descriptions-item>
+      <el-descriptions-item label="提取时间">{{ row.extractedAt || '-' }}</el-descriptions-item>
+      <el-descriptions-item label="提取平台">
+        <el-tag v-if="row.extractedPlatform" :type="platformType" size="small">
+          {{ platformLabel }}
+        </el-tag>
+        <span v-else>-</span>
+      </el-descriptions-item>
+      <el-descriptions-item label="备注">
+        <div class="remark-edit-wrap">
+          <el-input v-model="remarkText" type="textarea" :rows="3" placeholder="请输入备注" />
+          <el-button type="primary" size="small" :loading="saveLoading" @click="onSaveRemark">
+            保存备注
+          </el-button>
+        </div>
+      </el-descriptions-item>
+    </el-descriptions>
+  </el-dialog>
+</template>
+
+<style scoped>
+.token-text {
+  word-break: break-all;
+  white-space: pre-wrap;
+  line-height: 1.6;
+}
+
+.remark-edit-wrap {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+</style>

src/views/accountpool/cursor/components/extract.vue

@@ -0,0 +1,80 @@
+<script setup>
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: false,
+  },
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+  type: {
+    type: String,
+    default: 'account',
+  },
+  platform: {
+    type: String,
+    default: 'local',
+  },
+  remark: {
+    type: String,
+    default: '',
+  },
+  platformMap: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+
+const emit = defineEmits(['update:modelValue', 'update:platform', 'update:remark', 'confirm']);
+
+function typeText(type) {
+  if (type === 'account') return '账号密码';
+  if (type === 'account_tk') return '账号密码+Token';
+  return 'Token';
+}
+</script>
+
+<template>
+  <el-dialog
+    :model-value="modelValue"
+    title="提取账号"
+    width="420px"
+    @update:model-value="(v) => emit('update:modelValue', v)"
+  >
+    <el-form label-width="84px">
+      <el-form-item label="提取类型">
+        <el-input :model-value="typeText(type)" disabled />
+      </el-form-item>
+      <el-form-item label="提取平台">
+        <el-select
+          :model-value="platform"
+          style="width: 100%"
+          @update:model-value="(v) => emit('update:platform', v)"
+        >
+          <el-option
+            v-for="(v, k) in platformMap"
+            :key="k"
+            :value="k"
+            :label="v.label"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注">
+        <el-input
+          :model-value="remark"
+          type="textarea"
+          :rows="3"
+          placeholder="提取备注（可选）"
+          @update:model-value="(v) => emit('update:remark', v)"
+        />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button @click="emit('update:modelValue', false)">取消</el-button>
+      <el-button type="primary" :loading="loading" @click="emit('confirm')">
+        确认提取
+      </el-button>
+    </template>
+  </el-dialog>
+</template>

src/views/accountpool/cursor/index.vue

@@ -2,12 +2,15 @@
 import { computed, onMounted, reactive, ref, watch } from 'vue';
 import { ElMessage } from 'element-plus';
 import Edit from './components/edit.vue';
+import DetailDialog from './components/detail.vue';
+import ExtractDialog from './components/extract.vue';
 import {
   addAccountPool,
   batchAddAccountPool,
   extractAccountPool,
   getAccountPoolDetail,
   getAccountPoolList,
+  updateAccountPoolRemark,
 } from '@/api/accountPool';
 
 const moduleKey = 'cursor';
@@ -29,6 +32,7 @@ const activeTypeTab = ref('all');
 const extractForm = reactive({
   platform: 'local',
   type: 'account',
+  remark: '',
 });
 
 const tableData = ref([]);
@@ -36,6 +40,7 @@ const total = ref(0);
 
 const selectedRows = ref([]);
 const detailRow = ref(null);
+const detailRemarkSaving = ref(false);
 const pagination = reactive({
   page: 1,
   pageSize: 20,
@@ -77,14 +82,6 @@ function openAddDialog(mode = 'single') {
   editVisible.value = true;
 }
 
-function nowText() {
-  const d = new Date();
-  const p = (v) => String(v).padStart(2, '0');
-  return `${d.getFullYear()}-${p(d.getMonth() + 1)}-${p(d.getDate())} ${p(
-    d.getHours()
-  )}:${p(d.getMinutes())}:${p(d.getSeconds())}`;
-}
-
 async function saveRows(rows) {
   if (!rows.length) return;
   if (rows.length === 1) {
@@ -127,17 +124,11 @@ function openDetail(row) {
     });
 }
 
-function openExtractDialog() {
-  extractTargetRow.value = null;
-  extractForm.platform = 'local';
-  extractForm.type = 'account';
-  extractVisible.value = true;
-}
-
 function openExtractByRow(row) {
   extractTargetRow.value = row;
   extractForm.platform = 'local';
   extractForm.type = row.type;
+  extractForm.remark = row.remark || '';
   extractVisible.value = true;
 }
 
@@ -153,6 +144,7 @@ async function handleExtract() {
       id: target.id,
       type: target.type,
       platform: extractForm.platform,
+      remark: extractForm.remark || '',
     });
     if (res?.code !== 200) {
       ElMessage.error(res?.msg || '提取失败');
@@ -166,6 +158,25 @@ async function handleExtract() {
   }
 }
 
+async function handleSaveRemark(payload) {
+  if (!payload?.id) return;
+  detailRemarkSaving.value = true;
+  try {
+    const res = await updateAccountPoolRemark(moduleKey, payload);
+    if (res?.code !== 200) {
+      ElMessage.error(res?.msg || '备注更新失败');
+      return;
+    }
+    ElMessage.success('备注已更新');
+    if (detailRow.value?.id === payload.id) {
+      detailRow.value = { ...detailRow.value, remark: payload.remark || '' };
+    }
+    await fetchList();
+  } finally {
+    detailRemarkSaving.value = false;
+  }
+}
+
 function markExtractForSelected() {
   if (!selectedRows.value.length) {
     ElMessage.warning('请先选择数据');
@@ -443,57 +454,24 @@ function copyCardInfo(row) {
 
     <Edit v-model="editVisible" :mode="editMode" @submit="handleEditSubmit" />
 
-    <el-dialog v-model="detailVisible" title="账号详情" width="560px">
-      <el-descriptions :column="1" border v-if="detailRow">
-        <el-descriptions-item label="ID">{{ detailRow.id }}</el-descriptions-item>
-        <el-descriptions-item label="账号类型">
-          {{ typeText(detailRow.type) }}
-        </el-descriptions-item>
-        <el-descriptions-item label="账号">
-          {{ detailRow.account || '-' }}
-        </el-descriptions-item>
-        <el-descriptions-item label="密码">
-          {{ detailRow.password || '-' }}
-        </el-descriptions-item>
-        <el-descriptions-item label="Token">
-          <span class="token-text">{{ detailRow.token || '-' }}</span>
-        </el-descriptions-item>
-        <el-descriptions-item label="提取状态">
-          {{ detailRow.extracted ? '已提取' : '未提取' }}
-        </el-descriptions-item>
-        <el-descriptions-item label="提取时间">
-          {{ detailRow.extractedAt || '-' }}
-        </el-descriptions-item>
-        <el-descriptions-item label="提取平台">
-          <el-tag v-if="detailRow.extractedPlatform" :type="platformTagType(detailRow.extractedPlatform)" size="small">
-            {{ platformText(detailRow.extractedPlatform) }}
-          </el-tag>
-          <span v-else>-</span>
-        </el-descriptions-item>
-        <el-descriptions-item label="备注">
-          {{ detailRow.remark || '-' }}
-        </el-descriptions-item>
-      </el-descriptions>
-    </el-dialog>
+    <DetailDialog
+      v-model="detailVisible"
+      :row="detailRow"
+      :save-loading="detailRemarkSaving"
+      @save-remark="handleSaveRemark"
+    />
 
-    <el-dialog v-model="extractVisible" title="提取账号" width="420px">
-      <el-form label-width="84px">
-        <el-form-item label="提取类型">
-          <el-input :model-value="typeText(extractForm.type)" disabled />
-        </el-form-item>
-        <el-form-item label="提取平台">
-          <el-select v-model="extractForm.platform" style="width:100%">
-            <el-option v-for="(v, k) in PLATFORM_MAP" :key="k" :value="k" :label="v.label" />
-          </el-select>
-        </el-form-item>
-      </el-form>
-      <template #footer>
-        <el-button @click="extractVisible = false">取消</el-button>
-        <el-button type="primary" :loading="loading" @click="handleExtract">
-          确认提取
-        </el-button>
-      </template>
-    </el-dialog>
+    <ExtractDialog
+      v-model="extractVisible"
+      :loading="loading"
+      :type="extractForm.type"
+      :platform="extractForm.platform"
+      :remark="extractForm.remark"
+      :platform-map="PLATFORM_MAP"
+      @update:platform="(v) => (extractForm.platform = v)"
+      @update:remark="(v) => (extractForm.remark = v)"
+      @confirm="handleExtract"
+    />
 
     <!-- 接口说明抽屉 -->
     <el-drawer v-model="apiDocVisible" title="提卡接口说明" size="560px" direction="rtl">
@@ -689,11 +667,6 @@ function copyCardInfo(row) {
   margin: 0;
 }
 
-.token-text {
-  word-break: break-all;
-  white-space: pre-wrap;
-  line-height: 1.6;
-}
 </style>
 
 <style>

src/views/accountpool/kiro/components/detail.vue

@@ -0,0 +1,96 @@
+<script setup>
+import { computed, ref, watch } from 'vue';
+
+const props = defineProps({
+  modelValue: { type: Boolean, default: false },
+  row: { type: Object, default: null },
+  saveLoading: { type: Boolean, default: false },
+});
+
+const emit = defineEmits(['update:modelValue', 'save-remark']);
+const remarkText = ref('');
+
+function typeText(type) {
+  if (type === 'account') return '账号密码';
+  if (type === 'account_tk') return '账号密码+Token';
+  return 'Token';
+}
+
+const PLATFORM_MAP = {
+  local: { label: '本地', type: 'info' },
+  xianyu: { label: '闲鱼', type: 'warning' },
+  pinduoduo: { label: '拼多多', type: 'danger' },
+  jingdong: { label: '京东', type: 'primary' },
+  douyin: { label: '抖音', type: 'success' },
+};
+
+const platformLabel = computed(() => {
+  if (!props.row?.extractedPlatform) return '-';
+  return PLATFORM_MAP[props.row.extractedPlatform]?.label || props.row.extractedPlatform;
+});
+
+const platformType = computed(() => {
+  if (!props.row?.extractedPlatform) return 'info';
+  return PLATFORM_MAP[props.row.extractedPlatform]?.type || 'info';
+});
+
+watch(
+  () => props.row,
+  (row) => {
+    remarkText.value = row?.remark || '';
+  },
+  { immediate: true }
+);
+
+function onSaveRemark() {
+  if (!props.row?.id) return;
+  emit('save-remark', { id: props.row.id, remark: remarkText.value || '' });
+}
+</script>
+
+<template>
+  <el-dialog
+    :model-value="modelValue"
+    title="账号详情"
+    width="560px"
+    @update:model-value="(v) => emit('update:modelValue', v)"
+  >
+    <el-descriptions :column="1" border v-if="row">
+      <el-descriptions-item label="ID">{{ row.id }}</el-descriptions-item>
+      <el-descriptions-item label="账号类型">{{ typeText(row.type) }}</el-descriptions-item>
+      <el-descriptions-item label="账号">{{ row.account || '-' }}</el-descriptions-item>
+      <el-descriptions-item label="密码">{{ row.password || '-' }}</el-descriptions-item>
+      <el-descriptions-item label="Token">
+        <span class="token-text">{{ row.token || '-' }}</span>
+      </el-descriptions-item>
+      <el-descriptions-item label="提取状态">{{ row.extracted ? '已提取' : '未提取' }}</el-descriptions-item>
+      <el-descriptions-item label="提取时间">{{ row.extractedAt || '-' }}</el-descriptions-item>
+      <el-descriptions-item label="提取平台">
+        <el-tag v-if="row.extractedPlatform" :type="platformType" size="small">{{ platformLabel }}</el-tag>
+        <span v-else>-</span>
+      </el-descriptions-item>
+      <el-descriptions-item label="备注">
+        <div class="remark-edit-wrap">
+          <el-input v-model="remarkText" type="textarea" :rows="3" placeholder="请输入备注" />
+          <el-button type="primary" size="small" :loading="saveLoading" @click="onSaveRemark">
+            保存备注
+          </el-button>
+        </div>
+      </el-descriptions-item>
+    </el-descriptions>
+  </el-dialog>
+</template>
+
+<style scoped>
+.token-text {
+  word-break: break-all;
+  white-space: pre-wrap;
+  line-height: 1.6;
+}
+
+.remark-edit-wrap {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+</style>

src/views/accountpool/kiro/components/extract.vue

@@ -0,0 +1,55 @@
+<script setup>
+const props = defineProps({
+  modelValue: { type: Boolean, default: false },
+  loading: { type: Boolean, default: false },
+  type: { type: String, default: 'account' },
+  platform: { type: String, default: 'local' },
+  remark: { type: String, default: '' },
+  platformMap: { type: Object, default: () => ({}) },
+});
+
+const emit = defineEmits(['update:modelValue', 'update:platform', 'update:remark', 'confirm']);
+
+function typeText(type) {
+  if (type === 'account') return '账号密码';
+  if (type === 'account_tk') return '账号密码+Token';
+  return 'Token';
+}
+</script>
+
+<template>
+  <el-dialog
+    :model-value="modelValue"
+    title="提取账号"
+    width="420px"
+    @update:model-value="(v) => emit('update:modelValue', v)"
+  >
+    <el-form label-width="84px">
+      <el-form-item label="提取类型">
+        <el-input :model-value="typeText(type)" disabled />
+      </el-form-item>
+      <el-form-item label="提取平台">
+        <el-select
+          :model-value="platform"
+          style="width: 100%"
+          @update:model-value="(v) => emit('update:platform', v)"
+        >
+          <el-option v-for="(v, k) in platformMap" :key="k" :value="k" :label="v.label" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注">
+        <el-input
+          :model-value="remark"
+          type="textarea"
+          :rows="3"
+          placeholder="提取备注（可选）"
+          @update:model-value="(v) => emit('update:remark', v)"
+        />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button @click="emit('update:modelValue', false)">取消</el-button>
+      <el-button type="primary" :loading="loading" @click="emit('confirm')">确认提取</el-button>
+    </template>
+  </el-dialog>
+</template>

src/views/accountpool/kiro/index.vue

@@ -2,12 +2,15 @@
 import { computed, onMounted, reactive, ref, watch } from 'vue';
 import { ElMessage } from 'element-plus';
 import Edit from './components/edit.vue';
+import DetailDialog from './components/detail.vue';
+import ExtractDialog from './components/extract.vue';
 import {
   addAccountPool,
   batchAddAccountPool,
   extractAccountPool,
   getAccountPoolDetail,
   getAccountPoolList,
+  updateAccountPoolRemark,
 } from '@/api/accountPool';
 
 const moduleKey = 'krio';
@@ -23,12 +26,13 @@ const apiDocVisible = ref(false);
 const query = reactive({ keyword: '', status: '' });
 const activeTypeTab = ref('all');
 
-const extractForm = reactive({ platform: 'local', type: 'account' });
+const extractForm = reactive({ platform: 'local', type: 'account', remark: '' });
 
 const tableData = ref([]);
 const total = ref(0);
 const selectedRows = ref([]);
 const detailRow = ref(null);
+const detailRemarkSaving = ref(false);
 const pagination = reactive({ page: 1, pageSize: 30 });
 
 const pagedList = computed(() => tableData.value);
@@ -88,6 +92,7 @@ function openExtractByRow(row) {
   extractTargetRow.value = row;
   extractForm.platform = 'local';
   extractForm.type = row.type;
+  extractForm.remark = row.remark || '';
   extractVisible.value = true;
 }
 
@@ -97,7 +102,7 @@ async function handleExtract() {
     const target = extractTargetRow.value;
     if (!target) { ElMessage.warning('未找到提取目标'); return; }
     const res = await extractAccountPool(moduleKey, {
-      id: target.id, type: target.type, platform: extractForm.platform,
+      id: target.id, type: target.type, platform: extractForm.platform, remark: extractForm.remark || '',
     });
     if (res?.code !== 200) { ElMessage.error(res?.msg || '提取失败'); return; }
     ElMessage.success('提取成功');
@@ -106,6 +111,20 @@ async function handleExtract() {
   } finally { loading.value = false; }
 }
 
+async function handleSaveRemark(payload) {
+  if (!payload?.id) return;
+  detailRemarkSaving.value = true;
+  try {
+    const res = await updateAccountPoolRemark(moduleKey, payload);
+    if (res?.code !== 200) { ElMessage.error(res?.msg || '备注更新失败'); return; }
+    ElMessage.success('备注已更新');
+    if (detailRow.value?.id === payload.id) {
+      detailRow.value = { ...detailRow.value, remark: payload.remark || '' };
+    }
+    await fetchList();
+  } finally { detailRemarkSaving.value = false; }
+}
+
 function markExtractForSelected() {
   if (!selectedRows.value.length) { ElMessage.warning('请先选择数据'); return; }
   loading.value = true;
@@ -329,43 +348,24 @@ function copyCardInfo(row) {
 
     <Edit v-model="editVisible" :mode="editMode" @submit="handleEditSubmit" />
 
-    <el-dialog v-model="detailVisible" title="账号详情" width="560px">
-      <el-descriptions :column="1" border v-if="detailRow">
-        <el-descriptions-item label="ID">{{ detailRow.id }}</el-descriptions-item>
-        <el-descriptions-item label="账号类型">{{ typeText(detailRow.type) }}</el-descriptions-item>
-        <el-descriptions-item label="账号">{{ detailRow.account || '-' }}</el-descriptions-item>
-        <el-descriptions-item label="密码">{{ detailRow.password || '-' }}</el-descriptions-item>
-        <el-descriptions-item label="Token">
-          <span class="token-text">{{ detailRow.token || '-' }}</span>
-        </el-descriptions-item>
-        <el-descriptions-item label="提取状态">{{ detailRow.extracted ? '已提取' : '未提取' }}</el-descriptions-item>
-        <el-descriptions-item label="提取时间">{{ detailRow.extractedAt || '-' }}</el-descriptions-item>
-        <el-descriptions-item label="提取平台">
-          <el-tag v-if="detailRow.extractedPlatform" :type="platformTagType(detailRow.extractedPlatform)" size="small">
-            {{ platformText(detailRow.extractedPlatform) }}
-          </el-tag>
-          <span v-else>-</span>
-        </el-descriptions-item>
-        <el-descriptions-item label="备注">{{ detailRow.remark || '-' }}</el-descriptions-item>
-      </el-descriptions>
-    </el-dialog>
+    <DetailDialog
+      v-model="detailVisible"
+      :row="detailRow"
+      :save-loading="detailRemarkSaving"
+      @save-remark="handleSaveRemark"
+    />
 
-    <el-dialog v-model="extractVisible" title="提取账号" width="420px">
-      <el-form label-width="84px">
-        <el-form-item label="提取类型">
-          <el-input :model-value="typeText(extractForm.type)" disabled />
-        </el-form-item>
-        <el-form-item label="提取平台">
-          <el-select v-model="extractForm.platform" style="width:100%">
-            <el-option v-for="(v, k) in PLATFORM_MAP" :key="k" :value="k" :label="v.label" />
-          </el-select>
-        </el-form-item>
-      </el-form>
-      <template #footer>
-        <el-button @click="extractVisible = false">取消</el-button>
-        <el-button type="primary" :loading="loading" @click="handleExtract">确认提取</el-button>
-      </template>
-    </el-dialog>
+    <ExtractDialog
+      v-model="extractVisible"
+      :loading="loading"
+      :type="extractForm.type"
+      :platform="extractForm.platform"
+      :remark="extractForm.remark"
+      :platform-map="PLATFORM_MAP"
+      @update:platform="(v) => (extractForm.platform = v)"
+      @update:remark="(v) => (extractForm.remark = v)"
+      @confirm="handleExtract"
+    />
 
     <!-- 接口说明抽屉 -->
     <el-drawer v-model="apiDocVisible" title="提卡接口说明" size="560px" direction="rtl">
@@ -449,7 +449,6 @@ function copyCardInfo(row) {
 .example-url-wrap { display: flex; align-items: center; gap: 8px; background: #f5f7fa; padding: 6px 10px; border-radius: 4px; }
 .example-url { flex: 1; font-size: 12px; color: #409eff; word-break: break-all; }
 .code-block { background: #1e1e1e; color: #d4d4d4; padding: 12px 16px; border-radius: 6px; font-size: 12px; line-height: 1.6; overflow-x: auto; white-space: pre-wrap; word-break: break-all; margin: 0; }
-.token-text { word-break: break-all; white-space: pre-wrap; line-height: 1.6; }
 </style>
 
 <style>

src/views/accountpool/windsurf/components/detail.vue

@@ -0,0 +1,96 @@
+<script setup>
+import { computed, ref, watch } from 'vue';
+
+const props = defineProps({
+  modelValue: { type: Boolean, default: false },
+  row: { type: Object, default: null },
+  saveLoading: { type: Boolean, default: false },
+});
+
+const emit = defineEmits(['update:modelValue', 'save-remark']);
+const remarkText = ref('');
+
+function typeText(type) {
+  if (type === 'account') return '账号密码';
+  if (type === 'account_tk') return '账号密码+Token';
+  return 'Token';
+}
+
+const PLATFORM_MAP = {
+  local: { label: '本地', type: 'info' },
+  xianyu: { label: '闲鱼', type: 'warning' },
+  pinduoduo: { label: '拼多多', type: 'danger' },
+  jingdong: { label: '京东', type: 'primary' },
+  douyin: { label: '抖音', type: 'success' },
+};
+
+const platformLabel = computed(() => {
+  if (!props.row?.extractedPlatform) return '-';
+  return PLATFORM_MAP[props.row.extractedPlatform]?.label || props.row.extractedPlatform;
+});
+
+const platformType = computed(() => {
+  if (!props.row?.extractedPlatform) return 'info';
+  return PLATFORM_MAP[props.row.extractedPlatform]?.type || 'info';
+});
+
+watch(
+  () => props.row,
+  (row) => {
+    remarkText.value = row?.remark || '';
+  },
+  { immediate: true }
+);
+
+function onSaveRemark() {
+  if (!props.row?.id) return;
+  emit('save-remark', { id: props.row.id, remark: remarkText.value || '' });
+}
+</script>
+
+<template>
+  <el-dialog
+    :model-value="modelValue"
+    title="账号详情"
+    width="560px"
+    @update:model-value="(v) => emit('update:modelValue', v)"
+  >
+    <el-descriptions :column="1" border v-if="row">
+      <el-descriptions-item label="ID">{{ row.id }}</el-descriptions-item>
+      <el-descriptions-item label="账号类型">{{ typeText(row.type) }}</el-descriptions-item>
+      <el-descriptions-item label="账号">{{ row.account || '-' }}</el-descriptions-item>
+      <el-descriptions-item label="密码">{{ row.password || '-' }}</el-descriptions-item>
+      <el-descriptions-item label="Token">
+        <span class="token-text">{{ row.token || '-' }}</span>
+      </el-descriptions-item>
+      <el-descriptions-item label="提取状态">{{ row.extracted ? '已提取' : '未提取' }}</el-descriptions-item>
+      <el-descriptions-item label="提取时间">{{ row.extractedAt || '-' }}</el-descriptions-item>
+      <el-descriptions-item label="提取平台">
+        <el-tag v-if="row.extractedPlatform" :type="platformType" size="small">{{ platformLabel }}</el-tag>
+        <span v-else>-</span>
+      </el-descriptions-item>
+      <el-descriptions-item label="备注">
+        <div class="remark-edit-wrap">
+          <el-input v-model="remarkText" type="textarea" :rows="3" placeholder="请输入备注" />
+          <el-button type="primary" size="small" :loading="saveLoading" @click="onSaveRemark">
+            保存备注
+          </el-button>
+        </div>
+      </el-descriptions-item>
+    </el-descriptions>
+  </el-dialog>
+</template>
+
+<style scoped>
+.token-text {
+  word-break: break-all;
+  white-space: pre-wrap;
+  line-height: 1.6;
+}
+
+.remark-edit-wrap {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+</style>

src/views/accountpool/windsurf/components/extract.vue

@@ -0,0 +1,55 @@
+<script setup>
+const props = defineProps({
+  modelValue: { type: Boolean, default: false },
+  loading: { type: Boolean, default: false },
+  type: { type: String, default: 'account' },
+  platform: { type: String, default: 'local' },
+  remark: { type: String, default: '' },
+  platformMap: { type: Object, default: () => ({}) },
+});
+
+const emit = defineEmits(['update:modelValue', 'update:platform', 'update:remark', 'confirm']);
+
+function typeText(type) {
+  if (type === 'account') return '账号密码';
+  if (type === 'account_tk') return '账号密码+Token';
+  return 'Token';
+}
+</script>
+
+<template>
+  <el-dialog
+    :model-value="modelValue"
+    title="提取账号"
+    width="420px"
+    @update:model-value="(v) => emit('update:modelValue', v)"
+  >
+    <el-form label-width="84px">
+      <el-form-item label="提取类型">
+        <el-input :model-value="typeText(type)" disabled />
+      </el-form-item>
+      <el-form-item label="提取平台">
+        <el-select
+          :model-value="platform"
+          style="width: 100%"
+          @update:model-value="(v) => emit('update:platform', v)"
+        >
+          <el-option v-for="(v, k) in platformMap" :key="k" :value="k" :label="v.label" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注">
+        <el-input
+          :model-value="remark"
+          type="textarea"
+          :rows="3"
+          placeholder="提取备注（可选）"
+          @update:model-value="(v) => emit('update:remark', v)"
+        />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button @click="emit('update:modelValue', false)">取消</el-button>
+      <el-button type="primary" :loading="loading" @click="emit('confirm')">确认提取</el-button>
+    </template>
+  </el-dialog>
+</template>

src/views/accountpool/windsurf/index.vue

@@ -2,12 +2,15 @@
 import { computed, onMounted, reactive, ref, watch } from 'vue';
 import { ElMessage } from 'element-plus';
 import Edit from './components/edit.vue';
+import DetailDialog from './components/detail.vue';
+import ExtractDialog from './components/extract.vue';
 import {
   addAccountPool,
   batchAddAccountPool,
   extractAccountPool,
   getAccountPoolDetail,
   getAccountPoolList,
+  updateAccountPoolRemark,
 } from '@/api/accountPool';
 
 const moduleKey = 'windsurf';
@@ -23,12 +26,13 @@ const apiDocVisible = ref(false);
 const query = reactive({ keyword: '', status: '' });
 const activeTypeTab = ref('all');
 
-const extractForm = reactive({ platform: 'local', type: 'account' });
+const extractForm = reactive({ platform: 'local', type: 'account', remark: '' });
 
 const tableData = ref([]);
 const total = ref(0);
 const selectedRows = ref([]);
 const detailRow = ref(null);
+const detailRemarkSaving = ref(false);
 const pagination = reactive({ page: 1, pageSize: 30 });
 
 const pagedList = computed(() => tableData.value);
@@ -88,6 +92,7 @@ function openExtractByRow(row) {
   extractTargetRow.value = row;
   extractForm.platform = 'local';
   extractForm.type = row.type;
+  extractForm.remark = row.remark || '';
   extractVisible.value = true;
 }
 
@@ -97,7 +102,7 @@ async function handleExtract() {
     const target = extractTargetRow.value;
     if (!target) { ElMessage.warning('未找到提取目标'); return; }
     const res = await extractAccountPool(moduleKey, {
-      id: target.id, type: target.type, platform: extractForm.platform,
+      id: target.id, type: target.type, platform: extractForm.platform, remark: extractForm.remark || '',
     });
     if (res?.code !== 200) { ElMessage.error(res?.msg || '提取失败'); return; }
     ElMessage.success('提取成功');
@@ -106,6 +111,20 @@ async function handleExtract() {
   } finally { loading.value = false; }
 }
 
+async function handleSaveRemark(payload) {
+  if (!payload?.id) return;
+  detailRemarkSaving.value = true;
+  try {
+    const res = await updateAccountPoolRemark(moduleKey, payload);
+    if (res?.code !== 200) { ElMessage.error(res?.msg || '备注更新失败'); return; }
+    ElMessage.success('备注已更新');
+    if (detailRow.value?.id === payload.id) {
+      detailRow.value = { ...detailRow.value, remark: payload.remark || '' };
+    }
+    await fetchList();
+  } finally { detailRemarkSaving.value = false; }
+}
+
 function markExtractForSelected() {
   if (!selectedRows.value.length) { ElMessage.warning('请先选择数据'); return; }
   loading.value = true;
@@ -329,43 +348,24 @@ function copyCardInfo(row) {
 
     <Edit v-model="editVisible" :mode="editMode" @submit="handleEditSubmit" />
 
-    <el-dialog v-model="detailVisible" title="账号详情" width="560px">
-      <el-descriptions :column="1" border v-if="detailRow">
-        <el-descriptions-item label="ID">{{ detailRow.id }}</el-descriptions-item>
-        <el-descriptions-item label="账号类型">{{ typeText(detailRow.type) }}</el-descriptions-item>
-        <el-descriptions-item label="账号">{{ detailRow.account || '-' }}</el-descriptions-item>
-        <el-descriptions-item label="密码">{{ detailRow.password || '-' }}</el-descriptions-item>
-        <el-descriptions-item label="Token">
-          <span class="token-text">{{ detailRow.token || '-' }}</span>
-        </el-descriptions-item>
-        <el-descriptions-item label="提取状态">{{ detailRow.extracted ? '已提取' : '未提取' }}</el-descriptions-item>
-        <el-descriptions-item label="提取时间">{{ detailRow.extractedAt || '-' }}</el-descriptions-item>
-        <el-descriptions-item label="提取平台">
-          <el-tag v-if="detailRow.extractedPlatform" :type="platformTagType(detailRow.extractedPlatform)" size="small">
-            {{ platformText(detailRow.extractedPlatform) }}
-          </el-tag>
-          <span v-else>-</span>
-        </el-descriptions-item>
-        <el-descriptions-item label="备注">{{ detailRow.remark || '-' }}</el-descriptions-item>
-      </el-descriptions>
-    </el-dialog>
+    <DetailDialog
+      v-model="detailVisible"
+      :row="detailRow"
+      :save-loading="detailRemarkSaving"
+      @save-remark="handleSaveRemark"
+    />
 
-    <el-dialog v-model="extractVisible" title="提取账号" width="420px">
-      <el-form label-width="84px">
-        <el-form-item label="提取类型">
-          <el-input :model-value="typeText(extractForm.type)" disabled />
-        </el-form-item>
-        <el-form-item label="提取平台">
-          <el-select v-model="extractForm.platform" style="width:100%">
-            <el-option v-for="(v, k) in PLATFORM_MAP" :key="k" :value="k" :label="v.label" />
-          </el-select>
-        </el-form-item>
-      </el-form>
-      <template #footer>
-        <el-button @click="extractVisible = false">取消</el-button>
-        <el-button type="primary" :loading="loading" @click="handleExtract">确认提取</el-button>
-      </template>
-    </el-dialog>
+    <ExtractDialog
+      v-model="extractVisible"
+      :loading="loading"
+      :type="extractForm.type"
+      :platform="extractForm.platform"
+      :remark="extractForm.remark"
+      :platform-map="PLATFORM_MAP"
+      @update:platform="(v) => (extractForm.platform = v)"
+      @update:remark="(v) => (extractForm.remark = v)"
+      @confirm="handleExtract"
+    />
 
     <!-- 接口说明抽屉 -->
     <el-drawer v-model="apiDocVisible" title="提卡接口说明" size="560px" direction="rtl">
@@ -449,7 +449,6 @@ function copyCardInfo(row) {
 .example-url-wrap { display: flex; align-items: center; gap: 8px; background: #f5f7fa; padding: 6px 10px; border-radius: 4px; }
 .example-url { flex: 1; font-size: 12px; color: #409eff; word-break: break-all; }
 .code-block { background: #1e1e1e; color: #d4d4d4; padding: 12px 16px; border-radius: 6px; font-size: 12px; line-height: 1.6; overflow-x: auto; white-space: pre-wrap; word-break: break-all; margin: 0; }
-.token-text { word-break: break-all; white-space: pre-wrap; line-height: 1.6; }
 </style>
 
 <style>