From 4bba35a42666950f5e79bcbf1a48a270b721158e Mon Sep 17 00:00:00 2001
From: old burden <hejianbin1995@gmail.com>
Date: Mon, 30 Mar 2026 11:07:36 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E6=96=B0=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 admin-ui/src/api/ai/dept.js                   |   46 +
 admin-ui/src/api/ai/user.js                   |    9 +
 admin-ui/src/views/ai/dept/index.vue          |  344 +++++
 admin-ui/src/views/ai/user/index.vue          |   95 +-
 admin-ui/src/views/system/dept/index.vue      |   28 +
 portal-ui/src/views/VideoGen.vue              | 1188 +++++++++++++----
 ....timestamp-1774596443609-67b0d65f8e8ef.mjs |   71 +
 7 files changed, 1521 insertions(+), 260 deletions(-)
 create mode 100644 admin-ui/src/api/ai/dept.js
 create mode 100644 admin-ui/src/views/ai/dept/index.vue
 create mode 100644 portal-ui/vite.config.js.timestamp-1774596443609-67b0d65f8e8ef.mjs

diff --git a/admin-ui/src/api/ai/dept.js b/admin-ui/src/api/ai/dept.js
new file mode 100644
index 0000000..415856b
--- /dev/null
+++ b/admin-ui/src/api/ai/dept.js
@@ -0,0 +1,46 @@
+import request from '@/utils/request'
+
+export function listDept(query) {
+  return request({
+    url: '/ai/dept/list',
+    method: 'get',
+    params: query
+  })
+}
+
+export function listDeptExcludeChild(deptId) {
+  return request({
+    url: '/ai/dept/list/exclude/' + deptId,
+    method: 'get'
+  })
+}
+
+export function getDept(deptId) {
+  return request({
+    url: '/ai/dept/' + deptId,
+    method: 'get'
+  })
+}
+
+export function addDept(data) {
+  return request({
+    url: '/ai/dept',
+    method: 'post',
+    data: data
+  })
+}
+
+export function updateDept(data) {
+  return request({
+    url: '/ai/dept',
+    method: 'put',
+    data: data
+  })
+}
+
+export function delDept(deptId) {
+  return request({
+    url: '/ai/dept/' + deptId,
+    method: 'delete'
+  })
+}
diff --git a/admin-ui/src/api/ai/user.js b/admin-ui/src/api/ai/user.js
index 93c6cca..389afbc 100644
--- a/admin-ui/src/api/ai/user.js
+++ b/admin-ui/src/api/ai/user.js
@@ -81,3 +81,12 @@ export function updatePassword(id, newPassword) {
     data: data
   })
 }
+
+/** 分配归属部门，deptId 可省略或 null 表示清空 */
+export function assignAiUserDept(data) {
+  return request({
+    url: '/ai/user/dept',
+    method: 'put',
+    data
+  })
+}
diff --git a/admin-ui/src/views/ai/dept/index.vue b/admin-ui/src/views/ai/dept/index.vue
new file mode 100644
index 0000000..ae3808d
--- /dev/null
+++ b/admin-ui/src/views/ai/dept/index.vue
@@ -0,0 +1,344 @@
+<template>
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
+      <el-form-item label="部门名称" prop="deptName">
+        <el-input
+          v-model="queryParams.deptName"
+          placeholder="请输入部门名称"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="状态" prop="status">
+        <el-select v-model="queryParams.status" placeholder="部门状态" clearable>
+          <el-option
+            v-for="dict in dict.type.sys_normal_disable"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button
+          type="primary"
+          plain
+          icon="el-icon-plus"
+          size="mini"
+          @click="handleAdd"
+          v-hasPermi="['ai:dept:add']"
+        >新增</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="info"
+          plain
+          icon="el-icon-sort"
+          size="mini"
+          @click="toggleExpandAll"
+        >展开/折叠</el-button>
+      </el-col>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <el-table
+      v-if="refreshTable"
+      v-loading="loading"
+      :data="deptList"
+      row-key="deptId"
+      :default-expand-all="isExpandAll"
+      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
+    >
+      <el-table-column prop="deptName" label="部门名称" width="260"></el-table-column>
+      <el-table-column prop="orderNum" label="排序" width="200"></el-table-column>
+      <el-table-column prop="status" label="状态" width="100">
+        <template slot-scope="scope">
+          <dict-tag :options="dict.type.sys_normal_disable" :value="scope.row.status"/>
+        </template>
+      </el-table-column>
+      <el-table-column label="创建时间" align="center" prop="createTime" width="200">
+        <template slot-scope="scope">
+          <span>{{ parseTime(scope.row.createTime) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template slot-scope="scope">
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-edit"
+            @click="handleUpdate(scope.row)"
+            v-hasPermi="['ai:dept:edit']"
+          >修改</el-button>
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-plus"
+            @click="handleAdd(scope.row)"
+            v-hasPermi="['ai:dept:add']"
+          >新增</el-button>
+          <el-button
+            v-if="scope.row.parentId != 0"
+            size="mini"
+            type="text"
+            icon="el-icon-delete"
+            @click="handleDelete(scope.row)"
+            v-hasPermi="['ai:dept:remove']"
+          >删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+        <el-row>
+          <el-col :span="24" v-if="form.parentId !== 0">
+            <el-form-item label="上级部门" prop="parentId">
+              <treeselect v-model="form.parentId" :options="deptOptions" :normalizer="normalizer" placeholder="选择上级部门" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="部门名称" prop="deptName">
+              <el-input v-model="form.deptName" placeholder="请输入部门名称" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="显示排序" prop="orderNum">
+              <el-input-number v-model="form.orderNum" controls-position="right" :min="0" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="负责人" prop="leader">
+              <el-input v-model="form.leader" placeholder="请输入负责人" maxlength="20" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="联系电话" prop="phone">
+              <el-input v-model="form.phone" placeholder="请输入联系电话" maxlength="11" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="邮箱" prop="email">
+              <el-input v-model="form.email" placeholder="请输入邮箱" maxlength="50" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="部门状态">
+              <el-radio-group v-model="form.status">
+                <el-radio
+                  v-for="dict in dict.type.sys_normal_disable"
+                  :key="dict.value"
+                  :label="dict.value"
+                >{{dict.label}}</el-radio>
+              </el-radio-group>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row v-if="isSecondLevelCompanyForm">
+          <el-col :span="24">
+            <el-form-item label="Byte API Key">
+              <el-input
+                v-model="form.byteApiKey"
+                type="password"
+                show-password
+                placeholder="选填"
+                maxlength="255"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { listDept, getDept, delDept, addDept, updateDept, listDeptExcludeChild } from "@/api/ai/dept"
+import Treeselect from "@riophae/vue-treeselect"
+import "@riophae/vue-treeselect/dist/vue-treeselect.css"
+
+export default {
+  name: "AiDept",
+  dicts: ['sys_normal_disable'],
+  components: { Treeselect },
+  data() {
+    return {
+      loading: true,
+      showSearch: true,
+      deptList: [],
+      deptOptions: [],
+      title: "",
+      open: false,
+      isExpandAll: true,
+      refreshTable: true,
+      queryParams: {
+        deptName: undefined,
+        status: undefined
+      },
+      form: {},
+      rules: {
+        parentId: [
+          { required: true, message: "上级部门不能为空", trigger: "blur" }
+        ],
+        deptName: [
+          { required: true, message: "部门名称不能为空", trigger: "blur" }
+        ],
+        orderNum: [
+          { required: true, message: "显示排序不能为空", trigger: "blur" }
+        ],
+        email: [
+          {
+            type: "email",
+            message: "请输入正确的邮箱地址",
+            trigger: ["blur", "change"]
+          }
+        ],
+        phone: [
+          {
+            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
+            message: "请输入正确的手机号码",
+            trigger: "blur"
+          }
+        ]
+      }
+    }
+  },
+  created() {
+    this.getList()
+  },
+  computed: {
+    isSecondLevelCompanyForm() {
+      if (this.form.ancestors === "0,100") {
+        return true
+      }
+      const pid = this.form.parentId
+      if (pid !== undefined && pid !== null && Number(pid) === 100) {
+        return true
+      }
+      return false
+    }
+  },
+  methods: {
+    getList() {
+      this.loading = true
+      listDept(this.queryParams).then(response => {
+        this.deptList = this.handleTree(response.data, "deptId")
+        this.loading = false
+      })
+    },
+    normalizer(node) {
+      if (node.children && !node.children.length) {
+        delete node.children
+      }
+      return {
+        id: node.deptId,
+        label: node.deptName,
+        children: node.children
+      }
+    },
+    cancel() {
+      this.open = false
+      this.reset()
+    },
+    reset() {
+      this.form = {
+        deptId: undefined,
+        parentId: undefined,
+        ancestors: undefined,
+        deptName: undefined,
+        orderNum: undefined,
+        leader: undefined,
+        phone: undefined,
+        email: undefined,
+        byteApiKey: undefined,
+        status: "0"
+      }
+      this.resetForm("form")
+    },
+    handleQuery() {
+      this.getList()
+    },
+    resetQuery() {
+      this.resetForm("queryForm")
+      this.handleQuery()
+    },
+    handleAdd(row) {
+      this.reset()
+      if (row != undefined) {
+        this.form.parentId = row.deptId
+      }
+      this.open = true
+      this.title = "添加部门"
+      listDept().then(response => {
+        this.deptOptions = this.handleTree(response.data, "deptId")
+      })
+    },
+    toggleExpandAll() {
+      this.refreshTable = false
+      this.isExpandAll = !this.isExpandAll
+      this.$nextTick(() => {
+        this.refreshTable = true
+      })
+    },
+    handleUpdate(row) {
+      this.reset()
+      getDept(row.deptId).then(response => {
+        this.form = response.data
+        this.open = true
+        this.title = "修改部门"
+        listDeptExcludeChild(row.deptId).then(response => {
+          this.deptOptions = this.handleTree(response.data, "deptId")
+          if (this.deptOptions.length == 0) {
+            const noResultsOptions = { deptId: this.form.parentId, deptName: this.form.parentName, children: [] }
+            this.deptOptions.push(noResultsOptions)
+          }
+        })
+      })
+    },
+    submitForm: function() {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          if (this.form.deptId != undefined) {
+            updateDept(this.form).then(response => {
+              this.$modal.msgSuccess("修改成功")
+              this.open = false
+              this.getList()
+            })
+          } else {
+            addDept(this.form).then(response => {
+              this.$modal.msgSuccess("新增成功")
+              this.open = false
+              this.getList()
+            })
+          }
+        }
+      })
+    },
+    handleDelete(row) {
+      this.$modal.confirm('是否确认删除名称为"' + row.deptName + '"的数据项？').then(function() {
+        return delDept(row.deptId)
+      }).then(() => {
+        this.getList()
+        this.$modal.msgSuccess("删除成功")
+      }).catch(() => {})
+    }
+  }
+}
+</script>
diff --git a/admin-ui/src/views/ai/user/index.vue b/admin-ui/src/views/ai/user/index.vue
index c9ad232..1a893f5 100644
--- a/admin-ui/src/views/ai/user/index.vue
+++ b/admin-ui/src/views/ai/user/index.vue
@@ -50,6 +50,16 @@
           />
         </el-select>
       </el-form-item>
+      <el-form-item label="归属部门" prop="deptId">
+        <treeselect
+          v-model="queryParams.deptId"
+          :options="deptOptions"
+          :normalizer="deptNormalizer"
+          placeholder="全部"
+          clearable
+          style="width: 220px"
+        />
+      </el-form-item>
       <el-form-item>
         <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
         <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
@@ -78,6 +88,7 @@
       <el-table-column label="上级ID" align="center" prop="superiorUuid" />
       <el-table-column label="上级账号" align="center" prop="superiorName" />
       <el-table-column label="用户昵称" align="center" prop="nickname" />
+      <el-table-column label="归属部门" align="center" prop="deptName" width="120" show-overflow-tooltip />
       <el-table-column label="邮箱" align="center" prop="email" />
       <el-table-column label="性别" align="center" prop="gender">
         <template slot-scope="scope">
@@ -103,8 +114,15 @@
       </el-table-column>
       <el-table-column label="余额" align="center" prop="balance" />
       <el-table-column label="source" align="center" prop="source" />
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="180">
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="250">
         <template slot-scope="scope">
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-office-building"
+            @click="handleOpenAssignDept(scope.row)"
+            v-hasPermi="['ai:user:edit']"
+          >分配部门</el-button>
           <el-button
             size="mini"
             type="text"
@@ -182,6 +200,25 @@
       </div>
     </el-dialog>
 
+    <!-- 分配部门 -->
+    <el-dialog title="分配归属部门" :visible.sync="assignDeptOpen" width="480px" append-to-body @close="cancelAssignDept">
+      <el-form label-width="88px">
+        <el-form-item label="归属部门">
+          <treeselect
+            v-model="assignForm.deptId"
+            :options="deptOptions"
+            :normalizer="deptNormalizer"
+            placeholder="不选则不归属任何部门"
+            clearable
+          />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitAssignDept">确 定</el-button>
+        <el-button @click="cancelAssignDept">取 消</el-button>
+      </div>
+    </el-dialog>
+
     <!-- 修改余额对话框 -->
     <el-dialog :title="title" :visible.sync="openUpdateBalance" width="500px" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
@@ -207,12 +244,17 @@ import {
   updateUser,
   changeBalance,
   changeUserStatus,
-  updatePassword
+  updatePassword,
+  assignAiUserDept
 } from "@/api/ai/user";
+import { listDept } from "@/api/ai/dept";
+import Treeselect from "@riophae/vue-treeselect";
+import "@riophae/vue-treeselect/dist/vue-treeselect.css";
 
 export default {
   name: "User",
   dicts: ["sys_normal_disable", "sys_user_sex"],
+  components: { Treeselect },
   data() {
     return {
       // 遮罩层
@@ -235,6 +277,12 @@ export default {
       open: false,
       openUpdatePassword: false,
       openUpdateBalance: false,
+      assignDeptOpen: false,
+      deptOptions: [],
+      assignForm: {
+        id: null,
+        deptId: null
+      },
       // 查询参数
       queryParams: {
         pageNum: 1,
@@ -252,7 +300,8 @@ export default {
         paymentUrl: null,
         loginTime: null,
         balance: null,
-        superiorName: null
+        superiorName: null,
+        deptId: null
       },
       // 表单参数
       form: {},
@@ -268,9 +317,49 @@ export default {
     };
   },
   created() {
+    this.loadDeptTree();
     this.getList();
   },
   methods: {
+    loadDeptTree() {
+      listDept().then(res => {
+        this.deptOptions = this.handleTree(res.data, "deptId");
+      });
+    },
+    deptNormalizer(node) {
+      if (node.children && !node.children.length) {
+        delete node.children;
+      }
+      return {
+        id: node.deptId,
+        label: node.deptName,
+        children: node.children
+      };
+    },
+    handleOpenAssignDept(row) {
+      getUser(row.id).then(res => {
+        this.assignForm = {
+          id: res.data.id,
+          deptId: res.data.deptId
+        };
+        this.assignDeptOpen = true;
+      });
+    },
+    submitAssignDept() {
+      const payload = {
+        id: this.assignForm.id,
+        deptId: this.assignForm.deptId != null ? this.assignForm.deptId : null
+      };
+      assignAiUserDept(payload).then(() => {
+        this.$modal.msgSuccess("已保存");
+        this.assignDeptOpen = false;
+        this.getList();
+      });
+    },
+    cancelAssignDept() {
+      this.assignDeptOpen = false;
+      this.assignForm = { id: null, deptId: null };
+    },
     // 更多操作触发
     handleCommand(command, row) {
       switch (command) {
diff --git a/admin-ui/src/views/system/dept/index.vue b/admin-ui/src/views/system/dept/index.vue
index 088f09d..75e9007 100644
--- a/admin-ui/src/views/system/dept/index.vue
+++ b/admin-ui/src/views/system/dept/index.vue
@@ -148,6 +148,19 @@
             </el-form-item>
           </el-col>
         </el-row>
+        <el-row v-if="isSecondLevelCompanyForm">
+          <el-col :span="24">
+            <el-form-item label="Byte API Key">
+              <el-input
+                v-model="form.byteApiKey"
+                type="password"
+                show-password
+                placeholder="选填"
+                maxlength="255"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button type="primary" @click="submitForm">确 定</el-button>
@@ -222,6 +235,19 @@ export default {
   created() {
     this.getList()
   },
+  computed: {
+    /** 二级公司：ancestors 为 0,100（即上级为根公司 dept_id=100） */
+    isSecondLevelCompanyForm() {
+      if (this.form.ancestors === "0,100") {
+        return true
+      }
+      const pid = this.form.parentId
+      if (pid !== undefined && pid !== null && Number(pid) === 100) {
+        return true
+      }
+      return false
+    }
+  },
   methods: {
     /** 查询部门列表 */
     getList() {
@@ -252,11 +278,13 @@ export default {
       this.form = {
         deptId: undefined,
         parentId: undefined,
+        ancestors: undefined,
         deptName: undefined,
         orderNum: undefined,
         leader: undefined,
         phone: undefined,
         email: undefined,
+        byteApiKey: undefined,
         status: "0"
       }
       this.resetForm("form")
diff --git a/portal-ui/src/views/VideoGen.vue b/portal-ui/src/views/VideoGen.vue
index c1b3ad7..9217379 100644
--- a/portal-ui/src/views/VideoGen.vue
+++ b/portal-ui/src/views/VideoGen.vue
@@ -1,126 +1,211 @@
 <template>
 	<div :class="prefixCls">
-		<div class="left">
-			<!-- 模式切换 -->
-			<div class="mode-tabs">
-				<button 
-					:class="['mode-tab', { active: mode === 'text-to-video' }]"
-					@click="switchMode('text-to-video')">
-					文生视频
-				</button>
-				<button 
-					:class="['mode-tab', { active: mode === 'image-to-video' }]"
-					@click="switchMode('image-to-video')">
-					图生视频
-				</button>
+		<header class="vg-hero">
+			<div class="vg-hero-text">
+				<h1 class="vg-hero-title">视频生成</h1>
+				<p class="vg-hero-desc">文生视频、图生视频，选择模型后生成成片</p>
 			</div>
-
-			<!-- 上传区域 - 根据模式显示 -->
-			<div class="upload" v-if="mode === 'image-to-video'">
-				<div class="upload-title">
-					<div class="upload-title-left">
-						{{ $t('common.uploadFirstImage') || '上传参考图' }}
+			<div class="vg-type-select" @click.stop>
+				<span class="vg-hero-mode-label">生成模式</span>
+				<button
+					type="button"
+					class="vg-type-trigger"
+					:class="{ 'is-open': typeMenuOpen }"
+					@click.stop="typeMenuOpen = !typeMenuOpen"
+					:aria-expanded="typeMenuOpen">
+					<span class="vg-type-label">{{ videoModeLabel }}</span>
+					<svg class="vg-type-chevron" width="1em" height="1em" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+						<path fill-rule="evenodd" clip-rule="evenodd" d="M21.01 7.982A1.2 1.2 0 0 1 21 9.679l-8.156 8.06a1.2 1.2 0 0 1-1.688 0L3 9.68a1.2 1.2 0 0 1 1.687-1.707L12 15.199l7.313-7.227a1.2 1.2 0 0 1 1.697.01Z" fill="currentColor" />
+					</svg>
+				</button>
+				<transition name="vg-fade">
+					<div v-show="typeMenuOpen" class="vg-type-dropdown">
+						<div class="vg-type-dropdown-bg" />
+						<ul class="vg-type-options" role="listbox">
+							<li
+								v-for="opt in videoModeOptions"
+								:key="opt.value"
+								:class="['vg-type-option', { active: videoMode === opt.value }]"
+								role="option"
+								@click="pickVideoMode(opt.value)">
+								{{ opt.label }}
+							</li>
+						</ul>
 					</div>
-					<div class="upload-title-tip">
-						{{ $t('common.uploadImageTip') || '支持PNG/JPG，最大10MB' }}
-					</div>
-				</div>
+				</transition>
+			</div>
+		</header>
 
-				<mf-image-upload
-					listType="picture-card"
-					uploadHeight="180px"
-					:show-file-list="false"
-					:content="$t('common.uploadFirstPlaceholder') || '点击上传参考图片'"
-					v-model="firstUrl" />
-
-				<!-- 可选：上传尾帧 -->
-				<div class="last-frame" v-if="showLastFrame">
-					<div class="upload-title-left">
-						{{ $t('common.uploadLastPlaceholder') || '上传尾帧（可选）' }}
+		<div class="vg-body">
+			<!-- 左侧：生成器 -->
+			<div class="vg-generator">
+				<div class="vg-generator-inner">
+					<!-- 参考上传区（图生视频）；文生视频时显示轻量占位 -->
+					<div class="vg-refs">
+						<div class="vg-ref-group">
+							<div class="vg-ref-bg" />
+							<div v-if="isImageVideoMode" class="vg-ref-content">
+								<div class="vg-ref-tilt">
+									<div class="upload-inner">
+										<div class="upload-title">
+											<div class="upload-title-left">
+												{{ imageUploadPrimaryLabel }}
+											</div>
+											<div class="upload-title-tip">
+												{{ $t('common.uploadImageTip') || '支持PNG/JPG，最大10MB' }}
+											</div>
+										</div>
+										<mf-image-upload
+											v-if="videoMode !== 'image-reference'"
+											listType="picture-card"
+											uploadHeight="140px"
+											:show-file-list="false"
+											:content="$t('common.uploadFirstPlaceholder') || '点击上传'"
+											v-model="firstUrl" />
+										<mf-image-upload
+											v-else
+											listType="picture-card"
+											uploadHeight="140px"
+											:show-file-list="false"
+											:content="'上传参考图'"
+											v-model="referenceUrl" />
+										<div class="last-frame" v-if="videoMode === 'image-first-last-frame'">
+											<div class="upload-title-left">
+												{{ $t('common.uploadLastPlaceholder') || '尾帧（可选）' }}
+											</div>
+											<mf-image-upload
+												listType="picture-card"
+												uploadHeight="100px"
+												:show-file-list="false"
+												:content="$t('common.uploadLastPlaceholder') || '上传尾帧'"
+												v-model="lastUrl" />
+										</div>
+									</div>
+								</div>
+							</div>
+							<div v-else class="vg-ref-placeholder">
+								<div class="vg-ref-placeholder-icon" aria-hidden="true">
+									<svg width="28" height="28" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+										<path fill-rule="evenodd" clip-rule="evenodd" d="M10.8 20a1.2 1.2 0 0 0 2.4 0v-6.8H20a1.2 1.2 0 1 0 0-2.4h-6.8V4a1.2 1.2 0 0 0-2.4 0v6.8H4a1.2 1.2 0 0 0 0 2.4h6.8V20Z" fill="currentColor" />
+									</svg>
+								</div>
+								<p class="vg-ref-placeholder-text">切换到「图生视频」可上传参考图</p>
+							</div>
+						</div>
+					</div>
+
+					<div class="vg-main-column">
+						<div class="rich-editor-container">
+							<RichTextEditor
+								v-model="editorContent"
+								:placeholder="
+									$t('common.textVideoPlaceholder') ||
+									'描述画面与动态，例如：阳光下的女孩在海边起舞…'
+								"
+								:uploaded-images="uploadedImages"
+								@text-change="handleTextChange"
+								@image-upload="handleImageUpload"
+							/>
+						</div>
+
+						<div class="vg-toolbar">
+							<div class="vg-toolbar-settings">
+								<div class="vg-model-wrap">
+									<span class="vg-model-icon" aria-hidden="true">
+										<svg width="1em" height="1em" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+											<path fill="currentColor" d="M11.805 5.786c1.25-.926 2.193-1.373 2.471-1.096.489.488-1.261 3.03-3.909 5.677-4.33 4.331-6.715 8.968-5.326 10.358.29.29.723.416 1.264.394.421.017.92-.07 1.48-.249-2.117.9-3.859 1.005-4.76.104-1.874-1.874.61-7.402 5.553-12.353l.022-.02c.03-.032.062-.063.093-.094l.065-.064.11-.108c.97-.95 1.96-1.804 2.937-2.549Zm5.55 11.57c1.532-1.531 3.2-2.347 3.725-1.822.525.525-.29 2.192-1.822 3.724-1.532 1.531-3.2 2.347-3.725 1.822-.524-.525.291-2.192 1.822-3.724Z" />
+										</svg>
+									</span>
+									<a-select v-model="selectedModel" class="vg-model-select">
+										<a-option v-for="option in modelOptions" :key="option.value" :value="option.value">
+											{{ option.label }}
+										</a-option>
+									</a-select>
+								</div>
+							</div>
+							<div class="vg-toolbar-actions">
+								<button
+									type="button"
+									class="vg-submit-circle"
+									:disabled="generateLoading"
+									@click="generateVideo"
+									:title="price ? $t('common.createVideo', { price }) : $t('common.generateVideo')">
+									<span class="vg-submit-circle-inner">
+										<svg width="22" height="22" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+											<path fill="currentColor" d="M12.002 3c.424 0 .806.177 1.079.46l5.98 5.98.103.114a1.5 1.5 0 0 1-2.225 2.006l-3.437-3.436V19.5l-.008.153a1.5 1.5 0 0 1-2.985 0l-.007-.153V8.122l-3.44 3.438a1.5 1.5 0 0 1-2.225-2.006l.103-.115 6-5.999.025-.025.059-.052.044-.037c.029-.023.06-.044.09-.065l.014-.01a1.43 1.43 0 0 1 .101-.062l.03-.017c.209-.11.447-.172.699-.172Z" />
+										</svg>
+									</span>
+								</button>
+							</div>
+						</div>
+
+						<div class="vg-submit-hint">
+							{{
+								price
+									? `${$t('common.createVideo', { price: price })} · ${$t('common.generateTip') || '生成将消耗余额'}`
+									: $t('common.generateTip') || '生成视频需要消耗余额'
+							}}
+						</div>
 					</div>
-					<mf-image-upload
-						listType="picture-card"
-						uploadHeight="120px"
-						:show-file-list="false"
-						:content="$t('common.uploadLastPlaceholder') || '点击上传尾帧'"
-						v-model="lastUrl" />
 				</div>
 			</div>
 
-			<!-- 模型选择 -->
-			<div class="model-select">
-				<div class="model-title">{{ $t('common.selectModel') || '选择模型' }}</div>
-				<a-select v-model="selectedModel" style="width: 100%;">
-					<a-option 
-						v-for="option in modelOptions" 
-						:key="option.value" 
-						:value="option.value">
-						{{ option.label }}
-					</a-option>
-				</a-select>
-			</div>
+			<!-- 右侧预览 -->
+			<div class="right" :class="{ 'has-result': showResult }">
+				<div v-if="!showResult" class="empty-state">
+					<div class="empty-visual">
+						<div class="empty-ring" />
+						<img src="/images/empty-video.png" alt="" />
+					</div>
+					<p>生成的视频将在这里显示</p>
+				</div>
 
-			<!-- 富文本编辑器 - 加大输入框 -->
-			<div class="rich-editor-container">
-				<RichTextEditor
-					v-model="editorContent"
-					:placeholder="$t('common.textVideoPlaceholder') || '描述视频内容，例如：一个女孩在海边跳舞...'"
-					:uploaded-images="uploadedImages"
-					@text-change="handleTextChange"
-					@image-upload="handleImageUpload"
-				/>
-			</div>
+				<div v-else class="result-container">
+					<div class="result-video-wrapper">
+						<video
+							v-if="videoUrl"
+							:src="videoUrl"
+							controls
+							autoplay
+							class="result-video"
+							:poster="posterUrl">
+							您的浏览器不支持视频播放。
+						</video>
+					</div>
 
-			<mf-button
-				class="submit"
-				type="primary"
-				size="large"
-				:loading="generateLoading"
-				@click="generateVideo">
-				{{
-					price
-						? `${$t('common.createVideo', { price: price })}`
-						: $t('common.generateVideo')
-				}}
-			</mf-button>
-			<div class="submit-tip">
-				{{ $t('common.generateTip') || '生成视频需要消耗余额' }}
+					<div class="result-actions">
+						<mf-button v-if="canCancel" @click="cancelTask" type="danger"> 取消任务 </mf-button>
+						<mf-button @click="saveVideo" :disabled="!videoUrl">
+							<a-image src="/images/btn_save.png" /> 保存视频
+						</mf-button>
+						<mf-button @click="closeResult">
+							<a-image src="/images/btn_close.png" /> 关闭
+						</mf-button>
+					</div>
+				</div>
 			</div>
 		</div>
 
-		<!-- 右侧结果区 -->
-		<div class="right" :class="{ 'has-result': showResult }">
-			<div v-if="!showResult" class="empty-state">
-				<img src="/images/empty-video.png" alt="视频生成" />
-				<p>生成的视频将在这里显示</p>
+		<section class="vg-task-section">
+			<div class="vg-task-head">
+				<h3 class="vg-task-title">我的视频任务</h3>
+				<button type="button" class="vg-task-refresh" @click="loadTaskList">刷新</button>
 			</div>
-
-			<div v-else class="result-container">
-				<div class="result-video-wrapper">
-					<video
-						v-if="videoUrl"
-						:src="videoUrl"
-						controls
-						autoplay
-						class="result-video"
-						:poster="firstUrl?.url || ''">
-						您的浏览器不支持视频播放。
-					</video>
-				</div>
-
-				<div class="result-actions">
-					<mf-button v-if="canCancel" @click="cancelTask" type="danger">
-						取消任务
-					</mf-button>
-					<mf-button @click="saveVideo" :disabled="!videoUrl">
-						<a-image src="/images/btn_save.png" /> 保存视频
-					</mf-button>
-					<mf-button @click="closeResult">
-						<a-image src="/images/btn_close.png" /> 关闭
-					</mf-button>
-				</div>
-			</div>
-		</div>
+			<p v-if="!taskRows.length" class="vg-task-empty">暂无任务，生成后将显示在此</p>
+			<ul v-else class="vg-task-list">
+				<li v-for="row in taskRows" :key="row.id" class="vg-task-item">
+					<div class="vg-task-meta">
+						<span class="vg-task-id">{{ row.result || '—' }}</span>
+						<span class="vg-task-st">{{ taskStatusText(row) }}</span>
+					</div>
+					<div class="vg-task-actions">
+						<button type="button" class="vg-link" v-if="row.result && row.status === 0" @click="cancelRowTask(row)">
+							取消
+						</button>
+					</div>
+				</li>
+			</ul>
+		</section>
 	</div>
 </template>
 
@@ -133,9 +218,16 @@ export default {
 	data() {
 		return {
 			prefixCls: 'video-gen',
-			mode: 'text-to-video', // 'text-to-video' 或 'image-to-video'
+			videoMode: 'text-to-video',
+			videoModeOptions: [
+				{ value: 'text-to-video', label: '文生视频' },
+				{ value: 'image-first-frame', label: '图生视频 · 首帧' },
+				{ value: 'image-first-last-frame', label: '图生视频 · 首尾帧' },
+				{ value: 'image-reference', label: '图生视频 · 参考图' }
+			],
 			firstUrl: '',
 			lastUrl: '',
+			referenceUrl: '',
 			editorContent: '',
 			interval: null,
 			videoUrl: null,
@@ -151,20 +243,95 @@ export default {
 			],
 			selectedModel: 'ep-20260326165811-dlkth',
 			uploadedImages: [],
-			showLastFrame: false,
-			maxPollAttempts: 40
+			maxPollAttempts: 40,
+			typeMenuOpen: false,
+			taskRows: []
 		}
 	},
 	components: {
 		RichTextEditor
 	},
 	computed: {
-		...mapGetters(['lang'])
+		...mapGetters(['lang']),
+		canCancel() {
+			return !!this.videoId && !this.videoUrl
+		},
+		videoModeLabel() {
+			const o = this.videoModeOptions.find((x) => x.value === this.videoMode)
+			return o ? o.label : '文生视频'
+		},
+		isImageVideoMode() {
+			return this.videoMode !== 'text-to-video'
+		},
+		imageUploadPrimaryLabel() {
+			if (this.videoMode === 'image-reference') return '上传参考图'
+			if (this.videoMode === 'image-first-last-frame') return '上传首帧'
+			return this.$t('common.uploadFirstImage') || '上传首帧'
+		},
+		posterUrl() {
+			const f = this.videoMode === 'image-reference' ? this.referenceUrl : this.firstUrl
+			if (!f) return ''
+			return typeof f === 'object' ? (f.url || '') : f
+		}
 	},
 	mounted() {
 		this.loadPriceInfo()
+		this.loadTaskList()
+		document.addEventListener('click', this.onDocClick)
+	},
+	beforeUnmount() {
+		this.destroyInterval()
+		document.removeEventListener('click', this.onDocClick)
 	},
 	methods: {
+		onDocClick() {
+			this.typeMenuOpen = false
+		},
+		pickVideoMode(m) {
+			this.videoMode = m
+			this.firstUrl = ''
+			this.lastUrl = ''
+			this.referenceUrl = ''
+			this.editorContent = ''
+			this.uploadedImages = []
+			this.typeMenuOpen = false
+		},
+
+		plainPromptText() {
+			if (!this.editorContent || !String(this.editorContent).trim()) return ''
+			const s = String(this.editorContent)
+			if (s.indexOf('<') < 0) return s.trim()
+			const d = document.createElement('div')
+			d.innerHTML = s
+			return (d.textContent || d.innerText || '').trim()
+		},
+
+		async loadTaskList() {
+			try {
+				const res = await this.$axios({
+					url: 'api/portal/video/tasks',
+					method: 'GET',
+					data: { pageNum: 1, pageSize: 30 }
+				})
+				if (res.code === 200 && res.rows) this.taskRows = res.rows
+			} catch (_) {
+				/* 未登录等忽略 */
+			}
+		},
+
+		taskStatusText(row) {
+			if (row.status === 1) return '已完成'
+			if (row.status === 2) return '已失败/已取消'
+			return '进行中'
+		},
+
+		async cancelRowTask(row) {
+			const tid = row.result
+			if (!tid) return
+			await this.cancelTaskById(tid)
+			await this.loadTaskList()
+		},
+
 		async loadPriceInfo() {
 			this.$axios({
 				url: 'api/manager/selectInfo',
@@ -190,13 +357,30 @@ export default {
 		},
 
 		generateVideo() {
-			if (this.mode === 'image-to-video') {
-				const firstImageUrl = typeof this.firstUrl === 'object' ? this.firstUrl.url : this.firstUrl
-				if (!firstImageUrl) {
-					this.$message.error(this.$t('common.uploadFirstImageError') || '请上传参考图')
-					return
+			const text = this.plainPromptText() || '一个优雅的女孩在阳光下跳舞'
+
+			if (this.isImageVideoMode) {
+				if (this.videoMode === 'image-reference') {
+					const ref = typeof this.referenceUrl === 'object' ? this.referenceUrl?.url : this.referenceUrl
+					if (!ref) {
+						this.$message.error('请上传参考图')
+						return
+					}
+				} else {
+					const firstImageUrl = typeof this.firstUrl === 'object' ? this.firstUrl?.url : this.firstUrl
+					if (!firstImageUrl) {
+						this.$message.error(this.$t('common.uploadFirstImageError') || '请上传首帧图')
+						return
+					}
+					if (this.videoMode === 'image-first-last-frame') {
+						const last = typeof this.lastUrl === 'object' ? this.lastUrl?.url : this.lastUrl
+						if (!last) {
+							this.$message.error('请上传尾帧图')
+							return
+						}
+					}
 				}
-			} else if (!this.editorContent.trim()) {
+			} else if (!this.plainPromptText()) {
 				this.$message.error('请输入视频描述文本')
 				return
 			}
@@ -204,23 +388,30 @@ export default {
 			this.generateLoading = true
 
 			const params = {
-				text: this.editorContent || '一个优雅的女孩在阳光下跳舞',
+				text,
 				functionType: '21',
 				model: this.selectedModel
 			}
 
-			// 图生视频模式需要上传图片
-			if (this.mode === 'image-to-video') {
-				const firstImageUrl = typeof this.firstUrl === 'object' ? this.firstUrl.url : this.firstUrl
-				params.firstUrl = firstImageUrl
-
-				if (this.lastUrl) {
-					params.lastUrl = typeof this.lastUrl === 'object' ? this.lastUrl.url : this.lastUrl
-				}
+			const urlMap = {
+				'text-to-video': 'api/portal/video/text-to-video',
+				'image-first-frame': 'api/portal/video/image-first-frame',
+				'image-first-last-frame': 'api/portal/video/image-first-last-frame',
+				'image-reference': 'api/portal/video/image-reference'
+			}
+			const path = urlMap[this.videoMode]
+			if (this.videoMode === 'image-first-frame' || this.videoMode === 'image-first-last-frame') {
+				params.firstUrl = typeof this.firstUrl === 'object' ? this.firstUrl.url : this.firstUrl
+			}
+			if (this.videoMode === 'image-first-last-frame') {
+				params.lastUrl = typeof this.lastUrl === 'object' ? this.lastUrl.url : this.lastUrl
+			}
+			if (this.videoMode === 'image-reference') {
+				params.referenceUrl = typeof this.referenceUrl === 'object' ? this.referenceUrl.url : this.referenceUrl
 			}
 
 			this.$axios({
-				url: 'api/ai/imgToVideo',
+				url: path,
 				method: 'POST',
 				data: params
 			}).then((res) => {
@@ -229,6 +420,7 @@ export default {
 					this.videoId = res.data.id
 					this.showResult = true
 					this.getVideo(res.data.id)
+					this.loadTaskList()
 				} else if (res.code == -1) {
 					this.$confirm({
 						title: this.$t('common.notice'),
@@ -252,7 +444,7 @@ export default {
 				}
 
 				this.$axios({
-					url: `api/ai/${videoId}`,
+					url: `api/portal/video/tasks/${videoId}`,
 					method: 'GET'
 				}).then((res) => {
 					if (res.code == 200 && res.data.status === 'succeeded') {
@@ -287,150 +479,632 @@ export default {
 			this.taskStatus = null
 		},
 
-		// 取消任务
 		async cancelTask() {
 			if (!this.videoId) return
-
-			this.$confirm({
-				title: '取消任务',
-				content: '确定要取消当前视频生成任务吗？取消后余额将退回。',
-				okText: '确定取消',
-				cancelText: '关闭',
-				onOk: async () => {
-					try {
-						const res = await this.$axios({
-							url: `api/ai/${this.videoId}/cancel`,
-							method: 'POST'
-						})
-
-						if (res.code === 200) {
-							this.$message.success('任务已取消，余额已退回')
-							this.destroyInterval()
-							this.showResult = false
-							this.videoUrl = null
-							this.videoId = null
-						} else {
-							this.$message.error(res.msg || '取消失败')
-						}
-					} catch (error) {
-						this.$message.error('取消请求失败')
-					}
-				}
-			})
+			await this.cancelTaskById(this.videoId)
 		},
 
-		// 计算属性：是否可以取消
-		canCancel() {
-			return this.videoId && !this.videoUrl
+		async cancelTaskById(taskId) {
+			return new Promise((resolve) => {
+				this.$confirm({
+					title: '取消任务',
+					content: '确定要取消当前视频生成任务吗？取消后余额将退回。',
+					okText: '确定取消',
+					cancelText: '关闭',
+					onOk: async () => {
+						try {
+							const res = await this.$axios({
+								url: `api/portal/video/tasks/${taskId}`,
+								method: 'DELETE'
+							})
+
+							if (res.code === 200) {
+								this.$message.success(res.msg || '任务已取消，余额已退回')
+								this.destroyInterval()
+								this.showResult = false
+								this.videoUrl = null
+								this.videoId = null
+								this.loadTaskList()
+							} else {
+								this.$message.error(res.msg || '取消失败')
+							}
+						} catch (error) {
+							this.$message.error('取消请求失败')
+						}
+						resolve()
+					},
+					onCancel: () => resolve()
+				})
+			})
 		}
-	},
-	beforeUnmount() {
-		this.destroyInterval()
 	}
 }
 </script>
 
 <style lang="less" scoped>
 .video-gen {
+	--vg-cyan: #00cae0;
+	--vg-ink: #0a0b0d;
+	--vg-panel: rgba(22, 24, 30, 0.92);
+	--vg-border: rgba(255, 255, 255, 0.08);
+	--vg-text: rgba(255, 255, 255, 0.88);
+	--vg-muted: rgba(255, 255, 255, 0.45);
+
 	display: flex;
-	height: 100%;
+	flex-direction: column;
+	min-height: 100%;
 	gap: 20px;
-	padding: 20px;
-	background: #0f1014;
+	padding: 28px 28px 32px;
+	background: radial-gradient(120% 80% at 50% -20%, rgba(0, 202, 224, 0.12), transparent 55%),
+		radial-gradient(80% 50% at 100% 30%, rgba(33, 151, 255, 0.08), transparent 45%), var(--vg-ink);
+	box-sizing: border-box;
+}
 
-	.left {
-		width: 480px;
-		background: #1a1b20;
-		border-radius: 12px;
-		padding: 24px;
-		display: flex;
-		flex-direction: column;
+/* —— Hero —— */
+.vg-hero {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: flex-end;
+	justify-content: space-between;
+	gap: 16px 24px;
+	padding: 4px 0 16px;
+	border-bottom: 1px solid var(--vg-border);
+	margin-bottom: 4px;
+}
+
+.vg-hero-text {
+	flex: 1;
+	min-width: 200px;
+}
+
+.vg-hero-title {
+	margin: 0 0 6px;
+	font-size: clamp(22px, 3vw, 30px);
+	font-weight: 700;
+	letter-spacing: -0.02em;
+	color: var(--vg-text);
+	line-height: 1.2;
+}
+
+.vg-hero-desc {
+	margin: 0;
+	font-size: 14px;
+	color: var(--vg-muted);
+	line-height: 1.5;
+}
+
+.vg-type-select {
+	position: relative;
+	display: inline-flex;
+	align-items: center;
+	flex-wrap: wrap;
+	gap: 10px 12px;
+}
+
+.vg-hero-mode-label {
+	font-size: 13px;
+	color: var(--vg-muted);
+	white-space: nowrap;
+}
+
+.vg-type-trigger {
+	display: inline-flex;
+	align-items: center;
+	gap: 8px;
+	padding: 8px 14px;
+	margin: 0;
+	background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.03));
+	border: 1px solid var(--vg-border);
+	border-radius: 12px;
+	color: #fff;
+	font-size: 15px;
+	font-weight: 700;
+	font-family: inherit;
+	cursor: pointer;
+	transition: border-color 0.2s, box-shadow 0.2s;
+	box-shadow: 0 0 0 1px rgba(0, 202, 224, 0.15);
+
+	&:hover {
+		border-color: rgba(0, 202, 224, 0.45);
 	}
 
-	.page-title {
-		font-size: 22px;
-		color: #fff;
-		margin-bottom: 24px;
-		font-weight: 600;
-
-		.subtitle {
-			font-size: 14px;
-			color: #666;
-			margin-left: 12px;
-			font-weight: normal;
-		}
-	}
-
-	.model-select {
-		margin: 16px 0;
-
-		.model-title {
-			color: #ddd;
-			margin-bottom: 8px;
-			font-size: 14px;
-		}
-	}
-
-	.rich-editor-container {
-		flex: 1;
-		min-height: 320px;
-		margin: 16px 0;
-		display: flex;
-		flex-direction: column;
-		
-		:deep(.rich-editor-root) {
-			flex: 1;
-			display: flex;
-			flex-direction: column;
-		}
-		
-		:deep(.rich-editor) {
-			flex: 1;
-			min-height: 280px !important;
-			font-size: 16px;
-			line-height: 1.75;
-			padding: 20px;
-		}
-	}
-
-	.submit {
-		margin-top: 16px;
-	}
-
-	.right {
-		flex: 1;
-		background: #000;
-		border-radius: 12px;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		position: relative;
-		overflow: hidden;
-
-		&.has-result {
-			align-items: flex-start;
-			padding: 20px;
-		}
-	}
-
-	.empty-state {
-		text-align: center;
-		color: #666;
-
-		img {
-			width: 120px;
-			opacity: 0.6;
-		}
-	}
-
-	.result-video-wrapper {
-		width: 100%;
-		max-width: 720px;
-	}
-
-	.result-video {
-		width: 100%;
-		border-radius: 8px;
+	&.is-open .vg-type-chevron {
+		transform: rotate(180deg);
 	}
 }
+
+.vg-type-label {
+	background: linear-gradient(90deg, #fff, rgba(0, 202, 224, 0.95));
+	-webkit-background-clip: text;
+	background-clip: text;
+	color: transparent;
+}
+
+.vg-type-chevron {
+	width: 0.85em;
+	height: 0.85em;
+	opacity: 0.75;
+	transition: transform 0.2s cubic-bezier(0.15, 0.75, 0.3, 1);
+}
+
+.vg-type-dropdown {
+	position: absolute;
+	left: 0;
+	top: calc(100% + 8px);
+	min-width: 100%;
+	z-index: 50;
+	border-radius: 14px;
+	overflow: hidden;
+	box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
+}
+
+.vg-type-dropdown-bg {
+	position: absolute;
+	inset: 0;
+	background: rgba(18, 20, 26, 0.98);
+	backdrop-filter: blur(12px);
+	border: 1px solid var(--vg-border);
+	border-radius: 14px;
+}
+
+.vg-type-options {
+	position: relative;
+	list-style: none;
+	margin: 0;
+	padding: 6px;
+	z-index: 1;
+}
+
+.vg-type-option {
+	padding: 12px 16px;
+	border-radius: 10px;
+	color: var(--vg-muted);
+	font-size: 15px;
+	font-weight: 600;
+	cursor: pointer;
+	transition: background 0.15s, color 0.15s;
+
+	&:hover {
+		background: rgba(255, 255, 255, 0.06);
+		color: var(--vg-text);
+	}
+
+	&.active {
+		color: var(--vg-cyan);
+		background: rgba(0, 202, 224, 0.1);
+	}
+}
+
+.vg-fade-enter-active,
+.vg-fade-leave-active {
+	transition: opacity 0.15s ease, transform 0.15s ease;
+}
+.vg-fade-enter-from,
+.vg-fade-leave-to {
+	opacity: 0;
+	transform: translateY(-6px);
+}
+
+/* —— Body —— */
+.vg-body {
+	display: flex;
+	flex: 1;
+	gap: 20px;
+	align-items: stretch;
+	min-height: 420px;
+}
+
+.vg-generator {
+	flex: 0 0 min(520px, 44vw);
+	min-width: 300px;
+	display: flex;
+}
+
+.vg-generator-inner {
+	flex: 1;
+	display: flex;
+	flex-direction: column;
+	gap: 16px;
+	padding: 22px;
+	background: var(--vg-panel);
+	border: 1px solid var(--vg-border);
+	border-radius: 20px;
+	box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.06);
+}
+
+.vg-refs {
+	flex-shrink: 0;
+}
+
+.vg-ref-group {
+	position: relative;
+	border-radius: 16px;
+	overflow: hidden;
+	min-height: 92px;
+}
+
+.vg-ref-bg {
+	position: absolute;
+	inset: 0;
+	background: linear-gradient(135deg, rgba(0, 202, 224, 0.08), rgba(33, 151, 255, 0.05));
+	border: 1px dashed rgba(255, 255, 255, 0.12);
+	border-radius: 16px;
+	pointer-events: none;
+}
+
+.vg-ref-content {
+	position: relative;
+	padding: 12px;
+}
+
+.vg-ref-tilt {
+	transform: rotate(-1.5deg);
+	transition: transform 0.25s ease;
+
+	&:hover {
+		transform: rotate(0deg);
+	}
+}
+
+.upload-inner {
+	transform: rotate(1.5deg);
+
+	.upload-title {
+		margin-bottom: 10px;
+	}
+	.upload-title-left {
+		color: var(--vg-text);
+		font-weight: 600;
+		font-size: 14px;
+	}
+	.upload-title-tip {
+		color: var(--vg-muted);
+		font-size: 12px;
+		margin-top: 4px;
+	}
+	.last-frame {
+		margin-top: 14px;
+	}
+}
+
+.vg-ref-placeholder {
+	position: relative;
+	display: flex;
+	align-items: center;
+	gap: 14px;
+	padding: 18px 20px;
+	min-height: 88px;
+}
+
+.vg-ref-placeholder-icon {
+	flex-shrink: 0;
+	width: 48px;
+	height: 48px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	border-radius: 14px;
+	background: rgba(255, 255, 255, 0.06);
+	color: var(--vg-cyan);
+}
+
+.vg-ref-placeholder-text {
+	margin: 0;
+	font-size: 13px;
+	line-height: 1.5;
+	color: var(--vg-muted);
+}
+
+.vg-main-column {
+	display: flex;
+	flex-direction: column;
+	flex: 1;
+	min-height: 0;
+}
+
+.rich-editor-container {
+	flex: 1;
+	min-height: 260px;
+	margin: 0;
+	display: flex;
+	flex-direction: column;
+
+	:deep(.rich-editor-root) {
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+	}
+
+	:deep(.rich-editor) {
+		flex: 1;
+		min-height: 220px !important;
+		font-size: 15px;
+		line-height: 1.7;
+		padding: 16px 18px;
+		border-radius: 14px !important;
+		background: rgba(0, 0, 0, 0.25) !important;
+		border: 1px solid var(--vg-border) !important;
+	}
+}
+
+.vg-toolbar {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 16px;
+	margin-top: 14px;
+	padding-top: 14px;
+	border-top: 1px solid var(--vg-border);
+}
+
+.vg-toolbar-settings {
+	flex: 1;
+	min-width: 0;
+}
+
+.vg-model-wrap {
+	display: flex;
+	align-items: center;
+	gap: 10px;
+	padding: 4px 12px;
+	background: rgba(0, 0, 0, 0.2);
+	border-radius: 12px;
+	border: 1px solid var(--vg-border);
+}
+
+.vg-model-icon {
+	display: flex;
+	color: var(--vg-cyan);
+	opacity: 0.85;
+}
+
+.vg-model-select {
+	flex: 1;
+	min-width: 0;
+
+	:deep(.arco-select-view-single) {
+		background: transparent !important;
+		border: none !important;
+		color: var(--vg-text) !important;
+	}
+	:deep(.arco-select-view-value) {
+		color: var(--vg-text) !important;
+	}
+}
+
+.vg-toolbar-actions {
+	flex-shrink: 0;
+}
+
+.vg-submit-circle {
+	width: 52px;
+	height: 52px;
+	padding: 0;
+	border: none;
+	border-radius: 50%;
+	cursor: pointer;
+	background: linear-gradient(145deg, #00d4e8, #0090a8);
+	box-shadow: 0 0 0 2px rgba(0, 202, 224, 0.35), 0 8px 24px rgba(0, 150, 180, 0.35);
+	color: #fff;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	transition: transform 0.2s, box-shadow 0.2s, opacity 0.2s;
+
+	&:hover:not(:disabled) {
+		transform: scale(1.04);
+		box-shadow: 0 0 0 3px rgba(0, 202, 224, 0.5), 0 12px 28px rgba(0, 150, 180, 0.45);
+	}
+
+	&:disabled {
+		opacity: 0.45;
+		cursor: not-allowed;
+		transform: none;
+	}
+}
+
+.vg-submit-circle-inner {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.vg-submit-hint {
+	margin-top: 12px;
+	font-size: 12px;
+	color: var(--vg-muted);
+	line-height: 1.5;
+}
+
+/* —— 右侧预览 —— */
+.right {
+	flex: 1;
+	background: rgba(0, 0, 0, 0.35);
+	border: 1px solid var(--vg-border);
+	border-radius: 20px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	position: relative;
+	overflow: hidden;
+	min-height: 360px;
+
+	&.has-result {
+		align-items: flex-start;
+		padding: 20px;
+	}
+}
+
+.empty-state {
+	text-align: center;
+	color: var(--vg-muted);
+	padding: 24px;
+
+	.empty-visual {
+		position: relative;
+		display: inline-block;
+		margin-bottom: 16px;
+	}
+
+	.empty-ring {
+		position: absolute;
+		inset: -12px;
+		border-radius: 50%;
+		border: 1px solid rgba(0, 202, 224, 0.2);
+		animation: vg-pulse 2.4s ease-in-out infinite;
+	}
+
+	img {
+		position: relative;
+		width: 120px;
+		opacity: 0.55;
+	}
+
+	p {
+		margin: 0;
+		font-size: 14px;
+	}
+}
+
+@keyframes vg-pulse {
+	0%,
+	100% {
+		transform: scale(1);
+		opacity: 0.5;
+	}
+	50% {
+		transform: scale(1.08);
+		opacity: 0.85;
+	}
+}
+
+.result-video-wrapper {
+	width: 100%;
+	max-width: 720px;
+}
+
+.result-video {
+	width: 100%;
+	border-radius: 12px;
+}
+
+.result-actions {
+	margin-top: 16px;
+	display: flex;
+	flex-wrap: wrap;
+	gap: 10px;
+}
+
+@media (max-width: 640px) {
+	.vg-body {
+		flex-direction: column;
+	}
+	.vg-generator {
+		flex: none;
+		width: 100%;
+	}
+	.vg-hero {
+		flex-direction: column;
+		align-items: stretch;
+	}
+	.vg-type-select {
+		flex-direction: column;
+		align-items: flex-start;
+	}
+}
+
+.vg-task-empty {
+	margin: 0;
+	font-size: 13px;
+	color: var(--vg-muted);
+}
+
+.vg-task-section {
+	margin-top: 8px;
+	padding: 18px 22px;
+	background: var(--vg-panel);
+	border: 1px solid var(--vg-border);
+	border-radius: 16px;
+}
+
+.vg-task-head {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	margin-bottom: 12px;
+}
+
+.vg-task-title {
+	margin: 0;
+	font-size: 15px;
+	font-weight: 600;
+	color: var(--vg-text);
+}
+
+.vg-task-refresh {
+	font-size: 13px;
+	padding: 6px 12px;
+	border-radius: 8px;
+	border: 1px solid var(--vg-border);
+	background: rgba(255, 255, 255, 0.06);
+	color: var(--vg-muted);
+	cursor: pointer;
+}
+
+.vg-task-refresh:hover {
+	color: var(--vg-cyan);
+	border-color: rgba(0, 202, 224, 0.35);
+}
+
+.vg-task-list {
+	list-style: none;
+	margin: 0;
+	padding: 0;
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+	max-height: 200px;
+	overflow: auto;
+}
+
+.vg-task-item {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 12px;
+	padding: 10px 12px;
+	border-radius: 10px;
+	background: rgba(0, 0, 0, 0.2);
+	font-size: 12px;
+}
+
+.vg-task-meta {
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+	min-width: 0;
+}
+
+.vg-task-id {
+	color: var(--vg-muted);
+	word-break: break-all;
+}
+
+.vg-task-st {
+	color: var(--vg-cyan);
+	font-weight: 600;
+}
+
+.vg-link {
+	background: none;
+	border: none;
+	padding: 0;
+	color: #ff6b6b;
+	cursor: pointer;
+	font-size: 12px;
+}
+
+.vg-link:hover {
+	text-decoration: underline;
+}
 </style>
diff --git a/portal-ui/vite.config.js.timestamp-1774596443609-67b0d65f8e8ef.mjs b/portal-ui/vite.config.js.timestamp-1774596443609-67b0d65f8e8ef.mjs
new file mode 100644
index 0000000..454ba55
--- /dev/null
+++ b/portal-ui/vite.config.js.timestamp-1774596443609-67b0d65f8e8ef.mjs
@@ -0,0 +1,71 @@
+// vite.config.js
+import {
+  defineConfig,
+  transformWithEsbuild
+} from "file:///D:/AI%E9%A1%B9%E7%9B%AE%E4%BA%A4%E4%BB%98%E6%96%87%E4%BB%B6/AI%E9%A1%B9%E7%9B%AE%E4%BA%A4%E4%BB%98%E6%96%87%E4%BB%B6/%E5%B7%A5%E7%A8%8B%E4%BB%A3%E7%A0%81/portal-ui/node_modules/vite/dist/node/index.js";
+import vue from "file:///D:/AI%E9%A1%B9%E7%9B%AE%E4%BA%A4%E4%BB%98%E6%96%87%E4%BB%B6/AI%E9%A1%B9%E7%9B%AE%E4%BA%A4%E4%BB%98%E6%96%87%E4%BB%B6/%E5%B7%A5%E7%A8%8B%E4%BB%A3%E7%A0%81/portal-ui/node_modules/@vitejs/plugin-vue/dist/index.mjs";
+import vueJsx from "file:///D:/AI%E9%A1%B9%E7%9B%AE%E4%BA%A4%E4%BB%98%E6%96%87%E4%BB%B6/AI%E9%A1%B9%E7%9B%AE%E4%BA%A4%E4%BB%98%E6%96%87%E4%BB%B6/%E5%B7%A5%E7%A8%8B%E4%BB%A3%E7%A0%81/portal-ui/node_modules/@vitejs/plugin-vue-jsx/dist/index.mjs";
+import {
+  vitePluginForArco
+} from "file:///D:/AI%E9%A1%B9%E7%9B%AE%E4%BA%A4%E4%BB%98%E6%96%87%E4%BB%B6/AI%E9%A1%B9%E7%9B%AE%E4%BA%A4%E4%BB%98%E6%96%87%E4%BB%B6/%E5%B7%A5%E7%A8%8B%E4%BB%A3%E7%A0%81/portal-ui/node_modules/@arco-plugins/vite-vue/lib/index.js";
+import {
+  resolve
+} from "path";
+import svgLoader from "file:///D:/AI%E9%A1%B9%E7%9B%AE%E4%BA%A4%E4%BB%98%E6%96%87%E4%BB%B6/AI%E9%A1%B9%E7%9B%AE%E4%BA%A4%E4%BB%98%E6%96%87%E4%BB%B6/%E5%B7%A5%E7%A8%8B%E4%BB%A3%E7%A0%81/portal-ui/node_modules/vite-svg-loader/index.js";
+var __vite_injected_original_dirname = "D:\\AI\u9879\u76EE\u4EA4\u4ED8\u6587\u4EF6\\AI\u9879\u76EE\u4EA4\u4ED8\u6587\u4EF6\\\u5DE5\u7A0B\u4EE3\u7801\\portal-ui";
+var vite_config_default = defineConfig({
+  publicDir: "static",
+  resolve: {
+    extensions: [".mjs", ".js", ".jsx", ".json"],
+    alias: [{
+      find: "@",
+      replacement: resolve(__vite_injected_original_dirname, "src")
+    }]
+  },
+  css: {
+    preprocessorOptions: {
+      less: {
+        modifyVars: {
+          "@size-9": "40px",
+          "arcoblue-6": "#e6217a"
+        }
+      }
+    }
+  },
+  plugins: [
+    vue({
+      template: {
+        transformAssetUrls: {
+          includeAbsolute: false
+        }
+      }
+    }),
+    svgLoader(),
+    vueJsx({
+      include: /\.[jt]sx?$/
+    }),
+    vitePluginForArco(),
+    {
+      name: "treat-js-files-as-jsx",
+      async transform(code, id) {
+        if (!id.match(/src\/.*\.js$/)) return null;
+        return transformWithEsbuild(code, id, {
+          loader: "jsx",
+          jsx: "automatic"
+        });
+      }
+    }
+  ],
+  optimizeDeps: {
+    esbuildOptions: {
+      loader: {
+        ".js": "jsx"
+      }
+    },
+    exclude: ["__INDEX__"]
+  }
+});
+export {
+  vite_config_default as default
+};
+//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsidml0ZS5jb25maWcuanMiXSwKICAic291cmNlc0NvbnRlbnQiOiBbImNvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9kaXJuYW1lID0gXCJEOlxcXFxBSVx1OTg3OVx1NzZFRVx1NEVBNFx1NEVEOFx1NjU4N1x1NEVGNlxcXFxBSVx1OTg3OVx1NzZFRVx1NEVBNFx1NEVEOFx1NjU4N1x1NEVGNlxcXFxcdTVERTVcdTdBMEJcdTRFRTNcdTc4MDFcXFxccG9ydGFsLXVpXCI7Y29uc3QgX192aXRlX2luamVjdGVkX29yaWdpbmFsX2ZpbGVuYW1lID0gXCJEOlxcXFxBSVx1OTg3OVx1NzZFRVx1NEVBNFx1NEVEOFx1NjU4N1x1NEVGNlxcXFxBSVx1OTg3OVx1NzZFRVx1NEVBNFx1NEVEOFx1NjU4N1x1NEVGNlxcXFxcdTVERTVcdTdBMEJcdTRFRTNcdTc4MDFcXFxccG9ydGFsLXVpXFxcXHZpdGUuY29uZmlnLmpzXCI7Y29uc3QgX192aXRlX2luamVjdGVkX29yaWdpbmFsX2ltcG9ydF9tZXRhX3VybCA9IFwiZmlsZTovLy9EOi9BSSVFOSVBMSVCOSVFNyU5QiVBRSVFNCVCQSVBNCVFNCVCQiU5OCVFNiU5NiU4NyVFNCVCQiVCNi9BSSVFOSVBMSVCOSVFNyU5QiVBRSVFNCVCQSVBNCVFNCVCQiU5OCVFNiU5NiU4NyVFNCVCQiVCNi8lRTUlQjclQTUlRTclQTglOEIlRTQlQkIlQTMlRTclQTAlODEvcG9ydGFsLXVpL3ZpdGUuY29uZmlnLmpzXCI7aW1wb3J0IHtcclxuXHRkZWZpbmVDb25maWcsXHJcblx0dHJhbnNmb3JtV2l0aEVzYnVpbGRcclxufSBmcm9tICd2aXRlJ1xyXG5pbXBvcnQgdnVlIGZyb20gJ0B2aXRlanMvcGx1Z2luLXZ1ZSdcclxuaW1wb3J0IHZ1ZUpzeCBmcm9tICdAdml0ZWpzL3BsdWdpbi12dWUtanN4J1xyXG5pbXBvcnQge1xyXG5cdHZpdGVQbHVnaW5Gb3JBcmNvXHJcbn0gZnJvbSAnQGFyY28tcGx1Z2lucy92aXRlLXZ1ZSdcclxuaW1wb3J0IHtcclxuXHRyZXNvbHZlXHJcbn0gZnJvbSAncGF0aCdcclxuaW1wb3J0IHN2Z0xvYWRlciBmcm9tICd2aXRlLXN2Zy1sb2FkZXInXHJcblxyXG5leHBvcnQgZGVmYXVsdCBkZWZpbmVDb25maWcoe1xyXG5cdHB1YmxpY0RpcjogJ3N0YXRpYycsXHJcblx0cmVzb2x2ZToge1xyXG5cdFx0ZXh0ZW5zaW9uczogWycubWpzJywgJy5qcycsICcuanN4JywgJy5qc29uJ10sXHJcblx0XHRhbGlhczogW3tcclxuXHRcdFx0ZmluZDogJ0AnLFxyXG5cdFx0XHRyZXBsYWNlbWVudDogcmVzb2x2ZShfX2Rpcm5hbWUsICdzcmMnKVxyXG5cdFx0fV1cclxuXHR9LFxyXG5cdGNzczoge1xyXG5cdFx0cHJlcHJvY2Vzc29yT3B0aW9uczoge1xyXG5cdFx0XHRsZXNzOiB7XHJcblx0XHRcdFx0bW9kaWZ5VmFyczoge1xyXG5cdFx0XHRcdFx0J0BzaXplLTknOiAnNDBweCcsXHJcblx0XHRcdFx0XHQnYXJjb2JsdWUtNic6ICcjZTYyMTdhJ1xyXG5cdFx0XHRcdH1cclxuXHRcdFx0fVxyXG5cdFx0fVxyXG5cdH0sXHJcblx0cGx1Z2luczogW1xyXG5cdFx0dnVlKHtcclxuXHRcdFx0dGVtcGxhdGU6IHtcclxuXHRcdFx0XHR0cmFuc2Zvcm1Bc3NldFVybHM6IHtcclxuXHRcdFx0XHRcdGluY2x1ZGVBYnNvbHV0ZTogZmFsc2VcclxuXHRcdFx0XHR9XHJcblx0XHRcdH1cclxuXHRcdH0pLFxyXG5cdFx0c3ZnTG9hZGVyKCksXHJcblx0XHR2dWVKc3goe1xyXG5cdFx0XHRpbmNsdWRlOiAvXFwuW2p0XXN4PyQvXHJcblx0XHR9KSxcclxuXHRcdHZpdGVQbHVnaW5Gb3JBcmNvKCksXHJcblx0XHR7XHJcblx0XHRcdG5hbWU6ICd0cmVhdC1qcy1maWxlcy1hcy1qc3gnLFxyXG5cdFx0XHRhc3luYyB0cmFuc2Zvcm0oY29kZSwgaWQpIHtcclxuXHRcdFx0XHRpZiAoIWlkLm1hdGNoKC9zcmNcXC8uKlxcLmpzJC8pKSByZXR1cm4gbnVsbFxyXG5cdFx0XHRcdHJldHVybiB0cmFuc2Zvcm1XaXRoRXNidWlsZChjb2RlLCBpZCwge1xyXG5cdFx0XHRcdFx0bG9hZGVyOiAnanN4JyxcclxuXHRcdFx0XHRcdGpzeDogJ2F1dG9tYXRpYydcclxuXHRcdFx0XHR9KVxyXG5cdFx0XHR9XHJcblx0XHR9XHJcblx0XSxcclxuXHRvcHRpbWl6ZURlcHM6IHtcclxuXHRcdGVzYnVpbGRPcHRpb25zOiB7XHJcblx0XHRcdGxvYWRlcjoge1xyXG5cdFx0XHRcdCcuanMnOiAnanN4J1xyXG5cdFx0XHR9XHJcblx0XHR9LFxyXG5cdFx0ZXhjbHVkZTogWydfX0lOREVYX18nXVxyXG5cdH1cclxufSkiXSwKICAibWFwcGluZ3MiOiAiO0FBQXFhO0FBQUEsRUFDcGE7QUFBQSxFQUNBO0FBQUEsT0FDTTtBQUNQLE9BQU8sU0FBUztBQUNoQixPQUFPLFlBQVk7QUFDbkI7QUFBQSxFQUNDO0FBQUEsT0FDTTtBQUNQO0FBQUEsRUFDQztBQUFBLE9BQ007QUFDUCxPQUFPLGVBQWU7QUFadEIsSUFBTSxtQ0FBbUM7QUFjekMsSUFBTyxzQkFBUSxhQUFhO0FBQUEsRUFDM0IsV0FBVztBQUFBLEVBQ1gsU0FBUztBQUFBLElBQ1IsWUFBWSxDQUFDLFFBQVEsT0FBTyxRQUFRLE9BQU87QUFBQSxJQUMzQyxPQUFPLENBQUM7QUFBQSxNQUNQLE1BQU07QUFBQSxNQUNOLGFBQWEsUUFBUSxrQ0FBVyxLQUFLO0FBQUEsSUFDdEMsQ0FBQztBQUFBLEVBQ0Y7QUFBQSxFQUNBLEtBQUs7QUFBQSxJQUNKLHFCQUFxQjtBQUFBLE1BQ3BCLE1BQU07QUFBQSxRQUNMLFlBQVk7QUFBQSxVQUNYLFdBQVc7QUFBQSxVQUNYLGNBQWM7QUFBQSxRQUNmO0FBQUEsTUFDRDtBQUFBLElBQ0Q7QUFBQSxFQUNEO0FBQUEsRUFDQSxTQUFTO0FBQUEsSUFDUixJQUFJO0FBQUEsTUFDSCxVQUFVO0FBQUEsUUFDVCxvQkFBb0I7QUFBQSxVQUNuQixpQkFBaUI7QUFBQSxRQUNsQjtBQUFBLE1BQ0Q7QUFBQSxJQUNELENBQUM7QUFBQSxJQUNELFVBQVU7QUFBQSxJQUNWLE9BQU87QUFBQSxNQUNOLFNBQVM7QUFBQSxJQUNWLENBQUM7QUFBQSxJQUNELGtCQUFrQjtBQUFBLElBQ2xCO0FBQUEsTUFDQyxNQUFNO0FBQUEsTUFDTixNQUFNLFVBQVUsTUFBTSxJQUFJO0FBQ3pCLFlBQUksQ0FBQyxHQUFHLE1BQU0sY0FBYyxFQUFHLFFBQU87QUFDdEMsZUFBTyxxQkFBcUIsTUFBTSxJQUFJO0FBQUEsVUFDckMsUUFBUTtBQUFBLFVBQ1IsS0FBSztBQUFBLFFBQ04sQ0FBQztBQUFBLE1BQ0Y7QUFBQSxJQUNEO0FBQUEsRUFDRDtBQUFBLEVBQ0EsY0FBYztBQUFBLElBQ2IsZ0JBQWdCO0FBQUEsTUFDZixRQUFRO0FBQUEsUUFDUCxPQUFPO0FBQUEsTUFDUjtBQUFBLElBQ0Q7QUFBQSxJQUNBLFNBQVMsQ0FBQyxXQUFXO0FBQUEsRUFDdEI7QUFDRCxDQUFDOyIsCiAgIm5hbWVzIjogW10KfQo=