index.html 2.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7. <title>生成命令页面</title>
  8. <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.2/css/bootstrap.min.css">
  9. <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.0/theme-chalk/index.css">
  10. </head>
  11. <body>
  12. <div id="app" class="container">
  13. <h1>生成命令页面</h1>
  14. <el-form ref="form" :model="formData" label-width="100px">
  15. <el-form-item label="Tag名称">
  16. <el-input v-model="formData.tagname"></el-input>
  17. </el-form-item>
  18. <el-form-item label="备注">
  19. <el-input v-model="formData.remark"></el-input>
  20. </el-form-item>
  21. <el-form-item label="选择仓库">
  22. <el-checkbox-group v-model="formData.selectedRepos">
  23. <el-checkbox v-for="repo in repos" :label="repo.value" :key="repo.value">{{repo.name}}</el-checkbox>
  24. </el-checkbox-group>
  25. </el-form-item>
  26. <el-form-item>
  27. <el-button type="primary" @click="generateCommand">生成命令</el-button>
  28. </el-form-item>
  29. <el-form-item>
  30. <label for="command">生成的命令:</label>
  31. <pre id="command">{{ command }}</pre>
  32. </el-form-item>
  33. </el-form>
  34. </div>
  35. <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.5.16/vue.min.js"></script>
  36. <script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>
  37. <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.0/index.js"></script>
  38. <script>
  39. new Vue({
  40. el: '#app',
  41. data: {
  42. formData: {
  43. tagname: '',
  44. remark: '',
  45. selectedRepos: []
  46. },
  47. repos: [
  48. { name: '模型manager', value: '/path/to/repo1' },
  49. { name: '模型worker', value: '/path/to/repo2' }
  50. ],
  51. command: ''
  52. },
  53. methods: {
  54. generateCommand() {
  55. this.command = `tag_service.sh ${this.formData.selectedRepos.join(",")} ${this.formData.tagname} "${this.formData.remark}"`;
  56. }
  57. }
  58. });
  59. </script>
  60. </body>
  61. </html>