Skip to content

R
risk-monitor
提交 73c9122b authored 作者: hsx's avatar hsx
浏览文件
操作

颜色定义加入样式页

上级 fb66f056
隐藏空白字符变更
内嵌 并排
正在显示 包含 114 行增加 和 70 行删除
src/components/devStyle/components/constStyle.vue 0 → 100644
浏览文件 @ 73c9122b
<script setup>
import { ElSpace, ElButton } from 'element-plus';
import "@/styles/main.css"
import { copyToClipboardThenTip } from '@/utils/systemUtils'
const colors = [
{ title: "黑色90% / 主标题文字颜色", name: "--text-primary-90-color" },
{ title: "黑色80% / 小标题文字颜色", name: "--text-primary-80-color" },
{ title: "黑色65% / 正文颜色", name: "--text-primary-65-color" },
{ title: "黑色50%", name: "--text-primary-50-color" },
{ title: "黑色10%", name: "--bg-black-10" },
{ title: "黑色5% / 分割线颜色", name: "--bg-black-5" },
{ title: "黑色2% / 灰色背景色", name: "--bg-black-2" },
{ title: "白色主色", name: "--bg-white-100" },
{ title: "主色", name: "--color-primary-100" },
]
function copyColorVar(item) {
const color = `var(${item.name})`
copyToClipboardThenTip(color)
}
</script>
<template>
<el-space direction="vertical" alignment="flex-start">
<div class="text-title-2">颜色</div>
<el-space>
<el-button v-for="(item, index) in colors" :key="index" :color="`var(${item.name})`"
v-on:click="copyColorVar(item)">
{{ item.title }}
</el-button>
</el-space>
</el-space>
</template>
<style scoped></style>
\ No newline at end of file
src/components/devStyle/components/index.vue
浏览文件 @ 73c9122b
<script setup lang="ts"> <script setup lang="ts">
import "@/styles/container.scss" import "@/styles/container.scss"
import TextStyle from './textStyle.vue'; import TextStyle from './textStyle.vue';
import { ElScrollbar } from "element-plus"; import ConstStyle from './constStyle.vue';
import { ElScrollbar, ElSpace } from "element-plus";
</script> </script>
<template> <template>
<el-scrollbar> <el-scrollbar>
<div class="common-page"> <div class="common-page">
<text-style></text-style> <el-space direction="vertical" alignment="flex-start">
<div class="text-title-0-show">开发样式</div>
<div class="text-title-1-show">样式变量</div>
<const-style></const-style>
<div class="text-title-1-show">文字样式</div>
<text-style></text-style>
</el-space>
</div> </div>
</el-scrollbar> </el-scrollbar>
</template> </template>
\ No newline at end of file
src/components/devStyle/components/textStyle.vue
浏览文件 @ 73c9122b
<template> <template>
<div> <table style="width: 100%; border-collapse: collapse; border: 1px solid #ebeef5;">
<div class="text-title-1-show">文字样式</div> <!-- 表头 -->
<table style="width: 100%; border-collapse: collapse; border: 1px solid #ebeef5;margin-top: 10px;"> <thead>
<!-- 表头 --> <tr class="text-title-2">
<thead> <th> 名称</th>
<tr> <th> 类型名称</th>
<th> 名称</th> <th> 操作</th>
<th> 类型名称</th> </tr>
<th> 操作</th> </thead>
<!-- 表格内容 -->
<tbody>
<template v-for="(row, index) in tableData" :key="index">
<!-- 隔行变色效果 -->
<tr :style="{
height: '60px',
backgroundColor: index % 2 === 1 ? '#fafafa' : 'transparent'
}">
<!-- 名称列 -->
<td style="padding: 12px; border: 1px solid #ebeef5;">
<div :class="row.className">
{{ row.name }}
</div>
</td>
<!-- 类型名称列（带复制功能） -->
<td style="padding: 12px; border: 1px solid #ebeef5;">
<div @click="copyToClipboardThenTip(row.className)" style="cursor: pointer;">
<span>{{ row.className }}</span>
</div>
</td>
<!-- 操作列 -->
<td style="padding: 12px; border: 1px solid #ebeef5; text-align: center;">
<el-button type="primary" link @click="copyToClipboardThenTip(row.className)">
<el-icon>
<DocumentCopy />
</el-icon>
复制
</el-button>
</td>
</tr> </tr>
</thead> </template>
</tbody>
<!-- 表格内容 --> </table>
<tbody>
<template v-for="(row, index) in tableData" :key="index">
<!-- 隔行变色效果 -->
<tr :style="{
height: '60px',
backgroundColor: index % 2 === 1 ? '#fafafa' : 'transparent'
}">
<!-- 名称列 -->
<td style="padding: 12px; border: 1px solid #ebeef5;">
<div :class="row.className">
{{ row.name }}
</div>
</td>
<!-- 类型名称列（带复制功能） -->
<td style="padding: 12px; border: 1px solid #ebeef5;">
<div @click="copyClassName(row.className)" style="cursor: pointer;">
<span>{{ row.className }}</span>
</div>
</td>
<!-- 操作列 -->
<td style="padding: 12px; border: 1px solid #ebeef5; text-align: center;">
<el-button type="primary" link @click="copyClassName(row.className)">
<el-icon>
<DocumentCopy />
</el-icon>
复制
</el-button>
</td>
</tr>
</template>
</tbody>
</table>
</div>
</template> </template>
<script setup> <script setup>
import { ref } from 'vue' import { ref } from 'vue'
import { ElMessage, } from 'element-plus'
import { DocumentCopy } from '@element-plus/icons-vue' import { DocumentCopy } from '@element-plus/icons-vue'
import "@/styles/common.scss" import "@/styles/common.scss"
import { copyToClipboard } from '@/utils/systemUtils' import { copyToClipboardThenTip } from '@/utils/systemUtils'
// 表格数据 // 表格数据
const tableData = ref([ const tableData = ref([
...@@ -88,18 +84,6 @@ const tableData = ref([ ...@@ -88,18 +84,6 @@ const tableData = ref([
{ name: '3级提示文字', className: 'text-tip-3' }, { name: '3级提示文字', className: 'text-tip-3' },
]) ])
// 复制类型名称到剪贴板
const copyClassName = async (className) => {
const { status, message } = await copyToClipboard(className)
if (status) {
ElMessage.success(message)
} else {
ElMessage.error(message)
}
}
</script> </script>
<style scoped></style> <style scoped></style>
\ No newline at end of file
src/router/modules/company.js
浏览文件 @ 73c9122b
//企业主页 //企业主页
const companyPages = () => import('@/views/companyPages/index.vue')
const companyPages = () => import('@/views/companyPages2/index.vue')
const companyPagesRoutes = [ const companyPagesRoutes = [
// 智库系统的主要路由 // 智库系统的主要路由
...@@ -9,7 +11,7 @@ const companyPagesRoutes = [ ...@@ -9,7 +11,7 @@ const companyPagesRoutes = [
component: companyPages, component: companyPages,
meta: { meta: {
title: "企业主页", title: "企业主页",
dynamicTitle: true dynamicTitle: true
} }
}, },
......
src/router/modules/devStyle.js
浏览文件 @ 73c9122b
//样式主页 //样式主页
import stylePages from "@/components/devStyle/components/index.vue"; const StylePages = () => import("@/components/devStyle/components/index.vue");
const stylePagesRoutes = [ const stylePagesRoutes = [
// 智库系统的主要路由 // 智库系统的主要路由
{ {
path: "/devStylePages", path: "/devStylePages",
name: "devStylePages", name: "devStylePages",
component: stylePages, component: StylePages,
meta: { meta: {
title: "开发样式", title: "开发样式",
dynamicTitle: true dynamicTitle: true
......
src/styles/descriptions.scss
浏览文件 @ 73c9122b
...@@ -2,8 +2,10 @@ ...@@ -2,8 +2,10 @@
/***没有nav下划线***/ /***没有nav下划线***/
.common-descriptions .el-descriptions__label{ .common-descriptions .el-descriptions__label{
@extend .text-header; @extend .text-tip-1-bold;
} }
.common-descriptions .el-descriptions__content{ .common-descriptions .el-descriptions__content{
@extend .text-base @extend .text-tip-1;
color: var(--text-primary-80-color);
} }
\ No newline at end of file
src/utils/systemUtils.ts
浏览文件 @ 73c9122b
import { ElMessage } from "element-plus";
interface BaseReturn { interface BaseReturn {
status: boolean; status: boolean;
message: string; message: string;
...@@ -26,3 +28,13 @@ export async function copyToClipboard(txet: string): Promise<BaseReturn> { ...@@ -26,3 +28,13 @@ export async function copyToClipboard(txet: string): Promise<BaseReturn> {
return { status: false, message: "复制失败，请手动复制" }; return { status: false, message: "复制失败，请手动复制" };
} }
} }
// 复制类型名称到剪贴板
export async function copyToClipboardThenTip(text: string): Promise<void> {
const { status, message } = await copyToClipboard(text);
if (status) {
ElMessage.success(message);
} else {
ElMessage.error(message);
}
}
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论