feat: d new layout components including FullWidthLayout, LayoutHeader, TabLayout, CardLayout, FormLayout, BasicLayout, and a Copywriting view.

2026-02-11 00:17:51 +08:00
parent b765d73d31
commit 7acc5bce8b
9 changed files with 315 additions and 328 deletions
--- a/GEMINI.md
+++ b/GEMINI.md
@@ -0,0 +1,125 @@
+<!-- OPENSPEC:START -->
+# OpenSpec 指令
+
+本指令适用于参与此项目的 AI 助手。
+
+当请求出现以下情况时，请务必查阅 `@/openspec/AGENTS.md`：
+*   提及规划或提案（如提案、规范、变更、计划等词）
+*   引入新功能、破坏性变更、架构调整或重大的性能/安全相关工作
+*   表述含糊，需要在编码前查阅权威规范
+
+通过 `@/openspec/AGENTS.md` 可了解：
+*   如何创建和应用变更提案
+*   规范格式与约定
+*   项目结构与指导方针
+
+请保留此受管理的代码块，以便 `openspec update` 可以更新指令。
+
+<!-- OPENSPEC:END -->
+
+## 使用中文与用户沟通
+
+## 项目简介
+**Yudao（芋道）** - Spring Boot快速开发平台，AI/媒体功能增强版
+
+### 核心技术栈
+- **后端**: Java 17 + Spring Boot 3.5.5 + MyBatis Plus + Redis
+- **前端**: Vue.js 3 + TypeScript + Ant Design Vue + TailwindCSS
+- **数据库**: MySQL 8.0+，支持多种数据库
+- **AI服务**: 语音克隆、图像生成、音乐生成、向量搜索
+
+## 代码规范要点
+
+### Vue.js 最佳实践
+- 优先使用组合式API：`<script setup>`
+- 状态管理使用Pinia，保持仓库模块化
+- TypeScript类型定义规范
+- 组件保持小巧专注，逻辑清晰
+- 样式优先使用less 示例:`<style scoped lang="less"><style>`
+- 代码简洁，只包含核心的功能
+
+### Java开发规范
+- 分层架构：Controller → Service → Mapper → VO/DO
+- Mapper继承 `BaseMapperX<T>`
+- DO继承 `BaseDO` 或 `TenantBaseDO`
+- API响应统一使用 `CommonResult<T>`
+- 权限注解：`@PreAuthorize("hasPermission(...)")`
+- 代码简洁，只包含核心的功能
+
+## 项目结构
+```
+/d/projects/sionrui/
+├── yudao-server/           # 主应用（端口9900）
+├── yudao-module-tik/       # 媒体模块（语音克隆、视频）
+├── yudao-module-ai/        # AI模块（聊天、知识库）
+├── yudao-module-system/    # 系统管理
+└── frontend/app/web-gold/  # Vue前端
+```
+
+## 模块标准结构
+```
+module/
+├── controller/      # REST控制器
+├── service/         # 业务逻辑（接口+实现）
+├── mapper/          # 数据访问层
+└── vo/              # 值对象（SaveReq/PageReq/Resp）
+```
+
+## 关键配置
+- **后端配置**: `yudao-server/src/main/resources/application-local.yaml`
+- **数据库**: `jdbc:mysql://8.155.172.147:3306/sion_rui_dev`
+- **Redis**: `8.155.172.147:6379`
+- **前端代理**: `/admin-api` 和 `/api` 代理到 `http://localhost:9900`
+
+## API约定
+- 管理API: `/admin-api/{module}/{resource}`
+- 应用API: `/api/{module}/{resource}`
+- CRUD端点: create/update/delete/get/page
+
+## 常见易错点
+
+### 1. 权限控制
+❌ `Long userId = 1L`
+✅ `SecurityFrameworkUtils.getLoginUserId()`
+
+### 2. 分页查询
+❌ 自定义pageNo/pageSize
+✅ VO继承 `SortablePageParam` + `selectPage(reqVO, wrapper)`
+
+### 3. Mapper查询
+❌ `QueryWrapper` + 字符串字段
+✅ `LambdaQueryWrapperX` + 方法引用
+
+### 4. JSON字段处理
+❌ `private List<String> urls`
+✅ `private String urls` + `getUrlList()/setUrlList()` 转换方法
+
+### 5. Bean转换
+❌ `org.springframework.beans.BeanUtils`
+✅ `framework.common.util.object.BeanUtils`
+
+### 6. 多租户
+- DO类必须继承 `TenantBaseDO`
+- 框架自动注入 `tenantId`
+
+## 开发命令
+```bash
+# 前端开发（绝对路径）
+cd /d/projects/sionrui/frontend/app/web-gold
+pnpm install
+pnpm run dev  # 启动开发服务器
+
+# 后端开发
+mvn clean install
+mvn spring-boot:run
+```
+
+## 路径别名说明
+- `@gold` - 前端项目根目录的别名，指向 `frontend/app/web-gold/src`
+- 例如：`import tokenManager from '@gold/utils/token-manager'` 等价于 `import tokenManager from 'frontend/app/web-gold/src/utils/token-manager'`
+
+## 重要提醒
+1. **OSS配额检查**: 文件上传前必须检查用户/系统配额
+2. **多租户**: 默认启用，DO类需继承 `TenantBaseDO`
+3. **异常处理**: 使用 `ErrorCodeConstants` 中的错误码
+4. **事务管理**: Service写操作使用 `@Transactional`
--- a/frontend/app/web-gold/src/layouts/components/BasicLayout.vue
+++ b/frontend/app/web-gold/src/layouts/components/BasicLayout.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ArrowLeftOutlined } from '@ant-design/icons-vue'
+import LayoutHeader from './LayoutHeader.vue'

 defineOptions({ name: 'BasicLayout' })

@@ -30,20 +30,15 @@ const handleBack = () => {

 <template>
  <div class="basic-layout">
-    <!-- 页面头部 -->
-    <div class="basic-layout__header">
-      <div class="header-left">
-        <a-button v-if="showBack" type="text" @click="handleBack" class="back-btn">
-          <template #icon>
-            <ArrowLeftOutlined />
-          </template>
-        </a-button>
-        <h1 v-if="title" class="header-title">{{ title }}</h1>
-      </div>
-      <div class="header-right">
+    <LayoutHeader 
+      :title="title" 
+      :show-back="showBack" 
+      @back="handleBack"
+    >
+      <template #extra>
        <slot name="extra"></slot>
-      </div>
-    </div>
+      </template>
+    </LayoutHeader>

    <!-- 页面内容 -->
    <div class="basic-layout__content">
@@ -63,57 +58,6 @@ const handleBack = () => {
  overflow: hidden;
 }

-.basic-layout__header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: var(--space-md);
-  padding: var(--space-md) var(--space-lg);
-  border-bottom: 1px solid var(--border-light);
-  background: var(--bg-primary);
-}
-
-.header-left {
-  display: flex;
-  align-items: center;
-  gap: var(--space-md);
-  flex: 1;
-  min-width: 0;
-}
-
-.back-btn {
-  padding: var(--space-xs);
-  border: none;
-  background: transparent;
-  color: var(--text-secondary);
-  border-radius: var(--radius-sm);
-  cursor: pointer;
-  transition: all 0.15s ease;
-  font-size: 16px;
-  line-height: 1;
-
-  &:hover {
-    background: var(--bg-hover);
-    color: var(--text-primary);
-  }
-}
-
-.header-title {
-  font-size: 18px;
-  font-weight: 500;
-  color: var(--text-primary);
-  margin: 0;
-  line-height: 1.3;
-  letter-spacing: -0.01em;
-}
-
-.header-right {
-  display: flex;
-  align-items: center;
-  gap: var(--space-sm);
-  flex-shrink: 0;
-}
-
 .basic-layout__content {
  flex: 1;
  display: flex;
--- a/frontend/app/web-gold/src/layouts/components/CardLayout.vue
+++ b/frontend/app/web-gold/src/layouts/components/CardLayout.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ArrowLeftOutlined } from '@ant-design/icons-vue'
+import LayoutHeader from './LayoutHeader.vue'

 defineOptions({ name: 'CardLayout' })

@@ -30,20 +30,15 @@ const handleBack = () => {

 <template>
  <div class="card-layout">
-    <!-- 页面头部 -->
-    <div class="card-layout__header">
-      <div class="header-left">
-        <a-button v-if="showBack" type="text" @click="handleBack" class="back-btn">
-          <template #icon>
-            <ArrowLeftOutlined />
-          </template>
-        </a-button>
-        <h1 v-if="title" class="header-title">{{ title }}</h1>
-      </div>
-      <div class="header-right">
+    <LayoutHeader 
+      :title="title" 
+      :show-back="showBack" 
+      @back="handleBack"
+    >
+      <template #extra>
        <slot name="extra"></slot>
-      </div>
-    </div>
+      </template>
+    </LayoutHeader>

    <!-- 卡片内容 -->
    <div class="card-layout__card" :class="{ 'no-padding': !showPadding }">
@@ -70,57 +65,6 @@ const handleBack = () => {
  overflow: hidden;
 }

-.card-layout__header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: var(--space-md);
-  padding: var(--space-md) var(--space-lg);
-  border-bottom: 1px solid var(--border-light);
-  background: var(--bg-primary);
-}
-
-.header-left {
-  display: flex;
-  align-items: center;
-  gap: var(--space-md);
-  flex: 1;
-  min-width: 0;
-}
-
-.back-btn {
-  padding: var(--space-xs);
-  border: none;
-  background: transparent;
-  color: var(--text-secondary);
-  border-radius: var(--radius-sm);
-  cursor: pointer;
-  transition: all 0.15s ease;
-  font-size: 16px;
-  line-height: 1;
-
-  &:hover {
-    background: var(--bg-hover);
-    color: var(--text-primary);
-  }
-}
-
-.header-title {
-  font-size: 18px;
-  font-weight: 500;
-  color: var(--text-primary);
-  margin: 0;
-  line-height: 1.3;
-  letter-spacing: -0.01em;
-}
-
-.header-right {
-  display: flex;
-  align-items: center;
-  gap: var(--space-sm);
-  flex-shrink: 0;
-}
-
 .card-layout__card {
  flex: 1;
  display: flex;
--- a/frontend/app/web-gold/src/layouts/components/FormLayout.vue
+++ b/frontend/app/web-gold/src/layouts/components/FormLayout.vue
@@ -1,5 +1,6 @@
 <script setup>
 import { ArrowLeftOutlined } from '@ant-design/icons-vue'
+import LayoutHeader from './LayoutHeader.vue'

 defineOptions({ name: 'FormLayout' })

@@ -54,20 +55,15 @@ const handleBack = () => {

 <template>
  <div class="form-layout">
-    <!-- 页面头部 -->
-    <div class="form-layout__header">
-      <div class="header-left">
-        <a-button v-if="showBack" type="text" @click="handleBack" class="back-btn">
-          <template #icon>
-            <ArrowLeftOutlined />
-          </template>
-        </a-button>
-        <h1 v-if="title" class="header-title">{{ title }}</h1>
-      </div>
-      <div class="header-right">
+    <LayoutHeader 
+      :title="title" 
+      :show-back="showBack" 
+      @back="handleBack"
+    >
+      <template #extra>
        <slot name="extra"></slot>
-      </div>
-    </div>
+      </template>
+    </LayoutHeader>

    <!-- 表单内容 -->
    <div class="form-layout__content">
@@ -107,58 +103,6 @@ const handleBack = () => {
  border-radius: var(--radius-md);
 }

-.form-layout__header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: var(--space-md);
-  padding: var(--space-md) var(--space-lg);
-  border-bottom: 1px solid var(--border-light);
-  background: var(--bg-primary);
-  flex-shrink: 0;
-}
-
-.header-left {
-  display: flex;
-  align-items: center;
-  gap: var(--space-md);
-  flex: 1;
-  min-width: 0;
-}
-
-.back-btn {
-  padding: var(--space-xs);
-  border: none;
-  background: transparent;
-  color: var(--text-secondary);
-  border-radius: var(--radius-sm);
-  cursor: pointer;
-  transition: all 0.15s ease;
-  font-size: 16px;
-  line-height: 1;
-
-  &:hover {
-    background: var(--bg-hover);
-    color: var(--text-primary);
-  }
-}
-
-.header-title {
-  font-size: 18px;
-  font-weight: 500;
-  color: var(--text-primary);
-  margin: 0;
-  line-height: 1.3;
-  letter-spacing: -0.01em;
-}
-
-.header-right {
-  display: flex;
-  align-items: center;
-  gap: var(--space-sm);
-  flex-shrink: 0;
-}
-
 .form-layout__content {
  flex: 1;
  overflow: auto;
--- a/frontend/app/web-gold/src/layouts/components/FullWidthLayout.vue
+++ b/frontend/app/web-gold/src/layouts/components/FullWidthLayout.vue
@@ -1,5 +1,6 @@
 <script setup>
 import { ArrowLeftOutlined } from '@ant-design/icons-vue'
+import LayoutHeader from './LayoutHeader.vue'

 defineOptions({ name: 'FullWidthLayout' })

@@ -26,23 +27,20 @@ const handleBack = () => {

 <template>
  <div class="full-width-layout">
-    <!-- 页面头部 -->
-    <div v-if="$slots.header || showBack" class="full-width-layout__header">
-      <div class="header-left">
-        <a-button v-if="showBack" type="text" @click="handleBack" class="back-btn">
-          <template #icon>
-            <ArrowLeftOutlined />
-          </template>
-        </a-button>
-        <div class="header-content">
-          <slot name="header"></slot>
-        </div>
-      </div>
-      <div class="header-right">
-        <slot name="extra"></slot>
-      </div>
+    <div v-if="$slots.header || showBack" class="full-width-layout__header-wrapper">
+       <LayoutHeader 
+        :show-back="showBack" 
+        @back="handleBack"
+      >
+        <template #header v-if="$slots.header">
+           <slot name="header"></slot>
+        </template>
+        <template #extra>
+          <slot name="extra"></slot>
+        </template>
+      </LayoutHeader>
    </div>
-
+   
    <!-- 全宽内容 -->
    <div
      class="full-width-layout__content"
@@ -62,51 +60,7 @@ const handleBack = () => {
  background: var(--bg-primary);
 }

-.full-width-layout__header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: var(--space-md);
-  padding: var(--space-md) var(--space-lg);
-  border-bottom: 1px solid var(--border-light);
-  background: var(--bg-primary);
-  flex-shrink: 0;
-}
-
-.header-left {
-  display: flex;
-  align-items: center;
-  gap: var(--space-md);
-  flex: 1;
-  min-width: 0;
-}
-
-.back-btn {
-  padding: var(--space-xs);
-  border: none;
-  background: transparent;
-  color: var(--text-secondary);
-  border-radius: var(--radius-sm);
-  cursor: pointer;
-  transition: all 0.15s ease;
-  font-size: 16px;
-  line-height: 1;
-
-  &:hover {
-    background: var(--bg-hover);
-    color: var(--text-primary);
-  }
-}
-
-.header-content {
-  flex: 1;
-  min-width: 0;
-}
-
-.header-right {
-  display: flex;
-  align-items: center;
-  gap: var(--space-sm);
+.full-width-layout__header-wrapper {
  flex-shrink: 0;
 }

--- a/frontend/app/web-gold/src/layouts/components/LayoutHeader.vue
+++ b/frontend/app/web-gold/src/layouts/components/LayoutHeader.vue
@@ -0,0 +1,109 @@
+<script setup>
+import { ArrowLeftOutlined } from '@ant-design/icons-vue'
+
+defineOptions({ name: 'LayoutHeader' })
+
+const props = defineProps({
+  title: {
+    type: String,
+    default: ''
+  },
+  showBack: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const emit = defineEmits(['back'])
+
+const handleBack = () => {
+  emit('back')
+}
+</script>
+
+<template>
+  <div class="layout-header">
+    <div class="header-left">
+      <a-button v-if="showBack" type="text" @click="handleBack" class="back-btn">
+        <template #icon>
+          <ArrowLeftOutlined />
+        </template>
+      </a-button>
+      <div class="header-content">
+        <slot name="header">
+          <h1 v-if="title" class="header-title">{{ title }}</h1>
+        </slot>
+      </div>
+    </div>
+    <div class="header-right">
+      <slot name="extra"></slot>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="less">
+.layout-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--space-md);
+  padding: var(--space-md) var(--space-lg);
+  border-bottom: 1px solid var(--border-light);
+  background: var(--bg-primary);
+  flex-shrink: 0;
+  min-height: 64px;
+}
+
+.header-left {
+  display: flex;
+  align-items: center;
+  gap: var(--space-md);
+  flex: 1;
+  min-width: 0;
+}
+
+.header-content {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+}
+
+.back-btn {
+  padding: var(--space-xs);
+  border: none;
+  background: transparent;
+  color: var(--text-secondary);
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  transition: all 0.2s ease;
+  font-size: 16px;
+  line-height: 1;
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &:hover {
+    background: var(--bg-hover);
+    color: var(--text-primary);
+  }
+}
+
+.header-title {
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin: 0;
+  line-height: 1.4;
+  letter-spacing: -0.01em;
+}
+
+.header-right {
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+  flex-shrink: 0;
+}
+</style>
--- a/frontend/app/web-gold/src/layouts/components/TabLayout.vue
+++ b/frontend/app/web-gold/src/layouts/components/TabLayout.vue
@@ -1,6 +1,7 @@
 <script setup>
 import { ref, watch } from 'vue'
 import { ArrowLeftOutlined } from '@ant-design/icons-vue'
+import LayoutHeader from './LayoutHeader.vue'

 defineOptions({ name: 'TabLayout' })

@@ -48,21 +49,18 @@ const handleBack = () => {

 <template>
  <div class="tab-layout">
-    <!-- 页面头部 -->
-    <div v-if="$slots.header || showBack" class="tab-layout__header">
-      <div class="header-left">
-        <a-button v-if="showBack" type="text" @click="handleBack" class="back-btn">
-          <template #icon>
-            <ArrowLeftOutlined />
-          </template>
-        </a-button>
-        <div class="header-content">
-          <slot name="header"></slot>
-        </div>
-      </div>
-      <div class="header-right">
-        <slot name="extra"></slot>
-      </div>
+    <div v-if="$slots.header || showBack" class="tab-layout__header-wrapper">
+       <LayoutHeader 
+        :show-back="showBack" 
+        @back="handleBack"
+      >
+        <template #header v-if="$slots.header">
+           <slot name="header"></slot>
+        </template>
+        <template #extra>
+          <slot name="extra"></slot>
+        </template>
+      </LayoutHeader>
    </div>

    <!-- 标签页导航 -->
@@ -96,50 +94,7 @@ const handleBack = () => {
  overflow: hidden;
 }

-.tab-layout__header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: var(--space-md);
-  padding: var(--space-md) var(--space-lg);
-  border-bottom: 1px solid var(--border-light);
-  background: var(--bg-primary);
-}
-
-.header-left {
-  display: flex;
-  align-items: center;
-  gap: var(--space-md);
-  flex: 1;
-  min-width: 0;
-}
-
-.back-btn {
-  padding: var(--space-xs);
-  border: none;
-  background: transparent;
-  color: var(--text-secondary);
-  border-radius: var(--radius-sm);
-  cursor: pointer;
-  transition: all 0.15s ease;
-  font-size: 16px;
-  line-height: 1;
-
-  &:hover {
-    background: var(--bg-hover);
-    color: var(--text-primary);
-  }
-}
-
-.header-content {
-  flex: 1;
-  min-width: 0;
-}
-
-.header-right {
-  display: flex;
-  align-items: center;
-  gap: var(--space-sm);
+.tab-layout__header-wrapper {
  flex-shrink: 0;
 }

@@ -147,6 +102,7 @@ const handleBack = () => {
  display: flex;
  border-bottom: 1px solid var(--border-light);
  background: var(--bg-secondary);
+  flex-shrink: 0;
 }

 .tab-item {
--- a/frontend/app/web-gold/src/layouts/components/index.js
+++ b/frontend/app/web-gold/src/layouts/components/index.js
@@ -1,6 +1,16 @@
-// 布局组件统一导出
-export { default as BasicLayout } from './BasicLayout.vue'
-export { default as CardLayout } from './CardLayout.vue'
-export { default as TabLayout } from './TabLayout.vue'
-export { default as FullWidthLayout } from './FullWidthLayout.vue'
-export { default as FormLayout } from './FormLayout.vue'
+
+import BasicLayout from './BasicLayout.vue'
+import CardLayout from './CardLayout.vue'
+import FormLayout from './FormLayout.vue'
+import FullWidthLayout from './FullWidthLayout.vue'
+import TabLayout from './TabLayout.vue'
+import LayoutHeader from './LayoutHeader.vue'
+
+export {
+    BasicLayout,
+    CardLayout,
+    FormLayout,
+    FullWidthLayout,
+    TabLayout,
+    LayoutHeader
+}
--- a/frontend/app/web-gold/src/views/content-style/Copywriting.vue
+++ b/frontend/app/web-gold/src/views/content-style/Copywriting.vue
@@ -524,14 +524,15 @@ defineOptions({ name: 'ContentStyleCopywriting' })
  background: var(--bg-primary);
  border-radius: 8px;
  overflow: hidden;
-  border: 1px solid transparent;
+  border: 1px solid var(--border-color-base); /* Add a subtle border */
+  box-shadow: var(--box-shadow-base); /* Add a subtle shadow for depth */
 }

 .form-card :deep(.ant-card-head),
 .result-card :deep(.ant-card-head) {
  background: var(--bg-primary);
  border: none;
-  padding: 16px 20px;
+  padding: 20px 24px;
  min-height: auto;
 }

@@ -546,7 +547,7 @@ defineOptions({ name: 'ContentStyleCopywriting' })

 .form-card :deep(.ant-card-body),
 .result-card :deep(.ant-card-body) {
-  padding: 20px;
+  padding: 24px;
 }

 /* 表单容器 */
@@ -555,11 +556,11 @@ defineOptions({ name: 'ContentStyleCopywriting' })
 }

 .form-item {
-  margin-bottom: 18px;
+  margin-bottom: 24px;
 }

 .form-item :deep(.ant-form-item-label) {
-  padding-bottom: 8px;
+  padding-bottom: 6px;
 }

 .form-item :deep(.ant-form-item-label > label) {
@@ -590,7 +591,7 @@ defineOptions({ name: 'ContentStyleCopywriting' })
 .custom-input:focus,
 .custom-textarea:focus {
  border-color: var(--primary-color, #1677ff);
-  box-shadow: none;
+  box-shadow: 0 0 0 2px rgba(22, 119, 255, 0.2); /* Subtle blue glow */
 }

 .custom-input:hover,
@@ -736,7 +737,7 @@ defineOptions({ name: 'ContentStyleCopywriting' })

 .edit-textarea:focus {
  border-color: var(--primary-color, #1677ff);
-  box-shadow: none;
+  box-shadow: 0 0 0 2px rgba(22, 119, 255, 0.2); /* Subtle blue glow */
 }

 .edit-textarea:hover {