From 065266e390bfda178d2f477539924d8e6c3f487e Mon Sep 17 00:00:00 2001
From: whychdw <496960745@qq.com>
Date: 星期三, 09 十月 2024 13:50:16 +0800
Subject: [PATCH] 修改tag-view的图标显示逻辑
---
/dev/null | 79 ---------------------------------------
src/views/login/index.vue | 10 -----
src/layout/components/TagsView/index.vue | 12 +++++-
src/icons/svg/home-hdw.svg | 1
src/router/index.ts | 2
5 files changed, 12 insertions(+), 92 deletions(-)
diff --git a/src/icons/svg/home-hdw.svg b/src/icons/svg/home-hdw.svg
new file mode 100644
index 0000000..a7d9c4d
--- /dev/null
+++ b/src/icons/svg/home-hdw.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1728451206251" class="icon" viewBox="0 0 1109 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1405" xmlns:xlink="http://www.w3.org/1999/xlink" width="138.625" height="128"><path d="M426.692549 1024v-341.333333h256.025882v341.333333h260.270549V512h166.422L554.653726 0 0 512h166.422v512z" p-id="1406"></path></svg>
\ No newline at end of file
diff --git a/src/layout/components/TagsView/index.vue b/src/layout/components/TagsView/index.vue
index be665e5..dbf27ea 100644
--- a/src/layout/components/TagsView/index.vue
+++ b/src/layout/components/TagsView/index.vue
@@ -4,10 +4,11 @@
<router-link v-for="tag in visitedViews" :key="tag.path"
:to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }" custom
v-slot="{ navigate, isActive, isExactActive }" ref="tag">
- <span :class="['tags-view-item', isActive && 'router-link-active', isExactActive && 'router-link-exact-active']"
+ <span :class="['tags-view-item', isActive && 'router-link-active', isExactActive && 'router-link-exact-active', tag.meta.icon && 'hide-dot']"
@click="navigate"
@click.middle="!isAffix(tag) ? closeSelectedTag(tag) : ''"
@contextmenu.prevent="openMenu(tag, $event)">
+ <svg-icon v-if="tag.meta.icon" :icon-class="tag.meta.icon" />
{{ tag.title }}
<icon-close v-if="!isAffix(tag)" class="el-icon-close" @click.prevent.stop="closeSelectedTag(tag)" />
</span>
@@ -28,10 +29,11 @@
import path from 'path-browserify';
import store from '@/store';
import { Close as IconClose } from '@element-plus/icons-vue';
+import SvgIcon from '@/components/SvgIcon/index.vue';
export default defineComponent({
name: 'TagsView',
- components: { ScrollPane, IconClose },
+ components: { SvgIcon, ScrollPane, IconClose },
data() {
return {
visible: false,
@@ -243,6 +245,12 @@
position: relative;
margin-right: 2px;
}
+ &.hide-dot {
+ &::before {
+ width: 0;
+ height: 0;
+ }
+ }
}
}
}
diff --git a/src/router/index.ts b/src/router/index.ts
index c0d5e1b..f2d379c 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -55,7 +55,7 @@
path: 'dashboard',
component: () => import('@/views/dashboard/index.vue'),
name: 'Dashboard',
- meta: { title: '棣栭〉', icon: 'dashboard', affix: true }
+ meta: { title: '棣栭〉', icon: 'home-hdw', affix: true }
}
]
}
diff --git a/src/views/dashboard/admin/components/BarChart.vue b/src/views/dashboard/admin/components/BarChart.vue
deleted file mode 100644
index 74d073a..0000000
--- a/src/views/dashboard/admin/components/BarChart.vue
+++ /dev/null
@@ -1,103 +0,0 @@
-<template>
- <div :class="className" :style="{ height: height, width: width }" />
-</template>
-
-<script>
-import * as echarts from 'echarts';
-import { defineComponent, shallowRef } from 'vue';
-import macaronsTheme from '@/styles/echarts/theme/macarons'; // echarts theme
-import resize from './mixins/resize';
-
-const animationDuration = 6000;
-
-export default defineComponent({
- mixins: [resize],
- props: {
- className: {
- type: String,
- default: 'chart'
- },
- width: {
- type: String,
- default: '100%'
- },
- height: {
- type: String,
- default: '300px'
- }
- },
- data() {
- return {
- chart: null
- };
- },
- mounted() {
- this.$nextTick(() => {
- this.initChart();
- });
- },
- beforeUnmount() {
- if (!this.chart) {
- return;
- }
- this.chart.dispose();
- this.chart = null;
- },
- methods: {
- initChart() {
- this.chart = shallowRef(echarts.init(this.$el, macaronsTheme));
-
- this.chart.setOption({
- tooltip: {
- trigger: 'axis',
- axisPointer: { // 鍧愭爣杞存寚绀哄櫒锛屽潗鏍囪酱瑙﹀彂鏈夋晥
- type: 'shadow' // 榛樿涓虹洿绾匡紝鍙�変负锛�'line' | 'shadow'
- }
- },
- grid: {
- top: 10,
- left: '2%',
- right: '2%',
- bottom: '3%',
- containLabel: true
- },
- xAxis: [{
- type: 'category',
- data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
- axisTick: {
- alignWithLabel: true
- }
- }],
- yAxis: [{
- type: 'value',
- axisTick: {
- show: false
- }
- }],
- series: [{
- name: 'pageA',
- type: 'bar',
- stack: 'vistors',
- barWidth: '60%',
- data: [79, 52, 200, 334, 390, 330, 220],
- animationDuration
- }, {
- name: 'pageB',
- type: 'bar',
- stack: 'vistors',
- barWidth: '60%',
- data: [80, 52, 200, 334, 390, 330, 220],
- animationDuration
- }, {
- name: 'pageC',
- type: 'bar',
- stack: 'vistors',
- barWidth: '60%',
- data: [30, 52, 200, 334, 390, 330, 220],
- animationDuration
- }]
- });
- }
- }
-});
-</script>
diff --git a/src/views/dashboard/admin/components/BoxCard.vue b/src/views/dashboard/admin/components/BoxCard.vue
deleted file mode 100644
index 8790bd8..0000000
--- a/src/views/dashboard/admin/components/BoxCard.vue
+++ /dev/null
@@ -1,120 +0,0 @@
-<template>
- <el-card class="box-card-component" style="margin-left:8px;">
- <template #header>
- <div class="box-card-header">
- <img src="https://wpimg.wallstcn.com/e7d23d71-cf19-4b90-a1cc-f56af8c0903d.png">
- </div>
- </template>
- <div style="position:relative;">
- <pan-thumb :image="avatar" class="panThumb" />
- <mallki class-name="mallki-text" text="vue-element-admin" />
- <div style="padding-top:35px;" class="progress-item">
- <span>Vue</span>
- <el-progress :percentage="70" />
- </div>
- <div class="progress-item">
- <span>JavaScript</span>
- <el-progress :percentage="18" />
- </div>
- <div class="progress-item">
- <span>Css</span>
- <el-progress :percentage="12" />
- </div>
- <div class="progress-item">
- <span>ESLint</span>
- <el-progress :percentage="100" status="success" />
- </div>
- </div>
- </el-card>
-</template>
-
-<script>
-import { mapState } from 'pinia';
-import PanThumb from '@/components/PanThumb';
-import Mallki from '@/components/TextHoverEffect/Mallki';
-import { defineComponent } from 'vue';
-import store from '@/store';
-
-export default defineComponent({
- components: { PanThumb, Mallki },
-
- data() {
- return {
- statisticsData: {
- article_count: 1024,
- pageviews_count: 1024
- }
- };
- },
- computed: {
- ...mapState(store.user, [
- 'name',
- 'avatar',
- 'roles'
- ])
- }
-});
-</script>
-
-<style lang="scss" >
-.box-card-component {
- .el-card__header {
- padding: 0px !important;
- }
-}
-</style>
-<style lang="scss" scoped>
-.box-card-component {
- .box-card-header {
- position: relative;
- height: 220px;
-
- img {
- width: 100%;
- height: 100%;
- transition: all 0.2s linear;
-
- &:hover {
- transform: scale(1.1, 1.1);
- filter: contrast(130%);
- }
- }
- }
-
- .mallki-text {
- position: absolute;
- top: 0px;
- right: 0px;
- font-size: 20px;
- font-weight: bold;
- }
-
- .panThumb {
- z-index: 100;
- height: 70px !important;
- width: 70px !important;
- position: absolute !important;
- top: -45px;
- left: 0px;
- border: 5px solid #ffffff;
- background-color: #fff;
- margin: auto;
- box-shadow: none !important;
-
- :deep(.pan-info) {
- box-shadow: none !important;
- }
- }
-
- .progress-item {
- margin-bottom: 10px;
- font-size: 14px;
- }
-
- @media only screen and (max-width: 1510px) {
- .mallki-text {
- display: none;
- }
- }
-}
-</style>
diff --git a/src/views/dashboard/admin/components/LineChart.vue b/src/views/dashboard/admin/components/LineChart.vue
deleted file mode 100644
index 6d92b5d..0000000
--- a/src/views/dashboard/admin/components/LineChart.vue
+++ /dev/null
@@ -1,133 +0,0 @@
-<template>
- <div :class="className" :style="{ height: height, width: width }" />
-</template>
-
-<script>
-import * as echarts from 'echarts';
-import { defineComponent, shallowRef } from 'vue';
-import macaronsTheme from '@/styles/echarts/theme/macarons'; // echarts theme
-import resize from './mixins/resize';
-
-export default defineComponent({
- mixins: [resize],
- props: {
- className: {
- type: String,
- default: 'chart'
- },
- width: {
- type: String,
- default: '100%'
- },
- height: {
- type: String,
- default: '350px'
- },
- autoResize: {
- type: Boolean,
- default: true
- },
- chartData: {
- type: Object,
- required: true
- }
- },
- data() {
- return {
- chart: null
- };
- },
- watch: {
- chartData: {
- deep: true,
- handler(val) {
- this.setOptions(val);
- }
- }
- },
- mounted() {
- this.$nextTick(() => {
- this.initChart();
- });
- },
- beforeUnmount() {
- if (!this.chart) {
- return;
- }
- this.chart.dispose();
- this.chart = null;
- },
- methods: {
- initChart() {
- this.chart = shallowRef(echarts.init(this.$el, macaronsTheme));
- this.setOptions(this.chartData);
- },
- setOptions({ expectedData, actualData } = {}) {
- this.chart.setOption({
- xAxis: {
- data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
- boundaryGap: false,
- axisTick: {
- show: false
- }
- },
- grid: {
- left: 10,
- right: 10,
- bottom: 20,
- top: 30,
- containLabel: true
- },
- tooltip: {
- trigger: 'axis',
- axisPointer: {
- type: 'cross'
- },
- padding: [5, 10]
- },
- yAxis: {
- axisTick: {
- show: false
- }
- },
- legend: {
- data: ['expected', 'actual']
- },
- series: [{
- name: 'expected',
- itemStyle: {
- color: '#FF005A'
- },
- lineStyle: {
- color: '#FF005A',
- width: 2
- },
- smooth: true,
- type: 'line',
- data: expectedData,
- animationDuration: 2800,
- animationEasing: 'cubicInOut'
- },
- {
- name: 'actual',
- smooth: true,
- type: 'line',
- itemStyle: {
- color: '#3888fa'
- },
- lineStyle: {
- color: '#3888fa',
- width: 2
- },
- areaStyle: {
- color: '#f3f8ff'
- },
- data: actualData,
- animationDuration: 2800,
- animationEasing: 'quadraticOut'
- }]
- });
- }
- }
-});
-</script>
diff --git a/src/views/dashboard/admin/components/PanelGroup.vue b/src/views/dashboard/admin/components/PanelGroup.vue
deleted file mode 100644
index c02f300..0000000
--- a/src/views/dashboard/admin/components/PanelGroup.vue
+++ /dev/null
@@ -1,183 +0,0 @@
-<template>
- <el-row :gutter="40" class="panel-group">
- <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
- <div class="card-panel" @click="handleSetLineChartData('newVisitis')">
- <div class="card-panel-icon-wrapper icon-people">
- <svg-icon icon-class="peoples" class-name="card-panel-icon" />
- </div>
- <div class="card-panel-description">
- <div class="card-panel-text">
- New Visits
- </div>
- <count-to :start-val="0" :end-val="102400" :duration="2600" class="card-panel-num" />
- </div>
- </div>
- </el-col>
- <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
- <div class="card-panel" @click="handleSetLineChartData('messages')">
- <div class="card-panel-icon-wrapper icon-message">
- <svg-icon icon-class="message" class-name="card-panel-icon" />
- </div>
- <div class="card-panel-description">
- <div class="card-panel-text">
- Messages
- </div>
- <count-to :start-val="0" :end-val="81212" :duration="3000" class="card-panel-num" />
- </div>
- </div>
- </el-col>
- <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
- <div class="card-panel" @click="handleSetLineChartData('purchases')">
- <div class="card-panel-icon-wrapper icon-money">
- <svg-icon icon-class="money" class-name="card-panel-icon" />
- </div>
- <div class="card-panel-description">
- <div class="card-panel-text">
- Purchases
- </div>
- <count-to :start-val="0" :end-val="9280" :duration="3200" class="card-panel-num" />
- </div>
- </div>
- </el-col>
- <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
- <div class="card-panel" @click="handleSetLineChartData('shoppings')">
- <div class="card-panel-icon-wrapper icon-shopping">
- <svg-icon icon-class="shopping" class-name="card-panel-icon" />
- </div>
- <div class="card-panel-description">
- <div class="card-panel-text">
- Shoppings
- </div>
- <count-to :start-val="0" :end-val="13600" :duration="3600" class="card-panel-num" />
- </div>
- </div>
- </el-col>
- </el-row>
-</template>
-
-<script>
-import { defineComponent } from 'vue';
-import CountTo from '@/components/vue-count-to';
-
-export default defineComponent({
- components: {
- CountTo
- },
- methods: {
- handleSetLineChartData(type) {
- this.$emit('handleSetLineChartData', type);
- }
- }
-});
-</script>
-
-<style lang="scss" scoped>
-.panel-group {
- margin-top: 18px;
-
- .card-panel-col {
- margin-bottom: 32px;
- }
-
- .card-panel {
- display: flex;
- height: 108px;
- cursor: pointer;
- font-size: 12px;
- position: relative;
- overflow: hidden;
- color: #666;
- background: #fff;
- box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
- border-color: rgba(0, 0, 0, .05);
-
- &:hover {
- .card-panel-icon-wrapper {
- color: #fff;
- }
-
- .icon-people {
- background: #40c9c6;
- }
-
- .icon-message {
- background: #36a3f7;
- }
-
- .icon-money {
- background: #f4516c;
- }
-
- .icon-shopping {
- background: #34bfa3
- }
- }
-
- .icon-people {
- color: #40c9c6;
- }
-
- .icon-message {
- color: #36a3f7;
- }
-
- .icon-money {
- color: #f4516c;
- }
-
- .icon-shopping {
- color: #34bfa3
- }
-
- .card-panel-icon-wrapper {
- float: left;
- margin: 14px;
- padding: 16px;
- transition: all 0.38s ease-out;
- border-radius: 6px;
- }
-
- .card-panel-icon {
- float: left;
- font-size: 48px;
- }
-
- .card-panel-description {
- float: right;
- font-weight: bold;
- margin: 26px 0;
- margin-left: 0px;
-
- .card-panel-text {
- line-height: 18px;
- color: rgba(0, 0, 0, 0.45);
- font-size: 16px;
- margin-bottom: 12px;
- }
-
- .card-panel-num {
- font-size: 20px;
- }
- }
- }
-}
-
-@media (max-width:550px) {
- .card-panel-description {
- display: none;
- }
-
- .card-panel-icon-wrapper {
- float: none !important;
- width: 100%;
- height: 100%;
- margin: 0 !important;
-
- .svg-icon {
- display: block;
- margin: 14px auto !important;
- float: none !important;
- }
- }
-}
-</style>
diff --git a/src/views/dashboard/admin/components/PieChart.vue b/src/views/dashboard/admin/components/PieChart.vue
deleted file mode 100644
index a28fd36..0000000
--- a/src/views/dashboard/admin/components/PieChart.vue
+++ /dev/null
@@ -1,80 +0,0 @@
-<template>
- <div :class="className" :style="{ height: height, width: width }" />
-</template>
-
-<script>
-import * as echarts from 'echarts';
-import { defineComponent, shallowRef } from 'vue';
-import macaronsTheme from '@/styles/echarts/theme/macarons'; // echarts theme
-import resize from './mixins/resize';
-
-export default defineComponent({
- mixins: [resize],
- props: {
- className: {
- type: String,
- default: 'chart'
- },
- width: {
- type: String,
- default: '100%'
- },
- height: {
- type: String,
- default: '300px'
- }
- },
- data() {
- return {
- chart: null
- };
- },
- mounted() {
- this.$nextTick(() => {
- this.initChart();
- });
- },
- beforeUnmount() {
- if (!this.chart) {
- return;
- }
- this.chart.dispose();
- this.chart = null;
- },
- methods: {
- initChart() {
- this.chart = shallowRef(echarts.init(this.$el, macaronsTheme));
-
- this.chart.setOption({
- tooltip: {
- trigger: 'item',
- formatter: '{a} <br/>{b} : {c} ({d}%)'
- },
- legend: {
- left: 'center',
- bottom: '10',
- data: ['Industries', 'Technology', 'Forex', 'Gold', 'Forecasts']
- },
- series: [
- {
- name: 'WEEKLY WRITE ARTICLES',
- type: 'pie',
- roseType: 'radius',
- radius: [15, 95],
- center: ['50%', '38%'],
- data: [
- { value: 320, name: 'Industries' },
- { value: 240, name: 'Technology' },
- { value: 149, name: 'Forex' },
- { value: 100, name: 'Gold' },
- { value: 59, name: 'Forecasts' }
- ],
- animationEasing: 'cubicInOut',
- animationDuration: 2600
- }
- ]
- });
- }
- }
-});
-</script>
diff --git a/src/views/dashboard/admin/components/RaddarChart.vue b/src/views/dashboard/admin/components/RaddarChart.vue
deleted file mode 100644
index 3b0c77f..0000000
--- a/src/views/dashboard/admin/components/RaddarChart.vue
+++ /dev/null
@@ -1,115 +0,0 @@
-<template>
- <div :class="className" :style="{ height: height, width: width }" />
-</template>
-
-<script>
-import * as echarts from 'echarts';
-import { defineComponent, shallowRef } from 'vue';
-import macaronsTheme from '@/styles/echarts/theme/macarons'; // echarts theme
-import resize from './mixins/resize';
-
-const animationDuration = 3000;
-
-export default defineComponent({
- mixins: [resize],
- props: {
- className: {
- type: String,
- default: 'chart'
- },
- width: {
- type: String,
- default: '100%'
- },
- height: {
- type: String,
- default: '300px'
- }
- },
- data() {
- return {
- chart: null
- };
- },
- mounted() {
- this.$nextTick(() => {
- this.initChart();
- });
- },
- beforeUnmount() {
- if (!this.chart) {
- return;
- }
- this.chart.dispose();
- this.chart = null;
- },
- methods: {
- initChart() {
- this.chart = shallowRef(echarts.init(this.$el, macaronsTheme));
-
- this.chart.setOption({
- tooltip: {
- trigger: 'axis',
- axisPointer: { // 鍧愭爣杞存寚绀哄櫒锛屽潗鏍囪酱瑙﹀彂鏈夋晥
- type: 'shadow' // 榛樿涓虹洿绾匡紝鍙�変负锛�'line' | 'shadow'
- }
- },
- radar: {
- radius: '66%',
- center: ['50%', '42%'],
- splitNumber: 8,
- splitArea: {
- areaStyle: {
- color: 'rgba(127,95,132,.3)',
- opacity: 1,
- shadowBlur: 45,
- shadowColor: 'rgba(0,0,0,.5)',
- shadowOffsetX: 0,
- shadowOffsetY: 15
- }
- },
- indicator: [
- { name: 'Sales' },
- { name: 'Administration' },
- { name: 'Information Technology' },
- { name: 'Customer Support' },
- { name: 'Development' },
- { name: 'Marketing' }
- ]
- },
- legend: {
- left: 'center',
- bottom: '10',
- data: ['Allocated Budget', 'Expected Spending', 'Actual Spending']
- },
- series: [{
- type: 'radar',
- symbolSize: 0,
- areaStyle: {
- shadowBlur: 13,
- shadowColor: 'rgba(0,0,0,.2)',
- shadowOffsetX: 0,
- shadowOffsetY: 10,
- opacity: 1
- },
- data: [
- {
- value: [5000, 7000, 12000, 11000, 15000, 14000],
- name: 'Allocated Budget'
- },
- {
- value: [4000, 9000, 15000, 15000, 13000, 11000],
- name: 'Expected Spending'
- },
- {
- value: [5500, 11000, 12000, 15000, 12000, 12000],
- name: 'Actual Spending'
- }
- ],
- animationDuration: animationDuration
- }]
- });
- }
- }
-});
-</script>
diff --git a/src/views/dashboard/admin/components/TodoList/Todo.vue b/src/views/dashboard/admin/components/TodoList/Todo.vue
deleted file mode 100644
index 4930810..0000000
--- a/src/views/dashboard/admin/components/TodoList/Todo.vue
+++ /dev/null
@@ -1,71 +0,0 @@
-<template>
- <li :class="{ completed: todo.done, editing: editing }" class="todo">
- <div class="view">
- <input :checked="todo.done" class="toggle" type="checkbox" @change="toggleTodo(todo)">
- <label @dblclick="editing = true" v-text="todo.text" />
- <button class="destroy" @click="deleteTodo(todo)" />
- </div>
- <input v-show="editing" v-focus="editing" :value="todo.text" class="edit" @keyup.enter="doneEdit"
- @keyup.esc="cancelEdit" @blur="doneEdit">
- </li>
-</template>
-
-<script>
-import { defineComponent } from 'vue';
-
-export default defineComponent({
- name: 'Todo',
- directives: {
- focus(el, { value }, { context }) {
- if (value) {
- context.$nextTick(() => {
- el.focus();
- });
- }
- }
- },
- props: {
- todo: {
- type: Object,
- default: function() {
- return {};
- }
- }
- },
- data() {
- return {
- editing: false
- };
- },
- methods: {
- deleteTodo(todo) {
- this.$emit('deleteTodo', todo);
- },
- editTodo({ todo, value }) {
- this.$emit('editTodo', { todo, value });
- },
- toggleTodo(todo) {
- this.$emit('toggleTodo', todo);
- },
- doneEdit(e) {
- const value = e.target.value.trim();
- const { todo } = this;
- if (!value) {
- this.deleteTodo({
- todo
- });
- } else if (this.editing) {
- this.editTodo({
- todo,
- value
- });
- this.editing = false;
- }
- },
- cancelEdit(e) {
- e.target.value = this.todo.text;
- this.editing = false;
- }
- }
-});
-</script>
diff --git a/src/views/dashboard/admin/components/TodoList/index.scss b/src/views/dashboard/admin/components/TodoList/index.scss
deleted file mode 100644
index 947efb6..0000000
--- a/src/views/dashboard/admin/components/TodoList/index.scss
+++ /dev/null
@@ -1,316 +0,0 @@
-.todoapp {
- font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
- line-height: 1.4em;
- color: #4d4d4d;
- min-width: 230px;
- max-width: 550px;
- margin: 0 auto ;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
- font-weight: 300;
- background: #fff;
- z-index: 1;
- position: relative;
- button {
- margin: 0;
- padding: 0;
- border: 0;
- background: none;
- font-size: 100%;
- vertical-align: baseline;
- font-family: inherit;
- font-weight: inherit;
- color: inherit;
- -webkit-appearance: none;
- appearance: none;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
- }
- :focus {
- outline: 0;
- }
- .hidden {
- display: none;
- }
- .todoapp {
- background: #fff;
- margin: 130px 0 40px 0;
- position: relative;
- box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
- }
- .todoapp input::-webkit-input-placeholder {
- font-style: italic;
- font-weight: 300;
- color: #e6e6e6;
- }
- .todoapp input::-moz-placeholder {
- font-style: italic;
- font-weight: 300;
- color: #e6e6e6;
- }
- .todoapp input::input-placeholder {
- font-style: italic;
- font-weight: 300;
- color: #e6e6e6;
- }
- .todoapp h1 {
- position: absolute;
- top: -155px;
- width: 100%;
- font-size: 100px;
- font-weight: 100;
- text-align: center;
- color: rgba(175, 47, 47, 0.15);
- -webkit-text-rendering: optimizeLegibility;
- -moz-text-rendering: optimizeLegibility;
- text-rendering: optimizeLegibility;
- }
- .new-todo,
- .edit {
- position: relative;
- margin: 0;
- width: 100%;
- font-size: 18px;
- font-family: inherit;
- font-weight: inherit;
- line-height: 1.4em;
- border: 0;
- color: inherit;
- padding: 6px;
- border: 1px solid #999;
- box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
- box-sizing: border-box;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
- }
- .new-todo {
- padding: 10px 16px 16px 60px;
- border: none;
- background: rgba(0, 0, 0, 0.003);
- box-shadow: inset 0 -2px 1px rgba(0, 0, 0, 0.03);
- }
- .main {
- position: relative;
- z-index: 2;
- border-top: 1px solid #e6e6e6;
- }
- .toggle-all {
- text-align: center;
- border: none;
- /* Mobile Safari */
- opacity: 0;
- position: absolute;
- }
- .toggle-all+label {
- width: 60px;
- height: 34px;
- font-size: 0;
- position: absolute;
- top: -52px;
- left: -13px;
- -webkit-transform: rotate(90deg);
- transform: rotate(90deg);
- }
- .toggle-all+label:before {
- content: '鉂�';
- font-size: 22px;
- color: #e6e6e6;
- padding: 10px 27px 10px 27px;
- }
- .toggle-all:checked+label:before {
- color: #737373;
- }
- .todo-list {
- margin: 0;
- padding: 0;
- list-style: none;
- }
- .todo-list li {
- position: relative;
- font-size: 24px;
- border-bottom: 1px solid #ededed;
- }
- .todo-list li:last-child {
- border-bottom: none;
- }
- .todo-list li.editing {
- border-bottom: none;
- padding: 0;
- }
- .todo-list li.editing .edit {
- display: block;
- width: 506px;
- padding: 12px 16px;
- margin: 0 0 0 43px;
- }
- .todo-list li.editing .view {
- display: none;
- }
- .todo-list li .toggle {
- text-align: center;
- width: 40px;
- /* auto, since non-WebKit browsers doesn't support input styling */
- height: auto;
- position: absolute;
- top: 0;
- bottom: 0;
- margin: auto 0;
- border: none;
- /* Mobile Safari */
- -webkit-appearance: none;
- appearance: none;
- }
- .todo-list li .toggle {
- opacity: 0;
- }
- .todo-list li .toggle+label {
- /*
- Firefox requires `#` to be escaped - https://bugzilla.mozilla.org/show_bug.cgi?id=922433
- IE and Edge requires *everything* to be escaped to render, so we do that instead of just the `#` - https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7157459/
- */
- background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23ededed%22%20stroke-width%3D%223%22/%3E%3C/svg%3E');
- background-repeat: no-repeat;
- background-position: center left;
- background-size: 36px;
- }
- .todo-list li .toggle:checked+label {
- background-size: 36px;
- background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23bddad5%22%20stroke-width%3D%223%22/%3E%3Cpath%20fill%3D%22%235dc2af%22%20d%3D%22M72%2025L42%2071%2027%2056l-4%204%2020%2020%2034-52z%22/%3E%3C/svg%3E');
- }
- .todo-list li label {
- word-break: break-all;
- padding: 15px 15px 15px 50px;
- display: block;
- line-height: 1.0;
- font-size: 14px;
- transition: color 0.4s;
- }
- .todo-list li.completed label {
- color: #d9d9d9;
- text-decoration: line-through;
- }
- .todo-list li .destroy {
- display: none;
- position: absolute;
- top: 0;
- right: 10px;
- bottom: 0;
- width: 40px;
- height: 40px;
- margin: auto 0;
- font-size: 30px;
- color: #cc9a9a;
- transition: color 0.2s ease-out;
- cursor: pointer;
- }
- .todo-list li .destroy:hover {
- color: #af5b5e;
- }
- .todo-list li .destroy:after {
- content: '脳';
- }
- .todo-list li:hover .destroy {
- display: block;
- }
- .todo-list li .edit {
- display: none;
- }
- .todo-list li.editing:last-child {
- margin-bottom: -1px;
- }
- .footer {
- color: #777;
- position: relative;
- padding: 10px 15px;
- text-align: center;
- border-top: 1px solid #e6e6e6;
- }
- .footer:before {
- content: '';
- position: absolute;
- right: 0;
- bottom: 0;
- left: 0;
- height: 40px;
- overflow: hidden;
- box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 8px 0 -3px #f6f6f6, 0 9px 1px -3px rgba(0, 0, 0, 0.2), 0 16px 0 -6px #f6f6f6, 0 17px 2px -6px rgba(0, 0, 0, 0.2);
- }
- .todo-count {
- float: left;
- text-align: left;
- }
- .todo-count strong {
- font-weight: 300;
- }
- .filters {
- margin: 0;
- padding: 0;
- position: relative;
- z-index: 1;
- list-style: none;
- }
- .filters li {
- display: inline;
- }
- .filters li a {
- color: inherit;
- font-size: 12px;
- padding: 3px 7px;
- text-decoration: none;
- border: 1px solid transparent;
- border-radius: 3px;
- }
- .filters li a:hover {
- border-color: rgba(175, 47, 47, 0.1);
- }
- .filters li a.selected {
- border-color: rgba(175, 47, 47, 0.2);
- }
- .clear-completed,
- html .clear-completed:active {
- float: right;
- position: relative;
- line-height: 20px;
- text-decoration: none;
- cursor: pointer;
- }
- .clear-completed:hover {
- text-decoration: underline;
- }
- .info {
- margin: 65px auto 0;
- color: #bfbfbf;
- font-size: 10px;
- text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
- text-align: center;
- }
- .info p {
- line-height: 1;
- }
- .info a {
- color: inherit;
- text-decoration: none;
- font-weight: 400;
- }
- .info a:hover {
- text-decoration: underline;
- }
- /*
- Hack to remove background from Mobile Safari.
- Can't use it globally since it destroys checkboxes in Firefox
-*/
- @media screen and (-webkit-min-device-pixel-ratio:0) {
- .toggle-all,
- .todo-list li .toggle {
- background: none;
- }
- .todo-list li .toggle {
- height: 40px;
- }
- }
- @media (max-width: 430px) {
- .filters {
- bottom: 10px;
- }
- }
-}
diff --git a/src/views/dashboard/admin/components/TodoList/index.vue b/src/views/dashboard/admin/components/TodoList/index.vue
deleted file mode 100644
index 21c25a9..0000000
--- a/src/views/dashboard/admin/components/TodoList/index.vue
+++ /dev/null
@@ -1,127 +0,0 @@
-<template>
- <section class="todoapp">
- <!-- header -->
- <header class="header">
- <input class="new-todo" autocomplete="off" placeholder="Todo List" @keyup.enter="addTodo">
- </header>
- <!-- main section -->
- <section v-show="todos.length" class="main">
- <input id="toggle-all" :checked="allChecked" class="toggle-all" type="checkbox"
- @change="toggleAll({ done: !allChecked })">
- <label for="toggle-all" />
- <ul class="todo-list">
- <todo v-for="(todo, index) in filteredTodos" :key="index" :todo="todo" @toggleTodo="toggleTodo"
- @editTodo="editTodo" @deleteTodo="deleteTodo" />
- </ul>
- </section>
- <!-- footer -->
- <footer v-show="todos.length" class="footer">
- <span class="todo-count">
- <strong>{{ remaining }}</strong>
- {{ displayRemaining(remaining) }} left
- </span>
- <ul class="filters">
- <li v-for="(val, key) in filters" :key="key">
- <a :class="{ selected: visibility === key }" @click.prevent="visibility = key">{{ displayValue(key) }}</a>
- </li>
- </ul>
- <!-- <button class="clear-completed" v-show="todos.length > remaining" @click="clearCompleted">
- Clear completed
- </button> -->
- </footer>
- </section>
-</template>
-
-<script>
-import { defineComponent } from 'vue';
-import Todo from './Todo.vue';
-
-const STORAGE_KEY = 'todos';
-const filters = {
- all: todos => todos,
- active: todos => todos.filter(todo => !todo.done),
- completed: todos => todos.filter(todo => todo.done)
-};
-const defalutList = [
- { text: 'star this repository', done: false },
- { text: 'fork this repository', done: false },
- { text: 'follow author', done: false },
- { text: 'vue-element-admin', done: true },
- { text: 'vue', done: true },
- { text: 'element-ui', done: true },
- { text: 'axios', done: true },
- { text: 'webpack', done: true }
-];
-export default defineComponent({
- components: { Todo },
- data() {
- return {
- visibility: 'all',
- filters,
- // todos: JSON.parse(window.localStorage.getItem(STORAGE_KEY)) || defalutList
- todos: defalutList
- };
- },
- computed: {
- allChecked() {
- return this.todos.every(todo => todo.done);
- },
- filteredTodos() {
- return filters[this.visibility](this.todos);
- },
- remaining() {
- return this.todos.filter(todo => !todo.done).length;
- }
- },
- methods: {
- pluralize: (n, w) => n === 1 ? w : w + 's',
- capitalize: s => s.charAt(0).toUpperCase() + s.slice(1),
- displayRemaining(remaining) {
- return this.pluralize(remaining, 'item');
- },
- displayValue(key) {
- return this.capitalize(key);
- },
- setLocalStorage() {
- window.localStorage.setItem(STORAGE_KEY, JSON.stringify(this.todos));
- },
- addTodo(e) {
- const text = e.target.value;
- if (text.trim()) {
- this.todos.push({
- text,
- done: false
- });
- this.setLocalStorage();
- }
- e.target.value = '';
- },
- toggleTodo(val) {
- val.done = !val.done;
- this.setLocalStorage();
- },
- deleteTodo(todo) {
- this.todos.splice(this.todos.indexOf(todo), 1);
- this.setLocalStorage();
- },
- editTodo({ todo, value }) {
- todo.text = value;
- this.setLocalStorage();
- },
- clearCompleted() {
- this.todos = this.todos.filter(todo => !todo.done);
- this.setLocalStorage();
- },
- toggleAll({ done }) {
- this.todos.forEach(todo => {
- todo.done = done;
- this.setLocalStorage();
- });
- }
- }
-});
-</script>
-
-<style lang="scss">
-@import './index.scss';
-</style>
diff --git a/src/views/dashboard/admin/components/TransactionTable.vue b/src/views/dashboard/admin/components/TransactionTable.vue
deleted file mode 100644
index d0804d2..0000000
--- a/src/views/dashboard/admin/components/TransactionTable.vue
+++ /dev/null
@@ -1,65 +0,0 @@
-<template>
- <el-table :data="list" style="width: 100%;padding-top: 15px;">
- <el-table-column label="Order_No" min-width="200">
- <template v-slot="scope">
- {{ displayOrderNo(scope) }}
- </template>
- </el-table-column>
- <el-table-column label="Price" width="195" align="center">
- <template v-slot="scope">
- 楼{{ displayPrice(scope) }}
- </template>
- </el-table-column>
- <el-table-column label="Status" width="100" align="center">
- <template v-slot="{ row }">
- <el-tag :type="displayType(row)">
- {{ row.status }}
- </el-tag>
- </template>
- </el-table-column>
- </el-table>
-</template>
-
-<script>
-import { defineComponent } from 'vue';
-import { transactionList } from '@/api/remote-search';
-import { toThousandFilter } from '@/utils/filters';
-
-export default defineComponent({
- data() {
- return {
- list: null
- };
- },
- created() {
- this.fetchData();
- },
- methods: {
- statusFilter(status) {
- const statusMap = {
- success: 'success',
- pending: 'danger'
- };
- return statusMap[status];
- },
- displayOrderNo(scope) {
- const s = scope.row.order_no;
- if (s) {
- return s.substring(0, 30);
- }
- return '';
- },
- displayPrice(scope) {
- return toThousandFilter(scope.row.price);
- },
- displayType(row) {
- return this.statusFilter(row.status);
- },
- fetchData() {
- transactionList().then(response => {
- this.list = response.data.items.slice(0, 8);
- });
- }
- }
-});
-</script>
diff --git a/src/views/dashboard/admin/components/mixins/resize.js b/src/views/dashboard/admin/components/mixins/resize.js
deleted file mode 100644
index 4126fb0..0000000
--- a/src/views/dashboard/admin/components/mixins/resize.js
+++ /dev/null
@@ -1,56 +0,0 @@
-import { defineComponent } from 'vue';
-import { debounce } from '@/utils';
-
-export default defineComponent({
- data() {
- return {
- sidebarElm: null,
- resizeHandler: null
- };
- },
- mounted() {
- this.resizeHandler = debounce(() => {
- if (this.chart) {
- this.chart.resize();
- }
- }, 100);
- this.initResizeEvent();
- this.initSidebarResizeEvent();
- },
- beforeUnmount() {
- this.destroyResizeEvent();
- this.destroySidebarResizeEvent();
- },
- // to fixed bug when cached by keep-alive
- // https://github.com/PanJiaChen/vue-element-admin/issues/2116
- activated() {
- this.initResizeEvent();
- this.initSidebarResizeEvent();
- },
- deactivated() {
- this.destroyResizeEvent();
- this.destroySidebarResizeEvent();
- },
- methods: {
- // do not use $_ for mixins properties
- // https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential
- initResizeEvent() {
- window.addEventListener('resize', this.resizeHandler);
- },
- destroyResizeEvent() {
- window.removeEventListener('resize', this.resizeHandler);
- },
- sidebarResizeHandler(e) {
- if (e.propertyName === 'width') {
- this.resizeHandler();
- }
- },
- initSidebarResizeEvent() {
- this.sidebarElm = document.getElementsByClassName('sidebar-container')[0];
- this.sidebarElm && this.sidebarElm.addEventListener('transitionend', this.sidebarResizeHandler);
- },
- destroySidebarResizeEvent() {
- this.sidebarElm && this.sidebarElm.removeEventListener('transitionend', this.sidebarResizeHandler);
- }
- }
-});
diff --git a/src/views/dashboard/admin/index.vue b/src/views/dashboard/admin/index.vue
deleted file mode 100644
index b2a807e..0000000
--- a/src/views/dashboard/admin/index.vue
+++ /dev/null
@@ -1,128 +0,0 @@
-<template>
- <div class="dashboard-editor-container">
- <github-corner class="github-corner" />
-
- <panel-group @handleSetLineChartData="handleSetLineChartData" />
-
- <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
- <line-chart :chart-data="lineChartData" />
- </el-row>
-
- <el-row :gutter="32">
- <el-col :xs="24" :sm="24" :lg="8">
- <div class="chart-wrapper">
- <raddar-chart />
- </div>
- </el-col>
- <el-col :xs="24" :sm="24" :lg="8">
- <div class="chart-wrapper">
- <pie-chart />
- </div>
- </el-col>
- <el-col :xs="24" :sm="24" :lg="8">
- <div class="chart-wrapper">
- <bar-chart />
- </div>
- </el-col>
- </el-row>
-
- <el-row :gutter="8">
- <el-col :xs="{ span: 24 }" :sm="{ span: 24 }" :md="{ span: 24 }" :lg="{ span: 12 }" :xl="{ span: 12 }"
- style="padding-right:8px;margin-bottom:30px;">
- <transaction-table />
- </el-col>
- <el-col :xs="{ span: 24 }" :sm="{ span: 12 }" :md="{ span: 12 }" :lg="{ span: 6 }" :xl="{ span: 6 }"
- style="margin-bottom:30px;">
- <todo-list />
- </el-col>
- <el-col :xs="{ span: 24 }" :sm="{ span: 12 }" :md="{ span: 12 }" :lg="{ span: 6 }" :xl="{ span: 6 }"
- style="margin-bottom:30px;">
- <box-card />
- </el-col>
- </el-row>
- </div>
-</template>
-
-<script>
-import GithubCorner from '@/components/GithubCorner';
-import PanelGroup from './components/PanelGroup';
-import LineChart from './components/LineChart';
-import RaddarChart from './components/RaddarChart';
-import PieChart from './components/PieChart';
-import BarChart from './components/BarChart';
-import TransactionTable from './components/TransactionTable';
-import TodoList from './components/TodoList';
-import BoxCard from './components/BoxCard';
-import { defineComponent } from 'vue';
-
-const lineChartData = {
- newVisitis: {
- expectedData: [100, 120, 161, 134, 105, 160, 165],
- actualData: [120, 82, 91, 154, 162, 140, 145]
- },
- messages: {
- expectedData: [200, 192, 120, 144, 160, 130, 140],
- actualData: [180, 160, 151, 106, 145, 150, 130]
- },
- purchases: {
- expectedData: [80, 100, 121, 104, 105, 90, 100],
- actualData: [120, 90, 100, 138, 142, 130, 130]
- },
- shoppings: {
- expectedData: [130, 140, 141, 142, 145, 150, 160],
- actualData: [120, 82, 91, 154, 162, 140, 130]
- }
-};
-
-export default defineComponent({
- name: 'DashboardAdmin',
- components: {
- GithubCorner,
- PanelGroup,
- LineChart,
- RaddarChart,
- PieChart,
- BarChart,
- TransactionTable,
- TodoList,
- BoxCard
- },
- data() {
- return {
- lineChartData: lineChartData.newVisitis
- };
- },
- methods: {
- handleSetLineChartData(type) {
- this.lineChartData = lineChartData[type];
- }
- }
-});
-</script>
-
-<style lang="scss" scoped>
-.dashboard-editor-container {
- padding: 32px;
- background-color: rgb(240, 242, 245);
- position: relative;
-
- .github-corner {
- position: absolute;
- top: 0px;
- border: 0;
- right: 0;
- }
-
- .chart-wrapper {
- background: #fff;
- padding: 16px 16px 0;
- margin-bottom: 32px;
- }
-}
-
-@media (max-width:1024px) {
- .chart-wrapper {
- padding: 8px;
- }
-}
-</style>
diff --git a/src/views/dashboard/editor/index.vue b/src/views/dashboard/editor/index.vue
deleted file mode 100644
index 006dee0..0000000
--- a/src/views/dashboard/editor/index.vue
+++ /dev/null
@@ -1,79 +0,0 @@
-<template>
- <div class="dashboard-editor-container">
- <div class=" clearfix">
- <pan-thumb :image="avatar" style="float: left">
- Your roles:
- <span v-for="item in roles" :key="item" class="pan-info-roles">{{ item }}</span>
- </pan-thumb>
- <github-corner style="position: absolute; top: 0px; border: 0; right: 0;" />
- <div class="info-container">
- <span class="display_name">{{ name }}</span>
- <span style="font-size:20px;padding-top:20px;display:inline-block;">Editor's Dashboard</span>
- </div>
- </div>
- <div>
- <img :src="emptyGif" class="emptyGif">
- </div>
- </div>
-</template>
-
-<script>
-import { mapState } from 'pinia';
-import PanThumb from '@/components/PanThumb';
-import GithubCorner from '@/components/GithubCorner';
-import { defineComponent } from 'vue';
-import store from '@/store';
-
-export default defineComponent({
- name: 'DashboardEditor',
- components: { PanThumb, GithubCorner },
- data() {
- return {
- emptyGif: 'https://wpimg.wallstcn.com/0e03b7da-db9e-4819-ba10-9016ddfdaed3'
- };
- },
- computed: {
- ...mapState(store.user, [
- 'name',
- 'avatar',
- 'roles'
- ])
- }
-});
-</script>
-
-<style lang="scss" scoped>
-.emptyGif {
- display: block;
- width: 45%;
- margin: 0 auto;
-}
-
-.dashboard-editor-container {
- background-color: #e3e3e3;
- min-height: 100vh;
- padding: 50px 60px 0px;
-
- .pan-info-roles {
- font-size: 12px;
- font-weight: 700;
- color: #333;
- display: block;
- }
-
- .info-container {
- position: relative;
- margin-left: 190px;
- height: 150px;
- line-height: 200px;
-
- .display_name {
- font-size: 48px;
- line-height: 48px;
- color: #212121;
- position: absolute;
- top: 25px;
- }
- }
-}
-</style>
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index 4261747..e127acf 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -31,21 +31,12 @@
<el-button :loading="loading" type="primary" style="width:100%;margin-bottom:40px;" @click.prevent="handleLogin">鐧诲綍</el-button>
</el-form>
-
- <el-dialog title="Or connect with" v-model="showDialog">
- Can not be simulated on local, so please combine you own business simulation! ! !
- <br>
- <br>
- <br>
- <social-sign />
- </el-dialog>
</div>
</template>
<script lang="ts">
import { validUsername } from '@/utils/validate';
import { defineComponent } from 'vue';
-import SocialSign from './components/SocialSignin.vue';
import type { FormItemRule } from 'element-plus';
import type { IForm } from '@/types/element-plus';
import store from '@/store';
@@ -57,7 +48,6 @@
export default defineComponent({
name: 'Login',
- components: { SocialSign },
data() {
const validateUsername: FormItemRule['validator'] = (_rule, value, callback) => {
if (!validUsername(value)) {
--
Gitblit v1.9.1