From 14f543c58e439fcd43a9e0d3ea7bc9abf591b781 Mon Sep 17 00:00:00 2001
From: Min5203 <2318556978@qq.com>
Date: Thu, 6 Jan 2022 12:43:35 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E6=8F=92=E4=BB=B6=E5=95=86?=
 =?UTF-8?q?=E5=9F=8E=E5=92=8C=E4=B8=8A=E4=BC=A0=E6=8F=92=E4=BB=B6=E5=AE=8C?=
 =?UTF-8?q?=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env.development                   |   2 +-
 .env.production                    |   2 +-
 src/components/navbar.vue          |  52 +++++++----
 src/routers/index.js               |  24 +++++-
 src/views/Index.vue                |  31 ++++++-
 src/views/tablist/devepage.vue     |   1 +
 src/views/tablist/downloadpage.vue |   1 +
 src/views/tablist/plugshop.vue     | 109 +++++++++++++++++++++++
 src/views/tablist/upload.vue       | 133 +++++++++++++++++++++++++++++
 src/views/user/pw-change.vue       |   2 +-
 src/views/user/sign-in.vue         |   2 +-
 yarn.lock                          |   6 +-
 12 files changed, 340 insertions(+), 25 deletions(-)
 create mode 100644 src/views/tablist/devepage.vue
 create mode 100644 src/views/tablist/downloadpage.vue
 create mode 100644 src/views/tablist/plugshop.vue
 create mode 100644 src/views/tablist/upload.vue

diff --git a/.env.development b/.env.development
index 7e1746a..9bcb052 100644
--- a/.env.development
+++ b/.env.development
@@ -1 +1 @@
-VITE_API_URL=http://localhost:4001
+VITE_API_URL=https://test.tall.wiki
diff --git a/.env.production b/.env.production
index 3556c7f..7fe4fa9 100644
--- a/.env.production
+++ b/.env.production
@@ -1 +1 @@
-VITE_API_URL=http://139.196.27.233:29001
+VITE_API_URL=http://www.tall.wiki
diff --git a/src/components/navbar.vue b/src/components/navbar.vue
index aadd946..0b83675 100644
--- a/src/components/navbar.vue
+++ b/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>
diff --git a/src/routers/index.js b/src/routers/index.js
index a892f91..5c465be 100644
--- a/src/routers/index.js
+++ b/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,
   ],
 });
diff --git a/src/views/Index.vue b/src/views/Index.vue
index 27b22f8..99f0814 100644
--- a/src/views/Index.vue
+++ b/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>
diff --git a/src/views/tablist/devepage.vue b/src/views/tablist/devepage.vue
new file mode 100644
index 0000000..0fe60f4
--- /dev/null
+++ b/src/views/tablist/devepage.vue
@@ -0,0 +1 @@
+<template>开发教程</template>
diff --git a/src/views/tablist/downloadpage.vue b/src/views/tablist/downloadpage.vue
new file mode 100644
index 0000000..4503b75
--- /dev/null
+++ b/src/views/tablist/downloadpage.vue
@@ -0,0 +1 @@
+<template>下载模板</template>
diff --git a/src/views/tablist/plugshop.vue b/src/views/tablist/plugshop.vue
new file mode 100644
index 0000000..06143e5
--- /dev/null
+++ b/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>
diff --git a/src/views/tablist/upload.vue b/src/views/tablist/upload.vue
new file mode 100644
index 0000000..9d43739
--- /dev/null
+++ b/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>
diff --git a/src/views/user/pw-change.vue b/src/views/user/pw-change.vue
index 01fdc1c..c748f46 100644
--- a/src/views/user/pw-change.vue
+++ b/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>
diff --git a/src/views/user/sign-in.vue b/src/views/user/sign-in.vue
index 68b5888..127a167 100644
--- a/src/views/user/sign-in.vue
+++ b/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);
diff --git a/yarn.lock b/yarn.lock
index b8c18fd..408f5fe 100644
--- a/yarn.lock
+++ b/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":