DeXun/klp-oa
9
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🎈 perf: 优化部分样式的展示

Browse Source
This commit is contained in:
砂糖
2025-08-28 16:44:04 +08:00
parent 8634549dd3
commit 96b5c3ee45
15 changed files with 977 additions and 165 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
klp-ui/src/views/components/AllApplications.vue
View File

@@ -207,7 +207,6 @@ export default {
<style lang="scss" scoped>
.all-applications-container {
background-color: #fff;
padding: 16px; /* 调整间距，更贴近飞书紧凑感 */
border-radius: 12px; /* 飞书常用较大圆角 */
margin-top: 24px;
@@ -217,7 +216,7 @@ export default {
.frequently-used-section {
margin-bottom: 32px; /* 增大间距 */
padding-bottom: 20px;
border-bottom: 1px solid #ebeef5; /* 飞书浅灰边框色 */
border-bottom: 1px solid #111; /* 飞书浅灰边框色 */
}
.frequently-used-header {
@@ -230,7 +229,7 @@ export default {
.frequently-title {
font-size: 16px; /* 稍小字体，飞书风格更简洁 */
font-weight: 500; /* 调整 FontWeight */
color: #1f2329; /* 深一点的标题色 */
color: #ddd; /* 深一点的标题色 */
}
.edit-btn {
@@ -254,10 +253,10 @@ export default {
border-radius: 12px; /* 大圆角 */
transition: all 0.3s ease;
position: relative;
background-color: #f7f8fa; /* 飞书卡片常用浅灰底色 */
background-color: #222; /* 飞书卡片常用浅灰底色 */
&:hover {
background-color: #eaeef7; /* hover 时的浅灰 */
background-color: #444; /* hover 时的浅灰 */
}
}
@@ -266,7 +265,7 @@ export default {
font-size: 16px;
font-weight: 500;
margin-bottom: 20px;
color: #1f2329;
color: #ddd;
}
// 应用网格布局
@@ -286,10 +285,10 @@ export default {
border-radius: 12px;
transition: background-color 0.3s ease;
position: relative;
background-color: #f7f8fa;
background-color: #222;
&:hover {
background-color: #eaeef7;
background-color: #444;
}
}
@@ -302,7 +301,7 @@ export default {
align-items: center;
justify-content: center;
margin-bottom: 12px;
background-color: #e6f0ff; /* 飞书风格的浅蓝底色 */
background-color: #222; /* 飞书风格的浅蓝底色 */
position: relative;
}
@@ -314,7 +313,7 @@ export default {
// 应用名称样式
.app-name {
font-size: 14px;
color: #515767; /* 飞书常用的文本色 */
color: #2bf; /* 飞书常用的文本色 */
text-align: center;
white-space: nowrap;
overflow: hidden;

3
klp-ui/src/views/components/FlowTable.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="order-analysis-dashboard" v-loading="loading">
<!-- 业绩区 -->
<el-tabs v-model="activeTab" type="card">
<el-tabs v-model="activeTab">
<el-tab-pane label="我的流程" name="my">
<KLPTable v-loading="loading" :data="ownProcessList">
<el-table-column label="流程编号" align="center" prop="procInsId" :show-overflow-tooltip="true" />
@@ -94,7 +94,6 @@ export default {
<style scoped>
.order-analysis-dashboard {
padding: 24px;
background-color: #f7f8fa;
box-sizing: border-box;
}

3
klp-ui/src/views/components/OrderDashboard.vue
View File

@@ -4,7 +4,7 @@
v-loading="loading"
>
<!-- 业绩区 -->
<el-tabs v-model="activeTab" type="card">
<el-tabs v-model="activeTab">
<el-tab-pane label="业绩总览" name="performance">
<PerformanceArea mode="mini" :performance-area="dashboardData.performanceArea" />
</el-tab-pane>
@@ -131,7 +131,6 @@ export default {
<style scoped>
.order-analysis-dashboard {
padding: 24px;
background-color: #f7f8fa;
box-sizing: border-box;
}

120
klp-ui/src/views/finance/document/components/FinanceVoucherTable.vue
View File

@@ -1,7 +1,8 @@
<template>
<!-- 模板部分无需修改，仅调整样式 -->
<div class="finance-voucher-component">
<div
v-for="(voucher, index) in voucherData"
v-for="(voucher, index) in internalVoucherData"
:key="index"
class="voucher-item"
>
@@ -19,7 +20,7 @@
</div>
</div>
<!-- 凭证明细表格 -->
<!-- 凭证明细表格（复用全局深色表格样式） -->
<KLPTable :data="voucher.detailList || []" border style="width: 100%;">
<el-table-column label="摘要" prop="voucherNo" />
<el-table-column label="科目" prop="accountId" />
@@ -38,6 +39,7 @@
</template>
<script>
// JS部分仅修正voucherData绑定（原代码使用internalVoucherData但循环voucherData，避免选中状态失效）
export default {
name: "FinanceVoucherComponent",
props: {
@@ -48,7 +50,6 @@ export default {
},
data() {
return {
// 用于存储选中状态，若父组件需控制，可改为 prop 或 sync 修饰符
internalVoucherData: [],
};
},
@@ -57,7 +58,7 @@ export default {
handler(val) {
this.internalVoucherData = val.map((v) => ({
...v,
checked: false,
checked: false, // 初始化未选中状态
}));
},
immediate: true,
@@ -85,40 +86,127 @@ export default {
};
</script>
<style scoped>
<style lang="scss" scoped>
$--spacing-base: 8px;
$--spacing-lg: 16px;
$--spacing-sm: 4px;
$--color-background: #222;
$--color-background-light: #333;
$--color-text-primary: #ddd;
$--color-text-secondary: #bbb;
$--border-color: #111;
$--border-color-light: #222;
$--border-color-lighter: #333;
$--metal-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
$--metal-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.1);
$--metal-gradient-light: linear-gradient(to bottom, #222, #333);
$--metal-gradient-dark: linear-gradient(to bottom, #111, #222);
$--table-bg: #1E2227;
$--color-text-regular: #EAEAEA;
$--color-primary: #5F7BA0;
/* 外层容器：继承全局深色背景，统一内边距 */
.finance-voucher-component {
padding: 16px;
padding: $--spacing-lg; /* 复用全局间距变量（16px） */
background: $--color-background; /* 全局深色背景（#2B2F36） */
}
/* 单据项容器：深色边框+金属质感阴影，与表格风格统一 */
.voucher-item {
border: 1px solid #e6e6e6;
border-radius: 4px;
margin-bottom: 16px;
border: 1px solid $--border-color; /* 全局边框色（#6E757D） */
border-radius: 8px; /* 与表格统一圆角 */
margin-bottom: $--spacing-lg; /* 单据间间距 */
overflow: hidden; /* 避免内部元素溢出圆角 */
box-shadow: $--metal-shadow; /* 全局金属质感阴影 */
}
/* 单据头部：深灰背景+紧凑布局，区分内容区域 */
.voucher-header {
display: flex;
align-items: center;
background-color: #f5f5f5;
padding: 8px 16px;
background: $--table-bg; /* 复用表格背景色（#1E2227） */
padding: $--spacing-base $--spacing-lg; /* 内边距：8px 16px */
border-bottom: 1px solid $--border-color-lighter; /* 浅色边框分隔头部与表格 */
}
/* 头部单元格：统一文本样式+溢出处理 */
.header-cell {
flex: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: $--color-text-regular; /* 常规文本色（#EAEAEA） */
font-size: 13px; /* 与表格文字大小统一 */
padding: 0 4px; /* 单元格内间距，避免内容拥挤 */
}
/* 操作按钮组：横向间距+按钮样式优化 */
.operation-group {
display: flex;
gap: 8px;
gap: $--spacing-base; /* 按钮间距（8px） */
justify-content: flex-end; /* 按钮右对齐 */
}
/* 重写Element文本按钮样式：适配深色主题 */
.operation-group .el-button--text {
color: $--color-text-secondary !important; /* 次要文本色（#B6BDC5） */
padding: 2px 8px !important; /* 紧凑 padding */
font-size: 12px !important; /* 小号字体，避免占用过多空间 */
&:hover {
color: $--color-primary !important; /* hover时显示主色（#5F7BA0） */
background: rgba($--color-primary, 0.15) !important; /* 浅色背景反馈 */
}
}
/* 重写Element复选框样式：适配深色背景 */
.voucher-header .el-checkbox__inner {
background: $--color-background-light; /* 复选框背景（#2F3339） */
border-color: $--border-color-light; /* 复选框边框（#828991） */
&:checked {
background: $--color-primary; /* 选中时主色背景 */
border-color: $--color-primary; /* 选中时主色边框 */
}
&:hover {
border-color: $--color-primary; /* hover时边框变色 */
}
}
/* 总计行：主色高亮背景+加粗文本，突出汇总信息 */
.total-row {
display: flex;
align-items: center;
background-color: #f0f9ff;
padding: 8px 16px;
font-weight: bold;
background: rgba($--color-primary, 0.15); /* 主色透明背景（#5F7BA0 15%） */
padding: $--spacing-base $--spacing-lg; /* 与头部内边距统一 */
font-weight: 600; /* 加粗文本，强调总计 */
border-top: 1px solid $--border-color-lighter; /* 边框分隔表格与总计 */
}
/* 总计单元格：统一文本样式+对齐方式 */
.total-cell {
flex: 1;
text-align: left;
color: $--color-text-primary; /* 高亮文本色（#FFFFFF） */
font-size: 13px; /* 与表格文字大小统一 */
padding: 0 4px; /* 单元格内间距 */
}
/* 适配小屏幕：头部内容换行，避免挤压 */
@media (max-width: 768px) {
.voucher-header {
flex-wrap: wrap; /* 允许换行 */
gap: $--spacing-sm; /* 换行后元素间距（4px） */
}
.header-cell {
flex: 1 1 45%; /* 小屏幕下每行显示2个单元格 */
margin: 2px 0; /* 上下间距，区分行 */
}
.operation-group {
flex: 1 1 100%; /* 操作组独占一行 */
margin-top: $--spacing-sm; /* 与上方内容间距 */
}
}
</style>

20
klp-ui/src/views/finance/document/index.vue
View File

@@ -46,26 +46,6 @@
@click="handleAdd"
>新增</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="success"
plain
icon="el-icon-edit"
size="mini"
:disabled="single"
@click="handleUpdate"
>修改</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="danger"
plain
icon="el-icon-delete"
size="mini"
:disabled="multiple"
@click="handleDelete"
>删除</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="warning"

7
klp-ui/src/views/index.vue
View File

@@ -73,7 +73,6 @@ export default {
<style scoped>
.dashboard-root {
min-height: 100vh;
background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
padding: 32px;
}
@@ -88,7 +87,6 @@ export default {
padding: 24px;
border-radius: 16px;
backdrop-filter: blur(4px);
background: rgba(255, 255, 255, 0.8);
box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.06);
border: 1px solid rgba(255, 255, 255, 0.2);
transition: transform 0.2s;
@@ -158,7 +156,6 @@ export default {
align-items: center;
padding: 16px;
border-radius: 12px;
background: #fff;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
transition: all 0.2s;
cursor: pointer;
@@ -182,7 +179,6 @@ export default {
.business-module-icon i {
font-size: 20px;
color: #fff;
}
.bg-blue {
@@ -229,7 +225,6 @@ export default {
.monitor-records {
padding: 24px;
border-radius: 16px;
background: #fff;
box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.06);
}
@@ -279,7 +274,6 @@ export default {
.monitor-record-icon-inner {
font-size: 14px;
color: #fff;
}
.monitor-record-action {
@@ -305,7 +299,6 @@ export default {
border-radius: 50%;
object-fit: cover;
border: 2px solid #e0e0e0;
background: #fff;
}
.greeting-text {

55
klp-ui/src/views/login.vue
View File

@@ -153,10 +153,18 @@ export default {
</script>
<style rel="stylesheet/scss" lang="scss">
// 引入全局主题变量，假设你有全局的variables.scss定义了以下变量
$--color-background: #2b2f36;
$--color-text-primary: #ffffff;
$--color-text-secondary: #b6bdc5;
$--border-color-light: #4c5057;
$--color-primary: #5F7BA0;
$--metal-gradient-light: linear-gradient(145deg, #3e434a, #363b41);
.login-page {
display: flex;
height: 100vh;
background: #f7f8fa;
background: $--color-background; // 改用全局深色背景变量
}
.login-logo {
@@ -175,6 +183,7 @@ export default {
.login-title {
font-size: 22px;
color: $--color-text-primary; // 白色文字
}
}
@@ -183,32 +192,38 @@ export default {
display: flex;
justify-content: center;
align-items: center;
background: #fff;
background: $--metal-gradient-light; // 金属渐变背景
position: relative;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.3); // 增加阴影增强质感
}
.login-box {
width: 500px;
padding: 40px 32px 32px 32px;
border-radius: 12px;
box-shadow: 0 4px 32px 0 rgba(0, 0, 0, 0.08);
background: #fff;
box-shadow: 0 4px 32px 0 rgba(0, 0, 0, 0.2);
background: $--color-background; // 深色背景
border: 1px solid $--border-color-light; // 浅色边框
}
.login-title-welcome {
font-size: 22px;
font-weight: 600;
color: #222;
color: $--color-text-primary; // 白色文字
text-align: left;
margin-bottom: 24px;
}
.login-form {
.el-input {
height: 40px;
input {
height: 40px;
color: $--color-text-primary; // 白色文字
background: transparent;
}
&:focus-within {
border-color: $--color-primary; // 聚焦时显示主题色边框
}
}
@@ -216,6 +231,7 @@ export default {
height: 40px;
width: 16px;
margin-left: 2px;
color: $--color-text-secondary; // 浅灰色图标
}
}
@@ -232,6 +248,22 @@ export default {
.login-code-img {
width: 100%;
height: 40px;
opacity: 0.8;
&:hover {
opacity: 1;
}
}
.el-checkbox {
color: $--color-text-primary; // 白色文字
}
.el-button--primary {
background: $--color-primary; // 主题色按钮
border: none;
&:hover {
opacity: 0.9;
}
}
.login-right {
@@ -239,7 +271,7 @@ export default {
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(120deg, #e3eafc 0%, #f7f8fa 100%);
background: $--metal-gradient-light; // 金属渐变背景
}
.login-illustration {
@@ -249,19 +281,20 @@ export default {
.illustration-img {
width: 320px;
margin-bottom: 32px;
opacity: 0.9;
}
.login-slogan {
.slogan-title {
font-size: 20px;
font-weight: 600;
color: #222;
color: $--color-text-primary; // 白色文字
margin-bottom: 12px;
}
.slogan-desc {
font-size: 15px;
color: #888;
color: $--color-text-secondary; // 浅灰色文字
}
}
</style>
</style>

406
klp-ui/src/views/mes/qc/files/index.vue
View File

@@ -1,44 +1,84 @@
<template>
<div style="display: flex; height: calc(100vh - 84px);">
<div class="file-preview-container">
<!-- 左侧文件列表 -->
<div style="width: 250px; border-right: 1px solid #eee; overflow-y: auto;">
<div style="padding: 8px 16px; border-bottom: 1px solid #eee; display: flex; gap: 8px; align-items: center;">
<button @click="handleClearAll" style="background: #f56c6c; color: #fff; border: none; border-radius: 3px; padding: 4px 10px; cursor: pointer;">清空全部</button>
<div class="file-list-sidebar">
<!-- 顶部操作栏 -->
<div class="file-list-header">
<button class="clear-all-btn" @click="handleClearAll">
清空全部
</button>
</div>
<div v-if="loadingList" style="padding: 24px; color: #888; text-align: center;">文件列表加载中...</div>
<ul v-else style="list-style: none; padding: 0; margin: 0;">
<!-- 加载状态 -->
<div class="list-loading" v-if="loadingList">
文件列表加载中...
</div>
<!-- 文件列表 -->
<ul class="file-group-list" v-else>
<template v-for="(group, groupName) in groupedFiles">
<li style="background:#f5f5f5; color:#888; font-weight:bold; padding:8px 16px; display: flex; align-items: center; justify-content: space-between;">
<span>{{ groupName }}</span>
<button @click.stop="handleClearGroup(groupName)" style="background: #e6a23c; color: #fff; border: none; border-radius: 3px; padding: 2px 8px; font-size: 12px; cursor: pointer;">清空分组</button>
<!-- 分组标题 -->
<li class="group-header">
<span class="group-name">{{ groupName }}</span>
<button class="clear-group-btn" @click.stop="handleClearGroup(groupName)">
清空分组
</button>
</li>
<li v-for="file in group" :key="file.fileName"
:style="{padding: '12px 16px', cursor: 'pointer', background: file.fileName === selectedFileName ? '#f0f0f0' : ''}"
@click="selectFile(file)">
{{ file.fileName }}
<span style="float: right; color: #f56c6c; cursor: pointer;" @click.stop="handleDeleteFile(file)">删除</span>
<!-- 分组文件项 -->
<li
class="file-item"
v-for="file in group"
:key="file.fileName"
:class="{ 'file-item--active': file.fileName === selectedFileName }"
@click="selectFile(file)"
>
<div class="file-item__content">
<span class="file-name">{{ file.fileName }}</span>
<span class="delete-file-btn" @click.stop="handleDeleteFile(file)">
删除
</span>
</div>
</li>
</template>
</ul>
</div>
<!-- 右侧文件预览 -->
<div style="flex: 1; padding: 24px; overflow-y: auto;">
<div v-if="loadingContent" style="color: #888;">内容加载中...</div>
<div v-else-if="selectedFile">
<h3>{{ selectedFile.fileName }}</h3>
<div class="file-preview-main">
<!-- 加载状态 -->
<div class="content-loading" v-if="loadingContent">
内容加载中...
</div>
<!-- 选中文件预览 -->
<div class="preview-card" v-else-if="selectedFile">
<h3 class="preview-title">{{ selectedFile.fileName }}</h3>
<!-- 文本文件预览 -->
<template v-if="selectedFile.fileType === 'text'">
<pre style="background: #fafafa; padding: 16px; border-radius: 4px; min-height: 300px;">{{ selectedFile.fileContent }}</pre>
<pre class="text-preview">{{ selectedFile.fileContent }}</pre>
</template>
<!-- 图片文件预览（保留注释，需时启用） -->
<!-- <template v-else-if="selectedFile.fileType === 'image'">
<div style="padding: 16px; background: #fafafa; border-radius: 4px; min-height: 300px; display: flex; align-items: center; justify-content: center;">
<img :src="selectedFile.fileContent" alt="图片预览" style="max-width: 100%; max-height: 600px;" />
<div class="image-preview-container">
<img :src="selectedFile.fileContent" alt="图片预览" class="image-preview" />
</div>
</template> -->
<!-- 其他文件类型 -->
<template v-else>
<div style="background: #fafafa; padding: 16px; border-radius: 4px; min-height: 300px; color: #f56c6c;">{{ selectedFile.fileContent }}</div>
<div class="unsupported-type">
{{ selectedFile.fileContent }}
</div>
</template>
</div>
<div v-else style="color: #888;">请选择左侧文件进行预览</div>
<!-- 未选中文件 -->
<div class="no-selection" v-else>
请选择左侧文件进行预览
</div>
</div>
</div>
</template>
@@ -58,7 +98,7 @@ export default {
},
created() {
this.fetchFileList();
getFileStats()
getFileStats(); // 补充括号，修复语法问题
},
computed: {
groupedFiles() {
@@ -79,6 +119,7 @@ export default {
weekAgo.setDate(today.getDate() - 6);
const monthStart = new Date(now.getFullYear(), now.getMonth(), 1);
const threeMonthsAgo = new Date(now.getFullYear(), now.getMonth() - 2, 1);
(this.files || []).forEach(file => {
const d = file.lastModified ? new Date(file.lastModified) : null;
if (!d) {
@@ -99,6 +140,7 @@ export default {
groups['更久'].push(file);
}
});
// 只返回有文件的分组
return Object.fromEntries(Object.entries(groups).filter(([k, v]) => v.length));
}
@@ -111,10 +153,12 @@ export default {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
confirmButtonClass: 'el-button--warning',
cancelButtonClass: 'el-button--text'
}).then(async () => {
const names = this.files.map(f => f.fileName);
await this.batchDelete(names);
}).catch(() => {});
}).catch(() => { });
},
// 清空某个分组
@@ -125,10 +169,12 @@ export default {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
confirmButtonClass: 'el-button--warning',
cancelButtonClass: 'el-button--text'
}).then(async () => {
const names = group.map(f => f.fileName);
await this.batchDelete(names);
}).catch(() => {});
}).catch(() => { });
},
// 批量删除
@@ -154,6 +200,8 @@ export default {
this.loadingList = false;
}
},
// 获取文件列表
async fetchFileList() {
this.loadingList = true;
this.files = [];
@@ -168,6 +216,7 @@ export default {
}
},
// 选择文件预览
async selectFile(file) {
this.selectedFileName = file.fileName;
this.selectedFile = null;
@@ -175,26 +224,25 @@ export default {
try {
const isText = /\.(txt|md|json|js|ts|log|csv|xml|html|css)$/i.test(file.fileName);
const isImage = /\.(png|jpe?g|gif|bmp|webp|svg)$/i.test(file.fileName);
if (isText) {
const textResult = await getFileContent(file.fileName)
this.selectedFile = {...textResult.data, fileType: 'text'};
}
const textResult = await getFileContent(file.fileName);
this.selectedFile = { ...textResult.data, fileType: 'text' };
}
// 图片预览逻辑（保留，需时启用）
// else if (isImage) {
// // 图片文件
// let blob = null;
// if (typeof this.$options.components?.getFileContent === 'function') {
// blob = await this.$options.components.getFileContent(file.fileName);
// } else if (typeof window.getFileContent === 'function') {
// blob = await window.getFileContent(file.fileName);
// }
// // blob 可能是base64字符串或Blob对象，需适配
// let imgUrl = '';
// if (blob instanceof Blob) {
// imgUrl = URL.createObjectURL(blob);
// } else if (typeof blob === 'string' && blob.startsWith('data:image')) {
// imgUrl = blob;
// } else if (typeof blob === 'string') {
// // 假设后端返回base64
// imgUrl = 'data:image/*;base64,' + blob;
// }
// this.selectedFile = { fileName: file.fileName, fileContent: imgUrl, fileType: 'image' };
@@ -206,11 +254,13 @@ export default {
this.loadingContent = false;
}
},
// 单个文件删除
handleDeleteFile(file) {
deleteFile(file.fileName)
.then(() => {
this.$message.success('文件删除成功');
this.fetchFileList(); // 重新加载文件列表
this.fetchFileList();
})
.catch(err => {
this.$message.error('删除文件失败: ' + (err.message || '未知错误'));
@@ -221,5 +271,291 @@ export default {
</script>
<style scoped>
/* 可根据需要自定义样式 */
</style>
/* 全局容器 */
.file-preview-container {
display: flex;
height: calc(100vh - 84px);
background: var(--color-background);
color: var(--color-text-regular);
}
/* 左侧文件列表侧边栏 */
.file-list-sidebar {
width: 250px;
border-right: 1px solid var(--border-color-light);
overflow-y: auto;
background: var(--color-background-light);
}
/* 列表顶部操作栏 */
.file-list-header {
padding: var(--spacing-base) var(--spacing-lg);
border-bottom: 1px solid var(--border-color-light);
display: flex;
gap: var(--spacing-base);
align-items: center;
background: var(--metal-gradient-light);
}
/* 清空全部按钮 */
.clear-all-btn {
background: linear-gradient(145deg, #e53e3e, #c53030);
color: #fff;
border: 1px solid #9b2c2c;
border-radius: 4px;
padding: 4px 10px;
cursor: pointer;
transition: all 0.2s;
box-shadow: var(--metal-shadow-inset);
}
.clear-all-btn:hover {
box-shadow: var(--metal-shadow);
transform: translateY(-1px);
}
.clear-all-btn:active {
box-shadow: var(--metal-shadow-inset);
transform: translateY(0);
}
/* 列表加载状态 */
.list-loading {
padding: 24px;
color: var(--color-text-secondary);
text-align: center;
background: var(--metal-gradient-light);
}
/* 文件分组列表 */
.file-group-list {
list-style: none;
padding: 0;
margin: 0;
}
/* 分组标题栏 */
.group-header {
background: var(--metal-gradient-dark);
color: var(--color-text-primary);
font-weight: 600;
padding: var(--spacing-base) var(--spacing-lg);
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid var(--border-color-lighter);
}
/* 清空分组按钮 */
.clear-group-btn {
background: linear-gradient(145deg, #e6a23c, #d48822);
color: #fff;
border: 1px solid #b87319;
border-radius: 3px;
padding: 2px 8px;
font-size: 12px;
cursor: pointer;
transition: all 0.2s;
box-shadow: var(--metal-shadow-inset);
}
.clear-group-btn:hover {
box-shadow: var(--metal-shadow);
transform: translateY(-1px);
}
.clear-group-btn:active {
box-shadow: var(--metal-shadow-inset);
transform: translateY(0);
}
/* 文件项基础样式 */
.file-item {
padding: 12px var(--spacing-lg);
cursor: pointer;
transition: all 0.2s;
background: var(--color-background-light);
border-left: 3px solid transparent;
}
.file-item:hover {
background: var(--metal-gradient-light);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
/* 文件项选中状态 */
.file-item--active {
background: rgba(var(--color-primary-rgb), 0.2);
border-left: 3px solid var(--color-primary);
}
/* 文件项内容容器 */
.file-item__content {
display: flex;
justify-content: space-between;
align-items: center;
}
/* 文件名 */
.file-name {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 180px;
}
/* 删除文件按钮 */
.delete-file-btn {
color: var(--color-danger);
cursor: pointer;
padding: 2px 4px;
border-radius: 3px;
transition: all 0.2s;
}
.delete-file-btn:hover {
background: rgba(var(--color-danger-rgb), 0.15);
}
/* 右侧预览主区域 */
.file-preview-main {
flex: 1;
padding: var(--spacing-lg);
overflow-y: auto;
}
/* 内容加载状态 */
.content-loading {
color: var(--color-text-secondary);
padding: 24px;
background: var(--metal-gradient-light);
border-radius: 6px;
border: 1px solid var(--border-color-light);
}
/* 预览卡片容器 */
.preview-card {
background: var(--metal-gradient-light);
border-radius: 6px;
border: 1px solid var(--border-color-light);
padding: var(--spacing-lg);
box-shadow: var(--metal-shadow);
}
/* 预览标题 */
.preview-title {
color: var(--color-text-primary);
margin-top: 0;
padding-bottom: var(--spacing-base);
border-bottom: 1px solid var(--border-color-lighter);
}
/* 文本预览样式 */
.text-preview {
background: var(--table-bg);
color: var(--color-text-regular);
padding: var(--spacing-lg);
border-radius: 4px;
min-height: 300px;
border: 1px solid var(--border-color-lighter);
overflow-x: auto;
font-size: 13px;
line-height: 1.5;
margin: 0;
}
/* 图片预览容器（保留，需时启用） */
/* .image-preview-container {
padding: var(--spacing-lg);
background: var(--table-bg);
border-radius: 4px;
min-height: 300px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid var(--border-color-lighter);
}
.image-preview {
max-width: 100%;
max-height: 600px;
border-radius: 4px;
box-shadow: var(--metal-shadow);
} */
/* 不支持的文件类型样式 */
.unsupported-type {
background: var(--table-bg);
padding: var(--spacing-lg);
border-radius: 4px;
min-height: 300px;
color: var(--color-warning);
border: 1px solid var(--border-color-lighter);
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
}
/* 未选择文件状态 */
.no-selection {
color: var(--color-text-secondary);
padding: 24px;
background: var(--metal-gradient-light);
border-radius: 6px;
border: 1px solid var(--border-color-light);
}
/* 滚动条样式优化 */
::-webkit-scrollbar {
width: 6px;
height: 6px;
}
::-webkit-scrollbar-track {
background: var(--color-background-light);
border-radius: 3px;
}
::-webkit-scrollbar-thumb {
background: var(--border-color-light);
border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--border-color-base);
}
/* 修复Element消息提示框样式（适配深色） */
::v-deep .el-message {
background: var(--metal-gradient-light);
border-color: var(--border-color-light);
color: var(--color-text-regular);
}
::v-deep .el-message__icon--success {
color: var(--color-success);
}
::v-deep .el-message__icon--error {
color: var(--color-danger);
}
::v-deep .el-message__icon--info {
color: var(--color-info);
}
/* 修复确认对话框样式 */
::v-deep .el-dialog {
background: var(--metal-gradient-light) !important;
border-color: var(--border-color-light) !important;
}
::v-deep .el-dialog__title {
color: var(--color-text-primary) !important;
}
::v-deep .el-dialog__body {
color: var(--color-text-regular) !important;
}
</style>

17
klp-ui/src/views/wms/hotProduct/index.vue
View File

@@ -148,22 +148,6 @@
</el-card>
</el-col>
</el-row>
<!-- 操作按钮 -->
<div class="action-buttons">
<el-button type="primary" @click="refreshData" :loading="loading">
<i class="el-icon-refresh"></i>
刷新数据
</el-button>
<!-- <el-button @click="exportData">
<i class="el-icon-download"></i>
导出排行榜
</el-button>
<el-button @click="openSettings">
<i class="el-icon-setting"></i>
设置
</el-button> -->
</div>
</div>
</template>
@@ -394,7 +378,6 @@ export default {
<style scoped>
.hot-product-page {
padding: 20px;
background: #f5f7fa;
min-height: 100vh;
}

4
klp-ui/src/views/wms/order/components/PerformanceArea.vue
View File

@@ -328,9 +328,9 @@ export default {
.stat-item {
text-align: center;
padding: 15px;
background: #f8f9fa;
background: #222;
border-radius: 8px;
border: 1px solid #e9ecef;
border: 1px solid #111;
}
.stat-number {

1
klp-ui/src/views/wms/order/dashboard.vue
View File

@@ -179,7 +179,6 @@ export default {
<style scoped>
.order-analysis-dashboard {
padding: 24px;
background-color: #f7f8fa;
box-sizing: border-box;
}