布局页面：团队管理、用量统计、水印设置

doc/h5/package-lock.json

@@ -9,6 +9,7 @@
       "version": "0.0.1",
       "dependencies": {
         "axios": "^1.5.0",
+        "echarts": "^6.1.0",
         "element-plus": "^2.14.0",
         "nprogress": "^0.2.0",
         "vue": "^3.4.0",
@@ -1240,6 +1241,16 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/echarts": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmmirror.com/echarts/-/echarts-6.1.0.tgz",
+      "integrity": "sha512-q0yaFPggC9FUdsWH4blavRWFmxdrIodbkoKNAjJudAI6CA9gNPxHtV2RcZNEepZVlk4yvBYkOkbk6HIVpIyHZA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "tslib": "2.3.0",
+        "zrender": "6.1.0"
+      }
+    },
     "node_modules/element-plus": {
       "version": "2.14.0",
       "resolved": "https://registry.npmmirror.com/element-plus/-/element-plus-2.14.0.tgz",
@@ -1849,6 +1860,12 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/tslib": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz",
+      "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==",
+      "license": "0BSD"
+    },
     "node_modules/typescript": {
       "version": "5.9.3",
       "resolved": "https://registry.npmmirror.com/typescript/-/typescript-5.9.3.tgz",
@@ -2008,6 +2025,15 @@
       "peerDependencies": {
         "vue": "^3.0.1"
       }
+    },
+    "node_modules/zrender": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmmirror.com/zrender/-/zrender-6.1.0.tgz",
+      "integrity": "sha512-oEGMDB6pOP2S6OwRR4PdVv610zrjnA3Bh+JnSG12fYJlBKjtNAoEb5fSUoCOOINlH96I2fU38/A2UpRKs67xYQ==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "tslib": "2.3.0"
+      }
     }
   }
 }

doc/h5/package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "axios": "^1.5.0",
+    "echarts": "^6.1.0",
     "element-plus": "^2.14.0",
     "nprogress": "^0.2.0",
     "vue": "^3.4.0",

doc/h5/src/components/Aside.vue

 <template>
-  <nav v-if="isShow" class="navbar w-200 px-8">
+  <nav v-if="isShow" class="navbar w-200 px-8 min-w-200">
     <div class="flex-center pt-28">
       <img src="@/static/imgs/logo.png" class="w-100 h-22" alt="Logo">
     </div>
@@ -45,7 +45,7 @@
         <el-icon>
           <Files />
         </el-icon>
-        <span>项目</span>
+        <span>团队管理</span>
       </div>
       <div class="flex-align-center gap-8 mt-12 cursor-pointer pl-16 h-36 rounded-4"
         :class="indexvalue == 4 ? 'active' : ''" @click="switchTab(4)">
@@ -66,7 +66,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, watch } from 'vue';
+import { ref, watch } from 'vue';
 import { useAuth } from '../stores/useAuth';
 import { VideoCameraFilled, Files, PieChart, Help } from '@element-plus/icons-vue'
 import { useRouter, useRoute } from 'vue-router';
@@ -78,7 +78,7 @@ const routeIndexMap: Record<string, number> = {
   '/': 0,
   '/projectlist': 1,
   '/asset': 2,
-  '/enterprise/project': 3,
+  '/enterprise/team': 3,
   '/enterprise/usage': 4,
   '/enterprise/watermark': 5,
 };
@@ -108,7 +108,7 @@ const tabRouter:any = {
   0: '/',
   1: '/projectlist',
   2: '/asset',
-  3: '/enterprise/project',
+  3: '/enterprise/team',
   4: '/enterprise/usage',
   5: '/enterprise/watermark',
 }

doc/h5/src/router/index.ts

@@ -9,7 +9,7 @@ const Login = () => import('@/views/Login.vue');
 const NotFound = () => import('@/views/NotFound.vue');
 const Projectlist = () => import('@/views/project/projectlist.vue');
 const Asset = () => import('@/views/project/asset.vue');
-const EnterpriseProject = () => import('@/views/enterprise/project.vue');
+const EnterpriseTeam = () => import('@/views/enterprise/team.vue');
 const EnterpriseUsage = () => import('@/views/enterprise/usage.vue');
 const EnterpriseWatermark = () => import('@/views/enterprise/watermark.vue');
 const Drama = () => import('@/views/project/drama.vue');
@@ -44,9 +44,9 @@ const routes = [
     meta: { authRequired: true }
   },
   {
-    path: '/enterprise/project',
-    name: 'EnterpriseProject',
-    component: EnterpriseProject,
+    path: '/enterprise/team',
+    name: 'EnterpriseTeam',
+    component: EnterpriseTeam,
     meta: { authRequired: true }
   },
   {

doc/h5/src/views/enterprise/project.vue

-<template>
-  <div></div>
-</template>
-<script setup lang="ts"></script>
-<style lang="scss" scoped></style>
\ No newline at end of file

doc/h5/src/views/enterprise/team.vue

+<template>
+  <section class="px-64 flex flex-col gap-20 h-b100">
+    <div>
+      <div class="flex gap-30 fs-18 pt-30 pb-10 bg-F8F9FA">
+        <a v-for="(item, index) in tabs" :key="index" class="cursor-pointer aa"
+          :class="indexTab === index ? 'active' : ''" @click="changeTab(index)">{{ item }}</a>
+      </div>
+      <div v-if="isShowtip" class="hint flex-between-center px-20 py-10 my-20">
+        <div class="flex-align-center">
+          <el-icon color="#5252ff" size="16">
+            <WarningFilled />
+          </el-icon>
+          <span class="ml-4">需要授权账号登录权限且将其加入到团队中，子账号才可以登陆到短剧平台。</span>
+        </div>
+        <div class="flex gap-20">
+          <div>已授权 <span class="fw-bold" style="color: darkgreen;">0</span></div>
+          <span style="color: #ccc;">|</span>
+          <div>未授权 <span>2</span></div>
+        </div>
+      </div>
+      <div class="flex-center gap-10 mt-10">
+        <el-input v-model="searchValue" placeholder="搜索" :prefix-icon="Search" />
+        <el-select v-model="selectValue" placeholder="Select" style="width: 240px">
+          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+        </el-select>
+        <el-button type="primary" :dark="true" :icon="Plus">
+          <span class="ml-4">新建子账号</span>
+        </el-button>
+      </div>
+    </div>
+    <el-table :data="tableData">
+      <el-table-column type="selection" :selectable="selectable" width="55" />
+      <el-table-column prop="name" label="用户名" width="180" />
+      <el-table-column prop="name" label="备注" width="180" />
+      <el-table-column prop="name" label="隶属团队" />
+      <el-table-column prop="name" label="授权登录状态" />
+      <el-table-column prop="name" label="操作" width="180">
+        <template #default="scope">
+          <el-button link type="primary" size="small">
+            编辑
+          </el-button>
+          <el-button link type="danger" size="small">
+            删除
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+  </section>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue'
+import { Search, Plus, WarningFilled } from '@element-plus/icons-vue'
+
+const searchValue = ref('');
+const isShowtip = ref(true)
+const selectValue = ref(1);
+const options = [
+  {
+    value: 1,
+    label: '所有授权',
+  },
+  {
+    value: 2,
+    label: '已授权',
+  },
+  {
+    value: 3,
+    label: '未授权',
+  },
+]
+const tabs = ref(['子账号管理', '团队管理'])
+const indexTab = ref(0)
+const changeTab = ref((index: number) => {
+  indexTab.value = index
+})
+
+
+
+// 表格
+const tableData = [
+  {
+    date: '2016-05-03',
+    name: 'Tom',
+    address: 'No. 189, Grove St, Los Angeles',
+  },
+  {
+    date: '2016-05-02',
+    name: 'Tom',
+    address: 'No. 189, Grove St, Los Angeles',
+  },
+  {
+    date: '2016-05-04',
+    name: 'Tom',
+    address: 'No. 189, Grove St, Los Angeles',
+  },
+  {
+    date: '2016-05-01',
+    name: 'Tom',
+    address: 'No. 189, Grove St, Los Angeles',
+  },
+]
+const selectable = (row: any, index: number) => {
+  return row.name !== 'Tom'
+}
+</script>
+<style lang="scss">
+:root {
+  --el-color-primary: #5272ff;
+  /* 修改主色 */
+}
+</style>
+<style lang="scss" scoped>
+.hint {
+  border: 1px solid #e5e7eb;
+  background-color: #f5f7ff;
+  border-radius: 8px;
+}
+
+.bg-F8F9FA {
+  background-color: #f8f9fa;
+
+  .aa {
+    text-decoration: none;
+    color: #888;
+    outline: none;
+
+    &.active {
+      color: #333;
+    }
+  }
+}
+:deep(.el-table) {
+  border: 1px solid #eee;
+  border-radius: 8px;
+  border-bottom: none;
+  th{
+    padding-top: 10px;
+    padding-bottom: 10px;
+    background-color: rgba(28, 106, 224, 0.027);
+  }
+}
+</style>
\ No newline at end of file

doc/h5/src/views/enterprise/usage.vue

 <template>
-  <div></div>
+  <section class="px-64 h-b100 overflow-y-auto pb-20 min-w-800">
+    <section class="mt-36">
+      <div class="fs-18">余量统计</div>
+      <div class="flex gap-20 mt-10 flex-wrap">
+        <div class="child card1 rounded-16 p-20">
+          <div class="">积分余量</div>
+          <div class="h-200" id="chart1"></div>
+          <div class="flex-between-center">
+            <div class="">
+              <span class="text-888">积分余量</span>
+              <div class="flex items-end mt-16">
+                <span class="fs-28 fw-bold line-h20">879</span>
+                <span class="fs-12 ml-2">个</span>
+              </div>
+            </div>
+            <div class="">
+              <span class="text-888">积分总量</span>
+              <div class="flex items-end mt-16">
+                <span class="fs-28 fw-bold line-h20">10000</span>
+                <span class="fs-12 ml-2">个</span>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="child card1 rounded-16 p-20">
+          <div class="">子账号余量</div>
+          <div class="h-200" id="chart2"></div>
+          <div class="flex-between-center">
+            <div class="">
+              <span class="text-888">子账号余量</span>
+              <div class="flex items-end mt-16">
+                <span class="fs-28 fw-bold line-h20">30</span>
+                <span class="fs-12 ml-2">个</span>
+              </div>
+            </div>
+            <div class="">
+              <span class="text-888">子账号总量</span>
+              <div class="flex items-end mt-16">
+                <span class="fs-28 fw-bold line-h20">30</span>
+                <span class="fs-12 ml-2">个</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+    <section class="mt-36">
+      <div class="fs-18">资源明细</div>
+      <div class="flex gap-20 mt-10 flex-wrap">
+        <div class="child card2 rounded-16 p-20">
+          <div class="flex-between-center">
+            <span>权益套餐-基础版</span>
+            <span class="tag rounded-4 px-6 py-2">使用中</span>
+          </div>
+          <div class="text-666 fs-12">
+            <div class="flex-between-center mt-16">
+              <span>积分余量（个）</span>
+              <span class="text-333 fw-bold">977 / 10000</span>
+            </div>
+            <div class="flex-between-center mt-16">
+              <span>子账号余量（个）</span>
+              <span class="text-333 fw-bold">30 / 30</span>
+            </div>
+          </div>
+          <div class="boo mt-20 pt-12">
+            <span class="text-999 fs-12">2026-03-22 10:22 ~ 2026-05-22 23:59</span>
+          </div>
+        </div>
+      </div>
+    </section>
+    <section class="mt-36">
+      <div class="fs-18">积分消耗趋势</div>
+      <div class="gap-20 mt-10">
+        <div class="child card2 rounded-16 p-20">
+          <div class="flex-between-center">
+            <span>消耗积分统计 (个)</span>
+            <div class="flex-align-center rounded-4 bbb">
+              <div class="px-10 py-4 cursor-pointer" @click="refreshCharts">
+                <svg t="1779783997777" class="icon" viewBox="0 0 1024 1024" version="1.1"
+                  xmlns="http://www.w3.org/2000/svg" p-id="28452" width="14" height="14">
+                  <path
+                    d="M524.288 25.173333l2.816 2.389334 128 128a21.333333 21.333333 0 0 1 2.432 27.221333l-2.432 2.986667-128 128a21.333333 21.333333 0 0 1-36.138667-11.434667L490.666667 298.666667V213.973333a341.333333 341.333333 0 1 0 317.141333 170.24 42.666667 42.666667 0 0 1 73.898667-42.666666A424.874667 424.874667 0 0 1 938.666667 554.666667c0 235.648-191.018667 426.666667-426.666667 426.666666S85.333333 790.314667 85.333333 554.666667c0-228.48 179.626667-415.018667 405.333334-426.154667V42.666667a21.333333 21.333333 0 0 1 33.621333-17.493334z"
+                    fill="#3f3f51" p-id="28453"></path>
+                </svg>
+              </div>
+              <span class="text-999 fs-12 line-h10" style="margin-top: -2px;">|</span>
+              <div class="px-10 py-4 cursor-pointer">
+                <svg t="1779783965212" class="icon" viewBox="0 0 1030 1024" version="1.1"
+                xmlns="http://www.w3.org/2000/svg" p-id="27299" width="13" height="13">
+                <path
+                  d="M140.8 1017.6c-38.4 0-70.4-12.8-96-38.4-25.6-25.6-38.4-57.6-38.4-96v-185.6c0-12.8 6.4-25.6 12.8-32s19.2-12.8 32-12.8 25.6 6.4 32 12.8 12.8 19.2 12.8 32v185.6c0 12.8 6.4 32 12.8 38.4 6.4 6.4 19.2 12.8 38.4 12.8h742.4c12.8 0 32-6.4 38.4-12.8 6.4-6.4 12.8-19.2 12.8-38.4v-185.6c0-12.8 6.4-25.6 12.8-32 6.4-6.4 19.2-12.8 32-12.8s25.6 6.4 32 12.8c6.4 6.4 12.8 19.2 12.8 32v185.6c0 38.4-12.8 70.4-38.4 96-25.6 25.6-57.6 38.4-96 38.4H140.8z m377.6-275.2c-12.8 0-25.6-6.4-32-12.8s-12.8-19.2-12.8-32V160s0-6.4-6.4-6.4h-6.4L313.6 313.6c-6.4 6.4-25.6 12.8-25.6 12.8-12.8 0-25.6-6.4-32-12.8-12.8-12.8-19.2-19.2-19.2-25.6 0-12.8 6.4-25.6 12.8-32L480 25.6c12.8-12.8 25.6-19.2 38.4-19.2 12.8 0 25.6 6.4 32 12.8L774.4 256c6.4 6.4 12.8 19.2 12.8 32s-6.4 25.6-12.8 32-19.2 12.8-32 12.8-19.2-12.8-25.6-19.2L563.2 153.6h-6.4s-6.4 0-6.4 6.4V704c0 12.8-6.4 25.6-12.8 32s-12.8 6.4-19.2 6.4z"
+                  p-id="27300" fill="#3f3f51"></path>
+              </svg>
+              </div>
+            </div>
+          </div>
+          <div class="flex gap-10 mt-10">
+            <el-tree-select v-model="teamVal" :data="data1" multiple collapse-tags collapse-tags-tooltip
+              :max-collapse-tags="2" :render-after-expand="false" show-checkbox style="width: 200px"
+              placeholder="团队选择" />
+            <el-tree-select v-model="useItemVal" :data="data2" multiple collapse-tags collapse-tags-tooltip
+              :max-collapse-tags="2" :render-after-expand="false" show-checkbox style="width: 260px"
+              placeholder="消耗项选择" />
+            <div style="width: 350px"><el-date-picker v-model="dateVal" type="daterange" start-placeholder="开始日期"
+                end-placeholder="结束日期" /></div>
+          </div>
+          <div class="h-300 mt-40" id="chart3"></div>
+        </div>
+      </div>
+    </section>
+  </section>
 </template>
-<script setup lang="ts"></script>
-<style lang="scss" scoped></style>
+
+<script setup lang="ts">
\ No newline at end of file
+import { onMounted, ref, nextTick } from 'vue'
+import * as echarts from 'echarts'
+import { RefreshRight } from '@element-plus/icons-vue'
+
+const teamVal = ref(null)
+const useItemVal = ref(null)
+const dateVal = ref(null)
+const data1 = ref([
+  {
+    value: 1,
+    label: '默认团队'
+  },
+])
+const data2 = ref([
+  {
+    value: 1,
+    label: '角色生成'
+  },
+  {
+    value: 2,
+    label: '场景生成'
+  },
+  {
+    value: 3,
+    label: '道具生成'
+  },
+  {
+    value: 4,
+    label: '分镜视频生成'
+  },
+])
+
+// 图表实例引用
+let chart1: echarts.ECharts | null = null
+let chart2: echarts.ECharts | null = null
+let chart3: echarts.ECharts | null = null
+
+// 积分余量图表配置
+const chart1Option = ref({
+  tooltip: {
+    trigger: 'item'
+  },
+  color: ['#ddd', '#fac858'],
+  series: [
+    {
+      name: '积分使用占比',
+      type: 'pie',
+      radius: ['50%', '70%'],
+      avoidLabelOverlap: false,
+      label: {
+        show: false,
+        position: 'center'
+      },
+      emphasis: {
+        label: {
+          show: true,
+          fontSize: 40,
+          fontWeight: 'bold'
+        }
+      },
+      labelLine: {
+        show: false
+      },
+      data: [
+        { value: 9121, name: '已使用' },
+        { value: 879, name: '剩余' }
+      ]
+    }
+  ]
+})
+
+// 子账号余量图表配置
+const chart2Option = ref({
+  tooltip: {
+    trigger: 'item'
+  },
+  color: ['#ddd', '#5252ff'],
+  series: [
+    {
+      name: '子账号使用占比',
+      type: 'pie',
+      radius: ['50%', '70%'],
+      avoidLabelOverlap: false,
+      label: {
+        show: false,
+        position: 'center',
+      },
+      emphasis: {
+        label: {
+          show: true,
+          fontSize: 40,
+          fontWeight: 'bold'
+        }
+      },
+      labelLine: {
+        show: false
+      },
+      data: [
+        { value: 0, name: '已使用' },
+        { value: 30, name: '剩余' }
+      ]
+    }
+  ]
+})
+
+const chart3Option = ref({
+  grid: {
+    left: '0%',    // 左侧距离，可设置为 '3%' 或具体数值如 20
+    right: '0%',   // 右侧距离
+    top: 20,
+    bottom: 20,
+    containLabel: true  // 包含坐标轴标签，避免标签被裁剪
+  },
+  xAxis: {
+    type: 'category',
+    data: ['2026-05-20', '2026-05-21', '2026-05-22', '2026-05-23', '2026-05-24', '2026-05-25', '2026-05-26'],
+    axisTick: {
+      show: true  // 显示刻度线（默认就是 true）
+    }
+  },
+  yAxis: {
+    type: 'value'
+  },
+  series: [
+    {
+      data: [820, 932, 901, 934, 1290, 1330, 1320],
+      type: 'line',
+      smooth: true
+    }
+  ]
+})
+
+
+// 初始化图表的函数
+const initCharts = () => {
+  const chart1Dom = document.getElementById('chart1')
+  const chart2Dom = document.getElementById('chart2')
+  const chart3Dom = document.getElementById('chart3')
+
+  if (chart1Dom) {
+    chart1 = echarts.init(chart1Dom)
+    chart1.setOption(chart1Option.value)
+  }
+
+  if (chart2Dom) {
+    chart2 = echarts.init(chart2Dom)
+    chart2.setOption(chart2Option.value)
+  }
+  if (chart3Dom) {
+    chart3 = echarts.init(chart3Dom)
+    chart3.setOption(chart3Option.value)
+  }
+}
+// 刷新图表
+const refreshCharts = () => {
+  if (chart3) {
+    chart3.clear() // 清空图表实例，以便重新设置数据
+    teamVal.value = null
+    useItemVal.value = null
+    dateVal.value = null
+    chart3.setOption(chart3Option.value, true) // true 表示不合并，完全替换
+  }
+}
+// 响应窗口大小变化
+const handleResize = () => {
+  chart1?.resize()
+  chart2?.resize()
+  chart3?.resize()
+}
+
+onMounted(() => {
+  // 确保 DOM 完全渲染后再初始化图表
+  nextTick(() => {
+    initCharts()
+  })
+
+  // 监听窗口大小变化
+  window.addEventListener('resize', handleResize)
+})
+
+// 组件卸载时销毁图表实例
+import { onUnmounted } from 'vue'
+onUnmounted(() => {
+  window.removeEventListener('resize', handleResize)
+  chart1?.dispose()
+  chart2?.dispose()
+  chart3?.dispose()
+})
+</script>
+
+<style lang="scss" scoped>
+.child {
+  flex: 0 0 calc(25% - 15px);
+  border: 1px solid #eaebee;
+
+  &.card1 {
+    background: linear-gradient(to bottom, #f8f8fd 0%, #fff 18%, #fff);
+  }
+
+  &.card2 {
+    background: #fff;
+
+    .boo {
+      border-top: 1px solid #eaebee;
+    }
+  }
+
+  .tag {
+    background-color: #d9f1dd;
+    color: #07b44f;
+  }
+}
+
+.bbb {
+  border: 1px solid #eaebee;
+}
+
+
+/* 1600px以下：一行3个 */
+@media (max-width: 1600px) {
+  .child {
+    flex: 0 0 calc(33.333% - 14px);
+  }
+}
+
+/* 1400px以下：一行2个 */
+@media (max-width: 1400px) {
+  .child {
+    flex: 0 0 calc(50% - 11px);
+  }
+}
+</style>
+<style lang="scss">
+:root {
+  --el-color-primary: #5272ff;
+  /* 修改主色 */
+}
+
+.el-tree-node__content {
+  padding-left: 14px !important;
+  padding-top: 15px !important;
+  padding-bottom: 15px !important;
+
+  .el-tree-node__expand-icon {
+    display: none;
+  }
+}
+</style>
\ No newline at end of file

doc/h5/src/views/enterprise/watermark.vue

 <template>
-  <div></div>
+  <section class="px-64 h-b100 overflow-y-auto pb-20 min-w-800">
+    <section class="mt-36">
+      <div class="fs-18">去除水印管理</div>
+      <div v-if="isShowtip" class="hint flex-between-center px-16 py-16 mt-18">
+        <div class="flex gap-10">
+          <el-icon color="#5252ff" size="18" class="mt-2">
+            <WarningFilled />
+          </el-icon>
+          <span class="ml-4 line-h22"
+            style="font-size: 13px;">根据法律法规要求，火山剧创平台（“平台”）提供AI生成合成服务，可能导致公众混淆或者误认的，平台应当在AI生成合成内容上添加显式标识（即“AI生成”明水印），向公众进行提示。经过您的申请，平台可以向您提供未添加显式标识的AI生成合成内容。如您后续使用网络信息内容传播服务发布AI生成合成内容，请注意您还需主动声明并使用传播平台提供的标识功能进行标识。您理解并承诺，如您未按照法律法规要求在AI生成合成内容上添加显式标识，导致公众混淆或者误认，因此所发生的后果和责任均由您自行承担。</span>
+        </div>
+      </div>
+      <div class="card1 rounded-16 p-16 mt-16 bg-fff">
+        <div class="">子账号余量</div>
+        <div class="flex-between-center">
+          <div class="text-666 fs-12 mt-10">
+            <div>打开去除水印开关后，您使用火山剧创平台前述账号所创作、生成的AI生成合成内容将不再添加“Al生成”明水印。</div>
+            <div class="mt-2">打开开关，代表您已确认充分了解上述情况并同意</div>
+          </div>
+          <el-switch v-model="switchVal" class="ml-2" @change="change"
+            style="--el-switch-on-color: #5272ff; --el-switch-off-color: #ddd" />
+        </div>
+      </div>
+    </section>
+  </section>
 </template>
-<script setup lang="ts"></script>
-<style lang="scss" scoped></style>
+<script setup lang="ts">
+import { ref } from 'vue'
\ No newline at end of file
+import { WarningFilled } from '@element-plus/icons-vue'
+import { ElMessage } from 'element-plus'
+
+const isShowtip = ref(true)
+const switchVal = ref(false)
+
+const change = () => {
+  ElMessage.success('设置成功')
+}
+
+</script>
+<style lang="scss" scoped>
+.hint {
+  background-color: #edf1ff;
+  border-radius: 12px;
+}
+
+.card1 {
+  border: 1px solid #eaebee;
+}
+</style>
\ No newline at end of file

doc/h5/src/views/project/asset.vue

 <template>
-  <div></div>
+  <section class="px-64 flex flex-col gap-20 h-b100">
+    <div>
+      <div class="h-36 flex gap-8 rounded-8 p-2 cursor-pointer mt-36" style="width: 260px;background-color: #f1f2f9;">
+        <div class="flex-1 flex-center" :class="typeVal === 1 ? 'active1' : ''" @click="typeVal = 1">个人资产</div>
+        <div class="flex-1 flex-center" :class="typeVal === 2 ? 'active1' : ''" @click="typeVal = 2">团队资产</div>
+        <div class="flex-1 flex-center" :class="typeVal === 3 ? 'active1' : ''" @click="typeVal = 3">写实人像库</div>
+      </div>
+      <div class="flex gap-30 fs-18 pt-30 pb-10 bg-F8F9FA">
+        <a v-for="(item, index) in tabs" :key="index" class="cursor-pointer aa"
+          :class="indexTab === index ? 'active' : ''" :href="'#' + item" @click="changeTab(index)">{{ item }}</a>
+      </div>
+      <div class="flex-center gap-10 mt-10">
+        <el-input v-model="searchValue" placeholder="搜索短剧项目名称" :prefix-icon="Search" />
+        <el-button type="primary" color="#785BE5" :dark="true" :icon="Plus">
+          <span class="ml-4">上传角色</span>
+        </el-button>
+      </div>
+    </div>
+    <section class="flex-1">
+      <div class="min-h-400">
+        <div class="h-400 flex-center flex-col">
+          <svg t="1779342435411" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+            p-id="25486" width="64" height="64">
+            <path
+              d="M625.777778 0l341.333333 307.2v648.931556c0 37.432889-33.792 67.868444-75.320889 67.868444H132.209778C90.680889 1024 56.888889 993.564444 56.888889 956.131556V67.868444C56.888889 30.435556 90.680889 0 132.209778 0H625.777778zM476.728889 747.52h-11.491556a52.337778 52.337778 0 0 0-51.768889 52.906667c0 29.240889 23.153778 52.906667 51.768889 52.906666h11.548445a52.337778 52.337778 0 0 0 51.768889-52.906666 52.337778 52.337778 0 0 0-51.768889-52.906667zM459.377778 341.333333c-30.151111 0-57.287111 4.892444-80.497778 14.620445a147.342222 147.342222 0 0 0-55.694222 39.879111c-45.795556 53.134222-38.684444 122.026667-37.717334 129.706667a47.616 47.616 0 0 0 53.020445 41.927111 48.241778 48.241778 0 0 0 41.073778-54.215111c0-0.284444-2.844444-32.881778 14.791111-53.361778 12.401778-14.392889 34.304-21.617778 65.024-21.617778 34.702222 0 57.059556 8.817778 66.503111 26.225778a44.600889 44.600889 0 0 1-3.982222 47.616l-93.184 125.383111a49.152 49.152 0 0 0 9.102222 67.868444 46.535111 46.535111 0 0 0 66.446222-9.272889l93.184-125.383111a143.246222 143.246222 0 0 0 11.377778-153.144889C590.051556 382.805333 548.807111 341.333333 459.377778 341.333333z"
+              fill="#e6e6e6" p-id="25487"></path>
+            <path
+              d="M941.852444 276.48L628.280889 0v217.941333c0 32.711111 29.354667 58.481778 62.236444 58.481778l251.335111 0.056889z"
+              fill="#e6e6e6" fill-opacity=".5" p-id="25488"></path>
+          </svg>
+          <div class="text-888 mt-10">暂无数据</div>
+        </div>
+      </div>
+    </section>
+  </section>
 </template>
-<script setup lang="ts"></script>
-<style lang="scss" scoped></style>
+<script setup lang="ts">
+import { ref } from 'vue'
\ No newline at end of file
+import { Search, Plus } from '@element-plus/icons-vue'
+
+const typeVal = ref(1)
+const searchValue = ref('');
+
+const tabs = ref(['角色', '场景', '道具'])
+const indexTab = ref(0)
+const changeTab = ref((index: number) => {
+  indexTab.value = index
+})
+</script>
+<style lang="scss" scoped>
+.active1 {
+  background: #fff;
+  border-radius: 8px;
+  box-shadow: 0 0 3px #ddd;
+}
+
+.bg-F8F9FA {
+  background-color: #f8f9fa;
+
+  .aa {
+    text-decoration: none;
+    color: #888;
+    outline: none;
+
+    &.active {
+      color: #333;
+    }
+  }
+}
+</style>
\ No newline at end of file

doc/h5/src/views/project/components/StepTwo.vue

@@ -299,7 +299,7 @@
       </section>
     </section>
     <div class="fixed bottom-30 btnfooter w-140 h-54 flex-center rounded-200 text-fff cursor-pointer"
-      @click="$emit('next', 2)">
+      @click="emit('next', 2)">
       <img src="@/static/imgs/icon1.png" alt="">
       <span class="ml-10">进入下一步</span>
     </div>
@@ -312,13 +312,14 @@
 </template>
 <script setup lang="ts">
 import { ref } from 'vue';
-import { CloseBold, Plus, DocumentCopy, MagicStick, FolderAdd, Download, MoreFilled, Delete } from '@element-plus/icons-vue'
+import { CloseBold, Plus, MagicStick, FolderAdd, Download, MoreFilled, Delete } from '@element-plus/icons-vue'
 import EditModal from './EditModal.vue'; // 新增'角色', '场景', '道具'
 import BatchModal from './BatchModal.vue'; // 批量生成
 import DepotModal from './DepotModal.vue'; // 从库中选择
 import LocalUploadModal from './LocalUploadModal.vue'; // 本地上传
 import AiEditModal from './AiEditModal.vue';
 
+const emit = defineEmits(['next'])
 
 const isShowtip = ref(true)
 const indexTab = ref(0)