chore(web): 合并 K23 后台视觉深化

src/components/Menu/src/components/useRenderMenuItem.tsx

@@ -9,7 +9,7 @@ const { renderMenuTitle } = useRenderMenuTitle()
 export const useRenderMenuItem = () =>
   // allRouters: AppRouteRecordRaw[] = [],
   {
-    const renderMenuItem = (routers: AppRouteRecordRaw[], parentPath = '/') => {
+    const renderMenuItem = (routers: AppRouteRecordRaw[], parentPath = '/', nested = false) => {
       return routers
         .filter((v) => !v.meta?.hidden)
         .map((v) => {
@@ -27,7 +27,8 @@ export const useRenderMenuItem = () =>
                 index={onlyOneChild ? pathResolve(fullPath, onlyOneChild.path) : fullPath}
               >
                 {{
-                  default: () => renderMenuTitle(onlyOneChild ? onlyOneChild?.meta : meta)
+                  default: () =>
+                    renderMenuTitle(onlyOneChild ? onlyOneChild?.meta : meta, !nested)
                 }}
               </ElMenuItem>
             )
@@ -35,8 +36,8 @@ export const useRenderMenuItem = () =>
             return (
               <ElSubMenu index={fullPath}>
                 {{
-                  title: () => renderMenuTitle(meta),
+                  title: () => renderMenuTitle(meta, !nested),
-                  default: () => renderMenuItem(v.children!, fullPath)
+                  default: () => renderMenuItem(v.children!, fullPath, true)
                 }}
               </ElSubMenu>
             )

src/components/Menu/src/components/useRenderMenuTitle.tsx

@@ -5,11 +5,11 @@ import { AppIcon } from '@/components/AppIcon'
 import { useI18n } from '@/hooks/web/useI18n'
 
 export const useRenderMenuTitle = () => {
-  const renderMenuTitle = (meta: RouteMeta) => {
+  const renderMenuTitle = (meta: RouteMeta, showIcon = true) => {
     const { t } = useI18n()
     const { title = 'Please set title', icon } = meta
 
-    return icon ? (
+    return icon && showIcon ? (
       <>
         <AppIcon icon={meta.icon}></AppIcon>
         <span class="v-menu__title overflow-hidden overflow-ellipsis whitespace-nowrap">

src/components/Setting/src/Setting.vue

@@ -195,7 +195,7 @@ const themeChange = () => {
       <ColorRadioPicker
         v-model="systemTheme"
         :schema="[
-          '#409eff',
+          '#c4322a',
           '#009688',
           '#536dfe',
           '#ff5c93',

src/components/UserInfo/src/components/LockDialog.vue

@@ -2,11 +2,10 @@
 
 <script setup lang="ts">
 import { useI18n } from '@/hooks/web/useI18n'
-import { ref } from 'vue'
+import { computed, reactive } from 'vue'
 import { Dialog } from '@/components/Dialog'
 import { Form } from '@/components/Form'
 import { useForm } from '@/hooks/web/useForm'
-import { reactive, computed } from 'vue'
 import { useValidator } from '@/hooks/web/useValidator'
 import { FormSchema } from '@/components/Form'
 import { ElButton } from 'element-plus'
@@ -41,13 +40,10 @@ const emit = defineEmits(['update:modelValue'])
 
 const dialogVisible = computed({
   get: () => props.modelValue,
-  set: (val) => {
+  set: (val) => emit('update:modelValue', val)
-    console.log('set: ', val)
-    emit('update:modelValue', val)
-  }
 })
 
-const dialogTitle = ref(t('lock.lockScreen'))
+const dialogTitle = computed(() => t('lock.lockScreen'))
 
 const rules = reactive({
   password: [required()]
@@ -60,7 +56,10 @@ const schema: FormSchema[] = reactive([
     component: 'Input',
     componentProps: {
       type: 'password',
-      showPassword: true
+      showPassword: true,
+      style: {
+        width: '100%'
+      }
     }
   }
 ])
@@ -82,41 +81,163 @@ const handleLock = async () => {
     }
   })
 }
+
+const cancel = () => {
+  dialogVisible.value = false
+}
 </script>
 
 <template>
   <Dialog
     v-model="dialogVisible"
-    width="500px"
+    width="440px"
-    max-height="170px"
+    max-height="220px"
     :class="prefixCls"
     :title="dialogTitle"
+    :fullscreen="false"
   >
-    <div class="flex flex-col items-center">
+    <template #title>
-      <img
+      <div class="lock-dialog-heading">
-        v-if="avatarUrl"
+        <AppIcon :icon="AppIcons.lock" :size="20" />
-        :src="avatarUrl"
+        <div>
-        alt=""
+          <h2>{{ dialogTitle }}</h2>
-        class="w-70px h-70px rounded-[50%] object-cover"
+          <p>{{ t('lock.description') }}</p>
-      />
+        </div>
-      <span
+      </div>
-        v-else
+    </template>
-        class="w-70px h-70px rounded-[50%] flex items-center justify-center bg-[var(--el-fill-color)]"
+
-        ><AppIcon :icon="AppIcons.person" :size="30"
+    <div class="lock-dialog-body">
-      /></span>
+      <div class="lock-dialog-user">
-      <span class="text-14px my-10px text-[var(--top-header-text-color)]">{{ displayName }}</span>
+        <img v-if="avatarUrl" :src="avatarUrl" alt="" class="lock-dialog-avatar" />
+        <span v-else class="lock-dialog-avatar lock-dialog-avatar--empty">
+          <AppIcon :icon="AppIcons.person" :size="28" />
+        </span>
+        <span class="lock-dialog-name">{{ displayName }}</span>
+      </div>
+      <div class="lock-password-field" @keyup.enter.prevent.stop="handleLock">
+        <Form
+          :is-col="false"
+          :schema="schema"
+          :rules="rules"
+          label-position="top"
+          @register="formRegister"
+        />
+      </div>
     </div>
-    <Form :is-col="false" :schema="schema" :rules="rules" @register="formRegister" />
+
     <template #footer>
-      <ElButton type="primary" @click="handleLock">{{ t('lock.lock') }}</ElButton>
+      <ElButton class="lock-dialog-cancel" @click="cancel">{{ t('common.cancel') }}</ElButton>
+      <ElButton type="primary" class="lock-dialog-submit" @click="handleLock">
+        {{ t('lock.lock') }}
+      </ElButton>
     </template>
   </Dialog>
 </template>
 
 <style lang="less" scoped>
 :global(.v-lock-dialog) {
-  @media (width <= 767px) {
+  width: 440px !important;
+  max-width: calc(100vw - 24px);
+  max-height: 360px;
+}
+
+:global(.v-lock-dialog .el-dialog__header) {
+  height: auto;
+  min-height: 64px;
+  padding: 14px 20px 8px !important;
+  border-bottom: 0;
+}
+
+:global(.v-lock-dialog .el-dialog__body) {
+  padding: 4px 20px 8px !important;
+}
+
+:global(.v-lock-dialog .el-dialog__footer) {
+  padding: 10px 20px 16px;
+}
+
+:global(.v-lock-dialog .el-dialog__footer .el-button) {
+  min-width: 96px;
+  height: 36px;
+}
+
+:global(.v-lock-dialog .el-dialog__header .absolute) {
+  right: -14px !important;
+}
+
+@media (width <= 767px) {
+  :global(.v-lock-dialog) {
     max-width: calc(100vw - 16px);
   }
 }
+
+.lock-dialog-heading {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  padding-right: 40px;
+  color: var(--el-text-color-primary);
+
+  .app-icon {
+    margin-top: 2px;
+    color: var(--el-color-primary);
+  }
+
+  h2 {
+    margin: 0;
+    font-size: 16px;
+    font-weight: 650;
+    line-height: 1.4;
+  }
+
+  p {
+    margin: 3px 0 0;
+    color: var(--el-text-color-secondary);
+    font-size: 12px;
+    font-weight: 400;
+    line-height: 1.4;
+  }
+}
+
+.lock-dialog-body {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.lock-dialog-user {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+}
+
+.lock-dialog-avatar {
+  width: 64px;
+  height: 64px;
+  border-radius: 50%;
+  object-fit: cover;
+}
+
+.lock-dialog-avatar--empty {
+  display: flex;
+  color: var(--el-color-primary);
+  background: var(--el-color-primary-light-9);
+  align-items: center;
+  justify-content: center;
+}
+
+.lock-dialog-name {
+  color: var(--el-text-color-regular);
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.lock-password-field {
+  width: 100%;
+}
+
+.lock-dialog-submit {
+  min-width: 96px;
+}
 </style>

src/locales/en.ts

@@ -52,6 +52,7 @@ export default {
     lockScreen: 'Lock screen',
     lock: 'Lock',
     lockPassword: 'Lock screen password',
+    description: 'Enter your password to unlock this session.',
     unlock: 'Click to unlock',
     backToLogin: 'Back to login',
     entrySystem: 'Entry the system',

src/locales/zh-CN.ts

@@ -52,6 +52,7 @@ export default {
     lockScreen: '锁定屏幕',
     lock: '锁定',
     lockPassword: '锁屏密码',
+    description: '输入密码解锁当前会话。',
     unlock: '点击解锁',
     backToLogin: '返回登录',
     entrySystem: '进入系统',

src/store/modules/app.ts

@@ -67,7 +67,7 @@ export const useAppStore = defineStore('app', {
       currentSize: 'default', // 组件尺寸
       theme: {
         // 主题色
-        elColorPrimary: '#409eff',
+        elColorPrimary: '#c4322a',
         // 左侧菜单边框颜色
         leftMenuBorderColor: 'inherit',
         // 左侧菜单背景颜色
@@ -343,6 +343,10 @@ export const useAppStore = defineStore('app', {
   persist: {
     afterRestore: (context) => {
       context.store.title = import.meta.env.VITE_APP_TITLE
+      if (context.store.theme?.elColorPrimary !== '#c4322a') {
+        context.store.setTheme({ elColorPrimary: '#c4322a' })
+        context.store.setCssVarTheme()
+      }
     }
   }
 })

src/styles/business/dark.css

@@ -28,12 +28,12 @@ html.dark .role-card {
 
 html.dark .stat-icon,
 html.dark .role-icon {
-  background: rgb(64 158 255 / 16%) !important;
+  background: color-mix(in srgb, var(--el-color-primary) 18%, transparent) !important;
   color: var(--el-color-primary) !important;
 }
 
 html.dark .role-active {
-  background: rgb(64 158 255 / 12%);
+  background: color-mix(in srgb, var(--el-color-primary) 14%, transparent);
   border-color: var(--el-color-primary);
 }
 
@@ -106,12 +106,12 @@ html.dark .el-tag.status-badge.is-draft {
   color: #c0c4cc !important;
 }
 html.dark .el-tag.status-badge.is-pending {
-  --el-tag-bg-color: rgba(64, 158, 255, 0.18);
+  --el-tag-bg-color: color-mix(in srgb, var(--el-color-primary) 18%, transparent);
-  --el-tag-border-color: rgba(121, 187, 255, 0.45);
+  --el-tag-border-color: color-mix(in srgb, var(--el-color-primary) 45%, transparent);
-  --el-tag-text-color: #8cc5ff;
+  --el-tag-text-color: var(--el-color-primary-light-5);
-  background: rgba(64, 158, 255, 0.18) !important;
+  background: color-mix(in srgb, var(--el-color-primary) 18%, transparent) !important;
-  border-color: rgba(121, 187, 255, 0.45) !important;
+  border-color: color-mix(in srgb, var(--el-color-primary) 45%, transparent) !important;
-  color: #8cc5ff !important;
+  color: var(--el-color-primary-light-5) !important;
 }
 html.dark .el-tag.status-badge.is-offline {
   --el-tag-bg-color: rgba(245, 108, 108, 0.18);

src/styles/business/drama-management.css

@@ -91,29 +91,192 @@
   font-size: 13px;
 }
 
-/* 编辑弹窗里的封面预览：固定竖版尺寸，和上传控件并排，避免弹窗过高 */
+/* 短剧编辑弹窗：固定宽度、内容区滚动、底部操作固定。 */
-.cover-field {
+.drama-editor-dialog {
   display: flex;
-  gap: 12px;
+  max-height: calc(100vh - 40px);
-  align-items: flex-start;
+  overflow: hidden;
-  width: 100%;
+  flex-direction: column;
+  border-radius: var(--app-radius-lg) !important;
 }
-.cover-field-actions {
+
+.drama-editor-dialog .el-dialog__body {
+  flex: 1 1 auto;
+  padding: 8px 24px 0;
+  overflow-y: auto;
+}
+
+.drama-editor-dialog .el-dialog__footer {
+  flex: 0 0 auto;
+  padding: 14px 24px;
+  background: var(--el-bg-color-overlay);
+  border-top: 1px solid var(--el-border-color-lighter);
+}
+
+.drama-editor-dialog .el-dialog__footer .el-button {
+  min-width: 88px;
+  height: 36px;
+}
+
+.editor-section {
+  padding: 4px 0 18px;
+  border-bottom: 1px solid var(--el-border-color-lighter);
+}
+
+.editor-section + .editor-section {
+  padding-top: 18px;
+}
+
+.editor-section:last-child {
+  padding-bottom: 4px;
+  border-bottom: 0;
+}
+
+.editor-section-title {
+  margin: 0 0 14px;
+  color: var(--el-text-color-primary);
+  font-size: 15px;
+  font-weight: 650;
+  line-height: 1.4;
+}
+
+.editor-grid {
+  display: grid;
+  gap: 0 16px;
+}
+
+.editor-grid--two {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.editor-number {
+  width: 180px !important;
+}
+
+.cover-editor {
+  display: flex;
+  gap: 18px;
+  align-items: flex-start;
+}
+
+.cover-preview-card {
+  position: relative;
+  display: grid;
+  flex: 0 0 96px;
+  width: 96px;
+  height: 128px;
+  overflow: hidden;
+  border: 1px solid var(--el-border-color);
+  border-radius: 8px;
+  background: var(--el-fill-color-lighter);
+}
+
+.cover-preview-card img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.cover-preview-empty {
+  display: flex;
+  height: 100%;
+  color: var(--el-text-color-placeholder);
+  font-size: 12px;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  border: 1px dashed var(--el-border-color);
+  border-radius: 8px;
+}
+
+.cover-upload-mask {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  color: #fff;
+  font-size: 12px;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  background: color-mix(in srgb, var(--el-color-primary) 78%, transparent);
+}
+
+.cover-upload-mask b {
+  font-size: 16px;
+}
+
+.cover-editor-meta {
+  display: flex;
   flex: 1 1 auto;
   min-width: 0;
+  flex-direction: column;
+  gap: 10px;
 }
-.form-cover-preview {
+
-  display: block;
+.cover-status-line {
-  width: 84px;
+  display: flex;
-  height: 112px;
+  align-items: center;
-  flex: 0 0 84px;
+  gap: 10px;
-  object-fit: cover;
+  min-width: 0;
-  border: 1px solid var(--el-border-color-lighter);
-  border-radius: var(--app-radius-md);
-  background: #f0f2f4 !important;
 }
-.dark .form-cover-preview {
+
-  background: #353b45 !important;
+.cover-filename {
+  overflow: hidden;
+  color: var(--el-text-color-regular);
+  font-size: 13px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.cover-hint {
+  margin: 0;
+  color: var(--el-text-color-secondary);
+  font-size: 12px;
+}
+
+.cover-actions {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+.cover-actions .el-button {
+  height: 36px;
+}
+
+.cover-original-link {
+  color: var(--el-color-primary);
+  font-size: 13px;
+  text-decoration: none;
+}
+
+.cover-original-link:hover {
+  text-decoration: underline;
+}
+
+@media (max-width: 600px) {
+  .drama-editor-dialog {
+    width: calc(100vw - 24px) !important;
+    margin: 12px auto !important;
+  }
+
+  .drama-editor-dialog .el-dialog__body {
+    padding-right: 18px;
+    padding-left: 18px;
+  }
+
+  .editor-grid--two {
+    grid-template-columns: 1fr;
+  }
+
+}
+
+html.dark .cover-preview-card,
+html.dark .cover-preview-empty {
+  background: var(--el-fill-color-light);
 }
 
 /* 编辑弹窗里的视频预览 */
@@ -163,7 +326,7 @@
 /* 列表里点视频即放大播放，给个悬停反馈 */
 .episode-video-thumb:hover {
   border-color: var(--el-color-primary);
-  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.25);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--el-color-primary) 25%, transparent);
 }
 .dark .table-result-count {
   color: #a6aeb9;
@@ -233,8 +396,8 @@
 .table-actions .el-button--primary {
   --el-button-bg-color: var(--el-color-primary);
   --el-button-border-color: var(--el-color-primary);
-  --el-button-hover-bg-color: var(--el-color-primary-light-3);
+  --el-button-hover-bg-color: var(--el-color-primary-dark-2);
-  --el-button-hover-border-color: var(--el-color-primary-light-3);
+  --el-button-hover-border-color: var(--el-color-primary-dark-2);
 }
 .table-actions .el-button--success {
   --el-button-bg-color: #4d866a;

src/styles/business/index.css

@@ -8,4 +8,5 @@
 @import './console.css';
 @import './creator-center.css';
 @import './layout.css';
+@import './menu.css';
 @import './dark.css';

src/styles/business/menu.css

@@ -0,0 +1,131 @@
+/* 左侧菜单：统一行高、缩进、图标和选中态。 */
+#v-menu .el-menu {
+  padding: 4px 0;
+  background: transparent;
+}
+
+#v-menu .el-menu-item,
+#v-menu .el-sub-menu__title {
+  height: 44px;
+  padding-left: 8px !important;
+  margin: 4px 8px;
+  overflow: hidden;
+  color: var(--left-menu-text-color);
+  font-size: 14px;
+  line-height: 44px;
+  border-radius: 8px;
+  transition:
+    color var(--transition-time-02),
+    background-color var(--transition-time-02);
+}
+
+#v-menu .el-menu--inline {
+  padding-left: 0 !important;
+}
+
+#v-menu .el-menu--inline .el-menu-item,
+#v-menu .el-menu--inline .el-sub-menu__title {
+  height: 40px;
+  padding-left: 0 !important;
+  margin: 3px 8px 3px 42px;
+  line-height: 40px;
+}
+
+#v-menu .el-menu--inline .app-icon {
+  display: none;
+}
+
+#v-menu .el-menu-item .app-icon,
+#v-menu .el-sub-menu__title .app-icon {
+  flex: 0 0 18px;
+  width: 18px;
+  height: 18px;
+  margin-right: 8px;
+}
+
+#v-menu .el-menu-item:hover,
+#v-menu .el-sub-menu__title:hover,
+#v-menu .el-sub-menu.is-opened > .el-sub-menu__title,
+#v-menu .el-sub-menu.is-active > .el-sub-menu__title,
+#v-menu .el-menu-item.is-active {
+  color: var(--el-color-primary) !important;
+  background-color: var(--el-color-primary-light-9) !important;
+}
+
+#v-menu .el-menu .el-menu {
+  background: transparent;
+}
+
+#v-menu .el-menu--collapse .el-menu-item,
+#v-menu .el-menu--collapse .el-sub-menu__title {
+  justify-content: center;
+  padding: 0 !important;
+  margin: 4px 6px;
+}
+
+#v-menu .el-menu--collapse .app-icon {
+  margin-right: 0;
+}
+
+html.dark #v-menu .el-menu-item:hover,
+html.dark #v-menu .el-sub-menu__title:hover {
+  color: #fff !important;
+  background-color: color-mix(in srgb, var(--el-color-primary) 72%, transparent) !important;
+}
+
+html.dark #v-menu .el-sub-menu.is-opened > .el-sub-menu__title,
+html.dark #v-menu .el-sub-menu.is-active > .el-sub-menu__title,
+html.dark #v-menu .el-menu-item.is-active {
+  color: #fff !important;
+  background-color: var(--app-primary-strong) !important;
+}
+
+.v-menu-popper--vertical,
+.v-menu-popper--horizontal {
+  padding: 4px;
+  border: 1px solid var(--el-border-color-light);
+  border-radius: 8px;
+  background: var(--el-bg-color-overlay);
+}
+
+.v-menu-popper--vertical .el-menu-item,
+.v-menu-popper--vertical .el-sub-menu__title,
+.v-menu-popper--horizontal .el-menu-item,
+.v-menu-popper--horizontal .el-sub-menu__title {
+  height: 40px;
+  padding-left: 16px !important;
+  margin: 2px 4px;
+  color: var(--el-text-color-regular);
+  font-size: 14px;
+  line-height: 40px;
+  border-radius: 8px;
+}
+
+.v-menu-popper--vertical .app-icon,
+.v-menu-popper--horizontal .app-icon {
+  flex: 0 0 18px;
+  width: 18px;
+  height: 18px;
+  margin-right: 8px;
+}
+
+.v-menu-popper--vertical .el-menu-item:hover,
+.v-menu-popper--horizontal .el-menu-item:hover,
+.v-menu-popper--vertical .el-menu-item.is-active,
+.v-menu-popper--horizontal .el-menu-item.is-active {
+  color: var(--el-color-primary) !important;
+  background-color: var(--el-color-primary-light-9) !important;
+}
+
+html.dark .v-menu-popper--vertical,
+html.dark .v-menu-popper--horizontal {
+  border-color: var(--el-border-color);
+}
+
+html.dark .v-menu-popper--vertical .el-menu-item:hover,
+html.dark .v-menu-popper--horizontal .el-menu-item:hover,
+html.dark .v-menu-popper--vertical .el-menu-item.is-active,
+html.dark .v-menu-popper--horizontal .el-menu-item.is-active {
+  color: #fff !important;
+  background-color: var(--app-primary-strong) !important;
+}

src/styles/business/theme.css

@@ -15,13 +15,13 @@
   font-family: var(--font-body);
   color: var(--el-text-color-primary);
   background: var(--el-bg-color-page);
-  --el-color-primary: #409eff;
+  --el-color-primary: #c4322a;
-  --el-color-primary-light-3: #79bbff;
+  --el-color-primary-light-3: #d3615b;
-  --el-color-primary-light-5: #a0cfff;
+  --el-color-primary-light-5: #e19995;
-  --el-color-primary-light-7: #c6e2ff;
+  --el-color-primary-light-7: #f0c2c0;
-  --el-color-primary-light-8: #d9ecff;
+  --el-color-primary-light-8: #f5d9d8;
-  --el-color-primary-light-9: #ecf5ff;
+  --el-color-primary-light-9: #faeeed;
-  --el-color-primary-dark-2: #337ecc;
+  --el-color-primary-dark-2: #9d2822;
   --purple: var(--el-color-primary);
   --muted: #909399;
   --line: #e4e7ed;
@@ -30,6 +30,14 @@ body {
   background: var(--el-bg-color-page);
   color: var(--el-text-color-primary);
 }
+.el-button--primary {
+  --el-button-bg-color: var(--el-color-primary);
+  --el-button-border-color: var(--el-color-primary);
+  --el-button-hover-bg-color: var(--el-color-primary-dark-2);
+  --el-button-hover-border-color: var(--el-color-primary-dark-2);
+  --el-button-active-bg-color: var(--el-color-primary-dark-2);
+  --el-button-active-border-color: var(--el-color-primary-dark-2);
+}
 .eyebrow {
   letter-spacing: 0.7px;
   color: #9298a1;
@@ -52,8 +60,8 @@ body {
   box-shadow: none !important;
 }
 .primary-button:hover {
-  background: var(--el-color-primary-light-3) !important;
+  background: var(--el-color-primary-dark-2) !important;
-  border-color: var(--el-color-primary-light-3) !important;
+  border-color: var(--el-color-primary-dark-2) !important;
 }
 .stats-grid {
   gap: 12px;
@@ -73,7 +81,7 @@ body {
 }
 .stat-icon {
   border-radius: var(--app-radius-sm);
-  background: #ecf5ff !important;
+  background: var(--el-color-primary-light-9) !important;
   color: var(--el-color-primary) !important;
 }
 .stat-value {
@@ -97,7 +105,7 @@ body {
   color: #61738a;
 }
 .chart-svg path:first-of-type {
-  fill: #d9ecff;
+  fill: var(--el-color-primary-light-8);
 }
 .chart-svg path:last-of-type {
   stroke: var(--el-color-primary);
@@ -241,12 +249,12 @@ body {
   border-color: #e7e9ec;
 }
 .role-active {
-  border-color: #a0cfff;
+  border-color: var(--el-color-primary-light-5);
-  background: #ecf5ff;
+  background: var(--el-color-primary-light-9);
 }
 .role-icon {
   border-radius: var(--app-radius-sm);
-  background: #ecf5ff !important;
+  background: var(--el-color-primary-light-9) !important;
   color: var(--el-color-primary) !important;
 }
 .role-badge {
@@ -314,12 +322,12 @@ body {
   color: #6b7280 !important;
 }
 .el-tag.status-badge.is-pending {
-  --el-tag-bg-color: #ecf5ff;
+  --el-tag-bg-color: var(--el-color-primary-light-9);
-  --el-tag-border-color: #c6e2ff;
+  --el-tag-border-color: var(--el-color-primary-light-7);
-  --el-tag-text-color: #2b7de9;
+  --el-tag-text-color: var(--el-color-primary);
-  background: #ecf5ff !important;
+  background: var(--el-color-primary-light-9) !important;
-  border-color: #c6e2ff !important;
+  border-color: var(--el-color-primary-light-7) !important;
-  color: #2b7de9 !important;
+  color: var(--el-color-primary) !important;
 }
 .el-tag.status-badge.is-offline {
   --el-tag-bg-color: #fdecec;

src/views/Login/Login.vue

@@ -129,7 +129,7 @@ const themeChange = () => {
   font-size: 13px;
   font-weight: 600;
   letter-spacing: 0.08em;
-  color: #d9ecff !important;
+  color: var(--el-color-primary-light-8) !important;
 }
 
 .login-panel {

src/views/contentManagement/DramaManagementView.vue

@@ -1,7 +1,7 @@
 <!-- Author: fruit.com.cn -->
 
 <script setup>
-import { onMounted, reactive, ref } from 'vue'
+import { computed, nextTick, onMounted, reactive, ref } from 'vue'
 import { useRouter } from 'vue-router'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { AppIcons } from '@/constants/icons'
@@ -37,16 +37,32 @@ const dialogVisible = ref(false)
 const saving = ref(false)
 const uploadingCover = ref(false)
 const coverPercent = ref(0)
+const coverError = ref('')
+const coverFileName = ref('')
 const editingId = ref(null)
+const formRef = ref()
 const form = reactive({
   title: '',
   categoryId: undefined,
   description: '',
   freeEpisodes: 3,
   unlockCoin: 0,
+  isHot: false,
   cover: ''
 })
 
+const MAX_COVER_SIZE = 5 * 1024 * 1024
+const COVER_TYPES = ['image/jpeg', 'image/png', 'image/webp']
+
+const formRules = {
+  title: [{ required: true, message: '请输入短剧名称', trigger: 'blur' }],
+  categoryId: [{ required: true, message: '请选择短剧类型', trigger: 'change' }]
+}
+
+const coverDisplayName = computed(
+  () => coverFileName.value || (form.cover ? coverBasename(form.cover) : '尚未选择封面')
+)
+
 const statusOptions = [
   { code: 'draft', text: '草稿' },
   { code: 'reviewing', text: '审核中' },
@@ -104,6 +120,17 @@ function handleSizeChange() {
   load()
 }
 
+function coverBasename(path) {
+  if (!path) return ''
+  const clean = path.split('?')[0].split('#')[0]
+  return decodeURIComponent(clean.split('/').pop() || clean)
+}
+
+async function resetValidation() {
+  await nextTick()
+  formRef.value?.clearValidate()
+}
+
 function openCreate() {
   editingId.value = null
   Object.assign(form, {
@@ -115,7 +142,10 @@ function openCreate() {
     isHot: false,
     cover: ''
   })
+  coverFileName.value = ''
+  coverError.value = ''
   dialogVisible.value = true
+  resetValidation()
 }
 
 function openEdit(row) {
@@ -129,12 +159,19 @@ function openEdit(row) {
     isHot: !!row.isHot,
     cover: row.cover || ''
   })
+  coverFileName.value = row.cover ? coverBasename(row.cover) : ''
+  coverError.value = ''
   dialogVisible.value = true
+  resetValidation()
 }
 
 async function saveDrama() {
-  if (!form.title.trim()) return ElMessage.warning('请填写短剧名称')
+  if (saving.value || uploadingCover.value) return
-  if (!form.categoryId) return ElMessage.warning('请选择短剧类型')
+  try {
+    await formRef.value?.validate()
+  } catch {
+    return
+  }
   const category = categories.value.find((item) => item.id === form.categoryId)
   const payload = {
     ...form,
@@ -158,22 +195,54 @@ async function saveDrama() {
   }
 }
 
+function beforeCoverUpload(file) {
+  coverError.value = ''
+  if (!COVER_TYPES.includes(file.type)) {
+    coverError.value = '封面仅支持 JPG、PNG 或 WebP 格式'
+    return false
+  }
+  if (file.size > MAX_COVER_SIZE) {
+    coverError.value = '封面大小不能超过 5MB'
+    return false
+  }
+  return true
+}
+
 /** 封面走分片上传（图片只有一个分片），成功后回填地址。 */
 async function uploadCover(options) {
   uploadingCover.value = true
   coverPercent.value = 0
+  coverError.value = ''
   try {
     const asset = await uploadFile(options.file, {
       bizType: 'DRAMA_COVER',
       onProgress: (percent) => (coverPercent.value = percent)
     })
     form.cover = asset.url
+    coverFileName.value = options.file.name
     ElMessage.success('封面已上传')
+  } catch {
+    coverError.value = '封面上传失败，请检查网络后重试'
   } finally {
     uploadingCover.value = false
   }
 }
 
+function removeCover() {
+  if (uploadingCover.value) return
+  form.cover = ''
+  coverFileName.value = ''
+  coverError.value = ''
+}
+
+function beforeDialogClose(done) {
+  if (saving.value || uploadingCover.value) {
+    ElMessage.warning(saving.value ? '正在保存，请稍候' : '封面正在上传，请稍候')
+    return
+  }
+  done()
+}
+
 async function confirmDelete(row) {
   try {
     await ElMessageBox.confirm(`确定删除短剧「${row.title}」吗？删除后无法恢复。`, '删除确认', {
@@ -375,56 +444,155 @@ onMounted(async () => {
         @size-change="handleSizeChange"
     /></div>
   </section>
-  <el-dialog v-model="dialogVisible" :title="editingId ? '编辑短剧' : '新建短剧'" width="600px"
+  <el-dialog
-    ><el-form label-position="top"
+    v-model="dialogVisible"
-      ><div class="form-row"
+    :title="editingId ? '编辑短剧' : '新建短剧'"
-        ><el-form-item label="短剧名称" required
+    width="680px"
-          ><el-input v-model="form.title" placeholder="请输入短剧名称" /></el-form-item
+    class="drama-editor-dialog"
-        ><el-form-item label="类型" required
+    :close-on-click-modal="false"
-          ><el-select v-model="form.categoryId" placeholder="请选择"
+    :before-close="beforeDialogClose"
-            ><el-option
-              v-for="item in categories"
-              :key="item.id"
-              :label="item.name"
-              :value="item.id" /></el-select></el-form-item></div
-      ><el-form-item label="简介"
-        ><el-input
-          v-model="form.description"
-          type="textarea"
-          :rows="2"
-          maxlength="200"
-          show-word-limit /></el-form-item
-      ><div class="form-row"
-        ><el-form-item label="免费集数"
-          ><el-input-number v-model="form.freeEpisodes" :min="0" :max="200" /></el-form-item
-        ><el-form-item label="单集解锁金币"
-          ><el-input-number v-model="form.unlockCoin" :min="0" :max="9999" /></el-form-item
-      ></div>
-      <el-form-item label="是否热门"><el-switch v-model="form.isHot" /></el-form-item>
-      <el-form-item label="短剧封面"
-        ><div class="cover-field"
-          ><div class="cover-field-actions"
-            ><el-upload
-              v-if="can('cover:upload')"
-              :show-file-list="false"
-              accept="image/*"
-              :http-request="uploadCover"
-              :disabled="uploadingCover"
-              ><el-button :loading="uploadingCover">{{
-                form.cover ? '更换封面' : '选择封面'
-              }}</el-button></el-upload
-            ><p v-if="uploadingCover" class="selected-file">上传中 {{ coverPercent }}%</p
-            ><p v-else-if="form.cover" class="selected-file">封面已上传</p
-            ><el-input v-model="form.cover" placeholder="也可以直接填写图片地址" /></div
-          ><img
-            v-if="form.cover"
-            :src="form.cover"
-            class="form-cover-preview" /></div></el-form-item></el-form
-    ><template #footer
-      ><el-button @click="dialogVisible = false">取消</el-button
-      ><el-button type="primary" :loading="saving" @click="saveDrama">{{
-        editingId ? '保存修改' : '保存草稿'
-      }}</el-button></template
-    ></el-dialog
   >
+    <el-form
+      ref="formRef"
+      :model="form"
+      :rules="formRules"
+      label-position="top"
+      class="drama-editor-form"
+    >
+      <section class="editor-section">
+        <h3 class="editor-section-title">基础信息</h3>
+        <div class="editor-grid editor-grid--two">
+          <el-form-item label="短剧名称" prop="title">
+            <el-input v-model="form.title" maxlength="80" placeholder="请输入短剧名称" />
+          </el-form-item>
+          <el-form-item label="类型" prop="categoryId">
+            <el-select v-model="form.categoryId" placeholder="请选择类型">
+              <el-option
+                v-for="item in categories"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id"
+              />
+            </el-select>
+          </el-form-item>
+        </div>
+        <el-form-item label="简介">
+          <el-input
+            v-model="form.description"
+            type="textarea"
+            :rows="3"
+            maxlength="200"
+            show-word-limit
+            placeholder="简要介绍剧情"
+          />
+        </el-form-item>
+      </section>
+
+      <section class="editor-section">
+        <h3 class="editor-section-title">付费设置</h3>
+        <div class="editor-grid editor-grid--two">
+          <el-form-item label="免费集数">
+            <el-input-number
+              v-model="form.freeEpisodes"
+              class="editor-number"
+              controls-position="right"
+              :min="0"
+              :max="200"
+            />
+          </el-form-item>
+          <el-form-item label="单集解锁金币">
+            <el-input-number
+              v-model="form.unlockCoin"
+              class="editor-number"
+              controls-position="right"
+              :min="0"
+              :max="9999"
+            />
+          </el-form-item>
+        </div>
+        <el-form-item label="是否热门">
+          <el-switch v-model="form.isHot" />
+        </el-form-item>
+      </section>
+
+      <section class="editor-section">
+        <h3 class="editor-section-title">封面</h3>
+        <div class="cover-editor">
+          <div class="cover-preview-card">
+            <img v-if="form.cover" :src="form.cover" alt="短剧封面" />
+            <div v-else class="cover-preview-empty">
+              <AppIcon :icon="AppIcons.content" :size="28" />
+              <span>暂无封面</span>
+            </div>
+            <div v-if="uploadingCover" class="cover-upload-mask">
+              <span>上传中</span>
+              <b>{{ coverPercent }}%</b>
+            </div>
+          </div>
+
+          <div class="cover-editor-meta">
+            <div class="cover-status-line">
+              <el-tag :type="form.cover ? 'success' : 'info'" effect="light">
+                {{ form.cover ? '已上传' : '未上传' }}
+              </el-tag>
+              <span class="cover-filename" :title="coverDisplayName">{{ coverDisplayName }}</span>
+            </div>
+            <p class="cover-hint">支持 JPG、PNG、WebP，单张不超过 5MB。</p>
+            <el-alert
+              v-if="coverError"
+              :title="coverError"
+              type="error"
+              :closable="false"
+              show-icon
+            />
+            <div class="cover-actions">
+              <el-upload
+                v-if="can('cover:upload')"
+                :show-file-list="false"
+                accept="image/jpeg,image/png,image/webp"
+                :before-upload="beforeCoverUpload"
+                :http-request="uploadCover"
+                :disabled="uploadingCover"
+              >
+                <el-button :loading="uploadingCover" :disabled="uploadingCover">
+                  <AppIcon :icon="AppIcons.upload" />
+                  {{ form.cover ? '更换封面' : '选择封面' }}
+                </el-button>
+              </el-upload>
+              <el-button
+                v-if="can('cover:upload') && form.cover"
+                :disabled="uploadingCover"
+                @click="removeCover"
+              >
+                移除
+              </el-button>
+              <a
+                v-if="form.cover"
+                class="cover-original-link"
+                :href="form.cover"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                查看原图
+              </a>
+            </div>
+          </div>
+        </div>
+      </section>
+    </el-form>
+
+    <template #footer>
+      <el-button :disabled="saving || uploadingCover" @click="dialogVisible = false"
+        >取消</el-button
+      >
+      <el-button
+        type="primary"
+        :loading="saving"
+        :disabled="saving || uploadingCover"
+        @click="saveDrama"
+      >
+        {{ editingId ? '保存修改' : '保存草稿' }}
+      </el-button>
+    </template>
+  </el-dialog>
 </template>

src/views/permission/MenuManagementView.vue

@@ -75,7 +75,7 @@ const { treeData, loading, form, parentOptions, resetForm, selectNode, saveMenu,
         <el-form-item label="权限标识">
           <el-input v-model="form.permissionCode" placeholder="例如 drama:list" />
         </el-form-item>
-        <el-form-item v-if="form.type !== 'BUTTON'" label="菜单图标">
+        <el-form-item v-if="form.type === 'CATALOG'" label="菜单图标">
           <el-select v-model="form.icon" clearable placeholder="请选择">
             <el-option v-for="icon in menuIconNames" :key="icon" :label="icon" :value="icon" />
           </el-select>

src/views/permission/composables/useMenuManagement.js

@@ -93,7 +93,7 @@ export function useMenuManagement() {
       routePath: raw.path || '',
       routeName: raw.name || '',
       component: raw.component === '#' ? '' : raw.component || '',
-      icon: normalizeAppIcon(raw.icon),
+      icon: raw.type === 'CATALOG' ? normalizeAppIcon(raw.icon) : '',
       permissionCode: raw.permissionCode || '',
       type: raw.type || 'MENU',
       sort: raw.sort ?? 1,
@@ -113,7 +113,7 @@ export function useMenuManagement() {
       routePath: form.routePath.trim(),
       routeName: form.routeName.trim(),
       component: form.type === 'CATALOG' ? '#' : form.component.trim(),
-      icon: form.type === 'BUTTON' ? '' : normalizeAppIcon(form.icon),
+      icon: form.type === 'CATALOG' ? normalizeAppIcon(form.icon) : '',
       permissionCode: form.permissionCode.trim(),
       type: form.type,
       sort: Number(form.sort) || 1,