diff --git a/package-lock.json b/package-lock.json
index 2c3c983e6..b0b0acad0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1841,6 +1841,14 @@
         "async-done": "^1.2.2"
       }
     },
+    "async-validator": {
+      "version": "1.8.5",
+      "resolved": "https://registry.npmjs.org/async-validator/-/async-validator-1.8.5.tgz",
+      "integrity": "sha512-tXBM+1m056MAX0E8TL2iCjg8WvSyXu0Zc8LNtYqrVeyoL3+esHRZ4SieE9fKQyyU09uONjnMEjrNBMqT0mbvmA==",
+      "requires": {
+        "babel-runtime": "6.x"
+      }
+    },
     "asynckit": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
@@ -1934,6 +1942,11 @@
         }
       }
     },
+    "babel-helper-vue-jsx-merge-props": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-2.0.3.tgz",
+      "integrity": "sha512-gsLiKK7Qrb7zYJNgiXKpXblxbV5ffSwR0f5whkPAaBAR4fhi6bwRZxX9wBlIc5M/v8CCkXUbXZL4N/nSE97cqg=="
+    },
     "babel-loader": {
       "version": "8.1.0",
       "resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-8.1.0.tgz",
@@ -3882,6 +3895,26 @@
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.437.tgz",
       "integrity": "sha512-PBQn2q68ErqMyBUABh9Gh8R6DunGky8aB5y3N5lPM7OVpldwyUbAK5AX9WcwE/5F6ceqvQ+iQLYkJYRysAs6Bg=="
     },
+    "element-ui": {
+      "version": "2.15.5",
+      "resolved": "https://registry.npmjs.org/element-ui/-/element-ui-2.15.5.tgz",
+      "integrity": "sha512-B/YCdz2aRY2WnFXzbTRTHPKZHBD/2KV6u88EBnkaARC/Lyxnap+7vpvrcW5UNTyVwjItS5Fj1eQyRy6236lbXg==",
+      "requires": {
+        "async-validator": "~1.8.1",
+        "babel-helper-vue-jsx-merge-props": "^2.0.0",
+        "deepmerge": "^1.2.0",
+        "normalize-wheel": "^1.0.1",
+        "resize-observer-polyfill": "^1.5.0",
+        "throttle-debounce": "^1.0.1"
+      },
+      "dependencies": {
+        "deepmerge": {
+          "version": "1.5.2",
+          "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-1.5.2.tgz",
+          "integrity": "sha512-95k0GDqvBjZavkuvzx/YqVLv/6YYa17fz6ILMSf7neqQITCPbnfEnQvEgMPNjH4kgobe7+WIL0yJEHku+H3qtQ=="
+        }
+      }
+    },
     "elliptic": {
       "version": "6.5.4",
       "resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.5.4.tgz",
@@ -9186,6 +9219,11 @@
       "resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-3.3.0.tgz",
       "integrity": "sha512-U+JJi7duF1o+u2pynbp2zXDW2/PADgC30f0GsHZtRh+HOcXHnw137TrNlyxxRvWW5fjKd3bcLHPxofWuCjaeZg=="
     },
+    "normalize-wheel": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/normalize-wheel/-/normalize-wheel-1.0.1.tgz",
+      "integrity": "sha1-rsiGr/2wRQcNhWRH32Ls+GFG7EU="
+    },
     "now-and-later": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/now-and-later/-/now-and-later-2.0.1.tgz",
@@ -11687,6 +11725,11 @@
       "resolved": "https://registry.npmjs.org/reselect/-/reselect-4.0.0.tgz",
       "integrity": "sha512-qUgANli03jjAyGlnbYVAV5vvnOmJnODyABz51RdBN7M4WaVu8mecZWgyQNkG8Yqe3KRGRt0l4K4B3XVEULC4CA=="
     },
+    "resize-observer-polyfill": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
+      "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg=="
+    },
     "resolve": {
       "version": "1.17.0",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.17.0.tgz",
@@ -13526,6 +13569,11 @@
       "resolved": "https://registry.npmjs.org/textextensions/-/textextensions-2.6.0.tgz",
       "integrity": "sha512-49WtAWS+tcsy93dRt6P0P3AMD2m5PvXRhuEA0kaXos5ZLlujtYmpmFsB+QvWUSxE1ZsstmYXfQ7L40+EcQgpAQ=="
     },
+    "throttle-debounce": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-1.1.0.tgz",
+      "integrity": "sha512-XH8UiPCQcWNuk2LYePibW/4qL97+ZQ1AN3FNXwZRBNPPowo/NRU5fAlDCSNBJIYCKbioZfuYtMhG4quqoJhVzg=="
+    },
     "through": {
       "version": "2.3.8",
       "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
diff --git a/package.json b/package.json
index 4afc213e7..bda9843e8 100644
--- a/package.json
+++ b/package.json
@@ -19,6 +19,7 @@
     "cssnano": "4.1.10",
     "domino": "2.1.5",
     "dropzone": "5.7.2",
+    "element-ui": "2.15.5",
     "esdk-obs-browserjs": "3.20.7",
     "esdk-obs-nodejs": "3.20.11",
     "fast-glob": "3.2.2",
diff --git a/templates/repo/home.tmpl b/templates/repo/home.tmpl
index 7d632ea14..ca064b990 100644
--- a/templates/repo/home.tmpl
+++ b/templates/repo/home.tmpl
@@ -155,37 +155,55 @@
 				</div>
 				<div class="ui six wide tablet four wide computer column">					
 					<div id="repo-desc">
-						<h4 class="ui header">简介</h4>
+						<h4 id="about-desc" class="ui header">简介
+								<!-- <a  class="edit-icon" href="javascript:void(0)">
+									<i class="gray edit outline icon"></i>
+								</a> -->
+						</h4>
 						<p>
-						{{if .Repository.DescriptionHTML}}
-							<span class="description">{{.Repository.DescriptionHTML}}</span>
-						{{else}}
-							<span class="no-description text-italic">{{.i18n.Tr "repo.no_desc"}}</span>
-						{{end}}
-						<a class="link" href="{{.Repository.Website}}">{{.Repository.Website}}</a>
+							{{if .Repository.DescriptionHTML}}
+								<span class="description" style="word-break:break-all">{{.Repository.DescriptionHTML}}</span>
+							{{else}}
+								<span class="no-description text-italic">{{.i18n.Tr "repo.no_desc"}}</span>
+							{{end}}
+							
 						</p>
+
 					</div>
 
+					
+
+					{{if .Repository.Website}}
+					<p class="ui">
+						<i class="gray linkify icon"></i>
+						<a class="link" target="_blank" href="{{.Repository.Website}}">{{.Repository.Website}}</a>
+					</p>
+					
+					{{end}}		
+
 					<p class="ui" id="repo-topics">
 					<i class="grey bookmark icon"></i>
 					{{range .Topics}}<a class="ui repo-topic small label topic" href="{{AppSubUrl}}/explore/repos?q={{.Name}}&topic=1">{{.Name}}</a>{{end}}
 					{{if and .Permission.IsAdmin (not .Repository.IsArchived)}}<a id="manage_topic">{{.i18n.Tr "repo.topic.manage_topics"}}</a>{{end}}
 					</p>
 					
-
+					
 					<p class="ui">
 						<i class="grey code icon"></i>
 						{{range .LanguageStats}}
 							 {{.Language}}
 						{{end}}
 					</p>
+
 					
+					
+					{{if .LICENSE}}
 					<p class="ui">
 						<i class="grey clone icon"></i>
-						{{if .LICENSE}}
-							 {{.LICENSE}}
-						{{end}}
+							{{.LICENSE}}
 					</p>
+					
+					{{end}}
 
 					<div class="ui divider"></div>
 
diff --git a/web_src/js/components/EditAboutInfo.vue b/web_src/js/components/EditAboutInfo.vue
new file mode 100644
index 000000000..76157008f
--- /dev/null
+++ b/web_src/js/components/EditAboutInfo.vue
@@ -0,0 +1,144 @@
+<template>
+  <div>
+      <h4 id="about-desc" class="ui header">简介
+        <a class="edit-icon" href="javascript:void(0)" @click="editClick">
+        <i class="gray edit outline icon"></i>
+        </a>
+    </h4>
+    <edit-dialog-cmpt 
+		:vmContext="vmContext" 
+		dialogTitle="编辑仓库信息" 
+		v-model="editDataDialog"
+		:deleteCallback="editDataFunc"
+		:deleteLoading ="editDataListLoading"
+        deleteParam = "ruleForm"
+        @input="initForm"
+		>
+			<div slot="title">
+				
+			</div>
+			<div slot="content">
+				<el-form label-position="top" :model="info" :rules="rule" ref="ruleForm">
+					<el-form-item label="简介" prop="desc">
+						<el-input v-model="info.desc" type="textarea" :autosize="{minRows:2,maxRows:6}"></el-input>
+					</el-form-item>
+					<el-form-item label="主页" prop="index_web" >
+						<el-input v-model="info.index_web" placeholder="主页(eg: https://git.openi.org.cn)"></el-input>
+					</el-form-item>
+				</el-form>
+			</div>
+    </edit-dialog-cmpt>
+  </div>
+</template>
+
+<script>
+
+const {_AppSubUrl, _StaticUrlPrefix, csrf} = window.config;
+
+import editDialogCmpt from './basic/editDialog.vue';
+
+
+export default {
+  components: {
+    editDialogCmpt,
+  },
+  data() {
+    return {
+      vmContext: this,
+      editDataDialog: false,
+      editDataListLoading: false,
+      url: '',
+      info: {
+        desc: '',
+        index_web: '',
+        repo_name_name: '',
+      },
+    //   rule1:[{min:3,max:5,message:'1',trigger:"blur"}],
+      rule: {
+        index_web: [
+          {required: false, pattern: /(^$)|(^(http|https):\/\/(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5]).*)|(^(http|https):\/\/[a-zA-Z0-9]+([_\-\.][a-zA-Z0-9]+)*\.[a-zA-Z]{2,10}(:[0-9]{1,10})?(\?.*)?(\/.*)?$)/,message:'请输入有效的URL',tigger:['change','blur']}
+        ]
+      }
+    };
+  },
+  methods: {
+    editClick() {
+      this.editDataDialog = true;
+    },
+    getDesc() {
+      const el = $('span.description').text();
+      this.info.desc = el;
+    },
+    getWeb() {
+      const el = $('a.link').text();
+      this.info.index_web = el;
+    },
+    getRepoName() {
+      const el = this.url.split('/')[2];
+      this.info.repo_name = el;
+    },
+    initForm(diaolog) {
+      if (diaolog === false) {
+        console.log("--watch----------")
+        this.getRepoName();
+        this.getDesc();
+        this.getWeb();
+      }
+
+    },
+    editDataFunc(formName) {
+      this.$refs[formName].validate((valid)=>{
+        if (valid) {
+          this.$axios({
+            method: 'post',
+            url: this.url,
+            header: {'content-type': 'application/x-www-form-urlencoded'},
+            data: this.qs.stringify({
+              _csrf: csrf,
+              action: 'update',
+              repo_name: this.info.repo_name,
+              description: this.info.desc,
+              website: this.info.index_web
+            })
+          }).then((res) => {
+            location.reload();
+            this.editDataDialog = false;
+          }).catch((error) => {
+            this.editDataDialog = false;
+          })
+        }
+        else {
+          return false;
+        }
+      })
+
+    },
+    getUrl() {
+      const url = `${window.location.pathname}/settings`;
+      this.url = url;
+    }
+  },
+  mounted() {
+    this.getUrl();
+    this.getRepoName();
+    this.getDesc();
+    this.getWeb();
+  },
+  created() {
+    
+  }
+
+};
+</script>
+
+<style scoped>
+.edit-icon{
+    float: right;
+    font-size: 16px;
+    display: block;
+    top: -2px;
+    color: #8c92a4;
+    background-color: transparent;
+    }
+
+</style>
diff --git a/web_src/js/components/basic/editDialog.vue b/web_src/js/components/basic/editDialog.vue
new file mode 100644
index 000000000..ed3225796
--- /dev/null
+++ b/web_src/js/components/basic/editDialog.vue
@@ -0,0 +1,105 @@
+<template>
+
+    <el-dialog :close-on-click-modal="!deleteLoading" v-dlg-drag :title="dialogTitle" :visible.sync="deleteDialog">
+        
+            <div class="message-box__content">
+                
+                <div class="message-box-title" >
+                    <slot name="title"></slot>
+                </div>
+                <div class="message-box-info">
+                    <slot name="info"></slot>
+                </div>
+            </div>
+            <slot name="content"></slot>
+        
+        <div slot="footer" class="dialog-footer">
+            <el-button @click="deleteDialog = false">{{"取消"}}</el-button>
+            <el-button type="primary" @click="deleteCallback.call(vmContext,deleteParam)">{{"确定"}}</el-button>
+        </div>
+    </el-dialog>
+</template>
+<script type="text/javascript">
+export default {
+  data() {
+    return {
+      deleteDialog: false,
+    };
+  },
+  props: {
+
+    vmContext: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    dialogTitle: {
+      type: String,
+      default: '',
+    },
+    deleteLoading: {
+      type: Boolean,
+      default: false,
+    },
+    deleteCallback: {
+      type: Function,
+      default() {
+        return () => {};
+      }
+    },
+    deleteParam: {
+      type: String,
+      default: ''
+    },
+    value: {
+      type: Boolean,
+      default: false,
+    }
+  },
+  computed: {
+  },
+  watch: {
+    deleteDialog() {
+      this.$emit('input', this.deleteDialog);
+    },
+    value() {
+      this.deleteDialog = this.value;
+    },
+  },
+  created() {
+    this.deleteDialog = this.value;
+  }
+};
+</script>
+
+<style scoped>
+.el-message-box__content .icon{float:left;}
+.message-box__content{}
+.message-box__content .icon{float:left;margin-right:20px;}
+.message-box__content .message-box-title{font-size:16px;padding:2px 0;color:#333;}
+.message-box__content .message-box-p{font-size:16px;padding:20px 0;color:#333;}
+.message-box__content .message-box-info{color:#999;padding:2px 0;}
+.dialog-footer,.el-message-box__btns{text-align:center;}
+
+
+/deep/ .el-dialog__header {
+    background: #0067b3;
+    padding: 12px 30px;
+    line-height: 25px;}
+/deep/ .el-dialog__title {
+    font-family: PingFangSC-Regular;
+    font-size: 18px;
+    color: #fff;
+    font-weight: 200;
+    line-height: 25px;
+    height: 25px;
+}
+/deep/ .el-dialog__footer {
+    background: #eff3f9;
+    padding: 20px 30px;
+}
+/deep/ .el-dialog{
+    width: 40%;
+}
+</style>
diff --git a/web_src/js/index.js b/web_src/js/index.js
index 1a4326f7d..2de20b0d4 100755
--- a/web_src/js/index.js
+++ b/web_src/js/index.js
@@ -6,6 +6,10 @@ import './publicpath.js';
 import './polyfills.js';
 
 import Vue from 'vue';
+import ElementUI from 'element-ui';
+import 'element-ui/lib/theme-chalk/index.css';
+import axios from 'axios';
+import qs from 'qs';
 import 'jquery.are-you-sure';
 import './vendor/semanticdropdown.js';
 import {svg} from './utils.js';
@@ -29,8 +33,12 @@ import {
 } from './features/notification.js';
 import {createCodeEditor} from './features/codeeditor.js';
 import MinioUploader from './components/MinioUploader.vue';
-import ObsUploader from './components/ObsUploader.vue'
+import ObsUploader from './components/ObsUploader.vue';
+import EditAboutInfo from './components/EditAboutInfo.vue';
 
+Vue.use(ElementUI);
+Vue.prototype.$axios = axios;
+Vue.prototype.qs = qs;
 const {AppSubUrl, StaticUrlPrefix, csrf} = window.config;
 
 function htmlEncode(text) {
@@ -2957,6 +2965,7 @@ $(document).ready(async () => {
   initVueApp();
   initVueUploader();
   initObsUploader();
+  initVueEditAbout();
   initTeamSettings();
   initCtrlEnterSubmit();
   initNavbarContentToggle();
@@ -3642,6 +3651,19 @@ function initVueUploader() {
   });
 }
 
+function initVueEditAbout() {
+  const el = document.getElementById('about-desc');
+  console.log(el)
+  if (!el) {
+    return;
+  }
+
+  new Vue({
+    el: '#about-desc',
+    render: h => h(EditAboutInfo)
+  });
+}
+
 // 新增
 function initObsUploader() {
   const el = document.getElementById('obsUploader');