feat: add load svg

veaba · Jul 26, 2022 · a46eba5 · a46eba5
1 parent 8c813f7
commit a46eba5
Show file tree

Hide file tree

Showing 17 changed files with 273 additions and 312 deletions.
diff --git a/auto-imports.d.ts b/auto-imports.d.ts
@@ -1,5 +1,5 @@
 // Generated by 'unplugin-auto-import'
 export {}
 declare global {
-
+  const ElNotification: typeof import('element-plus/es')['ElNotification']
 }
diff --git a/components.d.ts b/components.d.ts
@@ -7,14 +7,29 @@ export {}
 
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
+    ASider: typeof import('./src/components/ASider.vue')['default']
     Config: typeof import('./src/components/Config.vue')['default']
     DisplaySVG: typeof import('./src/components/DisplaySVG.vue')['default']
+    ElAlert: typeof import('element-plus/es')['ElAlert']
+    ElAside: typeof import('element-plus/es')['ElAside']
+    ElButton: typeof import('element-plus/es')['ElButton']
+    ElContainer: typeof import('element-plus/es')['ElContainer']
+    ElDivider: typeof import('element-plus/es')['ElDivider']
+    ElFooter: typeof import('element-plus/es')['ElFooter']
+    ElHeader: typeof import('element-plus/es')['ElHeader']
+    ElIcon: typeof import('element-plus/es')['ElIcon']
+    ElInput: typeof import('element-plus/es')['ElInput']
+    ElLink: typeof import('element-plus/es')['ElLink']
+    ElMain: typeof import('element-plus/es')['ElMain']
     ElMenu: typeof import('element-plus/es')['ElMenu']
     ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
-    ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
+    ElSapce: typeof import('element-plus/es')['ElSapce']
+    ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
+    ElSpace: typeof import('element-plus/es')['ElSpace']
     Footer: typeof import('./src/components/Footer.vue')['default']
   }
   export interface ComponentCustomProperties {
+    vInfiniteScroll: typeof import('element-plus/es')['ElInfiniteScroll']
     vLoading: typeof import('element-plus/es')['ElLoadingDirective']
   }
 }
diff --git a/config.ts b/config.ts
@@ -1,8 +1,8 @@
-import { ConfigItem } from "./src/types"
+import { ConfigItem } from "@/types"
 
 /**
  * Github user custom contributors svg here
- * ignore: {array} if you need ignore some users
+ * ignore: {array} if you need ignore some users.
  * height: svg height
  * width: svg width
  * fontSize: svg login name width
@@ -33,7 +33,7 @@ const config: ConfigItem =
       'LinusBorg', 'KiritaniAyaka', 'Alex-Sokolov', 'sdras', 'marina-mosti', 'CyberAP',
       'LinusBorg', 'KiritaniAyaka', 'Alex-Sokolov', 'sdras', 'marina-mosti', 'CyberAP',
       'danielkellyio', 'tylermercer',
-    ], // if you need ignore some users
+    ], // if you need ignore some users.
     // users: [],?? maybe we need this field.
     ignoreTotal: 1, // 过滤低于这个 total 的用户
     size: 100,
@@ -48,7 +48,7 @@ const config: ConfigItem =
       'yyx990803', 'NataliaTepluhina', 'skirtles-code', 'bencodezen', 'dependabot[bot]',
       'LinusBorg', 'KiritaniAyaka', 'Alex-Sokolov', 'sdras', 'marina-mosti', 'CyberAP',
       'danielkellyio', 'tylermercer',
-    ], // if you need ignore some users
+    ], // if you need ignore some users..
     // users: [],?? maybe we need this field.
     ignoreTotal: 1, // 过滤低于这个 total 的用户
     size: 100,
@@ -64,7 +64,7 @@ const config: ConfigItem =
       'yyx990803', 'NataliaTepluhina', 'skirtles-code', 'bencodezen', 'dependabot[bot]',
       'LinusBorg', 'KiritaniAyaka', 'Alex-Sokolov', 'sdras', 'marina-mosti', 'CyberAP',
       'danielkellyio', 'tylermercer',
-    ], // if you need ignore some users
+    ], // if you need ignore some users.
     // users: [],?? maybe we need this field.
     ignoreTotal: 1, // 过滤低于这个 total 的用户
     size: 100,
@@ -73,14 +73,14 @@ const config: ConfigItem =
     fontSize: 30,
     // isRadius: false,
   },
-  
+
   // https://github.com/vuejs-translations/docs-zh-cn
   'vuejs-translations/veaba2': {
     ignore: [
       'yyx990803', 'NataliaTepluhina', 'skirtles-code', 'bencodezen', 'dependabot[bot]',
       'LinusBorg', 'KiritaniAyaka', 'Alex-Sokolov', 'sdras', 'marina-mosti', 'CyberAP',
       'danielkellyio', 'tylermercer',
-    ], // if you need ignore some users
+    ], // if you need ignore some users.
     // users: [],?? maybe we need this field.
     ignoreTotal: 1, // 过滤低于这个 total 的用户
     size: 100,
@@ -89,14 +89,14 @@ const config: ConfigItem =
     fontSize: 30,
     // isRadius: false,
   },
-  
+
   // https://github.com/vuejs-translations/docs-zh-cn
   'vuejs-translations/veaba3': {
     ignore: [
       'yyx990803', 'NataliaTepluhina', 'skirtles-code', 'bencodezen', 'dependabot[bot]',
       'LinusBorg', 'KiritaniAyaka', 'Alex-Sokolov', 'sdras', 'marina-mosti', 'CyberAP',
       'danielkellyio', 'tylermercer',
-    ], // if you need ignore some users
+    ], // if you need ignore some users.
     // users: [],?? maybe we need this field.
     ignoreTotal: 1, // 过滤低于这个 total 的用户
     size: 100,
@@ -105,14 +105,14 @@ const config: ConfigItem =
     fontSize: 30,
     // isRadius: false,
   },
-  
+
   // https://github.com/vuejs-translations/docs-zh-cn
   'vuejs-translations/veaba4': {
     ignore: [
       'yyx990803', 'NataliaTepluhina', 'skirtles-code', 'bencodezen', 'dependabot[bot]',
       'LinusBorg', 'KiritaniAyaka', 'Alex-Sokolov', 'sdras', 'marina-mosti', 'CyberAP',
       'danielkellyio', 'tylermercer',
-    ], // if you need ignore some users
+    ], // if you need ignore some users.
     // users: [],?? maybe we need this field.
     ignoreTotal: 1, // 过滤低于这个 total 的用户
     size: 100,
@@ -121,14 +121,14 @@ const config: ConfigItem =
     fontSize: 30,
     // isRadius: false,
   },
-  
+
   // https://github.com/vuejs-translations/docs-zh-cn
   'vuejs-translations/veaba5': {
     ignore: [
       'yyx990803', 'NataliaTepluhina', 'skirtles-code', 'bencodezen', 'dependabot[bot]',
       'LinusBorg', 'KiritaniAyaka', 'Alex-Sokolov', 'sdras', 'marina-mosti', 'CyberAP',
       'danielkellyio', 'tylermercer',
-    ], // if you need ignore some users
+    ], // if you need ignore some users.
     // users: [],?? maybe we need this field.
     ignoreTotal: 1, // 过滤低于这个 total 的用户
     size: 100,

diff --git a/index.html b/index.html
@@ -1,17 +1,22 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="zh-CN">
 
 <head>
-  <meta charset="UTF-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title> A automatic generate Github Repository contributor group photo tool</title>
+		<meta charset="UTF-8">
+		<meta http-equiv="X-UA-Compatible" content="IE=edge">
+		<meta name="viewport" content="width=device-width, initial-scale=1.0">
+		<title> A automatic generate Github Repository contributor group photo tool</title>
+		<style>
+        body {
+            margin: 0;
+        }
+		</style>
 </head>
 
 <body>
 
-  <div id="app"></div>
-  <script type="module" src="./src/main.ts"></script>
+<div id="app"></div>
+<script type="module" src="./src/main.ts"></script>
 </body>
 
-</html>
+</html>
diff --git a/src/App.vue b/src/App.vue
@@ -6,11 +6,18 @@ import Home from './pages/Home.vue'
   <Home></Home>
 </template>
 
-<style>
+<style lang="scss">
 footer {
   text-align: center;
   color: rgba(56 56 56 / 70%);
   font-size: 14px;
 }
 
+.searchBody {
+  .el-input-group__append {
+    background-color: #409eff !important;
+    color: #fff;
+  }
+}
+
 </style>
diff --git a/src/actions/README.md b/src/actions/README.md
@@ -0,0 +1,2 @@
+# A github-actions for generate github repo's contributors pictures
+
diff --git a/src/components/ASider.vue b/src/components/ASider.vue
@@ -1,30 +1,26 @@
-
 <script setup lang='ts'>
-import { ref } from 'vue'
-import { HighCode } from 'vue-highlight-code'
+import {ref, inject} from 'vue'
+import {HighCode} from 'vue-highlight-code'
 import 'vue-highlight-code/dist/style.css';
 import config from '@/../config'
-import { UserConfig } from '@/types'
+import {UserConfig} from '@/types'
 
 const configs = ref(config)
 
-/// --el-box-shadow-dark
-const activeRepo = ref('vuejs-translations/docs-zh-cn')
-
-
-const getCssVarName = (type: string) => {
-  return `--el-box-shadow${type ? '-' : ''}${type}`
-}
+const {defaultRepo, defaultRepoConfig, setDefaultRepo} = inject('defaultRepo')
 
 const onClickCard = (key: string, item: UserConfig) => {
   console.log('item>', key, item)
-  activeRepo.value = key
+  setDefaultRepo(key, item)
+
+
 }
 const codeToString = (codeItem: UserConfig) => {
   return JSON.stringify(codeItem, null, 2)
 }
 
-const load = () => { }
+const load = () => {
+}
 
 const loadCode = () => {
   console.log('load code=>')
@@ -34,13 +30,12 @@ const loadCode = () => {
 
 <template>
   <ElAside class='aside'>
-
-    <h2>Select some repositories</h2>
+    <h2>try a repository...</h2>
     <el-scrollbar>
       <el-space direction="vertical">
         <div class='aside-body' v-infinite-scroll="load"></div>
-        <div :class='"sideCard " + (activeRepo === key ? "active" : "")' v-for="(item, key) of config"
-          @click='onClickCard(key as string, item)'>
+        <div :class='"sideCard " + (defaultRepo === key ? "active" : "")' v-for="(item, key) of config"
+             @click='onClickCard(key as string, item)'>
 
           <div class='sideTitle'>
             <el-link :href="`https://github.com/${key}`" target="_blank">{{ key }}</el-link>
@@ -49,7 +44,7 @@ const loadCode = () => {
           <div :class='"sideBody "'>
             <el-scrollbar>
               <HighCode scrollStyleBool borderRadius='0px' :codeValue='codeToString(item)' codeLines width="280px"
-                :maxHight="`100vh`" :height='activeRepo === key.toString() ? "50vh" : "200px"'>
+                        :maxHight="`100vh`" :height='defaultRepo === key.toString() ? "50vh" : "200px"'>
               </HighCode>
             </el-scrollbar>
           </div>
@@ -65,9 +60,7 @@ const loadCode = () => {
   width: 330px;
   height: 100vh;
   background: #252526;
-  // background: #1e1e1e;
   padding-left: 10px;
-  border-radius: 8px;
   overflow: hidden;
   padding-bottom: 200px;
 }
@@ -77,6 +70,7 @@ h2 {
   border-bottom: 1px dashed #ddd;
   padding-bottom: 5px;
   margin-right: 5px;
+  text-align: center;
 }
 
 .aside-body {
@@ -85,7 +79,6 @@ h2 {
 }
 
 
-
 .sideCard {
   padding: 10px;
   border: 1px solid transparent;
@@ -113,7 +106,8 @@ h2 {
   }
 }
 
-.sideBody {}
+.sideBody {
+}
 </style>
 
 <style lang='scss'>
@@ -130,4 +124,4 @@ pre {
     z-index: 1;
   }
 }
-</style>
+</style>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		# A github-actions for generate github repo's contributors pictures