Browse Source

refactor: 插件商城和上传插件完成

min
Min5203 4 years ago
parent
commit
14f543c58e
  1. 2
      .env.development
  2. 2
      .env.production
  3. 52
      src/components/navbar.vue
  4. 24
      src/routers/index.js
  5. 31
      src/views/Index.vue
  6. 1
      src/views/tablist/devepage.vue
  7. 1
      src/views/tablist/downloadpage.vue
  8. 109
      src/views/tablist/plugshop.vue
  9. 133
      src/views/tablist/upload.vue
  10. 2
      src/views/user/pw-change.vue
  11. 2
      src/views/user/sign-in.vue
  12. 6
      yarn.lock

2
.env.development

@ -1 +1 @@
VITE_API_URL=http://localhost:4001
VITE_API_URL=https://test.tall.wiki

2
.env.production

@ -1 +1 @@
VITE_API_URL=http://139.196.27.233:29001
VITE_API_URL=http://www.tall.wiki

52
src/components/navbar.vue

@ -1,15 +1,12 @@
<template>
<div class="flex items-center justify-between pr-5 shadow-sm">
<h1 class="text-lg font-medium py-3 px-6">
<i
v-if="menu.show"
:class="{ 'text-gray-800': !menu.collapse, 'text-gray-400': menu.collapse }"
class="el-icon-guide mr-2"
@click="toggleCollapse"
></i>
智能大气腐蚀监测平台{{ $route.meta.title }}
</h1>
<!-- <h1 class="text-lg font-medium py-3 px-6"></h1> -->
<el-menu :default-active="activeIndex" class="el-menu-demo flex-1" mode="horizontal">
<el-menu-item index="1" @click="toshop">插件商城</el-menu-item>
<el-menu-item index="2" @click="todevelop">开发教程</el-menu-item>
<el-menu-item index="3" @click="todown">下载模板</el-menu-item>
<el-menu-item index="4" @click="toup">上传插件</el-menu-item>
</el-menu>
<el-dropdown>
<span class="flex items-center">
<el-avatar class="mr-2" size="small" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"></el-avatar>
@ -29,19 +26,20 @@
</template>
<script setup>
import { computed } from 'vue';
import { computed, ref } from 'vue';
import { useStore } from 'vuex';
import { useRouter } from 'vue-router';
import { ArrowDown } from '@element-plus/icons';
const store = useStore();
const router = useRouter();
const toggleCollapse = () => {
console.log('Toggle Collapse');
store.commit('toggleCollapse');
};
const menu = computed(() => store.state.menu);
// const toggleCollapse = () => {
// console.log('Toggle Collapse');
// store.commit('toggleCollapse');
// };
// const menu = computed(() => store.state.menu);
const account = computed(() => store.getters['user/account']);
const activeIndex = ref('1');
//
function openChangePassword() {
@ -53,4 +51,26 @@ function signOut() {
store.commit('user/setUser', null);
router.push({ name: 'signin' });
}
function toshop() {
router.push({ name: 'plugshop' });
}
function todevelop() {
router.push({ name: 'devepage' });
}
function todown() {
router.push({ name: 'downloadpage' });
}
function toup() {
router.push({ name: 'upload' });
}
</script>
<style scoped>
.el-menu-item {
width: 10%;
}
</style>

24
src/routers/index.js

@ -43,8 +43,30 @@ const router = createRouter({
path: '/store/home',
name: 'home',
component: () => import('views/Index.vue'),
children: routes,
children: [
{
path: '/store/home/plugshop',
name: 'plugshop',
component: () => import('views/tablist/plugshop.vue'),
},
{
path: '/store/home/devepage',
name: 'devepage',
component: () => import('views/tablist/devepage.vue'),
},
{
path: '/store/home/downloadpage',
name: 'downloadpage',
component: () => import('views/tablist/downloadpage.vue'),
},
{
path: '/store/home/upload',
name: 'upload',
component: () => import('views/tablist/upload.vue'),
},
],
},
...user,
],
});

31
src/views/Index.vue

@ -1,3 +1,32 @@
<template>
index.vue
<el-container>
<el-header>
<div class="top">
<Navbar />
</div>
</el-header>
<el-main>
<router-view></router-view>
</el-main>
</el-container>
</template>
<script>
// import { ref } from 'vue';
// import Navbar from '../components/navbar.vue';
// const activeIndex = ref('1');
export default {};
</script>
<style>
.el-main {
padding: 5rem 12rem;
/* background-color: #ff6700; */
overflow: hidden;
}
.top {
padding: 5rem 10rem;
width: 100%;
}
</style>

1
src/views/tablist/devepage.vue

@ -0,0 +1 @@
<template>开发教程</template>

1
src/views/tablist/downloadpage.vue

@ -0,0 +1 @@
<template>下载模板</template>

109
src/views/tablist/plugshop.vue

@ -0,0 +1,109 @@
<template>
<div class="serch flex flex-1 py-10">
<el-select
v-model="value"
multiple
filterable
remote
reserve-keyword
placeholder="请输入内容"
:remote-method="remoteMethod"
:loading="loading"
>
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
</el-select>
<el-select v-model="value" filterable placeholder="请选择行业">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
</el-select>
<el-select
v-model="value"
multiple
filterable
remote
reserve-keyword
placeholder="请选择分类"
:remote-method="remoteMethod"
:loading="loading"
>
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
</el-select>
<el-button type="primary" size="small" class="serch-btn w-60px h-40px">搜索</el-button>
</div>
<div class="shop-content flex py-5">
<img src="@/assets/u1.jpg" alt="" class="shop-left w-100 h-90 border-20 p-1 box-border" />
<div class="shop-right ml-5">
<div><span class="text-2xl font-semibold">插件名称</span> <span class="ml-5">版本号</span></div>
<p class="h-13 mt-7 desc">
<span> 描述</span> In my dual profession as an educator and health care provider, I have worked with numerous children infected
with the virus that causes AIDS.
</p>
<div class="mt-7">
<el-tag>医疗</el-tag>
<el-tag class="ml-2" type="success">打卡</el-tag>
<el-tag class="ml-2" type="warning">签到</el-tag>
</div>
<p class="mt-7"><span>行业:</span> <span>数字医疗</span> <span class="ml-8">分类:</span> <span>签到</span></p>
<p class="mt-7"><span>更新日期:</span> <span>2021年12月20日</span> <span class="ml-8">作者:</span> <span>传控电子</span></p>
<div class="mt-10">
<el-button type="primary">下载</el-button>
</div>
</div>
</div>
<div class="pagination mt-15 flex flex-row-reverse">
<!-- <el-pagination
v-model:currentPage="currentPage4"
:page-sizes="[10, 20, 30, 40]"
:page-size="20"
layout="total, sizes, prev, pager, next, jumper"
:total="200"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
>
</el-pagination> -->
<el-config-provider :locale="locale">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage4"
:page-sizes="[10, 20, 30, 40]"
:page-size="20"
layout="total, sizes, prev, pager, next, jumper"
:total="200"
>
</el-pagination>
</el-config-provider>
</div>
</template>
<script lang="ts">
// import { reactive, ref, toRefs } from 'vue';
// vue
import { ElConfigProvider } from 'element-plus';
//
import zhCn from 'element-plus/lib/locale/lang/zh-cn';
export default {
props: { pagReviewLength: Number },
components: { [ElConfigProvider.name]: ElConfigProvider },
setup() {
const locale = zhCn;
// const state = reactive({
// pageSize: 10,
// total: '',
// currentPage1: 1,
// });
return { locale };
},
};
</script>
<style scoped>
.el-select {
margin-right: 2rem;
width: 20%;
}
.desc {
overflow: hidden;
}
</style>

133
src/views/tablist/upload.vue

@ -0,0 +1,133 @@
<template>
<div class="box">
<h1 class="text-xl mt-10 font-semibold">上传插件</h1>
<el-form ref="formRef" :model="form" :rules="rules" label-width="120px" class="forms">
<div class="flex">
<el-form-item class="font-semibold flex-1" prop="name">
<template v-slot:label>
<el-tooltip class="box-item" effect="dark" content="输入帮助" placement="top-end">
<div>插件名称 </div>
</el-tooltip>
</template>
<el-input v-model="form.name" placeholder="输入插件名称"></el-input>
</el-form-item>
<el-form-item label="版本:" class="font-semibold flex-1" prop="edition">
<el-input v-model="form.edition" placeholder="请输入"></el-input>
</el-form-item>
</div>
<el-form-item label="描述(可选):" class="font-semibold" prop="desc">
<el-input v-model="form.desc" type="textarea" placeholder="请输入备注"></el-input>
</el-form-item>
<div class="flex">
<el-form-item label="行业:" class="font-semibold flex-1" prop="region">
<el-select v-model="form.region" placeholder="请选择">
<el-option value="Zone one"></el-option>
<el-option value="Zone two"></el-option>
</el-select>
</el-form-item>
<el-form-item label="分类:" class="font-semibold flex-1" prop="sort">
<el-select v-model="form.sort" multiple placeholder="请选择,可多选">
<el-option value="Zone one"></el-option>
<el-option value="Zone two"></el-option>
</el-select>
</el-form-item>
</div>
<el-form-item label="标签:" class="font-semibold tags" prop="tags">
<el-select v-model="form.tags" multiple filterable allow-create default-first-option placeholder="请选择标签">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
</el-select>
</el-form-item>
<el-form-item label="HTML:" class="font-semibold" prop="htmlcodes">
<el-input v-model="form.htmlcodes" type="textarea" placeholder="请输入HTML代码片段"></el-input>
</el-form-item>
<el-form-item label="JS:" class="font-semibold" prop="jscodes">
<el-input v-model="form.jscodes" type="textarea" placeholder="请输入JS代码片段"></el-input>
</el-form-item>
<el-form-item label="CSS:" class="font-semibold" prop="csscodes">
<el-input v-model="form.csscodes" type="textarea" placeholder="请输入CSS代码片段"></el-input>
</el-form-item>
<el-form-item> <el-switch v-model="form.delivery" class="mr-3"></el-switch> 是否压缩代码 </el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit()">发布</el-button>
<el-button @click="resetForm()">重置</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script setup>
import { ref, reactive } from 'vue';
const formRef = ref(null);
const form = reactive({
name: '',
edition: '',
desc: '',
region: '',
sort: '',
tags: '',
htmlcodes: '',
jscodes: '',
csscodes: '',
delivery: '',
});
const rules = {
name: [{ required: true, message: '请输入插件名称', trigger: 'blur' }],
edition: [{ required: true, message: '请输入版本号', trigger: 'blur' }],
region: [{ required: true, message: '请选择行业', trigger: 'blur' }],
sort: [{ required: true, message: '请选择分类', trigger: 'blur' }],
tags: [{ required: true, message: '请选择标签', trigger: 'blur' }],
htmlcodes: [{ required: true, message: '请输入HTML代码', trigger: 'blur' }],
jscodes: [{ required: true, message: '请输入JS代码', trigger: 'blur' }],
};
const onSubmit = () => {
console.log('onSubmit');
};
const resetForm = () => {
formRef.value.resetFields();
};
const options = [
{
value: 'HTML',
label: 'HTML',
},
{
value: 'CSS',
label: 'CSS',
},
{
value: 'JavaScript',
label: 'JavaScript',
},
];
</script>
<style>
.box {
padding-left: 5%;
}
.el-form-item {
margin-top: 1rem;
}
.tags {
width: 100%;
}
.el-select {
width: 100%;
}
.el-form-item__label {
display: flex;
justify-content: end;
flex: 0 0 auto;
text-align: right;
font-size: var(--el-form-label-font-size);
color: var(--el-text-color-regular);
line-height: 40px;
padding: 0 12px 0 0;
box-sizing: border-box;
}
</style>

2
src/views/user/pw-change.vue

@ -1,7 +1,7 @@
<template>
<div class="wrap">
<div class="content border rounded-md">
<h1 class="text-2xl text-center font-bold mb-10 text-gray-700">智能大气腐蚀监测云平台</h1>
<h1 class="text-2xl text-center font-bold mb-10 text-gray-700">时物链条插件商城</h1>
<el-form ref="passwordChangeFormRef" :model="passwordChangeForm" :rules="rules" label-width="70px" status-icon>
<el-form-item class="mb-3" label="账号" prop="account" style="margin-bottom: 22px !important">
<el-input v-model="passwordChangeForm.account" type="text"></el-input>

2
src/views/user/sign-in.vue

@ -71,7 +71,7 @@ function onSubmit() {
ElMessage.success('登录成功, 欢迎回来');
setTimeout(() => {
//
router.push({ name: 'home' });
router.push({ name: 'plugshop' });
}, 1000);
} catch (error) {
ElMessage.error(error);

6
yarn.lock

@ -2209,9 +2209,9 @@
"is-date-object" "^1.0.1"
"is-symbol" "^1.0.2"
"esbuild-linux-64@0.13.8":
"integrity" "sha1-AJL8igZAAad3v6DjtCW7i+j5bmo="
"resolved" "https://registry.npmmirror.com/esbuild-linux-64/download/esbuild-linux-64-0.13.8.tgz?cache=0&sync_timestamp=1634439421101&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Fesbuild-linux-64%2Fdownload%2Fesbuild-linux-64-0.13.8.tgz"
"esbuild-windows-64@0.13.8":
"integrity" "sha1-fe/Y15rju35vU7ZacZC+fa+QFoY="
"resolved" "https://registry.npmmirror.com/esbuild-windows-64/download/esbuild-windows-64-0.13.8.tgz?cache=0&sync_timestamp=1634439403833&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Fesbuild-windows-64%2Fdownload%2Fesbuild-windows-64-0.13.8.tgz"
"version" "0.13.8"
"esbuild@^0.13.2":

Loading…
Cancel
Save