Skip to content

B
bg-ui-demos
Commit 8b7c482f authored by 白舜's avatar 白舜 🎱
Browse files
Options

调整prettier并格式化代码

parent 5115759d
Hide whitespace changes
Inline Side-by-side
Showing with 572 additions and 487 deletions
.eslintignore
View file @ 8b7c482f
...@@ -4,3 +4,6 @@ env.d.ts ...@@ -4,3 +4,6 @@ env.d.ts
pnpm-lock.yaml pnpm-lock.yaml
*.md *.md
iconfont.js iconfont.js
dist
.DS_Store
.history
.eslintrc.js
View file @ 8b7c482f
...@@ -47,10 +47,7 @@ module.exports = { ...@@ -47,10 +47,7 @@ module.exports = {
node: true, node: true,
}, },
parser: "vue-eslint-parser", parser: "vue-eslint-parser",
extends: [ extends: ["plugin:vue/vue3-recommended", "eslint:recommended"],
"plugin:vue/vue3-recommended",
"eslint:recommended",
],
parserOptions: { parserOptions: {
ecmaVersion: 2021, ecmaVersion: 2021,
}, },
......
.prettierignore
View file @ 8b7c482f
...@@ -3,3 +3,8 @@ dist ...@@ -3,3 +3,8 @@ dist
pnpm-lock.yaml pnpm-lock.yaml
auto-imports.d.ts auto-imports.d.ts
components.d.ts components.d.ts
env.d.ts
*.md
iconfont.js
.DS_Store
.history
.prettierrc
View file @ 8b7c482f
{ {
"$schema": "http://json.schemastore.org/prettierrc", "$schema": "http://json.schemastore.org/prettierrc",
"semi": true, "semi": true,
"singleQuote": false "singleQuote": false,
"bracketSameLine": true
} }
.vscode/settings.json
View file @ 8b7c482f
{ {
"eslint.validate": [ "eslint.validate": ["vue", "javascript", "javascriptreact"],
"vue",
"javascript",
"javascriptreact"
],
"editor.defaultFormatter": "esbenp.prettier-vscode", "editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.codeActionsOnSave": [ "editor.codeActionsOnSave": ["source.formatDocument", "source.fixAll.eslint"],
"source.formatDocument",
"source.fixAll.eslint"
],
"editor.formatOnSave": false, "editor.formatOnSave": false,
"files.eol": "\n", "files.eol": "\n",
"path-intellisense.mappings": { "path-intellisense.mappings": {
"@": "${workspaceFolder}/src" "@": "${workspaceFolder}/src"
}, }
"volar.codeLens.pugTools": false,
"typescript.preferences.useAliasesForRenames": false,
"liveServer.settings.root": "/dist",
"prettier.printWidth": 120
} }
index.html
View file @ 8b7c482f
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>BG-UI Demos</title>
</head>
<head> <body>
<meta charset="UTF-8" /> <div id="app"></div>
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> <script type="module" src="/src/main.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> </body>
<title>BG-UI Demos</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html> </html>
package.json
View file @ 8b7c482f
...@@ -2,13 +2,12 @@ ...@@ -2,13 +2,12 @@
"name": "my-vue-app", "name": "my-vue-app",
"private": true, "private": true,
"version": "0.0.0", "version": "0.0.0",
"type": "module",
"scripts": { "scripts": {
"dev": "vite", "dev": "vite",
"build": "vite build", "build": "vite build",
"preview": "vite preview", "preview": "vite preview",
"lint": "eslint --ext .js,vue --ignore-pattern '!.*ignore' .", "lint": "eslint --ext .js,vue --ignore-pattern '!.*ignore' .",
"lint:fix": "pnpm lint --fix" "lint:fix": "eslint --fix && prettier --config .prettierrc --write --write ."
}, },
"dependencies": { "dependencies": {
"@element-plus/icons-vue": "^2.0.10", "@element-plus/icons-vue": "^2.0.10",
...@@ -27,6 +26,7 @@ ...@@ -27,6 +26,7 @@
"eslint": "^8.34.0", "eslint": "^8.34.0",
"eslint-define-config": "^1.15.0", "eslint-define-config": "^1.15.0",
"eslint-plugin-vue": "^9.9.0", "eslint-plugin-vue": "^9.9.0",
"prettier": "2.8.4",
"sass": "^1.58.2", "sass": "^1.58.2",
"vite": "^4.1.1" "vite": "^4.1.1"
} }
......
src/App.vue
View file @ 8b7c482f
...@@ -11,7 +11,9 @@ onMounted(() => { ...@@ -11,7 +11,9 @@ onMounted(() => {
nav.addEventListener("click", (e) => { nav.addEventListener("click", (e) => {
const el = e.target; const el = e.target;
if (el.tagName === "LI") { if (el.tagName === "LI") {
const topDistance = document.querySelector(el.getAttribute("data-id")).offsetTop - navHeight; const topDistance =
document.querySelector(el.getAttribute("data-id")).offsetTop -
navHeight;
window.scrollTo(0, topDistance); window.scrollTo(0, topDistance);
} }
}); });
...@@ -141,7 +143,9 @@ const { title: cardTitle, icon: cardIcon } = toRefs(card); ...@@ -141,7 +143,9 @@ const { title: cardTitle, icon: cardIcon } = toRefs(card);
</cw> </cw>
<cw title="bg-detail-table2"> <cw title="bg-detail-table2">
<bg-detail-table2 :list="[{ label: 'label', value: 'table2 demo' }]" item-width="200px" /> <bg-detail-table2
:list="[{ label: 'label', value: 'table2 demo' }]"
item-width="200px" />
</cw> </cw>
<cw title="bg-filter-date" /> <cw title="bg-filter-date" />
...@@ -180,27 +184,27 @@ const { title: cardTitle, icon: cardIcon } = toRefs(card); ...@@ -180,27 +184,27 @@ const { title: cardTitle, icon: cardIcon } = toRefs(card);
<cw title="bg-steps" /> <cw title="bg-steps" />
<cw title="bg-switch" /> <cw title="bg-switch" />
<!-- <cw title="bg-tab"> <!-- <cw title="bg-tab">
<bg-tab label="label"> <bg-tab label="label">
<div>content</div> <div>content</div>
</bg-tab> </bg-tab>
</cw> --> </cw> -->
<cw title="bg-table-btn" /> <cw title="bg-table-btn" />
<cw title="bg-table-btns-more" /> <cw title="bg-table-btns-more" />
<cw title="bg-table-btns" /> <cw title="bg-table-btns" />
<cw title="bg-table-pro" /> <cw title="bg-table-pro" />
<cw title="bg-table" /> <cw title="bg-table" />
<!-- <cw title="bg-tabs"> <!-- <cw title="bg-tabs">
<bg-tabs> <bg-tabs>
<div>a</div> <div>a</div>
<div>b</div> <div>b</div>
<div>c</div> <div>c</div>
<template #actions> <template #actions>
<div>a action</div> <div>a action</div>
<div>b action</div> <div>b action</div>
<div>c action</div> <div>c action</div>
</template> </template>
</bg-tabs> </bg-tabs>
</cw> --> </cw> -->
<cw title="bg-tags"> <cw title="bg-tags">
<bg-tags <bg-tags
value="1, 2, 3, 4" value="1, 2, 3, 4"
...@@ -209,11 +213,17 @@ const { title: cardTitle, icon: cardIcon } = toRefs(card); ...@@ -209,11 +213,17 @@ const { title: cardTitle, icon: cardIcon } = toRefs(card);
console.log(v); console.log(v);
} }
" /> " />
<template #notes>该组件引用了的el-button需要调整size，以便兼容Element-Plus</template> <template #notes>
该组件引用了的el-button需要调整size，以便兼容Element-Plus
</template>
</cw> </cw>
<cw title="bg-upload-image" /> <cw title="bg-upload-image" />
<cw title="bg-upload"> <cw title="bg-upload">
<!-- <bg-upload :data="upload.data"></bg-upload> --> <bg-upload
:data="{
directory: 'file',
uniqueCode: false,
}" />
</cw> </cw>
<cw title="bg-user-upload-image" /> <cw title="bg-user-upload-image" />
</div> </div>
......
src/assets/reset.css
View file @ 8b7c482f
...@@ -50,7 +50,9 @@ html { ...@@ -50,7 +50,9 @@ html {
box-sizing: border-box; box-sizing: border-box;
} }
*, *::before, *::after { *,
*::before,
*::after {
box-sizing: inherit; box-sizing: inherit;
} }
......
src/bg-ui/bg-btns.vue
View file @ 8b7c482f
...@@ -15,20 +15,20 @@ ...@@ -15,20 +15,20 @@
</template> </template>
<script setup> <script setup>
import { reactive, ref,onBeforeMount,toRefs } from "vue"; import { reactive, ref, onBeforeMount, toRefs } from "vue";
const props = defineProps({ const props = defineProps({
modelValue: { modelValue: {
type: [String, Number], type: [String, Number],
default: 0 default: 0,
}, },
options: { options: {
type: Array, type: Array,
default: () => [], default: () => [],
} },
}); });
const emit = defineEmits(["update:modelValue"]); const emit = defineEmits(["update:modelValue"]);
const selectBtn = ({value})=>{ const selectBtn = ({ value }) => {
emit("update:modelValue", value); emit("update:modelValue", value);
}; };
</script> </script>
src/bg-ui/bg-card.vue
View file @ 8b7c482f
...@@ -25,7 +25,7 @@ const props = defineProps({ ...@@ -25,7 +25,7 @@ const props = defineProps({
type: String, type: String,
default: "", default: "",
}, },
subTitle:{ subTitle: {
type: String, type: String,
default: "", default: "",
}, },
...@@ -33,26 +33,26 @@ const props = defineProps({ ...@@ -33,26 +33,26 @@ const props = defineProps({
type: String, type: String,
default: "", default: "",
}, },
easyIcon:{ easyIcon: {
type:Boolean, type: Boolean,
default:false, default: false,
} },
}); });
</script> </script>
<style scoped> <style scoped>
.easy-icon{ .easy-icon {
width: 4px; width: 4px;
height: 14px; height: 14px;
background-color: #3759be; background-color: #3759be;
border-radius: 2px; border-radius: 2px;
margin-right: 8px; margin-right: 8px;
} }
.subtitle-text{ .subtitle-text {
font-size: 14px; font-size: 14px;
color: #909bb6; color: #909bb6;
font-weight: 400; font-weight: 400;
line-height: 5px; line-height: 5px;
margin-top: 4px; margin-top: 4px;
} }
</style> </style>
\ No newline at end of file
src/bg-ui/bg-code-editor.vue
View file @ 8b7c482f
...@@ -2,18 +2,18 @@ ...@@ -2,18 +2,18 @@
<VAceEditor <VAceEditor
v-model:value="states.content" v-model:value="states.content"
class="vue-ace-editor" class="vue-ace-editor"
:class="{'vue-ace-editor-disable':props.disabled}" :class="{ 'vue-ace-editor-disable': props.disabled }"
:lang="props.lang" :lang="props.lang"
:theme="props.theme" :theme="props.theme"
:options="{ :options="{
useWorker: true, useWorker: true,
readOnly: props.disabled, readOnly: props.disabled,
wrap: true wrap: true,
}" }"
@input="codeChange" /> @input="codeChange" />
</template> </template>
<script setup> <script setup>
import { reactive, toRefs, watch,onMounted } from "vue"; import { reactive, toRefs, watch, onMounted } from "vue";
import { VAceEditor } from "vue3-ace-editor"; import { VAceEditor } from "vue3-ace-editor";
import ace from "ace-builds"; import ace from "ace-builds";
import modeJsonUrl from "ace-builds/src-noconflict/mode-json?url"; import modeJsonUrl from "ace-builds/src-noconflict/mode-json?url";
...@@ -36,30 +36,28 @@ ace.config.setModuleUrl("ace/mode/base", workerBaseUrl); ...@@ -36,30 +36,28 @@ ace.config.setModuleUrl("ace/mode/base", workerBaseUrl);
ace.config.setModuleUrl("ace/mode/json_worker", workerJsonUrl); ace.config.setModuleUrl("ace/mode/json_worker", workerJsonUrl);
ace.config.setModuleUrl("ace/mode/javascript_worker", workerJavascriptUrl); ace.config.setModuleUrl("ace/mode/javascript_worker", workerJavascriptUrl);
ace.config.setModuleUrl("ace/mode/html_worker", workerHtmlUrl); ace.config.setModuleUrl("ace/mode/html_worker", workerHtmlUrl);
const props = defineProps( const props = defineProps({
{ modelValue: {
modelValue: { type: String,
type:String, default: "",
default:"", },
}, disabled: {
disabled:{ type: Boolean,
type:Boolean, default: false,
default:false },
}, // lang:{
// lang:{ // type:String,
// type:String, // default:"json"
// default:"json" // },
// }, // theme:{
// theme:{ // type:String,
// type:String, // default:"themeChromeUrl"
// default:"themeChromeUrl" // },
// }, width: {
width:{ type: String,
type:String, default: "100%",
default:"100%" },
}, });
}
);
const emit = defineEmits(["update:modelValue"]); const emit = defineEmits(["update:modelValue"]);
// watch( // watch(
// props.modelValue, // props.modelValue,
...@@ -81,27 +79,26 @@ const states = reactive({ ...@@ -81,27 +79,26 @@ const states = reactive({
// } // }
// ) // )
const codeChange = ()=>{ const codeChange = () => {
emit("update:modelValue", states.content); emit("update:modelValue", states.content);
}; };
onMounted(() => { onMounted(() => {
let obj = ""; let obj = "";
// console.log(typeof JSON.parse(this.datas)); // console.log(typeof JSON.parse(this.datas));
try { try {
if (typeof JSON.parse(props.modelValue) == "object") { if (typeof JSON.parse(props.modelValue) == "object") {
obj = JSON.stringify(JSON.parse(props.modelValue), null, "\t"); obj = JSON.stringify(JSON.parse(props.modelValue), null, "\t");
}else{ } else {
obj = props.modelValue;
}
} catch (e) {
obj = props.modelValue; obj = props.modelValue;
} }
} catch (e) {
obj = props.modelValue;
}
states.content = obj; states.content = obj;
}); });
const {content} = toRefs(states); const { content } = toRefs(states);
</script> </script>
<style scoped> <style scoped>
...@@ -115,49 +112,49 @@ const {content} = toRefs(states); ...@@ -115,49 +112,49 @@ const {content} = toRefs(states);
border-radius: 4px; border-radius: 4px;
overflow: hidden; overflow: hidden;
} }
.vue-ace-editor :deep() .ace_scrollbar-v{ .vue-ace-editor :deep() .ace_scrollbar-v {
width: 0px!important; width: 0px !important;
} }
.vue-ace-editor :deep() .ace_gutter{ .vue-ace-editor :deep() .ace_gutter {
font-size: 14px; font-size: 14px;
color: #ffffff; color: #ffffff;
background-color: #262626; background-color: #262626;
} }
.vue-ace-editor :deep() .ace_gutter-cell{ .vue-ace-editor :deep() .ace_gutter-cell {
line-height: 22px; line-height: 22px;
background-color: #262626; background-color: #262626;
} }
.vue-ace-editor :deep() .ace_print-margin{ .vue-ace-editor :deep() .ace_print-margin {
width: 0; width: 0;
} }
.vue-ace-editor :deep() .ace_scroller{ .vue-ace-editor :deep() .ace_scroller {
background-color: #1a1a1a; background-color: #1a1a1a;
color: #fff; color: #fff;
caret-color:#fff; caret-color: #fff;
right: 0!important; right: 0 !important;
} }
/* 光标颜色 */ /* 光标颜色 */
.vue-ace-editor :deep() .ace_cursor{ .vue-ace-editor :deep() .ace_cursor {
color: #fff; color: #fff;
} }
.vue-ace-editor-disable :deep() .ace_scrollbar-v{ .vue-ace-editor-disable :deep() .ace_scrollbar-v {
width: 6px!important; width: 6px !important;
} }
.vue-ace-editor-disable :deep() .ace_gutter{ .vue-ace-editor-disable :deep() .ace_gutter {
background-color: #202531; background-color: #202531;
} }
.vue-ace-editor-disable :deep() .ace_gutter-cell{ .vue-ace-editor-disable :deep() .ace_gutter-cell {
background-color: #202531; background-color: #202531;
} }
.vue-ace-editor-disable :deep() .ace_scroller{ .vue-ace-editor-disable :deep() .ace_scroller {
background-color: #fff; background-color: #fff;
color: #202531; color: #202531;
} }
/* 光标颜色 */ /* 光标颜色 */
.vue-ace-editor-disable :deep() .ace_cursor{ .vue-ace-editor-disable :deep() .ace_cursor {
color: #000; color: #000;
} }
</style> </style>
src/bg-ui/bg-detail-table.vue
View file @ 8b7c482f
...@@ -18,13 +18,17 @@ ...@@ -18,13 +18,17 @@
v-if="!item.urls" v-if="!item.urls"
:title="item.info" :title="item.info"
:style="item.url ? { color: '#515fe7', cursor: 'pointer' } : ''" :style="item.url ? { color: '#515fe7', cursor: 'pointer' } : ''"
@click="down_file(item.url)">{{ item.info }}</span> @click="down_file(item.url)"
>{{ item.info }}</span
>
<span v-else :title="item.info"> <span v-else :title="item.info">
<span <span
v-for="(it, idx) in item.urls" v-for="(it, idx) in item.urls"
:key="'urls' + idx" :key="'urls' + idx"
style="color: #515fe7; cursor: pointer" style="color: #515fe7; cursor: pointer"
@click="down_file(it)">{{ helper.downloadFileFormatNew(it) }}、</span> @click="down_file(it)"
>{{ helper.downloadFileFormatNew(it) }}、</span
>
</span> </span>
</template> </template>
</div> </div>
......
src/bg-ui/bg-detail-table2.vue
View file @ 8b7c482f
...@@ -7,7 +7,9 @@ ...@@ -7,7 +7,9 @@
:style="{ width: item.width }"> :style="{ width: item.width }">
<p v-if="!item.slot" class="detail-module"> <p v-if="!item.slot" class="detail-module">
<span :style="{ width: itemWidth }">{{ item.label }}</span> <span :style="{ width: itemWidth }">{{ item.label }}</span>
<span v-if="!item.childSlot" class="text_clip" :title="item.value">{{ item.value }}</span> <span v-if="!item.childSlot" class="text_clip" :title="item.value">{{
item.value
}}</span>
<span v-else> <span v-else>
<slot :name="item.childSlot" :data="item"></slot> <slot :name="item.childSlot" :data="item"></slot>
</span> </span>
......
src/bg-ui/bg-detail.vue
View file @ 8b7c482f
...@@ -59,7 +59,17 @@ ...@@ -59,7 +59,17 @@
</template> </template>
<script setup> <script setup>
import { ref, provide,reactive,onBeforeMount,onMounted,onUnmounted,nextTick,toRefs,useSlots } from "vue"; import {
ref,
provide,
reactive,
onBeforeMount,
onMounted,
onUnmounted,
nextTick,
toRefs,
useSlots,
} from "vue";
const slots = useSlots(); const slots = useSlots();
...@@ -67,63 +77,64 @@ const activeName = ref(""); ...@@ -67,63 +77,64 @@ const activeName = ref("");
const bgDetail = ref(null); const bgDetail = ref(null);
provide("getActiveName",activeName.value); provide("getActiveName", activeName.value);
provide("getIsTabs",false); provide("getIsTabs", false);
const showFixedBars = ref(false); const showFixedBars = ref(false);
const state = reactive({ const state = reactive({
scrollCallback:null scrollCallback: null,
}); });
const calcTabs=()=> { const calcTabs = () => {
let tabSlots = []; let tabSlots = [];
if (slots.default()) { if (slots.default()) {
tabSlots = slots.default() tabSlots = slots
.filter( .default()
(vnode) => .filter(
vnode.tag && (vnode) =>
vnode.componentOptions && vnode.tag &&
vnode.componentOptions.Ctor.options.name === "BgTab" vnode.componentOptions &&
) vnode.componentOptions.Ctor.options.name === "BgTab"
.map((vnode) => vnode.componentOptions.propsData); )
} .map((vnode) => vnode.componentOptions.propsData);
}
return tabSlots;
}; return tabSlots;
const changeActiveName=({ name }, index)=> { };
let targetEl = bgDetail.value.querySelectorAll(".bg-tab")[index]; const changeActiveName = ({ name }, index) => {
let targetCtx = document.querySelector(".bg-main"); let targetEl = bgDetail.value.querySelectorAll(".bg-tab")[index];
let targetCtx = document.querySelector(".bg-main");
targetCtx.scrollTop = targetEl && targetEl.offsetTop - 165;
targetCtx.scrollTop = targetEl && targetEl.offsetTop - 165;
activeName.value = name;
state.scrollCallback = () => { activeName.value = name;
activeName.value = name; state.scrollCallback = () => {
}; activeName.value = name;
}; };
const scrollAction=()=> { };
let targetCtx = document.querySelector(".bg-main"); const scrollAction = () => {
let ctxScrollTop = targetCtx.scrollTop || 0; let targetCtx = document.querySelector(".bg-main");
let targetEls = bgDetail.value.querySelectorAll(".bg-tab"); let ctxScrollTop = targetCtx.scrollTop || 0;
let tabs = calcTabs(); let targetEls = bgDetail.value.querySelectorAll(".bg-tab");
let tabs = calcTabs();
for (let i = 0; i < targetEls.length; i++) {
let targetEl = targetEls[i]; for (let i = 0; i < targetEls.length; i++) {
let targetEl = targetEls[i];
if (ctxScrollTop >= targetEl.offsetTop) {
activeName.value = tabs[i].name; if (ctxScrollTop >= targetEl.offsetTop) {
} activeName.value = tabs[i].name;
} }
}
showFixedBars.value = ctxScrollTop > 222;
state.scrollCallback && state.scrollCallback(); showFixedBars.value = ctxScrollTop > 222;
state.scrollCallback = null; state.scrollCallback && state.scrollCallback();
}; state.scrollCallback = null;
};
onMounted(()=>{
onMounted(() => {
nextTick().then(() => { nextTick().then(() => {
let tabs = calcTabs(); let tabs = calcTabs();
activeName.value = tabs[0] && tabs[0].name; activeName.value = tabs[0] && tabs[0].name;
...@@ -132,7 +143,7 @@ onMounted(()=>{ ...@@ -132,7 +143,7 @@ onMounted(()=>{
}); });
}); });
onUnmounted(()=>{ onUnmounted(() => {
window.removeEventListener("scroll", scrollAction, true); window.removeEventListener("scroll", scrollAction, true);
}); });
</script> </script>
src/bg-ui/bg-filter-group.vue
View file @ 8b7c482f
...@@ -20,18 +20,26 @@ ...@@ -20,18 +20,26 @@
@clear="search"> @clear="search">
<template #append> <template #append>
<div class="append-btn" @click="search"> <div class="append-btn" @click="search">
<bg-icon style="font-size: 12px; color: #404a62" icon="#bg-ic-search" /> <bg-icon
style="font-size: 12px; color: #404a62"
icon="#bg-ic-search" />
</div> </div>
</template> </template>
</el-input> </el-input>
<div v-if="$slots.filter_group" class="more-btn" :class="showFlag ? 'more-btn1' : ''"> <div
v-if="$slots.filter_group"
class="more-btn"
:class="showFlag ? 'more-btn1' : ''">
<el-button type="default" class="more-filter" @click="moreFilter"> <el-button type="default" class="more-filter" @click="moreFilter">
高级搜索 高级搜索
<bg-icon <bg-icon
v-if="!showFlag" v-if="!showFlag"
style="font-size: 8px; color: #404a62; margin-left: 8px" style="font-size: 8px; color: #404a62; margin-left: 8px"
icon="#bg-ic-arrow-down" /> icon="#bg-ic-arrow-down" />
<bg-icon v-else style="font-size: 8px; color: #404a62; margin-left: 8px" icon="#bg-ic-arrow-up" /> <bg-icon
v-else
style="font-size: 8px; color: #404a62; margin-left: 8px"
icon="#bg-ic-arrow-up" />
</el-button> </el-button>
</div> </div>
</div> </div>
...@@ -43,7 +51,15 @@ ...@@ -43,7 +51,15 @@
</template> </template>
<script setup> <script setup>
import { computed, onMounted, reactive, toRefs, watch, ref, nextTick } from "vue"; import {
computed,
onMounted,
reactive,
toRefs,
watch,
ref,
nextTick,
} from "vue";
const state = reactive({ const state = reactive({
showFlag: false, showFlag: false,
......
src/bg-ui/bg-filter.vue
View file @ 8b7c482f
...@@ -15,75 +15,75 @@ ...@@ -15,75 +15,75 @@
</template> </template>
<script setup> <script setup>
import {computed} from "vue"; import { computed } from "vue";
const props = defineProps({ const props = defineProps({
modelValue: { modelValue: {
type: [Number, String], type: [Number, String],
default: "", default: "",
}, },
isCalc:{ isCalc: {
type:Boolean, type: Boolean,
default:false, default: false,
}, },
name: { name: {
type: String, type: String,
default: "", default: "",
}, },
options: { options: {
type: Array, type: Array,
default: () => [], default: () => [],
}, },
optionName: { optionName: {
type: String, type: String,
default: "name", default: "name",
}, },
optionValue: { optionValue: {
type: String, type: String,
default: "value", default: "value",
}, },
multiple: { multiple: {
type: Boolean, type: Boolean,
default: false, default: false,
}, },
}); });
const emit = defineEmits(["update:modelValue"]); const emit = defineEmits(["update:modelValue"]);
const fullOptions = computed(()=> { const fullOptions = computed(() => {
return [ return [
{ {
name: "全部", name: "全部",
value: "", value: "",
}, },
...props.options.map((item) => { ...props.options.map((item) => {
return { return {
name: item[props.optionName], name: item[props.optionName],
value: item[props.optionValue] + "", value: item[props.optionValue] + "",
sub_cate: item.sub_cate ? item.sub_cate : "", sub_cate: item.sub_cate ? item.sub_cate : "",
}; };
}), }),
]; ];
}); });
const selection = computed(()=> { const selection = computed(() => {
let value = props.modelValue + ""; let value = props.modelValue + "";
return value.split(","); return value.split(",");
}); });
const selectAction = ({ value, name, sub_cate })=> { const selectAction = ({ value, name, sub_cate }) => {
if (value && props.multiple) { if (value && props.multiple) {
let selection = [...props.selection].filter((v) => v !== ""); let selection = [...props.selection].filter((v) => v !== "");
let index = selection.findIndex((v) => v === value); let index = selection.findIndex((v) => v === value);
if (index > -1) { if (index > -1) {
selection.splice(index, 1); selection.splice(index, 1);
} else { } else {
selection.push(value); selection.push(value);
} }
emit("update:modelValue", selection.join(",")); emit("update:modelValue", selection.join(","));
} else { } else {
emit("update:modelValue", value, name, sub_cate ? sub_cate : ""); emit("update:modelValue", value, name, sub_cate ? sub_cate : "");
} }
}; };
</script> </script>
src/bg-ui/bg-info.vue
View file @ 8b7c482f
...@@ -7,26 +7,46 @@ ...@@ -7,26 +7,46 @@
:style="{ :style="{
width: item.full ? `100%` : `calc(100% / ${col})`, width: item.full ? `100%` : `calc(100% / ${col})`,
}"> }">
<span :style="{ width: item.nameWidth ? item.nameWidth + 'px' : '50%' }"> <span
:style="{ width: item.nameWidth ? item.nameWidth + 'px' : '50%' }">
{{ item.name }} {{ item.name }}
</span> </span>
<span :style="{ width: item.nameWidth ? `calc( 100% - ${item.nameWidth + 'px'})` : '50%' }"> <span
:style="{
width: item.nameWidth
? `calc( 100% - ${item.nameWidth + 'px'})`
: '50%',
}">
<span <span
style="display: inline-block; width: 100%; white-space: normal; word-break: break-all" style="
display: inline-block;
width: 100%;
white-space: normal;
word-break: break-all;
"
:style="{ :style="{
width: item.copy ? 'calc(100% - 36px)' : item.download || item.password ? 'calc(100% - 22px)' : '100%', width: item.copy
? 'calc(100% - 36px)'
: item.download || item.password
? 'calc(100% - 22px)'
: '100%',
color: item.download ? '#3759be' : '#404a62', color: item.download ? '#3759be' : '#404a62',
}"> }">
<span <span
v-if="item.callback" v-if="item.callback"
class="can_click_text" class="can_click_text"
style="text-decoration:underline" style="text-decoration: underline"
@click.stop="item.callback && item.callback()">{{ @click.stop="item.callback && item.callback()"
item.value >{{ item.value }}</span
}}</span> >
<span v-else>{{ item.value }}</span> <span v-else>{{ item.value }}</span>
</span> </span>
<a v-if="item.copy" class="copy-btn" @click="copyText(item.value, $event)"> 复制 </a> <a
v-if="item.copy"
class="copy-btn"
@click="copyText(item.value, $event)">
复制
</a>
<bg-icon <bg-icon
v-if="item.download" v-if="item.download"
class="copy-btn" class="copy-btn"
......
src/bg-ui/bg-switch.vue
View file @ 8b7c482f
...@@ -59,7 +59,9 @@ const now_style = computed(() => { ...@@ -59,7 +59,9 @@ const now_style = computed(() => {
}; };
}); });
const now_label_style = computed(() => { const now_label_style = computed(() => {
return now_index.value == 0 ? { left: circle_height.value + gap.value + 5 + "px" } : { left: "10px" }; return now_index.value == 0
? { left: circle_height.value + gap.value + 5 + "px" }
: { left: "10px" };
}); });
const now_circle_style = computed(() => { const now_circle_style = computed(() => {
return now_index.value == 0 return now_index.value == 0
...@@ -93,5 +95,4 @@ onMounted(() => { ...@@ -93,5 +95,4 @@ onMounted(() => {
circle_height.value = circle.value.offsetHeight; circle_height.value = circle.value.offsetHeight;
gap.value = (box_height.value - circle_height.value - 4) / 2; gap.value = (box_height.value - circle_height.value - 4) / 2;
}); });
</script> </script>
src/bg-ui/bg-tab.vue
View file @ 8b7c482f
...@@ -14,15 +14,12 @@ import { reactive, ref, onBeforeMount, toRefs, computed, inject } from "vue"; ...@@ -14,15 +14,12 @@ import { reactive, ref, onBeforeMount, toRefs, computed, inject } from "vue";
const getActiveName = inject( const getActiveName = inject(
"activeName", "activeName",
()=>{ () => {
return ""; return "";
}, },
false false
); );
const getIsTabs = inject( const getIsTabs = inject("isTabs", false);
"isTabs",
false
);
const props = defineProps({ const props = defineProps({
label: { label: {
......
src/bg-ui/bg-table-btns.vue
View file @ 8b7c482f
...@@ -14,7 +14,7 @@ ...@@ -14,7 +14,7 @@
@mouseenter="showMoreBtns" @mouseenter="showMoreBtns"
@mouseleave="hideMoreBtns"> @mouseleave="hideMoreBtns">
<!-- <i class="el-icon-more" /> --> <!-- <i class="el-icon-more" /> -->
<bg-icon style="font-size: 12px; color: #2b4695;" icon="#bg-ic-s-more" /> <bg-icon style="font-size: 12px; color: #2b4695" icon="#bg-ic-s-more" />
<bg-table-btns-more <bg-table-btns-more
v-if="showMore" v-if="showMore"
:operations="otherOperations" :operations="otherOperations"
......
src/bg-ui/bg-table-btns2.vue
View file @ 8b7c482f
...@@ -20,7 +20,9 @@ ...@@ -20,7 +20,9 @@
v-for="(item, index) in state.lastChildren" v-for="(item, index) in state.lastChildren"
:key="'as' + index" :key="'as' + index"
:class="item.disabled ? 'disabled' : ''" :class="item.disabled ? 'disabled' : ''"
@click="action(item.onClick, item.disabled)">{{ item.name }}</span> @click="action(item.onClick, item.disabled)"
>{{ item.name }}</span
>
</div> </div>
</teleport> </teleport>
</span> </span>
...@@ -28,7 +30,18 @@ ...@@ -28,7 +30,18 @@
</template> </template>
<script setup> <script setup>
import { reactive, ref, onBeforeMount, onMounted, toRefs, provide, useSlots, h, render, nextTick } from "vue"; import {
reactive,
ref,
onBeforeMount,
onMounted,
toRefs,
provide,
useSlots,
h,
render,
nextTick,
} from "vue";
const slots = useSlots(); const slots = useSlots();
const props = defineProps({ const props = defineProps({
...@@ -107,7 +120,11 @@ const dealData = () => { ...@@ -107,7 +120,11 @@ const dealData = () => {
} }
for (let index = 0; index < children.length; index++) { for (let index = 0; index < children.length; index++) {
const e = children[index]; const e = children[index];
if (index + 1 > props.limit && e.tagName == "A" && e.className.indexOf("bg-table-btn") !== -1) { if (
index + 1 > props.limit &&
e.tagName == "A" &&
e.className.indexOf("bg-table-btn") !== -1
) {
e.style.display = "none"; e.style.display = "none";
e.style.width = "0px"; e.style.width = "0px";
state.lastChildren[index - props.limit + 1].name = e.innerText; state.lastChildren[index - props.limit + 1].name = e.innerText;
......
src/bg-ui/bg-tabs.vue
View file @ 8b7c482f
...@@ -37,7 +37,9 @@ const props = defineProps({ ...@@ -37,7 +37,9 @@ const props = defineProps({
}, },
}); });
const getActiveName = provide("activeName", ()=>{return props.modelValue;}); const getActiveName = provide("activeName", () => {
return props.modelValue;
});
const getIsTabs = provide("isTabs", true); const getIsTabs = provide("isTabs", true);
const emit = defineEmits(["update:modelValue"]); const emit = defineEmits(["update:modelValue"]);
......
src/bg-ui/bg-tags.vue
View file @ 8b7c482f
...@@ -14,7 +14,9 @@ ...@@ -14,7 +14,9 @@
v-if="!showInput" v-if="!showInput"
type="primary" type="primary"
size="small" size="small"
@click="showInput = true"> 新增 </el-button> @click="showInput = true">
新增
</el-button>
<el-input v-else v-model.trim="newTag" @blur="addTag" /> <el-input v-else v-model.trim="newTag" @blur="addTag" />
</li> </li>
</ul> </ul>
......
src/bg-ui/bg-user-upload-image.vue
View file @ 8b7c482f
...@@ -25,7 +25,15 @@ ...@@ -25,7 +25,15 @@
</template> </template>
<script setup> <script setup>
import { computed, watch, onMounted, reactive, ref, nextTick, toRefs } from "vue"; import {
computed,
watch,
onMounted,
reactive,
ref,
nextTick,
toRefs,
} from "vue";
import { ElMessage } from "element-plus"; import { ElMessage } from "element-plus";
const props = defineProps({ const props = defineProps({
......
src/bg-ui/debounce.js
View file @ 8b7c482f
...@@ -7,76 +7,81 @@ ...@@ -7,76 +7,81 @@
* @param {this} ctx this 的指向 * @param {this} ctx this 的指向
*/ */
const debounce = (func, time, type, ctx) => { const debounce = (func, time, type, ctx) => {
var timer, lastCall, rtn; var timer, lastCall, rtn;
// 防抖函数 // 防抖函数
if (type === "debounce") { if (type === "debounce") {
rtn = (...params) => { rtn = (...params) => {
if (timer) clearTimeout(timer); if (timer) clearTimeout(timer);
timer = setTimeout(() => { timer = setTimeout(() => {
func.apply(ctx, params);
}, time);
};
} else if (type === "throttle") {
// 节流函数
rtn = (...params) => {
const now = new Date().getTime();
if (now - lastCall < time && lastCall) return;
lastCall = now;
func.apply(ctx, params); func.apply(ctx, params);
}; }, time);
} else { };
// 立即执行的防抖函数 } else if (type === "throttle") {
rtn = (...params) => { // 节流函数
if (timer) clearTimeout(timer); rtn = (...params) => {
let callNow = !timer; const now = new Date().getTime();
timer = setTimeout(() => { if (now - lastCall < time && lastCall) return;
timer = null; lastCall = now;
}, time); func.apply(ctx, params);
if (callNow) func.apply(ctx, params); };
}; } else {
} // 立即执行的防抖函数
return rtn; rtn = (...params) => {
}; if (timer) clearTimeout(timer);
let callNow = !timer;
timer = setTimeout(() => {
timer = null;
}, time);
if (callNow) func.apply(ctx, params);
};
}
return rtn;
};
export default { export default {
name: "Debounce", name: "Debounce",
abstract: true, abstract: true,
props: { props: {
time: { time: {
type: Number, type: Number,
default: 1000, default: 1000,
},
events: {
type: String,
default: "click", // 默认点击事件
},
type: {
type: String,
default: "throttle", // 默认节流
},
}, },
created() { events: {
this.eventKeys = this.events.split(","); // 分隔事件 type: String,
this.originMap = {}; // 储存事件，用于重新render时与子事件的对比 default: "click", // 默认点击事件
this.debouncedMap = {}; // 储存防抖节流事件
}, },
render() { type: {
try { type: String,
const vnode = this.$slots.default[0]; default: "throttle", // 默认节流
this.eventKeys.forEach(key => {
const target = vnode.data.on[key];
if (target === this.originMap[key] && this.debouncedMap[key]) {
vnode.data.on[key] = this.debouncedMap[key];
} else if (target) {
this.originMap[key] = target;
this.debouncedMap[key] = debounce(target, this.time, this.type, vnode);
vnode.data.on[key] = this.debouncedMap[key]; // 重写子组件的事件
}
});
return vnode;
} catch (error) {
console.error(error);
}
}, },
}; },
created() {
this.eventKeys = this.events.split(","); // 分隔事件
this.originMap = {}; // 储存事件，用于重新render时与子事件的对比
this.debouncedMap = {}; // 储存防抖节流事件
},
render() {
try {
const vnode = this.$slots.default[0];
this.eventKeys.forEach((key) => {
const target = vnode.data.on[key];
if (target === this.originMap[key] && this.debouncedMap[key]) {
vnode.data.on[key] = this.debouncedMap[key];
} else if (target) {
this.originMap[key] = target;
this.debouncedMap[key] = debounce(
target,
this.time,
this.type,
vnode
);
vnode.data.on[key] = this.debouncedMap[key]; // 重写子组件的事件
}
});
return vnode;
} catch (error) {
console.error(error);
}
},
};
src/bg-ui/hook/mixin-select-table.js
View file @ 8b7c482f
import { reactive, toRefs,useAttrs } from "vue"; import { reactive, toRefs, useAttrs } from "vue";
export function selectTableMixin(){ export function selectTableMixin() {
const state = reactive({ const state = reactive({
nowSelectData:[], nowSelectData: [],
allSelectData:{} allSelectData: {},
}); });
const attrs = useAttrs(); const attrs = useAttrs();
// const nowSelectData = reactive([]) // const nowSelectData = reactive([])
// const allSelectData = reactive({}) // const allSelectData = reactive({})
const selectData = (val)=>{ const selectData = (val) => {
console.log(val); console.log(val);
state.nowSelectData = val; state.nowSelectData = val;
console.log("allSelectData"); console.log("allSelectData");
console.log(state.allSelectData); console.log(state.allSelectData);
console.log(Object.keys(state.allSelectData).length); console.log(Object.keys(state.allSelectData).length);
}; };
const initSelectTableData = (data)=>{ const initSelectTableData = (data) => {
return new Promise((reslove,reject)=>{ return new Promise((reslove, reject) => {
data.forEach(e => { data.forEach((e) => {
if(state.allSelectData[e[attrs.rowKey||"id"]]){ if (state.allSelectData[e[attrs.rowKey || "id"]]) {
delete state.allSelectData[e[attrs.rowKey||"id"]]; delete state.allSelectData[e[attrs.rowKey || "id"]];
state.nowSelectData.push(e); state.nowSelectData.push(e);
} }
}); });
console.log(state.nowSelectData);
reslove(state.nowSelectData);
});
};
const runPage=()=>{//翻页数据推进 console.log(state.nowSelectData);
state.nowSelectData.forEach(e => { reslove(state.nowSelectData);
state.allSelectData[e[attrs.rowKey||"id"]] = e; });
}); };
state.nowSelectData = [];
};
const clearTable=()=>{//清除选中数据,在页面状态更新时使用 const runPage = () => {
state.allSelectData={}; //翻页数据推进
state.nowSelectData=[]; state.nowSelectData.forEach((e) => {
clearSelection(); state.allSelectData[e[attrs.rowKey || "id"]] = e;
}; });
state.nowSelectData = [];
};
const dealSelectData=()=>{//最后提交处理数据 const clearTable = () => {
state.nowSelectData.forEach(e => { //清除选中数据,在页面状态更新时使用
state.allSelectData[e[attrs.rowKey||"id"]] = e; state.allSelectData = {};
}); state.nowSelectData = [];
return state.allSelectData; clearSelection();
}; };
const { nowSelectData, allSelectData } = toRefs(state); const dealSelectData = () => {
//最后提交处理数据
state.nowSelectData.forEach((e) => {
state.allSelectData[e[attrs.rowKey || "id"]] = e;
});
return state.allSelectData;
};
return{ const { nowSelectData, allSelectData } = toRefs(state);
nowSelectData,
allSelectData,
selectData,
initSelectTableData,
runPage,
clearTable,
dealSelectData
};
return {
nowSelectData,
allSelectData,
selectData,
initSelectTableData,
runPage,
clearTable,
dealSelectData,
};
} }
// export const selectTableMixin = { // export const selectTableMixin = {
...@@ -88,7 +90,7 @@ return{ ...@@ -88,7 +90,7 @@ return{
// this.nowSelectData.push(e) // this.nowSelectData.push(e)
// } // }
// }); // });
// console.log(this.nowSelectData); // console.log(this.nowSelectData);
// if(this.nowSelectData.length){ // if(this.nowSelectData.length){
// setTimeout(()=>{ // setTimeout(()=>{
...@@ -115,4 +117,4 @@ return{ ...@@ -115,4 +117,4 @@ return{
// return this.allSelectData // return this.allSelectData
// } // }
// }, // },
// } // }
\ No newline at end of file
src/bg-ui/index.js
View file @ 8b7c482f
/** /**
* 全局组件 * 全局组件
*/ */
import BgIcon from "./bg-icon.vue"; import BgIcon from "./bg-icon.vue";
import BgNav from "./bg-nav.vue"; import BgNav from "./bg-nav.vue";
import BgList from "./bg-list.vue"; import BgList from "./bg-list.vue";
import BgDetail from "./bg-detail.vue"; import BgDetail from "./bg-detail.vue";
import BgFiltrate from "./bg-filtrate.vue"; import BgFiltrate from "./bg-filtrate.vue";
import BgTable from "./bg-table.vue"; import BgTable from "./bg-table.vue";
import BgTablePro from "./bg-table-pro.vue"; import BgTablePro from "./bg-table-pro.vue";
import BgTableBtn from "./bg-table-btn.vue"; import BgTableBtn from "./bg-table-btn.vue";
import BgTabs from "./bg-tabs.vue"; import BgTabs from "./bg-tabs.vue";
import BgTab from "./bg-tab.vue"; import BgTab from "./bg-tab.vue";
import BgLayoutCard from "./bg-layout-card.vue"; import BgLayoutCard from "./bg-layout-card.vue";
import BgCard from "./bg-card.vue"; import BgCard from "./bg-card.vue";
import BgInfo from "./bg-info.vue"; import BgInfo from "./bg-info.vue";
import BgBtns from "./bg-btns.vue"; import BgBtns from "./bg-btns.vue";
import BgUpload from "./bg-upload.vue"; import BgUpload from "./bg-upload.vue";
import BgUploadImage from "./bg-upload-image.vue"; import BgUploadImage from "./bg-upload-image.vue";
import BgTags from "./bg-tags.vue"; import BgTags from "./bg-tags.vue";
import BgSwitch from "./bg-switch.vue"; import BgSwitch from "./bg-switch.vue";
import BgRichText from "./bg-rich-text.vue"; import BgRichText from "./bg-rich-text.vue";
import BgCodeEditor from "./bg-code-editor.vue"; import BgCodeEditor from "./bg-code-editor.vue";
import BgFilter from "./bg-filter.vue"; import BgFilter from "./bg-filter.vue";
import BgSort from "./bg-sort.vue"; import BgSort from "./bg-sort.vue";
import BgFilterDate from "./bg-filter-date.vue"; import BgFilterDate from "./bg-filter-date.vue";
import bgUserUploadImage from "./bg-user-upload-image.vue"; import bgUserUploadImage from "./bg-user-upload-image.vue";
import bgDetailTable from "./bg-detail-table.vue"; import bgDetailTable from "./bg-detail-table.vue";
import bgDetailTable2 from "./bg-detail-table2.vue"; import bgDetailTable2 from "./bg-detail-table2.vue";
import debounce from "./debounce"; import debounce from "./debounce";
import BgPagination from "./bg-pagination.vue"; import BgPagination from "./bg-pagination.vue";
import BgInnerTabs from "./bg-inner-tabs.vue"; import BgInnerTabs from "./bg-inner-tabs.vue";
import BgFilterGroup from "./bg-filter-group.vue"; import BgFilterGroup from "./bg-filter-group.vue";
import BgTableBtns from "./bg-table-btns.vue"; import BgTableBtns from "./bg-table-btns.vue";
import BgTableBtns2 from "./bg-table-btns2.vue"; import BgTableBtns2 from "./bg-table-btns2.vue";
const components = { const components = {
BgIcon,//字体图标 BgIcon, //字体图标
BgNav, // 左侧导航 BgNav, // 左侧导航
BgList, // 列表页布局 BgList, // 列表页布局
BgDetail, // 详情页布局 BgDetail, // 详情页布局
...@@ -54,18 +54,18 @@ const components = { ...@@ -54,18 +54,18 @@ const components = {
BgTags, // 标签 BgTags, // 标签
BgSwitch, // 开关 BgSwitch, // 开关
BgRichText, // 富文本 BgRichText, // 富文本
BgCodeEditor,//代码输入 BgCodeEditor, //代码输入
BgFilter, // 首页筛选 BgFilter, // 首页筛选
BgSort, // 首页排序 BgSort, // 首页排序
BgFilterDate, BgFilterDate,
bgUserUploadImage, bgUserUploadImage,
bgDetailTable,//详情展示组件1 bgDetailTable, //详情展示组件1
bgDetailTable2,//详情展示组件2 bgDetailTable2, //详情展示组件2
debounce,//防抖组件 debounce, //防抖组件
BgPagination,// 分页组件 BgPagination, // 分页组件
BgInnerTabs,//内部tab BgInnerTabs, //内部tab
BgFilterGroup,//列表按钮及筛选 BgFilterGroup, //列表按钮及筛选
BgTableBtns,// 表格按钮组 BgTableBtns, // 表格按钮组
BgTableBtns2, BgTableBtns2,
}; };
......
src/bg-ui/index.scss
View file @ 8b7c482f
...@@ -393,7 +393,7 @@ a { ...@@ -393,7 +393,7 @@ a {
// line-height: 24px; // line-height: 24px;
color: #909bb6; color: #909bb6;
&:hover{ &:hover {
color: #5170cd; color: #5170cd;
cursor: pointer; cursor: pointer;
} }
...@@ -630,7 +630,7 @@ a { ...@@ -630,7 +630,7 @@ a {
display: none; display: none;
} }
.el-table__empty-block { .el-table__empty-block {
height: 500px!important; height: 500px !important;
.empty_container { .empty_container {
height: 500px; height: 500px;
padding-top: 247px; padding-top: 247px;
...@@ -647,7 +647,7 @@ a { ...@@ -647,7 +647,7 @@ a {
} }
th, th,
td { td {
padding: 12px 0!important; padding: 12px 0 !important;
> .cell { > .cell {
padding: 0 10px !important; padding: 0 10px !important;
color: #404a62; color: #404a62;
...@@ -684,7 +684,6 @@ a { ...@@ -684,7 +684,6 @@ a {
} }
table { table {
th { th {
border-color: #b0bee8; border-color: #b0bee8;
background-color: #dfe5f6; background-color: #dfe5f6;
...@@ -693,10 +692,10 @@ a { ...@@ -693,10 +692,10 @@ a {
} }
} }
.stripe-row td { .stripe-row td {
background-color: #fff!important; background-color: #fff !important;
} }
.white-row td { .white-row td {
background-color: #f7f7f9!important; background-color: #f7f7f9 !important;
} }
.el-table--striped .el-table__body tr.el-table__row--striped td { .el-table--striped .el-table__body tr.el-table__row--striped td {
background-color: #f7f7f9; background-color: #f7f7f9;
...@@ -734,47 +733,41 @@ a { ...@@ -734,47 +733,41 @@ a {
max-width: 388px; max-width: 388px;
padding: 15px 12px; padding: 15px 12px;
color: #202531; color: #202531;
box-shadow: 0px 4px 12px 0px box-shadow: 0px 4px 12px 0px rgba(18, 30, 63, 0.1);
rgba(18, 30, 63, 0.1); border: solid 1px #e6e9ef;
border: solid 1px #e6e9ef;
font-size: 14px; font-size: 14px;
} }
} }
.bg-table-pro{ .bg-table-pro {
th, th,
td { td {
> .cell { > .cell {
padding: 0 10px !important; padding: 0 10px !important;
overflow: unset; overflow: unset;
display: flex!important; display: flex !important;
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
} }
} }
.el-table-column--selection{ .el-table-column--selection {
border-left: 1px solid #e6e9ef; border-left: 1px solid #e6e9ef;
> .cell { > .cell {
justify-content: center justify-content: center;
} }
} }
th.el-table-column--selection{ th.el-table-column--selection {
> .cell { > .cell {
display: flex; display: flex;
justify-content: center justify-content: center;
} }
} }
&.el-table--border { &.el-table--border {
.el-table__header-wrapper { .el-table__header-wrapper {
table { table {
th { th {
border-color: #dadee7; border-color: #dadee7;
background-color: #f5f6f9; background-color: #f5f6f9;
...@@ -785,19 +778,16 @@ a { ...@@ -785,19 +778,16 @@ a {
} }
.bg-table-tree { .bg-table-tree {
.th, .th,
.td { .td {
> .cell {
>.cell {
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
>.el-input { > .el-input {
flex: 1 1 auto; flex: 1 1 auto;
} }
} }
} }
} }
...@@ -807,7 +797,7 @@ a { ...@@ -807,7 +797,7 @@ a {
color: #3759be; color: #3759be;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
color: #738bd2 color: #738bd2;
} }
&:active { &:active {
color: #2c4798; color: #2c4798;
...@@ -1521,7 +1511,7 @@ a { ...@@ -1521,7 +1511,7 @@ a {
} }
> .copy-btn-dis { > .copy-btn-dis {
color: #dce0e8; color: #dce0e8;
cursor: not-allowed!important; cursor: not-allowed !important;
&:hover { &:hover {
color: #dce0e8; color: #dce0e8;
} }
...@@ -1850,7 +1840,6 @@ a { ...@@ -1850,7 +1840,6 @@ a {
} }
.bg-upload-image { .bg-upload-image {
.trigger-content { .trigger-content {
> .image-trigger { > .image-trigger {
width: 144px; width: 144px;
...@@ -2117,12 +2106,12 @@ a { ...@@ -2117,12 +2106,12 @@ a {
.w-e-text-container { .w-e-text-container {
border: 1px solid #dadee7 !important; border: 1px solid #dadee7 !important;
width: 100%; width: 100%;
z-index: 1!important; z-index: 1 !important;
} }
.w-e-toolbar { .w-e-toolbar {
border-radius: 4px 4px 0 0; border-radius: 4px 4px 0 0;
z-index: 2!important; z-index: 2 !important;
} }
.w-e-text-container { .w-e-text-container {
...@@ -2393,9 +2382,8 @@ a { ...@@ -2393,9 +2382,8 @@ a {
.bg-card { .bg-card {
background-color: #ffffff; background-color: #ffffff;
box-shadow: 0px 1px 4px 0px box-shadow: 0px 1px 4px 0px rgba(0, 7, 101, 0.15);
rgba(0, 7, 101, 0.15); border-radius: 6px;
border-radius: 6px;
margin-bottom: 16px; margin-bottom: 16px;
.card-header { .card-header {
...@@ -2428,7 +2416,7 @@ a { ...@@ -2428,7 +2416,7 @@ a {
} }
} }
.title-text{ .title-text {
font-size: 18px; font-size: 18px;
line-height: 18px; line-height: 18px;
color: #202531; color: #202531;
...@@ -2482,7 +2470,7 @@ a { ...@@ -2482,7 +2470,7 @@ a {
padding: 10px 15px; padding: 10px 15px;
line-height: 1; line-height: 1;
&:active, &:active,
&:hover{ &:hover {
background-color: #fff; background-color: #fff;
color: #3759be; color: #3759be;
} }
......
src/bg-ui/utils/index.js
View file @ 8b7c482f
var downloadFileFormatNew = function(fileUrl) { var downloadFileFormatNew = function (fileUrl) {
/* /*
input: /apaas/common/docs/image/images/1234_qq234ewr123.png input: /apaas/common/docs/image/images/1234_qq234ewr123.png
output: 1234.png output: 1234.png
*/ */
if (fileUrl != "") { if (fileUrl != "") {
var temp = fileUrl.split("/")[fileUrl.split("/").length-1]; var temp = fileUrl.split("/")[fileUrl.split("/").length - 1];
var name = temp.split("_")[0]; var name = temp.split("_")[0];
var type = temp.split("_")[temp.split("_").length-1].split(".")[1]; var type = temp.split("_")[temp.split("_").length - 1].split(".")[1];
if(temp.indexOf("_")==-1){ if (temp.indexOf("_") == -1) {
return name; return name;
}else{
return name+"."+type;
}
} else { } else {
return ""; return name + "." + type;
} }
} else {
return "";
}
}; };
export default { export default {
downloadFileFormatNew downloadFileFormatNew,
}; };
\ No newline at end of file
src/components/componentWrapper.vue
View file @ 8b7c482f
...@@ -14,8 +14,8 @@ ...@@ -14,8 +14,8 @@
const props = defineProps({ const props = defineProps({
title: { title: {
type: String, type: String,
default: "component name" default: "component name",
} },
}); });
</script> </script>
......
src/main.js
View file @ 8b7c482f
...@@ -9,4 +9,7 @@ import "@/assets/reset.css"; ...@@ -9,4 +9,7 @@ import "@/assets/reset.css";
import bgui from "@/bg-ui"; import bgui from "@/bg-ui";
import "@/bg-ui/index.scss"; import "@/bg-ui/index.scss";
createApp(App).use(ElementPlus, { locale, size: "small" }).use(bgui).mount("#app"); createApp(App)
.use(ElementPlus, { locale, size: "small" })
.use(bgui)
.mount("#app");
yarn.lock
View file @ 8b7c482f
...@@ -1582,6 +1582,11 @@ prelude-ls@^1.2.1: ...@@ -1582,6 +1582,11 @@ prelude-ls@^1.2.1:
resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396" resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g== integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==
prettier@2.8.4:
version "2.8.4"
resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.8.4.tgz#34dd2595629bfbb79d344ac4a91ff948694463c3"
integrity sha512-vIS4Rlc2FNh0BySk3Wkd6xmwxB0FpOndW5fisM5H8hsZSxU2VWVB5CWIkIjWvrHjIhxk2g3bfMKM87zNTrZddw==
prismjs@^1.23.0: prismjs@^1.23.0:
version "1.29.0" version "1.29.0"
resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.29.0.tgz#f113555a8fa9b57c35e637bba27509dcf802dd12" resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.29.0.tgz#f113555a8fa9b57c35e637bba27509dcf802dd12"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment