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/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 {